/* Network Sticky Notes: paper scraps held by a magnet that names the site. Plain CSS, no JavaScript.
   Markup: <aside class="gw-note gw-note--tip|fact|caution|update [gw-note--left|gw-note--right]" role="note">
   Magnet: <span class="gw-note__magnet" role="img" aria-label="Site name">ABC</span> (or an <img> inside it). */
.gw-note{--paper:#FFE469;--paper-hi:#FFF1A3;--fold:#E6C93F;--ink:#2A2306;--mark:rgba(255,255,255,.6);--tilt:-1.2deg;--w:20rem;--dy:0rem;--ml:0;--mr:auto;--mag:#1F5FA8;--mag-ink:#FFFFFF;--mag-x:32%;--cut:polygon(0 0,100% 0,100% 94%,96% 97%,92% 93%,87% 98%,82% 94%,77% 97.5%,72% 93.5%,66% 98%,61% 94%,55% 97%,50% 93%,44% 98%,38% 94.5%,33% 97.5%,27% 93%,21% 98%,15% 94%,9% 97%,4% 93.5%,0 97%);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:relative;isolation:isolate;box-sizing:border-box;width:min(90%,var(--w));margin-block:1.75rem;margin-inline:var(--ml) var(--mr);padding:1.7rem 1rem 1.7rem;text-align:center;color:var(--ink);transform:rotate(var(--tilt));translate:0 var(--dy);filter:drop-shadow(0 1px 0 rgba(0,0,0,.1)) drop-shadow(0 12px 10px rgba(20,16,4,.3));transition:transform .2s ease}
.gw-note:hover{transform:rotate(0) translateY(-2px)}
.gw-note--left{--ml:0;--mr:auto}
.gw-note--right{--ml:auto;--mr:0}
.gw-note::after{content:"";position:absolute;inset:0;z-index:-1;clip-path:var(--cut);background:var(--grain),linear-gradient(180deg,var(--paper-hi) 0,var(--paper) 55%)}
.gw-note .gw-note__magnet{position:absolute;z-index:2;top:-.85rem;left:var(--mag-x);display:grid;place-items:center;width:2.1rem;height:2.1rem;margin-left:-1.05rem;border-radius:50%;overflow:hidden;font-size:.62rem;font-weight:800;letter-spacing:.04em;line-height:1;color:var(--mag-ink);background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.6) 0 10%,transparent 40%),var(--mag);box-shadow:inset 0 -3px 5px rgba(0,0,0,.3),inset 0 1px 1px rgba(255,255,255,.45),0 3px 4px rgba(0,0,0,.35)}
.gw-note .gw-note__magnet img{display:block;width:100%;height:100%;object-fit:cover}
.gw-note .gw-note__title{margin:0;font-size:.78rem;font-weight:800;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.gw-note .gw-note__title::after{content:"";display:block;width:2rem;height:2px;margin:.45rem auto .6rem;background:currentColor;opacity:.5}
.gw-note .gw-note__lead{display:table;margin:0 auto;padding:0 .4rem;font-size:1.05rem;font-weight:800;line-height:1.35;color:var(--ink);background:linear-gradient(180deg,transparent 56%,var(--mark) 56% 90%,transparent 90%)}
.gw-note .gw-note__line{margin:.3rem 0 0;font-size:.98rem;font-weight:500;line-height:1.35;color:var(--ink)}
.gw-note a.gw-note__link{display:inline-block;margin-top:.9rem;padding:.5rem 1rem;background:#FFD84D;color:#2A2306;border:2px solid var(--ink);font-size:.85rem;font-weight:800;text-decoration:none;white-space:nowrap}
.gw-note a.gw-note__link:hover{background:#FFC61A}
.gw-note a.gw-note__link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.gw-note--tip{--tilt:-1.6deg;--w:20rem;--dy:0rem;--mag:#1F5FA8;--mag-ink:#FFFFFF;--mag-x:30%}
.gw-note--fact{--paper:#A9D9FF;--paper-hi:#CDE9FF;--fold:#7DB9E8;--ink:#0E2236;--tilt:1.3deg;--w:21rem;--dy:1.1rem;--ml:auto;--mr:0;--mag:#E8741E;--mag-ink:#1E1203;--mag-x:70%;--cut:polygon(0 3%,5% 0,10% 2.5%,16% .5%,22% 3%,28% 0,35% 2.5%,41% .5%,48% 3%,54% 0,61% 2.5%,67% .5%,74% 3%,80% 0,87% 2.5%,93% .5%,100% 3%,100% 100%,0 100%)}
.gw-note--fact::after{background:var(--grain),linear-gradient(90deg,transparent 1rem,rgba(214,69,69,.55) 1rem calc(1rem + 2px),transparent calc(1rem + 2px)),repeating-linear-gradient(180deg,transparent 0 1.45rem,rgba(14,34,54,.14) 1.45rem calc(1.45rem + 1px)),linear-gradient(180deg,var(--paper-hi) 0,var(--paper) 55%)}
.gw-note--caution{--paper:#FFB05E;--paper-hi:#FFCB8F;--fold:#E58F3A;--ink:#3A1B02;--tilt:-.9deg;--w:19rem;--dy:-.3rem;--ml:7%;--mr:auto;--mag:#1F5FA8;--mag-ink:#FFFFFF;--mag-x:20%;--cut:polygon(0 4%,3% 0,12% 2%,22% 0,34% 2.5%,46% 0,58% 2%,70% 0,82% 2.5%,93% 0,100% 3%,98% 14%,100% 28%,97.5% 44%,100% 60%,98% 76%,100% 90%,96% 100%,86% 97.5%,74% 100%,62% 97%,50% 100%,38% 97.5%,26% 100%,14% 97%,5% 100%,0 96%,2% 82%,0 66%,2.5% 50%,0 34%,2% 18%)}
.gw-note--update{--paper:#B4EA9C;--paper-hi:#D3F5C4;--fold:#86C46E;--ink:#12280C;--tilt:1.8deg;--w:20.5rem;--dy:.7rem;--ml:auto;--mr:5%;--mag:#E8741E;--mag-ink:#1E1203;--mag-x:44%;--cut:polygon(0 0,calc(100% - 1.7rem) 0,100% 1.7rem,100% 100%,0 100%)}
.gw-note--update::after{background:linear-gradient(225deg,transparent 50%,var(--fold) 50%) top right/1.7rem 1.7rem no-repeat,var(--grain),repeating-linear-gradient(90deg,transparent 0 1.1rem,rgba(18,40,12,.1) 1.1rem calc(1.1rem + 1px)),repeating-linear-gradient(180deg,transparent 0 1.1rem,rgba(18,40,12,.1) 1.1rem calc(1.1rem + 1px)),linear-gradient(180deg,var(--paper-hi) 0,var(--paper) 55%)}
@media (prefers-reduced-motion:reduce){.gw-note{transition:none}}