/* APPxygen zine: shared design system.
   Photocopied 90s zine + mixtape J-card. Toner black on cool copier paper,
   riso blue second ink, fluoro highlighters, masking tape, staples, rubber stamps. */

:root{
  --desk:#D9DCDA;      /* copier glass / page around the zine */
  --sheet:#F2F3F1;     /* cool white copier paper */
  --sheet2:#E6E8E6;    /* second-generation copy grey */
  --toner:#000;
  --ink2:#4E5351;      /* faded toner for secondary text */
  --riso:#1E4FD6;      /* riso second ink (blue) */
  --pink:#FF4FA3;      /* fluoro highlighter */
  --yellow:#F2EF2E;    /* fluoro highlighter */
  --red:#C8102E;       /* rubber-stamp red */
  --tape:rgba(222,218,192,.82);
  --rec:#F0361E;
  /* Latin face first, Thai partner second: the browser picks per glyph */
  --marker:'Permanent Marker','Sriracha','Comic Sans MS',cursive;
  --type:'Courier Prime','Sarabun','Courier New',monospace;
  --stamp:'Special Elite','Sarabun','Courier New',monospace;
  --cut:'Anton','Kanit','Impact',sans-serif;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%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 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grunge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --wrap:1360px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--desk);color:var(--toner);
  font:400 1.0625rem/1.6 var(--type);
  overflow-x:clip;
}
body::before{ /* toner grain over everything */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  background-image:var(--noise);opacity:.1;mix-blend-mode:multiply;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px dashed var(--riso);outline-offset:4px}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:80;background:#000;color:#fff;padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
code,kbd,.path{font-family:'Courier Prime','Courier New',monospace}

/* ---------- Thai ----------
   Thai sits taller and has no word spaces: more leading, no tracking,
   and the browser's dictionary line breaking (keep-all would stop it). */
:lang(th) body,body:lang(th){line-height:1.8;font-size:1.0625rem}
:lang(th) .letraset{line-height:1.15;font-weight:700}
:lang(th) .marker,:lang(th) .tagline,:lang(th) .mast-note{line-height:1.45}
:lang(th) .stamp{letter-spacing:0}
:lang(th) .side{letter-spacing:0}
:lang(th) h1,:lang(th) h2,:lang(th) h3{letter-spacing:0}

/* ---------- top bar: label-maker tape ---------- */
.topbar{
  position:relative;z-index:20;max-width:var(--wrap);margin:0 auto;padding:16px 24px 0;
  display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;
}
.minilogo{display:flex;gap:1px;text-decoration:none;font-size:26px;line-height:1;margin-right:auto}
.minilogo span{display:inline-block;padding:.08em .1em 0;font-family:var(--cut)}
.minilogo span:nth-child(1){background:#fff;transform:rotate(-4deg)}
.minilogo span:nth-child(2){background:#000;color:var(--sheet);font-family:var(--stamp);font-size:.85em;transform:rotate(3deg)}
.minilogo span:nth-child(3){background:var(--riso);color:#fff;transform:rotate(-2deg)}
.minilogo span:nth-child(4){background:var(--pink);font-family:var(--marker);font-size:.82em;transform:rotate(5deg)}
.minilogo span:nth-child(5){background:var(--sheet2);transform:rotate(-3deg)}
.minilogo span:nth-child(6){background:#000;color:var(--yellow);font-family:var(--type);font-weight:700;font-size:.88em;transform:rotate(2deg)}
.minilogo span:nth-child(7){background:var(--yellow);transform:rotate(-5deg)}
.minilogo span:nth-child(8){background:#fff;font-family:var(--stamp);font-size:.85em;transform:rotate(3deg)}
.minilogo:hover span{animation:jiggle .35s ease}
.minilogo:hover span:nth-child(even){animation-delay:.05s}
@keyframes jiggle{50%{translate:0 -3px}}
body[data-page="index"] .minilogo{visibility:hidden}

.dymo-nav{display:flex;gap:10px;flex-wrap:wrap}
.tools{display:flex;gap:10px;align-items:center}
.langs{display:flex;gap:4px}
.dymo{
  display:inline-block;text-decoration:none;border:0;
  background:#141414;color:#f4f4f2;
  font:700 15px/1 'Courier Prime','Sarabun',monospace;letter-spacing:.14em;text-transform:uppercase;
  padding:9px 14px 8px;border-radius:2px;
  text-shadow:0 1px 0 rgba(255,255,255,.28),0 -1px 0 rgba(0,0,0,.6); /* embossed letters */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.4),2px 3px 0 rgba(0,0,0,.18);
  clip-path:polygon(0 0,100% 0,98% 50%,100% 100%,0 100%,2% 50%);
  transition:transform .12s;
}
.dymo:nth-child(odd){transform:rotate(-1.2deg)}
.dymo:nth-child(even){transform:rotate(1deg)}
.dymo:hover{background:var(--riso)}
.dymo[aria-current]{background:var(--yellow);color:#000;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.dymo-s{font-size:12.5px;padding:7px 10px 6px;letter-spacing:.1em}
.dymo:lang(th){letter-spacing:0;font-size:15px}
.dymo-s:lang(th){font-size:13.5px}
.sound[aria-pressed="false"]{color:#9a9e9c;text-decoration:line-through}

/* "read in Thai?" sticker */
.langhint{
  position:fixed;right:16px;bottom:16px;z-index:70;display:flex;gap:10px;align-items:center;
  background:var(--yellow);border:2px solid #000;padding:10px 12px;box-shadow:4px 4px 0 #000;transform:rotate(-2deg);
  font-family:var(--marker);font-size:1.1rem;
}
.langhint a{font-weight:400}
.langhint button{background:none;border:0;font:700 13px var(--type);text-decoration:underline;padding:4px}

/* ---------- shared paper bits ---------- */
.sheet{
  position:relative;background:var(--sheet);
  box-shadow:0 1px 0 rgba(0,0,0,.25), 6px 10px 0 rgba(0,0,0,.08);
}
.sheet::after{ /* darker copy edges */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.16) 100%);
  mix-blend-mode:multiply;
}
.tape{
  position:absolute;width:110px;height:30px;background:var(--tape);z-index:3;
  clip-path:polygon(2% 8%,10% 0,22% 6%,35% 0,50% 5%,63% 0,78% 6%,90% 0,100% 7%,98% 92%,88% 100%,75% 94%,60% 100%,46% 95%,30% 100%,16% 94%,4% 100%,0 90%);
  box-shadow:inset 0 0 12px rgba(120,110,70,.25);
}
.staple{position:absolute;width:34px;height:5px;border-radius:2px;background:linear-gradient(#bfc3c2,#6f7372 60%,#a7abaa);box-shadow:0 1px 1px rgba(0,0,0,.5);z-index:4}
.marker{font-family:var(--marker);font-weight:400;line-height:1.2}
.hl-y{background:linear-gradient(100deg,transparent 0 2%,var(--yellow) 3% 96%,transparent 98%) 0 60%/100% 70% no-repeat;mix-blend-mode:multiply}
.hl-p{background:linear-gradient(100deg,transparent 0 2%,var(--pink) 3% 96%,transparent 98%) 0 65%/100% 62% no-repeat}
.stamp{
  display:inline-block;font-family:var(--stamp);text-transform:uppercase;letter-spacing:.08em;
  border:3px solid currentColor;padding:.35em .7em .25em;border-radius:4px;line-height:1.1;
  -webkit-mask-image:var(--grunge);mask-image:var(--grunge);-webkit-mask-size:200px;mask-size:200px;
}
.st-red{color:var(--red);transform:rotate(-4deg)}
.st-blue{color:var(--riso);transform:rotate(3deg)}
.st-black{transform:rotate(-1deg)}

/* letraset rub-down headings (zine.js wobbles each letter, or each word in Thai) */
.letraset{font-family:var(--cut);font-weight:400;line-height:.92;letter-spacing:.01em;margin:0}
.letraset span{display:inline-block}
.letraset .lw{white-space:nowrap}

.cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:10px;background:#000;color:var(--sheet);text-decoration:none;border:0;
  font:700 1rem var(--type);padding:14px 18px;box-shadow:5px 5px 0 var(--pink);
}
.cta:hover{background:var(--riso)}
.cta.alt{background:var(--sheet);color:#000;border:2.5px solid #000;box-shadow:5px 5px 0 var(--yellow)}
.cta.alt:hover{background:var(--yellow)}
.cta small{font-weight:400;opacity:.8}
.cta.soon{position:relative;background:transparent;color:var(--ink2);border:2.5px dashed var(--ink2);box-shadow:none;cursor:default}
.cta.soon small{font-family:var(--marker);font-size:.95rem;opacity:1;color:var(--riso);transform:rotate(-3deg);display:inline-block}
.ctas{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}

/* ---------- HERO (home) ---------- */
.hero{position:relative;padding:4px 24px 72px;max-width:var(--wrap);margin:0 auto}
.mast{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 28px;margin:0 0 6px}
.ransom{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin:0;font-size:clamp(3.2rem,10vw,9.2rem);line-height:1}
.ransom span{
  display:inline-block;padding:.04em .09em 0;font-family:var(--cut);font-weight:400;
  clip-path:polygon(0 4%,8% 0,92% 3%,100% 0,97% 50%,100% 96%,90% 100%,10% 97%,0 100%,3% 50%);
}
.r1{background:#fff;transform:rotate(-4deg)}
.r2{background:#000;color:var(--sheet);transform:rotate(3deg) translateY(.05em);font-family:var(--stamp)!important;font-size:.82em}
.r3{background:var(--riso);color:#fff;transform:rotate(-2deg)}
.r4{background:var(--pink);font-family:var(--marker)!important;font-size:.8em;transform:rotate(5deg)}
.r5{background:var(--sheet2);transform:rotate(-3deg) translateY(.08em);font-size:.9em}
.r6{background:#000;color:var(--yellow);font-family:var(--type)!important;font-weight:700;transform:rotate(2deg);font-size:.86em}
.r7{background:var(--yellow);transform:rotate(-5deg)}
.r8{background:#fff;font-family:var(--stamp)!important;transform:rotate(3deg) translateY(-.04em);font-size:.84em}
.mast-note{font-family:var(--marker);font-size:clamp(1.25rem,2.2vw,1.75rem);line-height:1.2;max-width:22ch;transform:rotate(-2deg);margin:0 0 .6em}
.mast-note small{display:block;font-family:var(--type);font-size:1rem;transform:rotate(1deg);margin-top:.4em;color:var(--ink2)}
:lang(th) .mast-note{max-width:26ch}
.vol{color:var(--riso);font-size:14px;transform:rotate(6deg);margin-left:auto;align-self:flex-start}

.deckrow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:start;margin-top:28px}

/* cassette */
.tapebox{position:relative}
.cassette-wrap{position:relative;transform:rotate(-2.5deg);padding:14px}
.cassette{width:100%;height:auto;display:block;filter:drop-shadow(8px 10px 0 rgba(0,0,0,.14))}
.cassette-wrap .tape.t1{left:-10px;top:4px;transform:rotate(-28deg)}
.cassette-wrap .tape.t2{right:-12px;bottom:18px;transform:rotate(-24deg)}
.reel{transform-box:fill-box;transform-origin:center}
.playing .reel{animation:spin 1.8s linear infinite}
.winding .reel{animation:spin .35s linear infinite}
.winding.back .reel,.playing.back .reel{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.eject .cassette{animation:eject .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes eject{30%{transform:translateY(-26px) rotate(-1deg)}}

.transport{display:flex;gap:8px;align-items:stretch;margin:18px 0 0 40px;flex-wrap:wrap}
.key{
  min-width:64px;padding:12px 12px 10px;background:var(--sheet);border:2.5px solid #000;border-radius:3px;
  font:700 15px/1 var(--type);box-shadow:0 5px 0 #000;transition:transform .06s, box-shadow .06s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.key b{font-size:20px;line-height:1}
.key small{font-size:11px;letter-spacing:.08em}
.key:active,.key.down{transform:translateY(4px);box-shadow:0 1px 0 #000}
.key.play{background:var(--yellow)}
.counter{display:flex;align-items:center;gap:10px;margin-left:10px;font:700 15px var(--type)}
.counter output{background:#000;color:var(--sheet);font:400 26px/1 var(--cut);letter-spacing:.18em;padding:8px 6px 6px 10px;border-radius:2px}
.now{margin:22px 0 0 40px;font-family:var(--marker);font-size:1.25rem;transform:rotate(-1deg);min-height:1.6em}

/* J-card */
.jcard-wrap{position:relative;transform:rotate(1.6deg);margin-top:6px}
.jcard-wrap .staple.s1{top:-2px;left:38%;transform:rotate(-3deg)}
.jcard{display:grid;grid-template-columns:52px 1fr;background:var(--sheet);border:2px solid #000;position:relative}
.jcard::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 100% at 50% 50%, transparent 60%, rgba(0,0,0,.12) 100%)}
.spine{
  border-right:2px dashed #000;writing-mode:vertical-rl;transform:rotate(180deg);
  display:flex;align-items:center;justify-content:space-between;padding:14px 0;
  font-family:var(--cut);font-size:22px;letter-spacing:.08em;background:var(--riso);color:#fff;
}
.spine em{font:400 14px var(--marker);font-style:normal;letter-spacing:0}
.jfront{padding:22px 24px 18px}
.jfront h2{font-family:var(--marker);font-weight:400;font-size:2rem;line-height:1.05;margin:0 0 4px;transform:rotate(-1.5deg)}
:lang(th) .jfront h2{line-height:1.35}
.jfront .rec-by{margin:0 0 16px;color:var(--ink2);font-size:.95rem}
.side{font-family:var(--cut);font-size:1.35rem;letter-spacing:.06em;margin:14px 0 4px;display:flex;align-items:center;gap:10px}
.side::after{content:"";flex:1;border-top:2px solid #000}
.tracks{list-style:none;margin:0;padding:0}
.track{
  width:100%;display:grid;grid-template-columns:1.6em 1fr auto;gap:10px;align-items:baseline;text-align:left;
  background:none;border:0;border-bottom:1.5px dotted #000;padding:10px 4px 9px;position:relative;
}
.track .n{font-weight:700}
.track .t{font-size:1.12rem;font-weight:700}
.track .d{display:block;font-weight:400;font-size:.92rem;color:var(--ink2)}
.track .len{font-family:var(--stamp);font-size:.95rem}
.track:hover .t,.track[aria-current="true"] .t{background:linear-gradient(100deg,transparent 0 1%,var(--yellow) 2% 97%,transparent 99%) 0 70%/100% 70% no-repeat}
.track[aria-current="true"]::before{content:"▶";position:absolute;left:-22px;top:11px;color:var(--pink);font-size:15px}
.track.untitled .t{font-family:var(--marker);font-weight:400;color:var(--riso)}

.unfold{
  margin-top:16px;width:100%;background:#000;color:var(--sheet);border:0;padding:12px 14px;text-align:left;
  font:700 15px var(--type);display:flex;justify-content:space-between;align-items:center;
}
.unfold span:last-child{font-family:var(--marker);font-weight:400;color:var(--yellow);transition:transform .3s}
.unfold[aria-expanded="true"] span:last-child{transform:rotate(180deg)}
.liner{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s ease;perspective:900px}
.liner.open{grid-template-rows:1fr}
.liner > div{overflow:hidden;min-height:0}
.panel{
  border:2px solid #000;border-top:0;background:var(--sheet);padding:18px 24px 18px 76px;position:relative;
  transform-origin:top center;transform:rotateX(-92deg);transition:transform .45s cubic-bezier(.3,1.2,.5,1);
}
.panel:nth-child(even){background:var(--sheet2)}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:52px;border-right:2px dashed #000;background:repeating-linear-gradient(0deg,transparent 0 9px,rgba(0,0,0,.08) 9px 10px)}
.liner.open .panel{transform:none}
.liner.open .panel:nth-child(2){transition-delay:.15s}
.liner.open .panel:nth-child(3){transition-delay:.3s}
.panel h3{font-family:var(--marker);font-weight:400;font-size:1.3rem;margin:0 0 6px}
.panel p{margin:0;max-width:52ch}

/* ---------- SPREADS ---------- */
.spread-zone{max-width:var(--wrap);margin:0 auto;padding:40px 24px 70px;position:relative}
.spread{display:grid;grid-template-columns:5fr 7fr;position:relative}
.spread.flip{animation:flip .8s cubic-bezier(.2,.9,.3,1)}
@keyframes flip{from{transform:perspective(1800px) rotateY(-16deg) translateX(-2%);transform-origin:left center}to{transform:none}}
.page{padding:56px 48px 64px;position:relative;min-width:0}
.spread::before{ /* centre fold */
  content:"";position:absolute;top:0;bottom:0;left:calc(5 / 12 * 100%);width:40px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.14) 48%,rgba(0,0,0,.24) 50%,rgba(0,0,0,.1) 52%,transparent);
  pointer-events:none;z-index:2;
}
.spread .staple.c1{left:calc(5 / 12 * 100%);top:22%;transform:translateX(-50%) rotate(90deg)}
.spread .staple.c2{left:calc(5 / 12 * 100%);bottom:22%;transform:translateX(-50%) rotate(90deg)}
.spread.even{grid-template-columns:6fr 6fr}
.spread.even::before,.spread.even .staple.c1,.spread.even .staple.c2{left:50%}
.trackno{font-family:var(--marker);font-size:1.15rem;color:var(--riso);transform:rotate(-3deg);display:inline-block;margin-bottom:6px}
.spread h2.letraset{font-size:clamp(4rem,8vw,7.5rem)}
.tagline{font-family:var(--marker);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15;margin:10px 0 22px;transform:rotate(-1.5deg)}
.page p{max-width:60ch;margin:0 0 1em}
.facts{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin:26px 0 10px}
.facts .stamp{font-size:14px}
.credit{font-size:.9rem;color:var(--ink2);margin-top:22px}
.flyer{position:relative;margin:56px 0 0 -8px;transform:rotate(-2.5deg);max-width:440px}
.flyer img{border:6px solid #fff;outline:1px solid rgba(0,0,0,.35);filter:grayscale(1) contrast(1.5) brightness(1.1);box-shadow:5px 7px 0 rgba(0,0,0,.12)}
.flyer:hover img{filter:none}
.flyer .tape{left:40%;top:-14px;transform:rotate(3deg);width:90px;height:26px}
.flyer figcaption{margin-top:8px;font-size:1.05rem;transform:rotate(1deg)}

/* hinge doodle */
.hinge{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:28px 0 8px;padding:0;list-style:none}
.hinge li{text-align:center;font-size:.92rem;line-height:1.35}
.hinge svg{width:100%;max-width:120px;height:auto;margin:0 auto 4px;display:block}
.hinge b{display:block;font-family:var(--marker);font-weight:400;font-size:1.1rem}

/* collage of taped snapshots */
.collage{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:30px 18px;align-items:start}
.snap{position:relative;margin:0}
.snap img{background:#222;border:6px solid #fff;outline:1px solid rgba(0,0,0,.35);box-shadow:5px 7px 0 rgba(0,0,0,.12)}
.snap.xerox img{filter:grayscale(1) contrast(1.35) brightness(1.06);transition:filter .3s}
.snap.xerox:hover img{filter:none}
.snap figcaption{font-family:var(--marker);font-size:1.12rem;line-height:1.2;position:absolute;max-width:15ch;z-index:4}
.snap figcaption small{display:block;font-family:var(--type);font-size:.85rem;line-height:1.35;margin-top:3px;color:var(--ink2)}
.snap .arrow{position:absolute;z-index:4;overflow:visible;pointer-events:none}
.arrow path{fill:none;stroke:#000;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.arrow.blue path{stroke:var(--riso)}
.snap .tape{width:90px;height:26px}

/* ---------- AP-7 recorder widget (partial: ap7) ---------- */
.cutout{position:relative;max-width:340px;margin:30px auto 0}
.cutout .tape{left:-34px;top:auto;bottom:70px;transform:rotate(-38deg)}
.ap7svg{width:100%;height:auto;display:block;filter:drop-shadow(7px 9px 0 rgba(0,0,0,.16));overflow:visible;touch-action:none}
.ap7svg .btn{cursor:pointer}
.ap7svg .btn:focus{outline:none}
.ap7svg .btn:focus-visible .cap{stroke:var(--riso);stroke-width:4;stroke-dasharray:5 4}
.ap7svg .btn.down .cap{transform:translateY(2px)}
.ap7svg .reelg{cursor:grab}
.ap7svg .reelg:focus{outline:none}
.ap7svg .reelg:focus-visible circle.rim{stroke:var(--riso);stroke-width:5;stroke-dasharray:6 5}
.ap7svg .lever{cursor:ns-resize}
.ap7svg .lever:focus{outline:none}
.ap7svg .lever:focus-visible rect{stroke:var(--riso);stroke-width:4}
.dot{fill:var(--ap-dot-off)}
.dot.on{fill:var(--ap-dot)}
.ap-silver{--ap-body:#D5D5D1;--ap-ink:#2A2B2D;--ap-key:#EDEDEA;--ap-acc:#3557F0;--ap-rec:#F0361E;--ap-glass:#1F2022;--ap-dot:#EDEDEA;--ap-dot-off:#34363A}
.ap-graphite{--ap-body:#2E2F33;--ap-ink:#E4E5E8;--ap-key:#45474D;--ap-acc:#5C7BFF;--ap-rec:#FF4A2E;--ap-glass:#121315;--ap-dot:#E4E5E8;--ap-dot-off:#26272B}
.cutout .doodle{position:absolute;font-family:var(--marker);font-size:.98rem;line-height:1.18;max-width:9.5em;z-index:3;margin:0}
:lang(th) .cutout .doodle{line-height:1.4}
.doodle svg{position:absolute;overflow:visible}
.d1{left:-150px;top:70px;transform:rotate(-4deg)}
.d1 svg{left:90px;top:26px;width:60px;height:36px}
.d2{right:-150px;top:-6px;transform:rotate(4deg);color:var(--red)}
.d2 svg{left:-56px;top:10px;width:60px;height:30px}
.d3{left:-150px;top:52%;transform:rotate(-3deg)}
.d3 svg{left:100px;top:40px;width:50px;height:40px}
.d4{right:-160px;top:40%;transform:rotate(3deg)}
.d4 svg{left:-56px;top:24px;width:60px;height:40px}
.d5{right:-140px;bottom:26px;transform:rotate(-2deg);color:var(--riso)}
.d5 svg{left:-60px;top:-6px;width:60px;height:40px}
.ap-help{text-align:center;font-size:.92rem;color:var(--ink2);margin:16px auto 0;max-width:40ch}
.skins{display:flex;gap:10px;justify-content:center;margin-top:14px}
.skins button{background:var(--sheet);border:2px solid #000;padding:6px 12px;font:700 14px var(--type)}
.skins button[aria-pressed="true"]{background:#000;color:var(--sheet)}

.keylist{list-style:none;margin:20px 0 26px;padding:0;display:grid;gap:10px}
.keylist li{display:grid;grid-template-columns:3.2em 1fr;gap:12px;align-items:baseline}
kbd,.keylist kbd{font:700 15px 'Courier Prime',monospace;border:2px solid #000;border-radius:3px;padding:2px 6px;text-align:center;background:#fff;box-shadow:0 2px 0 #000;white-space:nowrap}
.aibox{position:relative;background:#fff;border:2px solid #000;padding:22px 24px 20px;margin:34px 0 10px;transform:rotate(-1deg);box-shadow:6px 6px 0 var(--riso)}
.aibox .tape{right:20px;top:-14px;transform:rotate(5deg);width:86px}
.aibox h3{font-family:var(--cut);font-weight:400;font-size:2rem;margin:0 0 8px;line-height:1}
:lang(th) .aibox h3{line-height:1.3}
.aibox h3 .marker{font-size:1.25rem;color:var(--riso);margin-left:8px}
.aibox p{margin:0 0 .7em}
.chips{display:flex;flex-wrap:wrap;gap:6px 8px;margin:10px 0 0;padding:0;list-style:none}
.chips li{font-size:.9rem;font-weight:700;border:1.5px solid #000;padding:2px 8px;background:var(--sheet)}
.chips li:nth-child(3n+1){background:var(--yellow)}

/* ---------- side B / blank tape ---------- */
.more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:56px 48px}
.blank-wrap{position:relative;transform:rotate(3deg);max-width:520px}
.blank-wrap .tape{left:-14px;top:10px;transform:rotate(-30deg)}
.more h2.letraset{font-size:clamp(3rem,6vw,5.2rem)}
.more p{max-width:46ch}
.more .cta{box-shadow:5px 5px 0 var(--yellow)}

/* ---------- inner pages: shared building blocks ---------- */
.zone{max-width:var(--wrap);margin:0 auto;padding:28px 24px 56px;position:relative}
.zone.narrow{max-width:980px}
.leaf{padding:56px 56px 64px}           /* a single sheet of zine */
.leaf + .leaf{margin-top:40px}
.leaf.tilt-l{transform:rotate(-.6deg)}
.leaf.tilt-r{transform:rotate(.5deg)}
.leaf.grey{background:var(--sheet2)}
.h-cut{font-family:var(--cut);font-weight:400;font-size:clamp(2.6rem,5.5vw,4.4rem);line-height:.95;margin:0 0 12px}
:lang(th) .h-cut{line-height:1.2;font-weight:700}
.h-marker{font-family:var(--marker);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;margin:0 0 10px;transform:rotate(-1deg)}
:lang(th) .h-marker{line-height:1.4}
.lede{font-size:1.15rem;max-width:58ch}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:28px 40px}
.prose p,.prose li{max-width:66ch}
.prose h3{font-family:var(--cut);font-weight:400;font-size:1.6rem;letter-spacing:.02em;margin:1.6em 0 .3em;line-height:1.1}
:lang(th) .prose h3{font-weight:700;line-height:1.35}

/* steps: only for real sequences (install, setup) */
.steps{list-style:none;margin:24px 0 0;padding:0;counter-reset:step;display:grid;gap:22px}
.steps > li{counter-increment:step;display:grid;grid-template-columns:3.2rem 1fr;gap:14px;align-items:start}
.steps > li::before{
  content:counter(step);font-family:var(--cut);font-size:1.7rem;line-height:1;text-align:center;
  border:2.5px solid #000;border-radius:50%;width:2.9rem;height:2.9rem;display:grid;place-items:center;
  background:var(--sheet);transform:rotate(-6deg);box-shadow:2px 3px 0 #000;
}
.steps > li:nth-child(3n+2)::before{background:var(--yellow)}
.steps > li:nth-child(3n)::before{background:var(--pink)}
.steps h3{font-family:var(--type);font-weight:700;font-size:1.12rem;margin:.35em 0 .25em}
.steps p{margin:0 0 .5em;max-width:62ch}

/* sticky note */
.note{
  position:relative;background:var(--yellow);padding:22px 22px 18px;box-shadow:4px 6px 0 rgba(0,0,0,.14);
  transform:rotate(1.5deg);max-width:420px;
}
.note.pink{background:#FFB3D6}
.note.blue{background:#CFDCFF}
.note .tape{left:50%;top:-14px;transform:translateX(-50%) rotate(-3deg);width:84px;height:26px}
.note h3{font-family:var(--marker);font-weight:400;font-size:1.3rem;margin:0 0 6px;line-height:1.2}
.note p{margin:0 0 .6em}

/* fold-out FAQ */
.faq{border-top:2px solid #000}
.faq details{border-bottom:1.5px dotted #000}
.faq summary{cursor:pointer;list-style:none;padding:14px 36px 14px 4px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:8px;font:400 1.6rem var(--marker);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--red)}
.faq details > :not(summary){margin:0 4px 16px;max-width:64ch}

/* path/menu breadcrumbs inside copy */
.path{background:#fff;border:1.5px solid #000;padding:0 5px;font-size:.92em;white-space:nowrap}
code{background:#fff;border:1px dashed #000;padding:0 4px;font-size:.92em;word-break:break-all}

/* legal / typewritten documents */
.doc{max-width:900px;margin:0 auto}
.doc .leaf{padding:64px 72px 72px}
.doc h1{font-family:var(--cut);font-weight:400;font-size:clamp(2.8rem,7vw,5rem);line-height:.95;margin:0 0 10px}
:lang(th) .doc h1{font-weight:700;line-height:1.2}
.doc .eff{font-family:var(--stamp);color:var(--red);font-size:1rem;transform:rotate(-2deg);display:inline-block;margin:0 0 26px}
.doc h2{font-family:var(--type);font-weight:700;font-size:1.25rem;margin:2em 0 .4em;padding-bottom:4px;border-bottom:2px solid #000;display:inline-block}
.doc p,.doc li{max-width:68ch}
.doc ul{padding-left:1.2em}
.doc li{margin:0 0 .45em}
.doc li::marker{content:"✶  ";color:var(--riso)}
.margin-note{font-family:var(--marker);color:var(--riso);font-size:1.1rem;line-height:1.25;transform:rotate(-2deg);display:block;margin:.4em 0 1em}

/* ---------- FOOTER (back of J-card) ---------- */
.jback{max-width:var(--wrap);margin:30px auto 0;padding:0 24px 90px}
.jback-card{display:grid;grid-template-columns:52px 1fr;border:2px solid #000;background:var(--sheet2);position:relative}
.jback-card .spine{background:#000;color:var(--sheet)}
.fine{padding:26px 30px 22px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px 36px;font-size:.92rem;line-height:1.5}
.fine h3{font-family:var(--cut);font-weight:400;font-size:1.3rem;letter-spacing:.04em;margin:0 0 8px}
:lang(th) .fine h3{font-weight:700}
.fine ul{list-style:none;margin:0;padding:0}
.fine li{margin:0 0 4px}
.fine a{text-decoration-thickness:1.5px;text-underline-offset:3px}
.fine a:hover{background:var(--yellow)}
.fine-about{margin:0 0 10px}
.fine .small{grid-column:1 / -1;border-top:1.5px dashed #000;padding-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-family:var(--stamp);font-size:.9rem}
.home-taping{font-family:var(--marker);font-size:1.3rem;transform:rotate(-2deg);display:inline-block}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .d1,.d3{left:-120px}.d2,.d4,.d5{right:-120px}
}
@media (max-width:1020px){
  .deckrow{grid-template-columns:1fr;gap:34px}
  .transport,.now{margin-left:10px}
  .jcard-wrap{max-width:620px}
  .spread,.spread.even{grid-template-columns:1fr}
  .spread::before,.spread .staple{display:none}
  .page{padding:44px 26px 54px}
  .page + .page{border-top:2px dashed rgba(0,0,0,.35)}
  .cutout .doodle{position:static;transform:none!important;max-width:none;margin:0}
  .doodle svg{display:none}
  .doodles-m{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:22px}
  .cutout .tape{bottom:auto;top:200px;left:-20px}
  .more{grid-template-columns:1fr;padding:44px 26px}
  .fine{grid-template-columns:1fr 1fr}
  .leaf{padding:44px 30px 50px}
  .doc .leaf{padding:48px 32px 56px}
}
@media (min-width:1021px){.doodles-m{display:contents}}
@media (max-width:640px){
  body{font-size:1rem}
  .topbar{padding:12px 16px 0;gap:10px}
  .minilogo{font-size:21px}
  .dymo-nav{order:3;width:100%;gap:8px}
  .dymo{font-size:13.5px;padding:8px 11px 7px}
  .hero{padding:12px 16px 50px}
  .spread-zone,.zone{padding:24px 10px 44px}
  .jback{padding:0 10px 80px}
  .page{padding:38px 18px 48px}
  .leaf,.doc .leaf{padding:36px 18px 44px}
  .more{padding:38px 18px}
  .vol{display:none}
  .mast{gap:6px}
  .ransom{font-size:clamp(2.6rem,15.5vw,5rem)}
  .key{min-width:0;flex:1;padding:10px 4px 8px}
  .counter{width:100%;margin:8px 0 0}
  .jfront{padding:18px 16px 14px}
  .jcard,.jback-card{grid-template-columns:38px 1fr}
  .spine{font-size:17px}
  .panel{padding:16px 16px 16px 52px}
  .panel::before{width:38px}
  .collage{display:flex;flex-direction:column;gap:20px}
  .snap{margin:0!important}
  .snap figcaption{position:static;transform:none!important;max-width:none;margin-top:10px;text-align:left!important}
  .snap .arrow{display:none}
  .s-deck{max-width:300px;align-self:center}
  .hinge{gap:4px}
  .doodles-m{grid-template-columns:1fr;margin-bottom:16px}
  .fine{grid-template-columns:1fr;padding:20px 16px}
  .track[aria-current="true"]::before{left:-14px}
  .steps > li{grid-template-columns:2.6rem 1fr;gap:10px}
  .steps > li::before{width:2.4rem;height:2.4rem;font-size:1.35rem}
  .langhint{left:12px;right:12px;bottom:12px}
}
@media (hover:none){.hover-hint{display:none!important}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}