/* ============================================================
   Film prints — design #1
   Candy-pink wall, instant prints with handwritten dates.
   Renders the SAME page skeleton & JS as the scrapbook look;
   this stylesheet gives it the film-prints identity.
   ============================================================ */
:root{
  --paper:#fdf0e8; --paper2:#f7dfd2; --ink:#5a3529; --ink-soft:#b9886f;
  --line:rgba(200,110,120,.18);
  --sage:#bfd3b2; --rose:#ffb3c2; --butter:#f2cf7f; --heart:#ff6f91;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html:has(.lb-open){overflow:hidden;}
body{
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 760px at 88% -12%, rgba(255,179,194,.30), transparent 60%),
    radial-gradient(900px 640px at -12% 108%, rgba(242,207,127,.22), transparent 55%),
    var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.film ::selection{background:#ffe0e8;}

.page{max-width:600px; margin:0 auto; padding:0 16px 30px;}
@media(min-width:980px){ .page{max-width:920px;} }

/* ---------- cover ---------- */
.cover{position:relative; padding:64px 8px 34px; text-align:center;}
.tape{
  position:absolute; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; z-index:6;
  opacity:.94; box-shadow:0 3px 8px -3px rgba(150,60,70,.35);
}
.tape::after{font-style:normal; font-size:24px; line-height:1;}
.tape.t1{background:var(--rose); top:26px; left:-6px; transform:rotate(-14deg);}
.tape.t1::after{content:"♥";}
.tape.t2{background:var(--sage); top:64px; right:-4px; transform:rotate(12deg);}
.tape.t2::after{content:"✿";}
.tape.t3{background:var(--butter); bottom:-8px; left:calc(50% - 52px); width:104px; height:34px; border-radius:999px; transform:rotate(-3deg);}
.tape.t3::after{content:"✦";}

.cover .kicker{
  font-family:"Caveat",cursive; font-size:25px; color:#d99b8a;
  transform:rotate(-2deg); display:inline-block;
}
.cover h1{
  font-family:"Nunito",sans-serif; font-weight:900;
  font-size:clamp(46px,15vw,66px); line-height:1.02; letter-spacing:-.02em;
  margin-top:4px; transform:rotate(-.8deg);
}
.cover h1 .h{color:var(--heart);}
.cover .sub{
  font-family:"Caveat",cursive; font-size:26px; color:var(--ink-soft); margin-top:4px;
  transform:rotate(1.1deg); display:inline-block;
}
.cover .counts{
  margin-top:20px; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:#a05f50;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.cover .counts span{
  border:1.5px dashed rgba(255,111,145,.55); border-radius:999px; padding:5px 12px;
  background:rgba(255,255,255,.72);
}
.doodles{position:absolute; inset:0; pointer-events:none; color:var(--heart);}
.doodles i{position:absolute; font-style:normal;}
.d1{font-size:30px; left:7%; top:60%; transform:rotate(-16deg);}
.d2{font-size:20px; right:8%; top:44%; color:#e0b458; transform:rotate(12deg);}
.d3{font-size:16px; left:13%; top:26%; color:#93a88c; transform:rotate(6deg);}

.open-hint{
  margin-top:24px; font-family:"Caveat",cursive; font-size:21px; color:var(--ink-soft);
}
.open-hint b{color:var(--heart); font-weight:700;}

/* ---------- year divider (sticker pills) ---------- */
.year{display:flex; align-items:center; gap:12px; margin:34px 0 22px; scroll-margin-top:20px;}
.year::before,.year::after{content:""; flex:1; border-top:2px dotted rgba(255,111,145,.35);}
.year .strip{
  font-family:"Nunito",sans-serif; font-weight:800; font-size:15px; letter-spacing:.14em;
  text-transform:uppercase; color:#b45a6f; background:transparent;
  border:1.5px dashed rgba(255,111,145,.6); border-radius:999px;
  padding:4px 14px 5px; display:flex; align-items:center; gap:7px; white-space:nowrap;
  transform:rotate(-1.2deg);
}
.year:nth-of-type(3n+2) .strip{border-color:rgba(159,187,151,.95); color:#6f9a68; transform:rotate(1deg);}
.year:nth-of-type(3n) .strip{border-color:rgba(232,190,110,.95); color:#a57f2c; transform:rotate(-.6deg);}
.year .strip i{font-style:normal; font-size:13px; color:var(--heart);}
.year .n{font-family:"Caveat",cursive; font-size:18px; color:var(--ink-soft); white-space:nowrap;}

/* ---------- prints: masonry polaroid wall ---------- */
.prints{columns:2; column-gap:15px;}
@media(min-width:760px){ .prints{columns:3; column-gap:17px;} }
/* small years stay a tidy centred shelf instead of gaps */
@media(min-width:760px){ .grp.small .prints{columns:1; max-width:400px; margin:0 auto;} }
/* wide desktop: a proper four-wide candy wall */
@media(min-width:1300px){
  .page{max-width:1220px;}
  .grp.big .prints{columns:4; column-gap:20px;}
  .grp.big .print{margin-bottom:22px;}
}
.print{
  position:relative; display:block; width:100%; break-inside:avoid;
  margin:0 0 18px; background:#fff; padding:8px 8px 2px; text-align:center;
  border-radius:12px; border:none; cursor:zoom-in; font-family:inherit; color:inherit;
  box-shadow:0 8px 18px -12px rgba(150,60,70,.35);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.print::after{content:""; position:absolute; inset:0; border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); pointer-events:none;}
.print img{display:block; width:100%; height:auto; border-radius:5px;}
.rot-a{transform:rotate(-2.1deg);}
.rot-b{transform:rotate(1.6deg);}
.rot-c{transform:rotate(2.6deg);}
.print:hover{transform:rotate(0) scale(1.025); z-index:4; box-shadow:0 14px 26px -12px rgba(150,60,70,.45);}
.print:focus-visible{outline:3px solid var(--heart); outline-offset:2px;}
.print.taped::before{content:none;}
.print .cap{
  font-family:"Caveat",cursive; font-size:21px; color:#8a6a5e; line-height:1.15;
  padding:6px 2px 9px;
}
.print .cap .date{color:var(--ink); font-weight:700;}
.print .cap .note{display:block; color:var(--heart); font-size:19px;}
.print .num{
  position:absolute; right:-8px; top:-9px; width:26px; height:26px; border-radius:50%;
  background:#ffd7e2; border:1.5px solid rgba(255,111,145,.5);
  font-family:"Caveat",cursive; font-size:15px; font-weight:700; color:#8f334f;
  display:flex; align-items:center; justify-content:center; transform:rotate(8deg);
}
.print .heart-mark{
  position:absolute; right:-7px; bottom:-8px; font-size:18px; color:var(--heart);
  transform:rotate(-10deg); display:none;
  text-shadow:0 0 0 3px #fff, 0 0 0 3px #fff;
}
.print.kept .heart-mark{display:block;}

/* reveal */
.js .print, .js .year{opacity:0;}
.js .print.in, .js .year.in{opacity:1; transition:opacity .7s ease;}
.js .print img{transform:scale(.965); transition:transform .7s var(--ease);}
.js .print.in img{transform:scale(1);}

/* ---------- jump / hearts bar ---------- */
.bar{
  position:fixed; left:50%; bottom:16px; transform:translate(-50%, 130%);
  background:rgba(255,250,246,.92); backdrop-filter:blur(10px);
  border:1px solid rgba(255,111,145,.3); border-radius:999px;
  box-shadow:0 12px 30px -14px rgba(120,50,60,.35);
  padding:7px 10px; display:flex; gap:3px; align-items:center;
  transition:transform .5s var(--ease); z-index:40;
  max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none;
}
.bar::-webkit-scrollbar{display:none;}
.bar.show{transform:translate(-50%,0);}
.bar button{
  font-family:"Nunito",sans-serif; font-size:14.5px; font-weight:700; color:var(--ink);
  background:transparent; border:none; padding:3px 9px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.bar button:hover{background:rgba(255,111,145,.12);}
.bar .y{font-weight:800;}
.bar .dot{color:#e8b6c4; font-size:11px; padding:0 1px;}
.bar .hearts{
  display:flex; align-items:center; gap:4px; margin-left:3px;
  font-family:"Nunito",sans-serif; font-size:14.5px; font-weight:800;
  border:none; background:transparent; cursor:pointer; padding:3px 10px; border-radius:999px; color:var(--ink);
}
.bar .hearts b{color:var(--heart); min-width:1.1em; font-weight:800;}
.bar .hearts:hover{background:rgba(255,111,145,.12);}
.bar .hearts.on{background:rgba(255,111,145,.18);}

.hearts-note{
  display:none; text-align:center; font-family:"Caveat",cursive; font-size:23px;
  color:var(--ink-soft); margin:18px 0 4px;
}
body.filtering .hearts-note{display:block;}
body.filtering .print:not(.kept){display:none;}
body.filtering .year{display:none;}
body.filtering .bar{border-color:rgba(255,111,145,.6);}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:100; background:rgba(62,32,26,.93);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  -webkit-user-select:none; user-select:none; touch-action:pan-y;
}
.lb.open{opacity:1; pointer-events:auto;}
.lb .top{
  position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
  padding:calc(14px + env(safe-area-inset-top)) 18px 10px; z-index:5;
}
.lb .counter{font-family:"Caveat",cursive; font-size:20px; color:#f3dcd0; opacity:.92;}
.lb .close{
  font-size:15px; color:#5a3529; background:#fdf0e8; border:none; cursor:pointer;
  width:34px; height:34px; border-radius:50%; font-weight:700; box-shadow:0 4px 12px -4px rgba(0,0,0,.5);
}
.lb .stage{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  padding:70px 22px 74px; position:relative;
}
.lb .frame{
  background:#fff; padding:13px 13px 5px; border-radius:6px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.6);
  max-width:min(88vw, 560px); max-height:100%; display:flex; flex-direction:column;
  transform:translateY(14px); opacity:0; transition:transform .35s var(--ease), opacity .35s var(--ease);
  cursor:zoom-out;
}
.lb .frame.in{transform:none; opacity:1;}
.lb img{display:block; max-width:100%; max-height:calc(100vh - 240px); object-fit:contain; margin:0 auto; border-radius:2px;}
.lb .cap{font-family:"Caveat",cursive; font-size:23px; color:#6d5c43; text-align:center; padding:10px 6px 12px;}
.lb .cap .date{color:#3c2f1e; font-weight:700;}
.lb .cap .note{color:var(--heart);}
.lb .nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:40px; height:64px; background:rgba(253,240,232,.92); border:none; cursor:pointer;
  font-size:19px; color:#5a3529; display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.4);
}
.lb .nav.prev{left:10px; border-radius:0 999px 999px 0;}
.lb .nav.next{right:10px; border-radius:999px 0 0 999px;}
@media(min-width:700px){ .lb .nav{display:flex;} }
.lb .fav{
  position:absolute; bottom:calc(12px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  font-family:"Caveat",cursive; font-size:22px; font-weight:700; color:#f3dcd0; background:none;
  border:1.5px solid rgba(243,220,208,.4); border-radius:999px; padding:8px 20px; cursor:pointer;
  display:flex; align-items:center; gap:7px; z-index:5;
}
.lb .fav:hover{border-color:rgba(243,220,208,.8);}
.lb .fav .h{color:rgba(243,220,208,.45);}
.lb .fav.on .h{color:var(--heart);}

/* ---------- footer ---------- */
.foot{text-align:center; margin-top:34px; font-family:"Caveat",cursive; font-size:23px; color:var(--ink-soft);}
.foot .made{font-size:16px; margin-top:4px; color:#cfa48f;}
.foot .made .h{color:var(--heart);}

/* ---------- design switcher (shared) ---------- */
.switch{
  position:fixed; top:calc(10px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
  z-index:45; display:flex; align-items:center; gap:2px;
  background:rgba(255,251,247,.88); backdrop-filter:blur(12px);
  border:1px solid rgba(150,70,80,.18); border-radius:999px;
  padding:4px; box-shadow:0 8px 20px -10px rgba(120,50,60,.3);
}
.switch .sw{
  font-family:"Nunito",sans-serif; font-size:12.5px; font-weight:800; letter-spacing:.01em;
  color:#9a6a58; text-decoration:none; padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.switch .sw:hover{color:var(--ink);}
.switch .sw.sw-on{background:var(--ink); color:#fff;}
.switch .sw-dot{color:#eac3cd; font-size:11px;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001s !important; animation:none !important; scroll-behavior:auto !important;}
  .js .print,.js .year{opacity:1;}
}