@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Rubik:wght@400;500;700&display=swap');
:root{--board:#d9c39a;--ink:#2a2118;--muted:#5b4a33;--soft:#8a7350;--paper:#fffdf5;--cream:#fff8e6;--tag:#efe6cf;--red:#b5382b}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;font-family:"Rubik","Segoe UI",Arial,sans-serif;color:var(--ink);font-size:17px;line-height:1.5;
 background-color:var(--board);background-image:radial-gradient(rgba(120,90,40,.18) 1px,transparent 1.5px);background-size:7px 7px}
a{color:var(--red)}a:hover{color:#8c2a20}
.hand{font-family:"Caveat","Segoe Script",cursive;font-weight:700;line-height:1}
.wrap{max-width:1300px;margin:0 auto;padding:36px 40px 56px;display:flex;flex-direction:column;gap:36px;min-height:100vh}
header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:4px}
.brand a{text-decoration:none;color:var(--ink)}
.brand .name{font-size:64px}
.brand .tag{font-size:19px;color:var(--muted);max-width:40em}
.links{display:flex;gap:12px;flex-wrap:wrap}
.sticker{font-family:"Caveat","Segoe Script",cursive;font-weight:700;font-size:25px;color:var(--ink);text-decoration:none;background:var(--cream);
 padding:8px 18px;box-shadow:2px 3px 0 rgba(60,40,10,.25);display:inline-flex;align-items:center;min-height:44px}
.sticker:nth-child(odd){transform:rotate(-2deg)}.sticker:nth-child(even){transform:rotate(1.5deg)}
.sticker:hover{color:var(--red)}
.sort{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.sort button{font:inherit;font-size:15px;color:var(--ink);background:var(--tag);border:0;padding:8px 14px;cursor:pointer;min-height:40px}
.sort button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:start}
.card{position:relative;background:var(--paper);padding:26px 26px 22px;box-shadow:4px 6px 0 rgba(60,40,10,.28);display:flex;flex-direction:column;gap:12px;min-height:220px}
.card.featured{grid-column:span 2}
.card:nth-child(6n+1){transform:rotate(-1.2deg)}.card:nth-child(6n+2){transform:rotate(1.6deg)}.card:nth-child(6n+3){transform:rotate(.8deg)}
.card:nth-child(6n+4){transform:rotate(-1.6deg)}.card:nth-child(6n+5){transform:rotate(1.1deg)}.card:nth-child(6n){transform:rotate(-.7deg)}
.pin{position:absolute;top:-14px;left:48%;width:26px;height:26px;border-radius:50%;box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),0 3px 3px rgba(0,0,0,.3)}
.card .head{display:flex;gap:12px;align-items:center}
.icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.card h2{margin:0;font-size:42px}.card.featured h2{font-size:46px}
.status{margin-left:auto;font-family:"Caveat",cursive;font-weight:700;font-size:22px;color:var(--red);transform:rotate(6deg);border:2px solid var(--red);padding:2px 10px;border-radius:4px;white-space:nowrap}
.card p{margin:0;font-size:18px}.card.featured p{font-size:20px}
.tags{display:flex;gap:8px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.tags span{background:var(--tag);padding:4px 10px}
.meta{margin-top:auto;font-size:15px;color:var(--soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:500;font-size:18px;padding:12px 22px;min-height:44px;align-self:flex-start}
.btn:hover{color:var(--cream);background:#3d3226}
.note{background:#fff3a8;font-family:"Caveat",cursive}
.note .inner{display:flex;gap:18px;align-items:flex-start}
.note .text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.polaroids{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;width:132px;padding-top:6px}
.polaroid{margin:0;background:#fff;padding:8px 8px 10px;box-shadow:2px 3px 6px rgba(60,40,10,.35);width:132px;position:relative;transform:rotate(-5deg)}
.polaroid+.polaroid{transform:rotate(4deg);margin-top:-34px;margin-left:10px}
.polaroid .ph{width:116px;height:116px;background:#e9e2d0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.polaroid .ph img{width:100%;height:100%;object-fit:cover;display:block}
.polaroid .ph.empty{border:2px dashed #b9a67d;color:#8a7350;font-size:18px;text-align:center;line-height:1.1;padding:8px;box-sizing:border-box}
.polaroid figcaption{font-size:20px;text-align:center;margin-top:6px;color:#2a2118;line-height:1}
.tape{position:absolute;top:-10px;left:50%;width:56px;height:18px;margin-left:-28px;background:rgba(255,236,150,.75);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.polaroid+.polaroid .tape{transform:rotate(5deg);background:rgba(200,225,255,.7)}
/* живые карточки */
.card,.sticker,.pin,.btn{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.card:hover{box-shadow:7px 10px 0 rgba(60,40,10,.3)}
.card:nth-child(6n+1):hover{transform:rotate(-1.2deg) translateY(-4px)}.card:nth-child(6n+2):hover{transform:rotate(1.6deg) translateY(-4px)}
.card:nth-child(6n+3):hover{transform:rotate(.8deg) translateY(-4px)}.card:nth-child(6n+4):hover{transform:rotate(-1.6deg) translateY(-4px)}
.card:nth-child(6n+5):hover{transform:rotate(1.1deg) translateY(-4px)}.card:nth-child(6n):hover{transform:rotate(-.7deg) translateY(-4px)}
.card:hover .pin{transform:scale(.88) translateY(2px)}
.sticker:hover{box-shadow:1px 2px 0 rgba(60,40,10,.25);transform:translateY(1px) rotate(0)}
/* рисунки маркером */
.doodle{position:absolute;pointer-events:none;overflow:visible}
.doodle path{fill:none;stroke:#b5382b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600}
.drawn .doodle path{animation:draw 1.4s ease-out forwards}
.doodle.star path{stroke:#c98a1b}
.drawn .doodle.star path{animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}
.static .doodle path{stroke-dashoffset:0}
/* салют */
#confetti{position:fixed;top:0;right:0;width:420px;height:360px;pointer-events:none;z-index:5}
/* самолётик */
#plane{position:fixed;left:-120px;top:22vh;width:72px;height:auto;pointer-events:none;z-index:4;opacity:0}
#plane.fly{animation:fly 7s ease-in-out forwards}
@keyframes fly{0%{transform:translate(0,0) rotate(6deg);opacity:0}8%{opacity:1}50%{transform:translate(55vw,-8vh) rotate(-4deg)}92%{opacity:1}100%{transform:translate(calc(100vw + 140px),6vh) rotate(8deg);opacity:0}}
/* вечерний свет */
body.evening{background-image:radial-gradient(ellipse 60% 45% at 18% 0%,rgba(255,214,140,.32),rgba(255,214,140,0) 70%),radial-gradient(rgba(120,90,40,.18) 1px,transparent 1.5px);background-size:100% 100%,7px 7px}
@media (prefers-reduced-motion:reduce){.card,.sticker,.pin,.btn{transition:none}.card:hover{transform:none}.drawn .doodle path{animation:none;stroke-dashoffset:0}#plane,#confetti{display:none}}
.note p{font-size:24px;line-height:1.3}.note .sig{font-size:22px;color:#6b5a3a}
.invite{border:2px dashed #b9a67d}.invite h2{color:var(--soft)}
footer{margin-top:auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:15px;color:#6b5a3a}
.item{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:start}
.sheet{position:relative;background:var(--paper);padding:38px 42px 34px;box-shadow:5px 7px 0 rgba(60,40,10,.28);transform:rotate(-.6deg);display:flex;flex-direction:column;gap:22px}
.sheet h1{margin:0;font-size:58px}.sheet .sub{font-size:17px;color:var(--muted)}
.sheet .lead{font-size:22px;margin:0}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.keys div{background:var(--tag);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.keys b{font-family:"Caveat",cursive;font-weight:700;font-size:30px;line-height:1}
.keys span{font-size:15px;color:var(--muted)}
.sheet h3{margin:0;font-size:32px}
.sheet p{margin:0}
.warn{background:#fff3a8;padding:18px 22px;transform:rotate(.4deg);display:flex;flex-direction:column;gap:8px}
.side{display:flex;flex-direction:column;gap:32px}
.side .card{gap:14px}
.side .price{font-size:44px;margin:0}
.side .fine{font-size:14px;color:#6b5a3a;text-align:center}
.side .hr{border-top:1px dashed #b9a67d;padding-top:12px;font-size:16px}
.reqs{font-size:15px;color:#6b5a3a;padding:0 8px;display:flex;flex-direction:column;gap:6px}
.reqs b{color:var(--ink)}
.back{font-size:36px;text-decoration:none;color:var(--ink)}
@media (max-width:1000px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.item{grid-template-columns:1fr}.keys{grid-template-columns:1fr}}
html,body{overflow-x:hidden}
.brand{min-width:0;flex:1 1 320px}.brand .tag{max-width:min(40em,100%)}
@media (max-width:640px){.note .inner{flex-direction:column}.polaroids{flex-direction:row;width:auto;gap:14px;padding-top:12px}.polaroid+.polaroid{margin-top:0;margin-left:0}#confetti{width:260px;height:240px}
.wrap{padding:24px 18px 40px;gap:26px}.brand .name{font-size:48px}.brand .tag{font-size:16px}.board{grid-template-columns:minmax(0,1fr);gap:30px}
 .card.featured{grid-column:auto}.card{padding:22px 18px 18px;min-height:0}.card h2,.card.featured h2{font-size:36px}.card p,.card.featured p{font-size:17px}
 .sheet{padding:26px 20px;transform:none}.sheet h1{font-size:44px}.sticker{font-size:22px;padding:10px 16px}.status{display:none}}