/* Foldman zine issue: page extras on top of zine.css */

/* ---------- hero ---------- */
.fm-hero{
  max-width:var(--wrap);margin:0 auto;padding:10px 24px 40px;position:relative;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:30px 56px;align-items:center;
}
.fm-title{font-size:clamp(5.2rem,15.5vw,14rem);line-height:.82;margin:4px 0 0 -6px;letter-spacing:-.005em}
.fm-tag{font-family:var(--marker);font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.1;margin:10px 0 22px;transform:rotate(-2deg);transform-origin:left}
:lang(th) .fm-tag{line-height:1.45}
.fm-hero .lede{margin:0 0 6px}
.fm-fine{font-size:.95rem;color:var(--ink2);max-width:58ch;margin:18px 0 0}
.fm-hero .facts{margin:22px 0 0}
.fm-hero-art{position:relative;justify-self:center;width:min(100%,360px);margin:30px 40px 40px 0}
.fm-phone{margin:0;position:relative;transform:rotate(3deg)}
.fm-phone img{border-radius:22px;border:7px solid #111214;outline:2px solid #000;box-shadow:10px 14px 0 rgba(0,0,0,.16)}
.fm-phone .tape{left:28%;top:-14px;transform:rotate(-6deg)}
.fm-icon{position:absolute;width:118px;right:-46px;top:-26px;border-radius:26px;transform:rotate(9deg);border:3px solid #000;box-shadow:4px 5px 0 #000;z-index:4}
.fm-scrawl{position:absolute;font-family:var(--marker);font-size:1.2rem;line-height:1.2;margin:0;z-index:5}
:lang(th) .fm-scrawl{line-height:1.45}
.fm-scrawl-1{left:-170px;top:56%;max-width:8em;transform:rotate(-6deg)}
.fm-arrow-1{position:absolute;left:-84px;top:calc(56% + 62px);width:80px;height:72px}
.fm-scrawl-2{right:-40px;bottom:-34px;color:var(--red);transform:rotate(-4deg)}

/* ---------- hinge toy ---------- */
.fm-hinge-leaf{padding-bottom:56px}
.fm-hinge-leaf .h-cut{font-size:clamp(2.8rem,6.4vw,5.4rem)}
.fm-hinge{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px 48px;margin-top:28px;align-items:start}
.fm-fold{width:100%;height:auto;display:block;overflow:visible}
.fm-deg{font:400 26px var(--marker);fill:var(--riso)}
.fm-inner,.fm-cover{transition:fill .25s}
.fm-hinge[data-pose="open"] .fm-inner,.fm-hinge[data-pose="half"] .fm-inner{fill:var(--yellow)}
.fm-hinge[data-pose="closed"] .fm-cover{fill:var(--yellow)}
.fm-mini-reel{transform-box:fill-box;transform-origin:center}
.fm-hinge.running .fm-mini-reel{animation:spin 1.6s linear infinite}
.fm-mini{transition:opacity .2s}
.fm-hinge:not(.running) .fm-mini{opacity:.55}

.fm-controls{margin-top:10px}
.fm-slide-l{display:block;font-weight:700;margin-bottom:4px}
.fm-poses{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 16px}
.fm-pose{background:var(--sheet);border:2.5px solid #000;border-radius:3px;padding:10px 14px 8px;font:700 1rem var(--type);box-shadow:0 4px 0 #000;transition:transform .06s,box-shadow .06s}
.fm-pose:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.fm-pose[aria-pressed="true"]{background:var(--yellow);transform:translateY(3px);box-shadow:0 1px 0 #000}
.fm-bench{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-weight:700}
.fm-bench small{display:block;font-weight:400;color:var(--ink2);font-size:.9rem}
.fm-bench input,.fm-seg input{accent-color:#000;width:20px;height:20px;margin:3px 0 0;flex:none}
.fm-status{font-family:var(--marker);font-size:1.3rem;line-height:1.25;margin:18px 0 0;min-height:2.6em;transform:rotate(-1deg)}
:lang(th) .fm-status{line-height:1.5}
.fm-hinge.running .fm-status{color:var(--red)}
.fm-hinge.running .fm-status::before{content:"▶ "}

/* range inputs drawn as a fader slot */
.fm-hinge input[type=range],.fm-bench-ctl input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;margin:0;cursor:pointer;
}
.fm-hinge input[type=range]::-webkit-slider-runnable-track,.fm-bench-ctl input[type=range]::-webkit-slider-runnable-track{height:10px;background:#000;border-radius:5px;box-shadow:inset 0 0 0 3px #3a3c3b}
.fm-hinge input[type=range]::-moz-range-track,.fm-bench-ctl input[type=range]::-moz-range-track{height:10px;background:#000;border-radius:5px}
.fm-hinge input[type=range]::-webkit-slider-thumb,.fm-bench-ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:34px;margin-top:-12px;background:var(--pink);border:2.5px solid #000;border-radius:3px;
  box-shadow:2px 3px 0 #000;background-image:linear-gradient(#000,#000);background-size:12px 2px;background-position:center;background-repeat:no-repeat;
}
.fm-hinge input[type=range]::-moz-range-thumb,.fm-bench-ctl input[type=range]::-moz-range-thumb{width:18px;height:30px;background:var(--pink);border:2.5px solid #000;border-radius:3px;box-shadow:2px 3px 0 #000}
input[type=range]:focus-visible{outline:3px dashed var(--riso);outline-offset:4px}

.fm-view{position:relative}
.fm-shots{position:relative;display:grid;place-items:center;min-height:340px;background:#1a1b1d;border:6px solid #fff;outline:1px solid rgba(0,0,0,.35);box-shadow:6px 8px 0 rgba(0,0,0,.14);transform:rotate(1.2deg);padding:14px}
.fm-shots::before{content:"";position:absolute;width:96px;height:28px;left:50%;top:-16px;transform:translateX(-50%) rotate(-3deg);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%)}
.fm-shot{margin:0;width:100%}
.fm-hinge[data-pose="closed"] .fm-shots{width:fit-content;max-width:100%;margin-inline:auto}
.fm-shot img{width:100%;max-height:420px;object-fit:contain}
.fm-shot-tall img{max-height:420px;width:auto;margin:0 auto}
.fm-shot.flash{animation:flash .35s ease-out}
@keyframes flash{0%{filter:brightness(2.4) grayscale(1) contrast(2);opacity:.4}100%{filter:none;opacity:1}}
.fm-copy{margin-top:26px}
.fm-copy h3{font-family:var(--cut);font-weight:400;font-size:1.7rem;line-height:1.05;margin:0 0 8px}
:lang(th) .fm-copy h3{font-weight:700;line-height:1.35}
.fm-angle-note{display:inline-block;font:400 1.05rem var(--marker);color:var(--riso);transform:rotate(-2deg);margin-left:6px}
.fm-copy p{margin:0;max-width:56ch}

/* ---------- J-card features ---------- */
.fm-notes{max-width:1180px}
.fm-jwrap{position:relative;transform:rotate(-.8deg)}
.fm-jwrap > .tape{right:-20px;top:-4px;transform:rotate(28deg)}
.fm-jcard .spine{background:var(--rec);color:#000}
.fm-jcard .jfront{padding:30px 34px 26px}
.fm-jcard h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:14px}
.fm-sides{display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
.fm-tracks{list-style:none;margin:0;padding:0;counter-reset:trk 0}
.fm-tracks[start="5"]{counter-reset:trk 4}
.fm-tracks li{counter-increment:trk;position:relative;padding:12px 0 12px 2.2em;border-bottom:1.5px dotted #000;color:var(--ink2);font-size:.98rem;line-height:1.5}
.fm-tracks li::before{content:counter(trk) ".";position:absolute;left:2px;top:12px;font-weight:700;color:#000}
.fm-tracks b{display:block;color:#000;font-size:1.12rem}
.fm-tracks li:hover b{background:linear-gradient(100deg,transparent 0 1%,var(--yellow) 2% 97%,transparent 99%) 0 70%/100% 70% no-repeat}
:lang(th) .fm-jcard .side,:lang(th) .fm-types-list li{letter-spacing:0}
.fm-hidden-track{margin:20px 0 0;font-size:.95rem;color:var(--ink2)}
.fm-hidden-track .marker{color:var(--riso);font-size:1.15rem;margin-right:4px}

/* ---------- bench toy ---------- */
.fm-bench-leaf .h-cut{font-size:clamp(2.6rem,5.6vw,4.6rem)}
.fm-benchgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:36px 48px;align-items:start;margin-top:26px}
.fm-tape{position:relative;transform:rotate(-1.5deg);margin:6px 0 26px}
.fm-tape svg,.fm-dirt{display:block;width:100%;height:auto}
.fm-tape-base{filter:drop-shadow(8px 10px 0 rgba(0,0,0,.14))}
.fm-dirt,.fm-tape-top{position:absolute;inset:0;width:100%;height:100%}
.fm-dirt{touch-action:none;cursor:grab}
.fm-dirt.rubbing{cursor:grabbing}
.fm-tape-top{pointer-events:none;overflow:visible}
.fm-hub{pointer-events:all;cursor:grab;touch-action:none}
.fm-hub:focus{outline:none}
.fm-hub:focus-visible circle{stroke:var(--riso);stroke-width:4;stroke-dasharray:6 5}
.fm-label{font-size:26px;fill:#1b1b1b}
.lbl-hand{font-family:var(--marker)}
.lbl-type{font-family:var(--stamp)}
.fm-yellow{opacity:0;mix-blend-mode:multiply;pointer-events:none}
.fm-scratches path{opacity:0;transition:opacity .2s}
.fm-rub-hint{right:4%;bottom:-30px;color:var(--riso);transform:rotate(-3deg);font-size:1.1rem;opacity:0;transition:opacity .3s}
.fm-tape.dirty .fm-rub-hint{opacity:1}

.fm-bench-ctl{display:grid;gap:26px}
.fm-field .h-marker{font-size:1.45rem;margin:0 0 8px;display:block}
.fm-field input[type=text]{
  width:100%;font:400 1.25rem var(--marker);padding:10px 12px 8px;background:#fff;border:2.5px solid #000;border-radius:2px;
  box-shadow:4px 4px 0 var(--yellow);
}
.fm-field input[type=text]:focus-visible{outline:3px dashed var(--riso);outline-offset:3px}
.fm-seg{display:flex;flex-wrap:wrap;gap:10px 18px;margin:12px 0 0}
.fm-seg label{display:flex;gap:8px;align-items:center;cursor:pointer;font-weight:700}
.fm-seg label:last-child span{font-family:var(--stamp);font-weight:400}
.fm-seg label:first-child span{font-family:var(--marker);font-weight:400;font-size:1.1rem}
.fm-help{font-size:.92rem;color:var(--ink2);margin:8px 0 0;max-width:42ch}
.fm-out{display:block;font-family:var(--marker);font-size:1.12rem;margin:8px 0 0;line-height:1.3}
:lang(th) .fm-out{line-height:1.5}
.fm-wipe{margin-top:14px;font-size:.95rem;padding:10px 14px}

/* ---------- collage ---------- */
.fm-snaps-h{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 34px 10px;transform:rotate(-2deg)}
.fm-collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 28px;align-items:start}
.fm-collage .snap figcaption{position:static;max-width:none;margin-top:12px}
.fm-s1{grid-column:1 / span 6;transform:rotate(-2deg)}
.fm-s1 .tape{left:40%;top:-12px;transform:rotate(4deg)}
.fm-s2{grid-column:7 / span 6;transform:rotate(1.8deg);margin-top:60px}
.fm-s2 .tape{right:-14px;top:-6px;transform:rotate(32deg)}
.fm-s3{grid-column:1 / span 3;transform:rotate(2.5deg)}
.fm-s3 .tape{left:-12px;top:-6px;transform:rotate(-30deg)}
.fm-s4{grid-column:4 / span 5;transform:rotate(-1.4deg);margin-top:40px}
.fm-s4 .tape{left:46%;top:-12px;transform:rotate(-4deg)}
.fm-s5{grid-column:9 / span 4;transform:rotate(3deg);margin-top:110px}
.fm-s5 .tape{right:20%;top:-12px;transform:rotate(6deg)}
.fm-s3 figcaption{color:var(--red)}
.fm-s4 figcaption{color:var(--riso)}

/* ---------- install + music ---------- */
.fm-howto .steps > li > div{min-width:0}
.fm-install .path,.fm-music .path{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.fm-own{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px 56px;align-items:center}
.fm-own .lede{max-width:30ch}
.fm-own > div:first-child p{max-width:46ch}
.fm-why{max-width:none;transform:rotate(-1.2deg)}
.fm-rituals{list-style:none;padding:0;margin:12px 0 14px}
.fm-rituals li{position:relative;padding-left:32px;margin:8px 0;font-family:var(--marker);font-size:1.1rem;line-height:1.3}
.fm-rituals li::before{content:"";position:absolute;left:0;top:.1em;width:22px;height:20px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M2 11 C5 13 7 16 8 18 C11 11 15 5 20 2' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat}
.fm-howto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:30px 56px;align-items:start}
.fm-aside{display:grid;gap:30px;padding-top:70px}
.fm-aside .note{max-width:none}
.fm-aside .note:nth-child(2){transform:rotate(-1.5deg)}
.fm-aside .cta{margin-top:6px}
.fm-sig{border:2px dashed #000;padding:12px 14px;background:#fff;transform:rotate(.6deg)}
.fm-sig summary{cursor:pointer;font-weight:700}
.fm-sig p{font-size:.92rem;margin:10px 0 6px}
.fm-sig code{display:block;font-size:.82rem;line-height:1.5;word-break:break-all;padding:6px 8px}
.fm-sig p code{display:inline;padding:0 4px}
.fm-faq-h{margin-top:48px}
.fm-install .faq{max-width:900px}

.fm-types-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.fm-types-list li{
  font:400 1.25rem var(--cut);letter-spacing:.04em;padding:8px 12px 6px;background:#fff;border:2px solid #000;
  box-shadow:3px 3px 0 #000;transform:rotate(var(--r,-2deg))
}
.fm-types-list li:nth-child(2n){--r:2deg;background:var(--yellow)}
.fm-types-list li:nth-child(3n){--r:-1deg}
.fm-types-list small{font:700 .75rem var(--type);margin-left:4px}

/* ---------- privacy ---------- */
.fm-privacy{text-align:center;padding:30px 10px}
.fm-privacy .h-cut{font-size:clamp(2.4rem,5.2vw,4.2rem)}
.fm-privacy p{max-width:58ch;margin:0 auto 1em}
.fm-nos{list-style:none;padding:0;margin:26px auto 26px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 22px}
.fm-nos .stamp{font-size:clamp(1rem,2vw,1.35rem)}
.fm-nos li:nth-child(2) .stamp{transform:rotate(2deg)}
.fm-nos li:nth-child(4) .stamp{transform:rotate(5deg)}

/* ---------- origin ---------- */
#origin .page{display:flex;flex-direction:column;justify-content:center}
.fm-origin{max-width:380px;margin:10px auto 0;transform:rotate(2deg)}
.fm-origin .tape{left:36%;top:-12px;transform:rotate(-4deg)}
.fm-origin figcaption{position:static;max-width:none;margin-top:12px;font-size:1.05rem}
.fm-origin figcaption a{font-family:var(--type);font-size:.9rem}

/* ---------- thank-you slip (a shop receipt) ---------- */
.fm-slip{
  position:relative;max-width:520px;margin:20px auto;background:#fff;padding:34px 34px 40px;transform:rotate(-1.2deg);
  box-shadow:6px 8px 0 rgba(0,0,0,.12);font-size:1rem;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 12px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 12px repeat-x;
}
.fm-slip-shop{font-family:var(--stamp);text-align:center;margin:0 0 18px;line-height:1.4;font-size:.95rem;border-bottom:2px dashed #000;padding-bottom:14px}
.fm-slip h2{font-family:var(--marker);font-weight:400;font-size:1.9rem;line-height:1.15;margin:0 0 14px;transform:rotate(-1.5deg)}
:lang(th) .fm-slip h2{line-height:1.45}
.fm-receipt{margin:0 0 18px;font-family:var(--stamp)}
.fm-receipt div{display:flex;justify-content:space-between;gap:16px;padding:4px 0}
.fm-receipt dt{flex:1}
.fm-receipt dd{margin:0}
.fm-total{border-top:2px solid #000;margin-top:6px;padding-top:8px!important;font-size:1.2rem}
.fm-total dd{color:var(--red)}
.fm-smile{font-family:var(--marker);font-size:1.2rem}
.fm-sign{display:flex;align-items:center;gap:10px;font-family:var(--marker);font-size:1.2rem;color:var(--riso);margin:0}

/* ---------- next tracks ---------- */
.fm-next{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:980px}
.fm-next-card{display:block;text-decoration:none;background:var(--sheet);border:2.5px solid #000;padding:22px 26px;box-shadow:6px 6px 0 var(--pink);transform:rotate(-1deg);transition:transform .15s}
.fm-next-card:hover{transform:rotate(0) translateY(-3px);background:var(--yellow)}
.fm-next-ap7{transform:rotate(1.2deg);box-shadow:6px 6px 0 var(--riso)}
.fm-next-card b{display:block;font-family:var(--cut);font-weight:400;font-size:2.2rem;line-height:1.05}
:lang(th) .fm-next-card b{font-weight:700;line-height:1.35}
.fm-next-card > span:last-child{display:block;color:var(--ink2);margin-top:4px}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .fm-scrawl-1,.fm-arrow-1{display:none}
}
@media (max-width:1020px){
  .fm-own{grid-template-columns:minmax(0,1fr)}
  .fm-hero{grid-template-columns:1fr;gap:10px}
  .fm-hero-art{margin:40px auto 50px;width:min(78%,320px)}
  .fm-hinge,.fm-benchgrid,.fm-howto{grid-template-columns:minmax(0,1fr)}
  .fm-aside{padding-top:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
  .fm-collage{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fm-s1,.fm-s2{grid-column:span 6;margin-top:0}
  .fm-s3{grid-column:1 / span 2}
  .fm-s4{grid-column:3 / span 4;margin-top:20px}
  .fm-s5{grid-column:2 / span 4;margin-top:0}
}
@media (max-width:640px){
  .fm-hero{padding:6px 16px 30px}
  .fm-title{font-size:clamp(4rem,23vw,7rem);margin-left:-3px}
  .fm-icon{width:84px;right:-26px;top:-20px;border-radius:18px}
  .fm-scrawl-2{right:-6px;bottom:-40px}
  .fm-shots{min-height:240px;padding:8px}
  .fm-shot img,.fm-shot-tall img{max-height:340px}
  .fm-jcard .jfront{padding:20px 16px 18px}
  .fm-jwrap{transform:none}
  .fm-sides{grid-template-columns:1fr}
  .fm-collage{display:flex;flex-direction:column;gap:40px}
  .fm-collage .snap{margin:0}
  .fm-s3{max-width:70%;align-self:center}
  .fm-slip{padding:28px 20px 36px}
  .fm-next{grid-template-columns:1fr}
  .fm-tape{margin-bottom:34px}
}
@media (prefers-reduced-motion:reduce){
  .fm-shot.flash{animation:none}
}