/* Тема «Стенгазета»: ватман на крашеной стене, буквы-вырезки, разные почерки */
*{box-sizing:border-box;margin:0;padding:0}
:root{--ink:#22201c}
body{font:400 19px/1.45 'Neucha',cursive;color:var(--ink);min-height:100vh;overflow-x:hidden;
  background:linear-gradient(180deg,#ece6d2 0 64%,#6f8f78 64% calc(64% + 6px),#9fbaa2 calc(64% + 6px)) fixed}
.sg-room{padding:clamp(60px,5vw,72px) clamp(12px,3vw,40px) 170px}
.sheet{position:relative;max-width:1320px;margin:0 auto;background:#fffdf5;padding:clamp(34px,4.4vw,70px) clamp(18px,4.4vw,70px) clamp(30px,4vw,56px);
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 46px 70px -36px rgba(30,30,20,.55);transform:rotate(-.3deg)}
.pin{position:absolute;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.75) 0 3px,transparent 4px),var(--c);box-shadow:3px 5px 5px rgba(0,0,0,.3)}
.pin.a{left:16px;top:16px;--c:#e23b3b}.pin.b{right:16px;top:16px;--c:#2f6fe0}.pin.c{left:16px;bottom:16px;--c:#f2b705}.pin.d{right:16px;bottom:16px;--c:#2aa65c}
.title{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(3px,.6vw,10px)}
.title span{display:inline-block;font:400 clamp(16px,4.6vw,72px)/1 'Rubik Mono One',sans-serif;color:#fffdf5;background:var(--c);padding:.14em .16em .1em;transform:rotate(var(--r));box-shadow:2px 3px 0 rgba(0,0,0,.15)}
.title .gap{width:clamp(8px,1.6vw,26px)}
.sub{text-align:center;margin:clamp(16px,2vw,28px) 0 0;font-size:inherit;font-weight:inherit}
.sub b{display:inline-block;font:700 clamp(34px,4.4vw,62px)/1.05 'Caveat',cursive;color:#2f58c9;overflow-wrap:anywhere}
.sub svg{display:block;margin:0 auto;width:min(560px,82%);height:24px}
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(26px,3vw,44px);align-items:start;margin-top:clamp(30px,4vw,56px)}
.w{position:relative;min-width:0}
.w-in{display:flow-root}
.w-in .stk{float:right;width:84px;height:84px;margin:-10px -8px 4px 10px;transform:rotate(6deg)}
.w p{font-size:clamp(20px,1.6vw,24px);line-height:1.35;overflow-wrap:anywhere}
.who{display:block;margin-top:8px;text-align:right;font-size:21px}
.f-caveat p{font:600 clamp(25px,2vw,31px)/1.15 'Caveat',cursive}
.f-bad p{font:400 clamp(18px,1.4vw,21px)/1.5 'Bad Script',cursive}
.f-pan p{font:400 clamp(18px,1.4vw,21px)/1.45 'Pangolin',cursive}
.red{color:#d23434}.blue{color:#2f58c9}.green{color:#23864a}.violet{color:#7a3fb0}.orange{color:#d9661f}.brown{color:#7a4b2a}
.bubble .w-in{background:#fff;border:3px solid currentColor;border-radius:30px 30px 30px 6px;padding:18px 22px}
.note .w-in{background:#fff27a;padding:24px 22px 18px;transform:rotate(2.5deg);box-shadow:0 12px 18px -10px rgba(0,0,0,.35)}
.framed .w-in{border:2.5px dashed currentColor;border-radius:14px 30px 12px 26px/26px 12px 30px 14px;padding:20px 22px}
.polaroid{position:relative;background:#fff;padding:12px 12px 50px;box-shadow:0 12px 24px -12px rgba(0,0,0,.45);transform:rotate(-3deg);margin:14px auto 22px;max-width:360px}
.w:nth-child(even) .polaroid{transform:rotate(2.5deg)}
.polaroid img,.polaroid video{display:block;width:100%;height:auto}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:700 24px/1 'Caveat',cursive;color:#3b3b3b}
.tape{position:absolute;top:-15px;left:50%;width:110px;height:30px;transform:translateX(-50%) rotate(4deg);background:rgba(255,232,140,.7)}
.colophon{margin-top:clamp(20px,3vw,40px);padding-top:14px;border-top:2px dashed rgba(34,32,28,.28);font-size:18px;color:#6b6457;text-align:center}
.sg-empty{text-align:center;font:700 30px/1.2 'Caveat',cursive;color:#2f58c9;margin:40px 0}
@media (max-width:640px){.pin{display:none}.title{gap:2px}}