/* LabelLab — D11 Zine Collage VARIANT: monochrome + one neon accent (#ff2e88) */
:root{
  --paper:#faf8f5; --paper2:#f1eeea; --card:#ffffff;
  --ink:#141414; --ink2:#3d3d3d; --gray:#8a8a8a; --line:#141414;
  --pink:#ff2e88; --pink-soft:#ffd9e8;
  --radius:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--ink);
  line-height:1.65;font-size:16px;
  background-image:radial-gradient(#d9d4cd 1px, transparent 1px);
  background-size:26px 26px}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:'Archivo Black',sans-serif;letter-spacing:-.01em;line-height:1.15}

/* marker underline */
.mu{background:linear-gradient(transparent 62%, var(--pink-soft) 62%, var(--pink-soft) 96%, transparent 96%)}
.mu-pink{background:linear-gradient(transparent 60%, var(--pink) 60%, var(--pink) 94%, transparent 94%);color:#fff}

/* ---------- header: taped zine masthead ---------- */
.site-header{padding:26px 0 8px;position:relative}
.masthead{background:var(--card);border:3px solid var(--line);padding:16px 22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;
  transform:rotate(-.6deg);box-shadow:6px 6px 0 var(--line)}
.masthead::before,.masthead::after{content:"";position:absolute;top:-14px;width:90px;height:26px;
  background:rgba(20,20,20,.12);border-left:1px dashed var(--gray);border-right:1px dashed var(--gray)}
.masthead::before{left:36px;transform:rotate(-4deg)}
.masthead::after{right:36px;transform:rotate(3deg)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:40px;height:40px}
.brand b{font-family:'Archivo Black',sans-serif;font-size:1.5rem}
.brand b em{font-style:normal;color:var(--pink)}
.nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.88rem;
  padding:8px 12px;border:2px solid transparent;border-radius:255px 15px 225px 15px/15px 225px 15px 255px}
.nav a:hover{border-color:var(--line);background:var(--paper2)}
.nav a.active{background:var(--ink);color:#fff}
.nav a.cta{background:var(--pink);color:#fff;border-color:var(--line)}
.sticker-burst{position:absolute;top:-34px;right:-14px;width:104px;height:104px;
  display:flex;align-items:center;justify-content:center;transform:rotate(12deg);z-index:5}
.sticker-burst svg{position:absolute;inset:0;width:100%;height:100%}
.sticker-burst span{position:relative;font-family:'Permanent Marker',cursive;font-size:.82rem;
  color:#fff;text-align:center;line-height:1.25;transform:rotate(-8deg)}

/* ---------- hero ---------- */
.hero{padding:44px 0 10px;position:relative}
.hero h1{font-size:clamp(2rem,5vw,3.4rem);max-width:700px;transform:rotate(-.8deg)}
.hero .lede{max-width:640px;margin-top:16px;font-size:1.07rem;color:var(--ink2);background:var(--card);
  border:2px solid var(--line);padding:16px 20px;transform:rotate(.5deg);box-shadow:5px 5px 0 var(--line)}
.hero .lede strong{background:linear-gradient(transparent 60%, var(--pink-soft) 60%)}
.cut-strip{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.cut{background:var(--ink);color:#fff;font-family:'JetBrains Mono',monospace;font-size:.8rem;
  padding:9px 16px;transform:rotate(-1.2deg);border:2px solid var(--line)}
.cut:nth-child(2n){transform:rotate(1.1deg);background:var(--card);color:var(--ink)}
.cut:nth-child(3n){transform:rotate(-.6deg)}
.cut b{color:var(--pink)}
.cut:nth-child(2n) b{color:var(--pink)}

/* ---------- tool: the workbench ---------- */
.workbench{margin-top:36px;background:var(--card);border:3px solid var(--line);
  box-shadow:8px 8px 0 var(--line);transform:rotate(.4deg);position:relative}
.workbench::before{content:"";position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(1deg);
  width:130px;height:30px;background:rgba(255,46,136,.25);border-left:1px dashed var(--gray);border-right:1px dashed var(--gray)}
.wb-bar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:3px solid var(--line);
  background:var(--paper2);flex-wrap:wrap}
.wb-bar .dots{display:flex;gap:7px}
.wb-bar .dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:#fff}
.wb-bar .dots i:first-child{background:var(--pink)}
.wb-title{font-family:'Permanent Marker',cursive;font-size:1.25rem;transform:rotate(-1deg)}
.privacy-chip{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:.76rem;font-weight:800;
  background:var(--ink);color:#fff;padding:7px 14px;border-radius:255px 15px 225px 15px/15px 225px 15px 255px}
.privacy-chip svg{width:14px;height:14px;stroke:var(--pink)}
.wb-body{padding:26px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.opt-label{display:block;font-family:'Archivo Black',sans-serif;font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.opt-label .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  background:var(--pink);color:#fff;border-radius:50%;font-size:.72rem;margin-right:8px;border:2px solid var(--line)}
.topic-input{width:100%;background:var(--paper);border:2px solid var(--line);border-radius:2px;
  font-size:1rem;padding:12px 14px;font-family:'Permanent Marker',cursive;color:var(--ink)}
.topic-input:focus{outline:3px solid var(--pink-soft)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{background:#fff;border:2px solid var(--line);color:var(--ink);padding:9px 14px;
  font-size:.87rem;font-weight:700;cursor:pointer;font-family:inherit;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px}
.seg button:hover{background:var(--paper2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg button[aria-pressed="true"].pink-on{background:var(--pink);border-color:var(--line)}
.opt-hint{font-size:.8rem;color:var(--gray);margin-top:7px}
.num-row{display:flex;align-items:center;gap:12px}
input[type=range]{flex:1;accent-color:var(--pink)}
.range-val{font-family:'Archivo Black',sans-serif;color:var(--pink);min-width:2ch;text-align:right}
.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--line);
  color:var(--ink);padding:12px 22px;font-size:.95rem;font-weight:800;cursor:pointer;
  font-family:'Archivo Black',sans-serif;box-shadow:4px 4px 0 var(--line);
  border-radius:15px 225px 15px 255px/255px 15px 255px 15px;text-decoration:none}
.btn svg{width:17px;height:17px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.btn.primary{background:var(--pink);color:#fff}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:4px 4px 0 var(--line)}
.copy-note{font-size:.85rem;font-weight:700;color:var(--ink);min-height:1.4em;
  background:var(--pink-soft);padding:2px 10px;border-radius:4px}
.output{background:var(--paper);border:2px dashed var(--gray);padding:18px;min-height:120px}
.output ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.output li{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);
  padding:11px 14px;cursor:pointer;box-shadow:3px 3px 0 rgba(20,20,20,.15)}
.output li:nth-child(odd){transform:rotate(-.4deg)}
.output li:nth-child(even){transform:rotate(.4deg)}
.output li:hover{border-color:var(--pink)}
.output li .t{flex:1;font-family:'JetBrains Mono',monospace;font-size:.92rem}
.output li .cp{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  background:var(--ink);color:#fff;padding:4px 10px;border-radius:4px}
.output li:hover .cp{background:var(--pink)}
.output li.copied{border-color:var(--pink)}
.output li.copied .cp{background:var(--pink)}
.placeholder{color:var(--gray);text-align:center;padding:34px 10px;font-family:'Permanent Marker',cursive;font-size:1.1rem}
.output-meta{font-size:.78rem;color:var(--gray);margin-top:10px;font-family:'JetBrains Mono',monospace}
.limits{margin-top:22px;background:#fff;border:3px solid var(--line);padding:18px 20px;
  box-shadow:5px 5px 0 var(--pink);transform:rotate(-.3deg)}
.limits h3{display:flex;align-items:center;gap:9px;font-size:1.02rem;margin-bottom:10px}
.limits h3 svg{width:20px;height:20px;stroke:var(--pink)}
.limits ul{padding-left:20px;color:var(--ink2);font-size:.92rem;display:flex;flex-direction:column;gap:7px}

/* ---------- polaroid cards ---------- */
.section{margin-top:60px}
.section h2{font-size:1.8rem;margin-bottom:10px;display:inline-block;transform:rotate(-.5deg)}
.sub{color:var(--ink2);max-width:680px;margin-bottom:24px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.polaroid{background:#fff;border:2px solid var(--line);padding:12px 12px 18px;position:relative;
  box-shadow:5px 5px 0 rgba(20,20,20,.18)}
.polaroid:nth-child(3n+1){transform:rotate(-1.6deg)}
.polaroid:nth-child(3n+2){transform:rotate(1.1deg)}
.polaroid:nth-child(3n){transform:rotate(-.5deg)}
.polaroid::before{content:"";position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);
  width:84px;height:24px;background:rgba(20,20,20,.1);border-left:1px dashed var(--gray);border-right:1px dashed var(--gray)}
.polaroid .ph{height:110px;border:2px solid var(--line);margin-bottom:14px;display:flex;
  align-items:center;justify-content:center;background:var(--paper2)}
.polaroid .ph svg{width:44px;height:44px;stroke:var(--ink)}
.polaroid .ph.accent{background:var(--ink)}
.polaroid .ph.accent svg{stroke:var(--pink)}
.polaroid .cap{font-family:'Permanent Marker',cursive;font-size:1.05rem;margin-bottom:6px}
.polaroid .n{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--gray);
  text-transform:uppercase;letter-spacing:.1em;display:block;margin-bottom:6px}
.polaroid p{color:var(--ink2);font-size:.92rem}
.polaroid code{font-family:'JetBrains Mono',monospace;font-size:.82em;background:var(--paper2);padding:2px 6px}
a.polaroid{text-decoration:none;color:inherit;display:block}
a.polaroid:hover{border-color:var(--pink)}
.polaroid .go{display:inline-block;margin-top:10px;font-weight:800;font-size:.88rem;
  background:linear-gradient(transparent 60%, var(--pink-soft) 60%)}
.cta-box{margin-top:28px;background:var(--ink);color:#fff;border:3px solid var(--line);
  padding:28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;transform:rotate(.4deg);
  box-shadow:6px 6px 0 var(--pink)}
.cta-box h3{font-size:1.3rem;margin-bottom:6px}
.cta-box h3 .mu-pink{padding:0 4px}
.cta-box p{color:#d4d4d4;max-width:520px}
.cta-box .btn{margin-left:auto;background:#fff}
.faq details{background:#fff;border:2px solid var(--line);margin-bottom:12px;box-shadow:4px 4px 0 rgba(20,20,20,.12)}
.faq details:nth-child(odd){transform:rotate(-.3deg)}
.faq details:nth-child(even){transform:rotate(.3deg)}
.faq summary{padding:15px 20px;cursor:pointer;font-weight:800;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{color:var(--pink);font-size:1.4rem;font-family:'Archivo Black',sans-serif}
.faq .answer{padding:0 20px 18px;color:var(--ink2)}
.faq .answer a{color:var(--pink);font-weight:700}
.faq .answer strong{color:var(--ink)}

/* ---------- articles ---------- */
.crumb{font-size:.82rem;color:var(--gray);margin-bottom:14px}
.crumb a{color:var(--pink);font-weight:700;text-decoration:none}
.article h1{font-size:clamp(1.8rem,4vw,2.7rem);margin-bottom:14px;max-width:760px;transform:rotate(-.5deg)}
.article h1 .mu{padding:0 6px}
.article .lede{background:#fff;border:2px solid var(--line);padding:16px 20px;max-width:720px;
  margin-bottom:28px;box-shadow:4px 4px 0 var(--line);transform:rotate(.3deg)}
.article h2{font-size:1.5rem;margin:36px 0 12px;display:inline-block}
.article h3{font-family:'Inter',sans-serif;font-weight:800;font-size:1.1rem;margin:24px 0 8px}
.article p{color:var(--ink2);margin-bottom:14px;max-width:760px}
.article p strong,.article li strong{color:var(--ink)}
.article ul,.article ol{color:var(--ink2);margin:0 0 16px 22px;max-width:740px;display:flex;flex-direction:column;gap:8px}
.article a{color:var(--pink);font-weight:700}
.example{background:var(--ink);color:#f5f5f5;border-radius:2px;padding:16px 20px;margin:16px 0;
  max-width:760px;font-family:'JetBrains Mono',monospace;font-size:.87rem;line-height:2;box-shadow:5px 5px 0 var(--pink)}
.article .tip{background:#fff;border:2px solid var(--line);border-left:10px solid var(--pink);
  padding:16px 20px;margin:22px 0;max-width:760px;box-shadow:4px 4px 0 rgba(20,20,20,.12)}
.article .tip p{margin:0}
.article .warn{background:var(--pink-soft);border:2px solid var(--line);padding:16px 20px;margin:22px 0;max-width:760px}
.article .warn p{margin:0}
.article table{width:100%;max-width:760px;border-collapse:collapse;margin:18px 0;font-size:.9rem;background:#fff}
.article th{background:var(--ink);color:#fff;text-align:left;padding:11px 14px;border:2px solid var(--line)}
.article td{padding:11px 14px;border:2px solid var(--line);color:var(--ink2);vertical-align:top}
.dropcap::first-letter{font-family:'Archivo Black',sans-serif;font-size:3.2em;float:left;
  line-height:.9;padding:4px 10px 0 0;color:var(--pink)}
.related{margin-top:44px;background:#fff;border:3px solid var(--line);padding:24px;
  box-shadow:6px 6px 0 var(--line);transform:rotate(-.4deg)}
.related h3{font-size:1.05rem;margin-bottom:12px}
.related ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:8px}

/* ---------- footer ---------- */
footer{margin-top:70px;border-top:3px solid var(--line);padding:40px 0 30px;background:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:26px}
.foot-brand p{color:var(--ink2);font-size:.9rem;margin-top:10px;max-width:300px}
.foot-col h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;
  background:linear-gradient(transparent 60%, var(--pink-soft) 60%);display:inline-block}
.foot-col a{display:block;color:var(--ink2);text-decoration:none;font-size:.92rem;margin-bottom:8px;font-weight:600}
.foot-col a:hover{color:var(--pink)}
.foot-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.78rem;
  color:var(--gray);border-top:2px dashed var(--gray);padding-top:18px}

@media(max-width:900px){
  .opts{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .sticker-burst{display:none}
  .masthead{transform:none}
}
@media (prefers-reduced-motion:reduce){*{transform:none!important}}