:root{--bg:#FAF6EE;--ink:#1a1a1a;--yellow:#E6FF00;--purple:#3B1F5C;--gold:#C9A227}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,.hand,.tile .t,nav a,.btn,.label{font-family:"Gochi Hand",cursive;font-weight:400}
h1{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.1;margin:.2em 0}
h2{font-size:clamp(1.6rem,4vw,2.6rem);margin:.3em 0}
a{color:inherit}:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.badge{position:fixed;right:10px;bottom:10px;z-index:99;background:var(--purple);color:#fff;font:600 11px/1 system-ui;padding:6px 9px;border-radius:4px;letter-spacing:.06em}
header.site{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-bottom:3px solid var(--ink)}
.logo{font-size:2.2rem;text-decoration:none}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-items:center}
nav a{font-size:1.4rem;text-decoration:none}nav a:hover{text-decoration:underline wavy}
nav li{position:relative}nav .sub{display:none;position:absolute;top:100%;left:-.5rem;background:var(--bg);border:2px solid var(--ink);padding:.4rem .8rem;z-index:20;min-width:12rem;flex-direction:column;gap:0}
nav li:hover .sub,nav li:focus-within .sub{display:flex}
.social{font-size:.9rem}
main{max-width:1200px;margin:0 auto;padding:1.5rem}
.hero{min-height:calc(100vh - 90px);display:grid;grid-template-rows:1fr auto;gap:.5rem;padding:1rem 0}
.hero img{width:100%;height:calc(100vh - 260px);min-height:300px;object-fit:contain}
.hero .bar{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.btn{display:inline-block;font-size:1.3rem;padding:.3rem 1rem;border:3px solid var(--ink);background:#fff;border-radius:999px 30px 999px 40px;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--yellow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2rem;margin:2rem 0}
.tile{display:block;text-decoration:none;transition:transform .35s}
.tile img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;padding:.6rem;border:1px solid #e5dccb}
.tile:hover,.tile:focus-visible{transform:perspective(600px) rotateY(-6deg) rotateX(3deg) rotate(-1deg)}
.tile .t{font-size:1.4rem;display:block;margin-top:.3rem}.tile small{font-family:system-ui;color:#666}
.s-paintings{--acc:var(--yellow)}.s-found{--acc:var(--gold)}.s-portraits{--acc:var(--purple)}.s-archive{--acc:#999}
.tile{border-bottom:6px solid var(--acc)}
.filters{display:flex;flex-wrap:wrap;gap:.6rem}.filters .btn[aria-pressed=true]{background:var(--ink);color:#fff}
.art{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:2rem;align-items:start}
.art img{width:100%;max-height:85vh;object-fit:contain;background:#fff;padding:1rem;border-top:10px solid var(--acc)}
.meta{color:#555;margin:.2rem 0}.story{font-size:1.05rem}
.pn{display:flex;justify-content:space-between;margin-top:2rem}
.note{background:#fff;border:2px dashed var(--purple);padding:1rem;margin:1.5rem 0;font-size:.95rem}
.prose{max-width:42rem}.draft{display:inline-block;background:var(--yellow);font:700 .8rem system-ui;padding:.2rem .5rem;letter-spacing:.1em}
footer.site{border-top:3px solid var(--ink);padding:1rem 1.5rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:.9rem}
/* entrance */
.entrance{background:#e9e4da;min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:1rem}
.stage{position:relative;width:min(100%,calc((100vh - 4rem) * 4 / 3));aspect-ratio:4/3}
.stage img{width:100%;height:100%;display:block}
.hot{position:absolute;display:block;border-radius:4px;transition:box-shadow .3s,background .3s}
.hot.art{left:5.6%;top:28.4%;width:40.3%;height:43.2%}
.hot.rub{left:51.8%;top:27.7%;width:39.5%;height:42.4%}
.hot.art:hover,.hot.art:focus-visible{box-shadow:0 0 0 4px rgba(230,255,0,.9),0 0 40px rgba(237,10,63,.5);background:rgba(255,255,255,.06)}
.hot.rub:hover,.hot.rub:focus-visible,.hot.rub.show{box-shadow:0 0 0 3px rgba(255,255,255,.8)}
.hot .label{position:absolute;left:50%;bottom:-2.6em;transform:translateX(-50%);white-space:nowrap;font-size:clamp(1rem,2.4vw,1.8rem);opacity:0;transition:opacity .4s;background:rgba(250,246,238,.85);padding:0 .5em;border-radius:6px;pointer-events:none}
.hot:hover .label,.hot:focus-visible .label,.hot.show .label{opacity:.85}
.corner{position:fixed;left:14px;top:10px;font-size:1.6rem;text-decoration:none}
.hint{font-family:system-ui;font-size:.85rem;color:#555;margin-top:.5rem;text-align:center}
@media(max-width:760px){.art{grid-template-columns:1fr}.hero img{height:60vh}header.site{padding:.8rem 1rem}nav a{font-size:1.2rem}main{padding:1rem}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.tile:hover{transform:none}}
/* v2 */
.entrance{background:var(--bg)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,4vw,4rem);width:min(100%,1200px);align-items:center}
.door{position:relative;display:block;transition:transform .5s}
.door img{width:100%;max-height:75vh;object-fit:contain;display:block}
.door.art:hover,.door.art:focus-visible{transform:perspective(900px) rotateY(5deg) scale(1.02)}
.door.rub:hover,.door.rub:focus-visible{transform:perspective(900px) rotateY(-5deg)}
.door .label{position:absolute;left:50%;bottom:-2.4em;transform:translateX(-50%);white-space:nowrap;font-size:clamp(1rem,2.4vw,1.8rem);opacity:0;transition:opacity .4s}
.door.rub:hover .label,.door.rub:focus-visible .label,.door.rub.show .label{opacity:.85}
.hint{margin-top:3rem}
.sheen{position:relative;display:block;overflow:hidden}
.sheen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,rgba(255,240,200,.12) 55%,transparent 70%);background-size:250% 100%;background-position:var(--lx,120%) 0;opacity:0;transition:opacity .5s}
.sheen:hover::after,a:focus-visible .sheen::after,.door:focus-visible::after{opacity:1}
.big img,.big .ph{border-top:10px solid var(--acc);background:#fff;padding:1rem}
.big{transition:transform .4s}
.ph{aspect-ratio:4/5;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#fff 0 14px,#f1ebdf 14px 28px);border:2px dashed #999;text-align:center;font-size:1.6rem}
.tile .ph{aspect-ratio:1}
.visit{margin-top:2rem;padding:1rem 1.2rem;border-left:6px solid var(--gold);background:#fff}
.details{margin-top:3rem}.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,320px));gap:1.5rem}
.dgrid img{width:100%;aspect-ratio:1;object-fit:cover}figure{margin:0}figcaption{font-size:.85rem;color:#666;margin-top:.3rem}
@media(max-width:760px){.pair{gap:1rem}}
/* v3 */
:root{--tabh:58px;--c1:#ED0A3F;--c2:#FF8833;--c3:#E6B800;--c4:#01A368;--c5:#0066FF;--c6:#8359A3}
main{max-width:none;padding:0;margin:0}.wrap{max-width:1200px;margin:0 auto;padding:1.5rem}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:.5rem}
header.tabs{position:sticky;top:0;z-index:50;display:flex;align-items:stretch;min-height:var(--tabh);background:var(--ink)}
header.tabs nav{display:flex;flex:1;overflow-x:auto;scrollbar-width:none}
.tab{font-family:"Gochi Hand",cursive;font-size:1.45rem;text-decoration:none;color:#fff;display:flex;align-items:center;padding:0 1.2rem;white-space:nowrap;flex:1;justify-content:center;transition:filter .2s,padding .2s}
.tab:hover,.tab:focus-visible{filter:brightness(1.12);outline-offset:-4px}
.tab.on{box-shadow:inset 0 -6px 0 #000;font-size:1.65rem}
.logo{background:#000;flex:0 0 auto;font-size:1.8rem}
.t1{background:var(--c1)}.t2{background:var(--c2)}.t3{background:var(--c3);color:#000}.t4{background:var(--c4)}.t5{background:var(--c5)}.t6{background:var(--c6)}
.soc{display:flex;gap:.8rem;align-items:center;padding:0 1rem;background:#000;font:600 .85rem system-ui}.soc a{color:#fff}
.fs{position:relative;height:calc(100svh - var(--tabh));background:#2b2926;overflow:hidden}
.fs .stage{position:absolute;inset:0}
.fs .stage img,.fs .stage .ph{width:100%;height:100%;object-fit:contain;display:block;padding:0;border:0;background:transparent}
.fs .stage .ph{width:min(80vw,60vh);height:auto;margin:10vh auto;color:#333}
.fs .sheen::after{background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.12) 50%,transparent 62%);background-size:250% 100%;background-position:var(--lx,120%) 0}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:rgba(250,246,238,.85);color:#000;font-size:1.6rem;display:grid;place-items:center;text-decoration:none;cursor:pointer;z-index:3}
.arrow.prev{left:14px}.arrow.next{right:14px}.arrow:hover{background:var(--yellow)}
.cap{position:absolute;left:16px;bottom:14px;z-index:3;background:rgba(250,246,238,.9);padding:.4rem .9rem;border-radius:10px;max-width:calc(100% - 32px);display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem}
.cap h1{font-size:1.9rem;margin:0}.cap a{text-decoration:none;font-size:1.2rem}.cap .tt{font-size:1.6rem}
.mini{font-family:"Gochi Hand",cursive;font-size:1.1rem;border:2px solid #000;background:#fff;border-radius:999px;padding:.1rem .8rem;cursor:pointer}
.mini:hover{background:var(--yellow)}
.down{position:absolute;right:16px;bottom:14px;z-index:3;color:#fff;text-decoration:none;font-size:1.3rem}
.info{position:fixed;top:var(--tabh);right:0;bottom:0;width:min(440px,100%);overflow:auto;background:var(--bg);z-index:40;padding:1.2rem 1.4rem 2rem;box-shadow:-10px 0 30px rgba(0,0,0,.3);border-left:8px solid var(--acc)}
.info[hidden]{display:none}.info h1{font-size:2.4rem}.close{float:right}
.info .dgrid{grid-template-columns:1fr 1fr;gap:.8rem}
.info .visit{margin:1.2rem 0}
@media(max-width:760px){.tab{font-size:1.15rem;padding:0 .7rem;flex:0 0 auto}.logo{font-size:1.3rem}.soc{display:none}.arrow{width:44px;height:44px;bottom:80px;top:auto;transform:none}.cap h1{font-size:1.4rem}}
.down{right:auto;left:50%;transform:translateX(-50%);bottom:auto;top:12px;background:rgba(0,0,0,.4);padding:0 .7rem;border-radius:8px}
@media(max-width:760px){:root{--tabh:92px}header.tabs{flex-wrap:wrap}.logo{flex:1 0 100%;justify-content:center;min-height:32px;font-size:1.3rem}
header.tabs nav{display:grid;grid-template-columns:repeat(3,1fr);flex:1 0 100%;overflow:visible}.tab{flex:auto;padding:.15rem .3rem;font-size:1.1rem}
.grid{grid-template-columns:1fr 1fr;gap:1rem}.tile .t{font-size:1.1rem}}
/* lamp lift */
.stage img,.tile img,.dgrid img,.door img,.big img{transition:filter .6s ease}
.stage:hover img,.stage.lit img,.tile:hover img,.tile:focus-visible img,.dgrid .sheen:hover img,.door:hover img,.door:focus-visible img{filter:brightness(1.25) contrast(.95)}
.fs .stage.sheen{position:absolute;inset:0}
@media(max-width:760px){.arrow{top:45%;bottom:auto}}
.fs .stage.sheen{width:auto;height:auto;aspect-ratio:auto}
@media(max-width:760px){.fs .stage.sheen{bottom:88px}}
.door.sheen{overflow:visible}
/* v4 paper + wax crayon */
.paper{display:inline-block;isolation:isolate;padding:.02em .4em .08em;rotate:var(--rot,0deg)}
.paper:not(.label):not(.tab .crayon){position:relative}
.paper::before,.paper::after{content:"";position:absolute;z-index:-1;pointer-events:none;background-size:100% 100%;background-repeat:no-repeat}
.paper::before{inset:-.12em -.25em -.1em -.3em}
.paper::after{inset:.05em -.1em -.25em .3em;rotate:var(--srot,0deg);opacity:.9}
.paper .ink{filter:url(#wax)}
h1.paper,h2.paper{margin-left:.25em}
.tab .crayon{position:relative;font-size:1em;padding:0 .35em}
.tile .t.paper{margin:.4rem 0 .1rem .2rem;font-size:1.25rem}
.cap .paper::after,.door .label::after{display:none}
.door .label{padding:.05em .6em}
.pp1::before{background-image:url(tex/paper-1.png)}
.pp2::before{background-image:url(tex/paper-2.png)}
.pp3::before{background-image:url(tex/paper-3.png)}
.pp4::before{background-image:url(tex/paper-4.png)}
.sm1::after{background-image:url(tex/smudge-1.png)}
.sm2::after{background-image:url(tex/smudge-2.png)}
.sm3::after{background-image:url(tex/smudge-3.png)}
.sm4::after{background-image:url(tex/smudge-4.png)}
.sm5::after{background-image:url(tex/smudge-5.png)}
.sm6::after{background-image:url(tex/smudge-6.png)}
.sm7::after{background-image:url(tex/smudge-7.png)}
.paper.corner{position:fixed}
.tab .ink,.tile .ink,.cap .ink,.visit .ink,.label .ink{filter:url(#waxs)}
.tile .t.paper{font-size:1.35rem}
.paper.corner{position:fixed!important}
.tile .paper::after,.tab .paper::after{opacity:.45}
/* v4b entrance with feet: one photo, two hotspots */
.stage.ent{position:relative;width:min(100%,calc((100svh - 6rem) * 4 / 3));aspect-ratio:4/3}
.stage.ent img{width:100%;height:100%;display:block;object-fit:contain}
.hot{transition:box-shadow .6s,backdrop-filter .6s}
.hot:hover,.hot:focus-visible,.hot.show{backdrop-filter:brightness(1.25) contrast(.95)}
.hot .label.paper{position:absolute}
.hot.art .label{bottom:auto;top:-2.4em}
.hot.art:hover .label,.hot.art:focus-visible .label{opacity:.9}
@media(max-width:760px){.hot .label{font-size:.95rem}}
.hot.rub:hover,.hot.rub:focus-visible,.hot.rub.show{backdrop-filter:brightness(1.08) contrast(1.05)}
/* v5 harmonised crayon palette (see ../palette.md). Tabs step round the wheel: violet, red, orange, yellow, green, blue */
:root{--cr-red:#C42B3C;--cr-orange:#AE4A14;--cr-yellow:#8C6900;--cr-green:#2A7347;--cr-blue:#2A5DB0;--cr-violet:#6F4B9E;--cr-brown:#8B4A2C;--cr-black:#2B2623}
.t1{background:var(--cr-violet)}.t2{background:var(--cr-red)}.t3{background:var(--cr-orange);color:#fff}.t4{background:#B8920F}.t5{background:var(--cr-green)}.t6{background:var(--cr-blue)}
.logo,.soc{background:var(--cr-black)}
@media(max-width:760px){header.tabs nav{grid-auto-flow:column;grid-template-rows:1fr 1fr;grid-template-columns:repeat(3,1fr)}}
.pp1::before{background-image:url(tex/paper-1.png)}
.pp2::before{background-image:url(tex/paper-2.png)}
.pp3::before{background-image:url(tex/paper-3.png)}
.pp4::before{background-image:url(tex/paper-4.png)}
.pp5::before{background-image:url(tex/paper-5.png)}
.pp6::before{background-image:url(tex/paper-6.png)}
.pp7::before{background-image:url(tex/paper-7.png)}
.pp8::before{background-image:url(tex/paper-8.png)}
.pp9::before{background-image:url(tex/paper-9.png)}
.pp10::before{background-image:url(tex/paper-10.png)}
/* v5b homemade labels: tape, staple, glue (picked by a hash of the word, so each label is stable) */
.deco{position:absolute;pointer-events:none;background-size:100% 100%;z-index:1}
.tape{width:2.6em;height:.8em;opacity:.85}
.tape-m{background-image:url(tex/tape-masking.png)}.tape-o{background-image:url(tex/tape-masking-old.png);box-shadow:0 2px 2px rgba(0,0,0,.12)}.tape-c{background-image:url(tex/tape-clear.png);opacity:.7}
.tape.at0{left:-.9em;top:-.25em;rotate:-38deg}.tape.at1{right:-.9em;top:-.25em;rotate:35deg}.tape.at2{left:50%;top:-.45em;translate:-50% 0;rotate:-3deg}.tape.at3{right:-.8em;bottom:-.2em;rotate:-32deg}
.staple{width:1.1em;height:.38em;background-image:url(tex/staple.png);left:.15em;top:.05em;rotate:-12deg}
.staple.at1,.staple.at3{left:auto;right:.2em;rotate:8deg}
.glue{width:3em;height:1.3em;background-image:url(tex/glue.png);right:-.4em;bottom:-.3em;opacity:.8;z-index:-1}
.glue.at0,.glue.at2{right:auto;left:-.5em;top:-.2em;bottom:auto}
.tile .deco{font-size:.8em}
/* v5c aged tabs: faded, scuffed, dog-eared, grubby card */
header.tabs{background:#2b2620;gap:3px;padding:3px 3px 0}
.tab{position:relative;isolation:isolate;filter:saturate(.78) brightness(1.03);border-radius:5px 7px 2px 3px;background-image:url(tex/paper-6.png);background-blend-mode:multiply;background-size:cover;clip-path:polygon(0 3px,3px 0,calc(100% - 13px) 0,100% 13px,100% 100%,0 100%)}
.tab::before{content:"";position:absolute;inset:0;background:url(tex/tabwear-1.png) center/100% 100%;pointer-events:none;z-index:-1}
.tab::after{content:"";position:absolute;right:0;top:0;width:13px;height:13px;background:linear-gradient(225deg,transparent 50%,rgba(255,248,232,.55) 50%,rgba(0,0,0,.18));pointer-events:none}
.tab:nth-child(2n)::before{background-image:url(tex/tabwear-2.png);transform:scaleX(-1)}
.tab:nth-child(3n)::before{background-image:url(tex/tabwear-3.png)}
.tab:nth-child(4n)::before{background-image:url(tex/tabwear-4.png);transform:scaleY(-1)}
.tab:nth-child(odd){clip-path:polygon(0 9px,9px 0,100% 0,100% 2px,100% 100%,0 100%)}
.tab:nth-child(odd)::after{left:0;right:auto;width:9px;height:9px;background:linear-gradient(135deg,transparent 50%,rgba(255,248,232,.5) 50%,rgba(0,0,0,.18))}
.tab:hover,.tab:focus-visible{filter:saturate(.9) brightness(1.1)}
.tab .crayon{text-shadow:0 1px 1px rgba(0,0,0,.35)}

/* charity label */
.info .charity{margin:.4rem 0 .9rem}.info .charity .crayon{font-size:1.2rem;padding:.1em .45em}

/* About standout line */
.standout{margin:.4rem 0 1.6rem}.standout .crayon{font-size:clamp(1.6rem,3.2vw,2.4rem);padding:.25em .6em;line-height:1.25;display:inline-block}

.t7{background:var(--cr-brown)}
.frames-note{max-width:42rem;font-size:.95rem;margin:.2rem 0 1rem;line-height:1.4}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1.2rem;margin:1rem 0 2rem}
.shop-item{background:#fffdf6;border:2px dashed #8B4A2C;padding:1rem;border-radius:4px 14px 6px 12px;rotate:-.4deg}.shop-item:nth-child(even){rotate:.5deg}
.shop-item .ph{display:block;font:700 .75rem system-ui;letter-spacing:.1em;color:#8B4A2C}
.shop-item .price{font-size:1.3rem}
/* artwork pages: wall mockup, plain photo, details, caption */

.artpage figure{margin:1.2rem 0}
.wallshot img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.wallshot figcaption{font-family:"Gochi Hand",cursive;font-size:1.2rem;color:#555;margin-top:.3rem}
.plain img{width:100%;max-height:85vh;object-fit:contain;background:#fff;padding:.8rem;border:1px solid #e5dccb;display:block}
.caption{position:relative;margin:2rem 0 1rem;padding:1rem 1.4rem;background:#fff url(tex/paper-3.png);border:0;transform:rotate(-.6deg);box-shadow:2px 3px 0 rgba(0,0,0,.12);clip-path:polygon(0 4%,3% 0,20% 3%,40% 0,62% 4%,80% 1%,100% 3%,99% 50%,100% 96%,78% 100%,55% 96%,30% 100%,8% 97%,0 100%,1% 50%)}
.caption .capline{margin:0;font-size:1.05rem}
.sold{font-family:"Gochi Hand",cursive;font-weight:400;font-size:1.3rem;background:var(--yellow);padding:0 .4rem;margin-left:.3rem}
.artnav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;margin:2rem 0}
.artnav .btn{font-size:1.1rem}
/* contact: robot check */
.robot-check{margin:1.2rem 0;padding:1rem;background:#fff;border:3px dashed var(--ink);border-radius:12px 30px 14px 40px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:480px}
.rgrid button{padding:0;border:4px solid transparent;background:#fff;cursor:pointer;aspect-ratio:1;overflow:hidden;border-radius:6px}
.rgrid button img{width:100%;height:100%;object-fit:cover;display:block}
.rgrid button.ok{border-color:#2a9d3a}.rgrid button.no{border-color:#c0392b;animation:wob .3s}
@keyframes wob{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.cform label{display:block;margin:.8rem 0 .2rem;font-weight:600}
.cform input,.cform textarea{width:100%;max-width:36rem;font:inherit;padding:.5rem;border:2px solid var(--ink);border-radius:6px;background:#fff}
.cform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.45;cursor:not-allowed;background:#eee}
#rmsg{font-family:"Gochi Hand",cursive;font-size:1.3rem;min-height:1.6em;margin:.4rem 0}
main.artpage{display:block!important;max-width:1000px;margin:0 auto;padding:1.5rem}main.artpage>*{max-width:100%}
/* social row (crayon / torn paper) */
.soc-row{flex-basis:100%;order:-1}
.soc-icons{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem .9rem}
.soc-icons a{display:inline-flex;align-items:center;gap:.35rem;text-decoration:none;padding:.3rem .7rem .3rem .45rem;background:#fff url(tex/paper-3.png) center/cover;border:2px solid var(--ink);border-radius:14px 4px 12px 5px/5px 12px 4px 14px;box-shadow:2px 3px 0 rgba(26,26,26,.18);transform:rotate(-1.2deg);transition:transform .15s}
.soc-icons li:nth-child(even) a{transform:rotate(1.3deg)}
.soc-icons a:hover,.soc-icons a:focus-visible{transform:rotate(0) scale(1.06);background-color:var(--yellow)}
.soc-icons svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:url(#none)}
.soc-icons .hand{font-size:1.15rem}
.follow-along{margin:2.5rem 0 1.5rem;padding:1.2rem 1.4rem 1.5rem;background:#fff url(tex/paper-5.png) center/cover;border:2px solid var(--ink);border-radius:3px 18px 6px 14px/14px 4px 16px 5px;transform:rotate(-.4deg)}
.follow-along h2{margin-top:0}
.soc-icons.big svg{width:28px;height:28px}.soc-icons.big .hand{font-size:1.35rem}