@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:10px;flex:0 0 auto;width:140px;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:2px;margin-left:8px}
.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;inset:0;width:100%;height:100%;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}}
/* ===== тихие мелочи: срабатывают по одной, редко ===== */
/* ветер качнул записку на кнопке */
@keyframes sway{0%{transform:var(--rot) rotate(0)}18%{transform:var(--rot) rotate(1.1deg)}
 42%{transform:var(--rot) rotate(-.7deg)}68%{transform:var(--rot) rotate(.4deg)}100%{transform:var(--rot) rotate(0)}}
.card.sway{animation:sway 2.6s ease-in-out;transform-origin:50% -10px}
/* угол записки отогнулся от сквозняка */
.card.curl::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;
 border-style:solid;border-width:0;border-color:transparent transparent #efe4c8 transparent;
 filter:drop-shadow(-3px -3px 4px rgba(60,40,10,.35));animation:curl 3.4s ease-in-out}
@keyframes curl{0%,100%{border-width:0}
 45%{border-width:0 0 52px 52px;border-color:transparent transparent #f3e9d2 transparent}}
/* блик на кнопке-гвоздике */
@keyframes glint{0%,100%{box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),0 3px 3px rgba(0,0,0,.3)}
 50%{box-shadow:inset -4px -4px 0 rgba(0,0,0,.25),0 3px 3px rgba(0,0,0,.3),0 0 12px 3px rgba(255,255,220,.85)}}
.pin.glint{animation:glint 1.8s ease-in-out}
/* солнечный зайчик ползёт по доске */
#sun{position:fixed;top:-18vh;left:-30vw;width:46vw;height:46vw;pointer-events:none;z-index:3;opacity:0;
 background:radial-gradient(ellipse at center,rgba(255,226,150,.62),rgba(255,226,150,0) 66%)}
#sun.on{animation:sunmove 24s ease-in-out forwards}
@keyframes sunmove{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}
 82%{opacity:1}100%{opacity:0;transform:translate(115vw,38vh)}}
/* пылинка плывёт наискось */
#mote{position:fixed;left:-20px;top:70vh;width:5px;height:5px;border-radius:50%;
 background:rgba(255,250,225,.9);box-shadow:0 0 5px 2px rgba(255,245,205,.55);
 pointer-events:none;z-index:4;opacity:0}
#mote.on{animation:motefly 19s linear forwards}
@keyframes motefly{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}
 88%{opacity:1}100%{opacity:0;transform:translate(102vw,-46vh)}}
/* вечерний свет */
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,#sun,#mote{display:none}
 .card.sway,.card.curl::after,.pin.glint{animation: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(auto-fit,minmax(215px,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:27px;line-height:1.05}
.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)}
/* ===== режим «вся доска»: страница превращается в холст ===== */
/* Прокрутку запрещаем, а её ширину скрипт возмещает отступом справа —
   иначе страница стала бы шире и вся шапка уехала бы вбок. */
body.board-mode{overflow:hidden;height:100vh}
/* Шапка, слоган и кнопки сортировки остаются ровно там, где были на обычной
   странице: при нажатии кнопки ничего не должно прыгать и уезжать. */
body.board-mode .wrap{height:100vh;overflow:hidden}
body.board-mode header,body.board-mode .sort{position:relative;z-index:6}
body.board-mode footer{visibility:hidden}
body.board-mode #confetti,body.board-mode #plane,body.board-mode #sun,body.board-mode #mote{display:none}
#canvas{position:fixed;inset:0;overflow:hidden;cursor:grab;touch-action:none;z-index:1}
#canvas.drag{cursor:grabbing}
body.board-mode #board{position:absolute;top:0;left:0;display:block;transform-origin:0 0;gap:0}
body.board-mode #board>*{position:absolute;margin:0}
body.board-mode #board .card{width:var(--w,380px);min-height:0}
body.board-mode #board .card.featured{grid-column:auto}
#boardbtn{border:0;cursor:pointer;font-family:"Caveat","Segoe Script",cursive;font-weight:700}
/* на телефоне доски нет: там колеса нет, а обычная страница удобнее */
@media (max-width:900px){#boardbtn{display:none}}
/* три шага: крупная рукописная цифра и короткий текст */
.steps{display:flex;flex-direction:column;gap:14px}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--tag);padding:16px 18px}
.step:nth-child(even){transform:rotate(.3deg)}.step:nth-child(odd){transform:rotate(-.3deg)}
.step .num{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff8e6;
 display:flex;align-items:center;justify-content:center;font-size:34px;padding-bottom:4px}
.step b{display:block;font-size:20px;margin-bottom:3px}
.step span{display:block;font-size:16px;color:var(--muted)}
/* шесть разделов балла */
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.parts div{background:var(--cream);padding:12px 14px;box-shadow:2px 3px 0 rgba(60,40,10,.18)}
.parts b{font-family:"Caveat",cursive;font-weight:700;font-size:26px;line-height:1;display:block}
.parts span{font-size:15px;color:var(--muted)}
.fine-note{font-size:15px;color:#6b5a3a}
/* галерея снимков: карточки-полароиды, по клику открываются во весь экран */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:4px 0}
.shot{margin:0;background:#fff;padding:10px 10px 12px;box-shadow:3px 4px 0 rgba(60,40,10,.28);position:relative;cursor:zoom-in;
 border:0;font:inherit;text-align:center;display:flex;flex-direction:column;gap:8px;transition:transform .18s ease,box-shadow .18s ease}
.shot:nth-child(odd){transform:rotate(-1.4deg)}.shot:nth-child(even){transform:rotate(1.2deg)}
.shot:hover{transform:rotate(0) translateY(-4px) scale(1.02);box-shadow:6px 9px 0 rgba(60,40,10,.32)}
.shot img{width:100%;height:auto;display:block;background:#0f1720;border-radius:3px}
.shot .empty{width:100%;aspect-ratio:3/4;background:#e9e2d0;border:2px dashed #b9a67d;color:#8a7350;
 display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-family:"Caveat",cursive;font-size:22px;line-height:1.15}
.shot figcaption{font-family:"Caveat",cursive;font-weight:700;font-size:23px;line-height:1.1;color:var(--ink)}
.shot .zoom{position:absolute;right:14px;bottom:52px;background:rgba(42,33,24,.78);color:#fff;font-size:13px;
 padding:3px 9px;border-radius:3px;opacity:0;transition:opacity .18s ease}
.shot:hover .zoom{opacity:1}
#lb{position:fixed;inset:0;background:rgba(30,22,12,.9);display:none;align-items:center;justify-content:center;z-index:20;padding:24px;cursor:zoom-out}
#lb.on{display:flex}
#lb img{max-width:min(100%,900px);max-height:88vh;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff;padding:10px}
#lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff8e6;font-family:"Caveat",cursive;font-size:26px}
#lb .x{position:absolute;top:14px;right:20px;color:#fff8e6;font-size:38px;line-height:1;background:none;border:0;cursor:pointer;font-family:"Caveat",cursive}
@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{}
.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}}