:root{--paper:#f6f1e3;--line:#bcd0e6;--red:#d9483b;--ink:#2b2a33;--blue:#2b4a9b;--lh:32px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{margin:0;background:#e4dcc6;color:var(--ink);font:18px/var(--lh) Lora,Georgia,serif;overflow-x:hidden}
main{max-width:860px;margin:0 auto;padding:24px 0 60px}
.page{margin:0 0 28px;padding:0 70px 0 16px}
.sheet{position:relative;background:
 linear-gradient(90deg,transparent 62px,var(--red) 62px,var(--red) 64px,transparent 64px),
 repeating-linear-gradient(transparent 0,transparent calc(var(--lh) - 1px),var(--line) calc(var(--lh) - 1px),var(--line) var(--lh)),var(--paper);
 background-position:0 0,0 14px,0 0;
 padding:var(--lh) 36px var(--lh) 92px;box-shadow:0 2px 0 #cfc5a8,0 10px 26px rgba(60,45,20,.22);border-radius:3px;min-height:60vh}
.sheet::before{content:"";position:absolute;left:18px;top:40px;width:20px;height:20px;border-radius:50%;background:#e4dcc6;box-shadow:inset 0 2px 3px rgba(0,0,0,.3),0 calc(var(--lh)*8) 0 #e4dcc6,0 calc(var(--lh)*16) 0 #e4dcc6}
h1,h2,.note,.tl button,.card b,.thanks{font-family:Caveat,cursive}
h1{font-size:clamp(52px,9vw,92px);line-height:.95;margin:0 0 var(--lh);color:var(--blue);font-weight:700;transform:rotate(-1.5deg);transform-origin:left}
h2{font-size:clamp(38px,6vw,54px);line-height:var(--lh);margin:0 0 var(--lh);color:var(--blue);font-weight:700;padding-top:6px;display:inline-block;background:linear-gradient(transparent 62%,rgba(255,213,74,.7) 62%)}
.note{font-size:26px;color:var(--red);margin:0;line-height:var(--lh);transform:rotate(-2deg);transform-origin:left;font-weight:500}
.sub{margin:0 0 var(--lh);font-size:20px}
p{margin:0 0 var(--lh)}
.lead{font-weight:600}
.photo{margin:0 0 var(--lh);padding:10px 10px 10px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25);position:relative;width:min(100%,520px);line-height:0}
.photo::before{content:"";position:absolute;top:-14px;left:50%;width:100px;height:28px;margin-left:-50px;background:rgba(255,213,74,.75);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.photo img{width:100%;height:auto;max-height:340px;object-fit:cover;display:block}
.tilt-l{transform:rotate(-2deg)}.tilt-r{transform:rotate(1.8deg);margin-left:auto;margin-right:12px}
.tilt-l{margin-top:var(--lh)}
.tabs{margin:0 0 var(--lh)}
.tl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:-1px}
.tl button{font-size:24px;line-height:1;padding:8px 16px 6px;border:2px solid var(--ink);border-bottom:0;background:#ece3c6;color:var(--ink);cursor:pointer;border-radius:8px 8px 0 0;transition:transform .15s,background .15s}
.tl button:hover{transform:translateY(-2px)}
.tl button.on{background:#ffd54a}
.tp{display:none;border:2px solid var(--ink);background:#fffdf4;padding:calc(var(--lh)/2) 18px}
.tp.on{display:block;animation:fade .35s}
.tp p{margin:0}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#tabs{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:6px}
#tabs a{font:700 21px/1 Caveat,cursive;color:var(--ink);text-decoration:none;padding:9px 14px 7px 12px;border-radius:10px 0 0 10px;box-shadow:-2px 2px 4px rgba(0,0,0,.2);transition:transform .2s,padding .2s;transform:translateX(8px)}
#tabs a:hover,#tabs a.on{transform:none;padding-right:20px}
.t1{background:#ffb4a8}.t2{background:#ffe08a}.t3{background:#b9e3b0}.t4{background:#a9d4f5}.t5{background:#d9c2f0}.t6{background:#ffc9a0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--lh) 22px;margin-bottom:var(--lh)}
.card{perspective:800px;border:0;background:none;padding:0;height:calc(var(--lh)*4);cursor:pointer;font:inherit;color:inherit;text-align:left}
.card .in{position:relative;display:block;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.card.flip .in{transform:rotateY(180deg)}
.card .f,.card .b{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;padding:8px 14px;border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.25)}
.card .f{background:#ffd54a;justify-content:center}
.card b{font-size:32px;line-height:1}
.card .b{background:#fffdf4;transform:rotateY(180deg);font-size:15px;line-height:21px}
.card:nth-child(even) .f{background:#a9d4f5}.card:nth-child(3n) .f{background:#ffb4a8}
.thanks{font-size:clamp(40px,7vw,64px);color:var(--red);line-height:1.1;margin:var(--lh) 0 0;transform:rotate(-2deg);font-weight:700}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.js .photo.rv.tilt-l{transform:translateY(18px) rotate(-2deg)}.js .photo.rv.tilt-r{transform:translateY(18px) rotate(1.8deg)}
.js .rv.in{opacity:1;transform:none}
.js .photo.rv.in.tilt-l{transform:rotate(-2deg)}.js .photo.rv.in.tilt-r{transform:rotate(1.8deg)}
@media (max-width:700px){
 body{font-size:17px}
 .page{padding:0 0 0 6px;margin-bottom:18px}
 .sheet{padding:var(--lh) 14px var(--lh) 50px;background-image:linear-gradient(90deg,transparent 36px,var(--red) 36px,var(--red) 38px,transparent 38px),repeating-linear-gradient(transparent 0,transparent calc(var(--lh) - 1px),var(--line) calc(var(--lh) - 1px),var(--line) var(--lh)),linear-gradient(var(--paper),var(--paper))}
 .sheet::before{display:none}
 main{padding:0 0 70px;padding-right:44px}
 #tabs{top:auto;bottom:0;left:0;right:0;transform:none;flex-direction:row;gap:2px;padding:0 2px}
 #tabs a{flex:1;text-align:center;font-size:17px;padding:9px 0 7px;border-radius:8px 8px 0 0;transform:none;box-shadow:0 -2px 4px rgba(0,0,0,.2)}
 #tabs a:hover,#tabs a.on{padding-right:0;padding-top:13px}
 main{padding-right:0;padding-bottom:70px}
 .cards{grid-template-columns:1fr 1fr;gap:var(--lh) 12px}
 .card b{font-size:26px}.card .b{font-size:13px;line-height:18px;padding:6px 10px}
 .tl button{font-size:21px;padding:7px 11px 5px}
 .tilt-r{margin-right:0}
}
@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .js .rv{opacity:1;transform:none}
}