/* 4 Year Marriage · scrapbook — A4 portrait pages, soft cloudy pastel */
@page { size: A4; margin: 0; }
:root{
  --ink:#4a4363; --soft:#7a7396; --cream:#fffaf1; --paper:#fffdf8;
  --kv:#8f7de8; --saurabh:#4f9fdc; --virag:#e9819a; --patil:#4fb48d; --mallick:#a874d8; --venus:#ec9a4c;
  --rish:#d9a63a; --ab:#55b4b9; --omkar:#de7474; --varun:#7290d0; --nishtha:#cc82b8; --aryansh:#7fb862; --thakur:#bb8f61;
  --hand:"Caveat", cursive; --serif:"Cormorant Garamond", Georgia, serif; --sans:"Nunito", system-ui, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ font-family:var(--sans); color:var(--ink); background:#e9e4f2; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.page{ width:210mm; height:297mm; position:relative; overflow:hidden; margin:0 auto 10mm; page-break-after:always; break-after:page; background:var(--bg); }
@media print{ body{ background:none; } .page{ margin:0; } }
body.single .page{ margin:0; }

/* paper grain + clouds */
.page::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .62  0 0 0 .18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.cloud{ position:absolute; border-radius:50%; background:#fff; filter:blur(7mm); opacity:.8; pointer-events:none; }
.abs{ position:absolute; transform:rotate(var(--r,0deg)); }

/* headings */
.kicker{ font:800 7.4pt var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--soft); }
.title{ font:700 40pt/0.9 var(--hand); margin:1.5mm 0 0; color:var(--ink); }
.thought{ font:italic 500 12.5pt/1.35 var(--serif); color:var(--ink); }
.hand{ font-family:var(--hand); }
.folio{ position:absolute; bottom:7mm; left:0; right:0; text-align:center; font:700 6.8pt var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--soft); opacity:.75; }

/* polaroid */
.pol{ position:absolute; margin:0; background:#fff; padding:2.6mm 2.6mm 0; border-radius:1.4mm; transform:rotate(var(--r,0deg));
  box-shadow:0 2.2mm 5mm -2mm rgba(80,60,130,.35), 0 .4mm 1mm rgba(80,60,130,.12); }
.pol img{ display:block; width:100%; aspect-ratio:var(--ar,4/3); object-fit:cover; object-position:var(--pos,50% 50%); border-radius:.6mm; }
.pol figcaption{ font:600 12.5pt/1.05 var(--hand); text-align:center; padding:1.6mm 1mm 2.4mm; color:var(--ink); min-height:7mm; }
.pol.small figcaption{ font-size:10.5pt; padding:1mm 1mm 1.8mm; min-height:4mm; }

/* washi tape */
.tape{ position:absolute; width:22mm; height:6.2mm; top:-3mm; left:calc(50% - 11mm); transform:rotate(var(--tr,-4deg)); opacity:.88; z-index:3;
  background:var(--tc,#f6cfe0); border-radius:.6mm; box-shadow:0 .3mm .6mm rgba(0,0,0,.06); }
.tape.dots{ background-image:radial-gradient(rgba(255,255,255,.75) 22%, transparent 24%); background-size:2.6mm 2.6mm; }
.tape.stripe{ background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 1.2mm, transparent 1.2mm 2.6mm); }
.tape.corner-l{ top:-2mm; left:-6mm; --tr:-38deg; }
.tape.corner-r{ top:-2mm; left:auto; right:-6mm; --tr:38deg; }

/* chat */
.chat{ position:absolute; background:rgba(255,255,255,.78); border-radius:5mm; padding:3mm 3mm 2.2mm; transform:rotate(var(--r,0deg));
  box-shadow:0 2mm 5mm -2.5mm rgba(80,60,130,.3); backdrop-filter:blur(2px); }
.chat-h{ font:800 6.2pt var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); text-align:center; margin-bottom:1.8mm; }
.b{ margin:0 0 1.4mm; max-width:88%; width:fit-content; background:#fff; border-radius:3.2mm 3.2mm 3.2mm 1mm; padding:1.4mm 2.4mm 1.5mm;
  font:600 8.2pt/1.3 var(--sans); box-shadow:0 .3mm .8mm rgba(80,60,130,.1); }
.b b{ display:block; font:800 6.6pt var(--sans); color:var(--c,#888); margin-bottom:.2mm; letter-spacing:.02em; }
.b i{ font-style:normal; font-weight:700; font-size:5.8pt; color:#aaa3bd; margin-left:1.4mm; }
.b.me{ margin-left:auto; background:#efeafe; border-radius:3.2mm 3.2mm 1mm 3.2mm; }
.b.big{ font-size:10pt; }
.sys{ font:italic 600 7pt var(--sans); color:var(--soft); text-align:center; margin:.6mm 0 1.4mm; }
.n-kv{--c:var(--kv)} .n-saurabh{--c:var(--saurabh)} .n-virag{--c:var(--virag)} .n-patil{--c:var(--patil)} .n-mallick{--c:var(--mallick)}
.n-venus{--c:var(--venus)} .n-rish{--c:var(--rish)} .n-ab{--c:var(--ab)} .n-omkar{--c:var(--omkar)} .n-varun{--c:var(--varun)}
.n-nishtha{--c:var(--nishtha)} .n-aryansh{--c:var(--aryansh)} .n-thakur{--c:var(--thakur)}

/* sticky note */
.note{ position:absolute; background:var(--nc,#fff3b8); padding:5mm 4.5mm 4mm; transform:rotate(var(--r,0deg));
  font:600 14pt/1.12 var(--hand); color:#4b4560; border-radius:.8mm .8mm 6mm .8mm;
  box-shadow:0 3mm 4mm -3mm rgba(90,70,40,.35), inset 0 -2mm 3mm -2mm rgba(0,0,0,.05); }
.note .by{ display:block; margin-top:2mm; font:800 6.6pt var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#8a7f6a; }
.pin{ position:absolute; top:-2.2mm; left:calc(50% - 2.2mm); width:4.4mm; height:4.4mm; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0 12%, var(--pc,#f08aa0) 14% 100%); box-shadow:0 .8mm 1mm rgba(0,0,0,.2); }

/* lined paper */
.lined{ position:absolute; background:#fff; padding:6mm 5mm 4mm 9mm; transform:rotate(var(--r,0deg)); font:600 13.5pt/7mm var(--hand);
  background-image:linear-gradient(transparent 6.6mm, #cfe0f6 6.6mm 7mm), linear-gradient(90deg, transparent 6mm, #f5b5c4 6mm 6.3mm, transparent 6.3mm);
  background-size:100% 7mm, 100% 100%; background-position:0 5.5mm, 0 0; box-shadow:0 2mm 4mm -2mm rgba(80,60,130,.3);
  clip-path:polygon(0 1.6mm,4% 0,9% 1.4mm,15% .2mm,22% 1.6mm,30% .3mm,38% 1.5mm,46% 0,55% 1.3mm,63% .2mm,71% 1.6mm,80% .1mm,88% 1.4mm,95% .2mm,100% 1.2mm,100% 100%,0 100%); }
.lined .by{ font:800 6.6pt var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--soft); }

/* pull quote */
.quote{ position:absolute; transform:rotate(var(--r,0deg)); font:italic 600 17pt/1.18 var(--serif); color:var(--ink); }
.quote::before{ content:"“"; position:absolute; left:-1mm; top:-9mm; font:700 40pt var(--serif); color:var(--qc,#e6a2b8); opacity:.7; }
.quote .by{ display:block; margin-top:2mm; font:800 6.8pt var(--sans); font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.quote.card{ background:rgba(255,255,255,.82); border-radius:6mm; padding:9mm 7mm 5mm; box-shadow:0 2mm 5mm -2.5mm rgba(80,60,130,.3); }
.quote.card::before{ left:4mm; top:-3mm; }

/* small caption */
.cap{ position:absolute; font:600 11.5pt/1.1 var(--hand); color:var(--soft); transform:rotate(var(--r,0deg)); }

/* illustration slot: drop illustrations/<id>.png to replace the placeholder.
   Images come with a plain white background; multiply makes the white take on the page colour. */
.illu{ position:absolute; transform:rotate(var(--r,0deg)); display:grid; place-items:center; mix-blend-mode:multiply; }
.illu img{ width:100%; height:100%; object-fit:contain; }
.illu span{ width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:3mm; border-radius:50% 46% 52% 44%/48% 52% 46% 50%;
  border:.5mm dashed rgba(122,115,150,.55); background:rgba(255,255,255,.45); font:700 7pt/1.3 var(--sans); color:var(--soft); letter-spacing:.04em; }
.illu img + span{ display:none; }
.illu span b{ display:block; font:700 13pt var(--hand); color:var(--ink); letter-spacing:0; }
body.final .illu span{ visibility:hidden; }

/* doodles */
.doodle{ position:absolute; width:var(--s,8mm); height:var(--s,8mm); transform:rotate(var(--r,0deg)); color:var(--dc,#e9a3bd); }
.doodle svg{ width:100%; height:100%; display:block; }