/* fine print: terms, privacy, contact postcard, 404 chewed tape.
   Builds on zine.css (.doc, .leaf, .note, .faq, .stamp, .cta, .counter). */

/* ================= legal sheets (terms, privacy) ================= */
.fp-zone{padding-top:40px}
.fp-doc{position:relative}
.fp-doc .leaf{--pl:72px}
.fp-staple{top:18px;left:46px;transform:rotate(-38deg)}
.fp-head h1{margin-bottom:14px}
:lang(th) .fp-doc h1{font-size:clamp(2.3rem,5.4vw,3.8rem)}
.fp-doc .fp-eff{font-size:1.25rem;transform:rotate(-4deg);margin:0 0 22px;animation:fp-slam .45s cubic-bezier(.2,1.5,.45,1) .2s both}
@keyframes fp-slam{from{transform:scale(2.4) rotate(-14deg);opacity:0}55%{opacity:1}to{transform:rotate(-4deg)}}
.fp-intro{font-size:1.1rem;max-width:56ch;margin:0}

/* "in plain words" sticky note */
.fp-top{margin-bottom:12px}
.fp-doc .fp-plain{max-width:none;transform:rotate(1.6deg);margin:28px 0 8px}
.fp-doc .fp-plain h2{font-family:var(--marker);font-weight:400;font-size:1.5rem;line-height:1.2;margin:0 0 8px;padding:0;border:0;display:block}
:lang(th) .fp-doc .fp-plain h2{line-height:1.45}
.fp-plain ul{margin:0;padding-left:1.1em}
.fp-plain li{margin:0 0 .5em;max-width:none}
.fp-doc .fp-plain li::marker{content:"✓  ";color:var(--red);font-weight:700}
.fp-plain-foot{font-size:.88rem;margin:10px 0 0;color:var(--ink2)}

/* sections */
.fp-sec{scroll-margin-top:24px}
.fp-no{font-family:var(--cut);font-weight:400;color:var(--riso);margin-right:.25em}
.fp-doc .margin-note{transform:rotate(-2.5deg)}
.fp-sign{margin:56px 0 0;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;justify-content:flex-end}
.fp-sign .marker{font-size:1.35rem;transform:rotate(-2deg);display:inline-block}
.fp-sign-by{font-family:var(--stamp);font-size:.95rem;color:var(--ink2)}

/* privacy: index tabs on top of the sheet, one colour per part */
.sec-fm,.tab-fm{--c:var(--pink)}
.sec-ap,.tab-ap{--c:#7FA0FF}
.sec-web,.tab-web{--c:var(--yellow)}
.sec-rights,.tab-rights{--c:#fff}
.sec-contact,.tab-contact{--c:var(--sheet2)}
.fp-tabs{display:flex;flex-wrap:wrap;gap:6px 6px;align-items:flex-end;padding:0 0 0 64px;position:relative;z-index:0}
.fp-tabs a{
  background:var(--c);border:2px solid #000;border-bottom:0;border-radius:9px 9px 0 0;
  padding:10px 16px 9px;font-weight:700;text-decoration:none;line-height:1.2;
  box-shadow:inset 0 -6px 8px -6px rgba(0,0,0,.25);transition:transform .12s;
}
.fp-tabs a:hover{transform:translateY(-4px)}
.fp-privacy .leaf{z-index:1}
.fp-part > h2{
  position:relative;display:block;font-family:var(--cut);font-weight:400;
  font-size:clamp(2.1rem,4vw,2.8rem);line-height:1;border:0;padding:0;margin:2.2em 0 .5em;
}
:lang(th) .fp-part > h2{font-weight:700;line-height:1.3}
.fp-part > h2::before{ /* the section's index tab poking out of the left edge */
  content:"";position:absolute;left:calc(-1 * var(--pl) - 12px);top:.05em;width:30px;height:1em;
  background:var(--c);border:2px solid #000;border-right:0;border-radius:6px 0 0 6px;
}
.fp-privacy h3{font-family:var(--type);font-weight:700;font-size:1.12rem;margin:1.6em 0 .35em}
.fp-sum{font-size:1.12rem;font-weight:700;border-left:6px solid var(--c);padding:2px 0 2px 14px;max-width:50ch}
.fp-privacy #changes-h{margin-top:2.6em}

@media (min-width:1101px){
  .fp-doc{max-width:1120px}
  .fp-doc .leaf{padding:64px 300px 76px 72px}
  .fp-top{position:relative}
  .fp-doc .fp-plain{position:absolute;top:-18px;right:-286px;width:300px;margin:0}
  .fp-doc .margin-note{float:right;clear:right;width:200px;margin:.3em -250px .6em 0;font-size:1.15rem}
}
@media (max-width:1100px) and (min-width:1021px){
  .fp-doc .leaf{padding:56px 56px 64px}
}
@media (max-width:1020px){ .fp-doc .leaf{--pl:32px} .fp-tabs{padding-left:24px} }
@media (max-width:640px){
  .fp-zone{padding-top:28px}
  .fp-doc .leaf{--pl:18px}
  .fp-tabs{padding-left:8px;gap:4px}
  .fp-tabs a{padding:8px 10px 7px;font-size:.92rem}
  .fp-part > h2::before{width:18px;left:calc(-1 * var(--pl) - 6px)}
  .fp-staple{left:24px}
  .fp-doc .fp-eff{font-size:1rem}
}


/* ================= contact: the postcard ================= */
.ct-zone{padding-top:34px}
.ct-head{margin:14px 0 22px}
.ct-title.h-cut{font-size:clamp(3rem,7.5vw,6.4rem);line-height:.92;margin:0 0 6px}
:lang(th) .ct-title.h-cut{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.2}
.ct-tag{margin:6px 0 0}
.ct-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px 52px;align-items:start}

.pc-stack{position:relative;padding:64px 0 0 40px}
.pc-front{
  position:absolute;left:0;top:0;width:58%;aspect-ratio:3/2;transform:rotate(-5deg);
  border:7px solid #fff;outline:1px solid rgba(0,0,0,.35);box-shadow:5px 7px 0 rgba(0,0,0,.12);overflow:hidden;
}
.pc-front svg{display:block;width:100%;height:100%}
.pc-greet{font-family:var(--marker);font-size:34px}
:lang(th) .pc-greet{font-size:30px}
.postcard{
  position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  padding:30px 30px 26px;transform:rotate(.5deg);background:#F7F7F4;
  box-shadow:0 1px 0 rgba(0,0,0,.25),8px 12px 0 rgba(0,0,0,.1);
}
.pc-msg{padding-right:28px;min-width:0}
.pc-addr{border-left:2px solid #000;padding-left:26px;display:flex;flex-direction:column;gap:12px;min-width:0}

.postcard fieldset{border:0;margin:0;padding:0;min-width:0}
.postcard legend{font-family:var(--marker);font-size:1.35rem;line-height:1.2;padding:0;margin:0 0 8px}
:lang(th) .postcard legend{line-height:1.5}
.pc-topics label{display:flex;align-items:center;gap:12px;padding:5px 0;cursor:pointer;font-weight:700}
.pc-topics input{
  appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:0;
  border:2.5px solid #000;border-radius:2px;background:#fff;box-shadow:2px 2px 0 rgba(0,0,0,.25);cursor:pointer;
}
.pc-topics input:checked{
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M3 13 L10 21 L25 -1' fill='none' stroke='%23C8102E' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/115% no-repeat;
  overflow:visible;
}
.pc-topics label span{min-width:0}
.pc-topics input:checked + span{background:linear-gradient(100deg,transparent 0 2%,var(--yellow) 3% 96%,transparent 98%) 0 70%/100% 70% no-repeat}
.pc-topics input:focus-visible{outline:3px dashed var(--riso);outline-offset:3px}
.pc-topics.bad legend{text-decoration:underline wavy var(--red);text-underline-offset:6px}

.pc-field{margin-top:16px}
.pc-label{display:block;font-weight:700;margin-bottom:4px}
.pc-label small{font-weight:400;color:var(--ink2)}
.postcard textarea{
  display:block;width:100%;min-height:15rem;resize:vertical;border:0;border-top:1.5px solid rgba(30,79,214,.5);
  padding:0 4px;font:400 1.2rem/2rem var(--marker);color:#10235e;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(2rem - 1.5px),rgba(30,79,214,.5) calc(2rem - 1.5px) 2rem);
  background-attachment:local;
}
:lang(th) .postcard textarea{font-size:1.15rem}
.postcard input[type=text]{
  width:100%;border:0;border-bottom:2px solid #000;background:transparent;border-radius:0;
  font:400 1.15rem/1.4 var(--marker);color:#10235e;padding:4px 2px;
}
.postcard input::placeholder{color:#8b908e;font-family:var(--type);font-size:.95rem}
.postcard textarea:focus-visible,.postcard input[type=text]:focus-visible{outline:3px dashed var(--riso);outline-offset:3px}
.postcard [aria-invalid="true"]{box-shadow:0 0 0 2.5px var(--red);background-color:rgba(200,16,46,.05)}
.pc-err{margin:6px 0 0;color:var(--red);font-weight:700;font-size:.95rem;line-height:1.35}
.pc-err:empty{display:none}
.pc-err::before{content:"✗ "}

.pc-stamp-corner{position:relative;align-self:flex-end;width:92px;height:110px;flex:none}
.pc-stamp{background:#fff;border:5px dotted #F7F7F4;outline:1px solid rgba(0,0,0,.08);box-shadow:1px 2px 0 rgba(0,0,0,.2);transform:rotate(3deg);width:100%;height:100%}
.pc-stamp svg{display:block;width:100%;height:100%}
.pc-postmark{position:absolute;left:-74px;top:22px;width:176px;color:#161616;opacity:0;pointer-events:none;
  -webkit-mask-image:var(--grunge);mask-image:var(--grunge);-webkit-mask-size:180px;mask-size:180px}
.pc-postmark svg{display:block;width:100%;overflow:visible}
.pc-postmark text{fill:currentColor;font-family:'Special Elite','Sarabun',monospace}
.pc-postmark.slam{opacity:.88;transform:rotate(-10deg);animation:pc-slam .42s cubic-bezier(.2,1.6,.4,1) both}
@keyframes pc-slam{from{opacity:0;transform:scale(1.9) rotate(4deg)}50%{opacity:.9}to{opacity:.88;transform:rotate(-10deg)}}

.pc-to{margin:0;display:flex;flex-direction:column;font-size:1rem}
.pc-to-label{font-family:var(--marker);font-size:1.35rem;line-height:1.2}
.pc-line{border-bottom:1.5px dotted #000;padding:6px 2px 2px;overflow-wrap:anywhere}
.pc-from{margin-top:4px}
.pc-bug{margin-top:4px!important;padding:12px 14px 14px!important;background:var(--sheet2);border:1.5px dashed #000!important}
.pc-bug legend{float:left;width:100%;font-family:var(--type);font-weight:700;font-size:1rem;padding:0;margin:0}
.pc-bug legend + .pc-field{clear:both}
.pc-bug legend small{font-weight:400;color:var(--ink2)}
.pc-bug .pc-field{margin-top:8px}
.pc-bug .pc-label{font-size:.92rem;margin:0}
.pc-send{margin-top:auto;padding-top:10px}
.pc-send .cta{font-size:1.1rem;padding:14px 26px}
.pc-note{font-size:.88rem;color:var(--ink2);margin:12px 0 0;line-height:1.45}
.postcard.posted{animation:pc-thud .3s ease-out}
@keyframes pc-thud{40%{transform:rotate(.5deg) translateY(4px)}}

.pc-done{margin:38px 0 0 40px;padding:30px 30px 26px;transform:rotate(-.6deg)}
.pc-done .tape{left:30px;top:-14px;transform:rotate(-4deg)}
.pc-done h2:focus{outline:none}
.pc-done h2:focus-visible{outline:3px dashed var(--riso);outline-offset:4px}
.pc-done p{max-width:62ch}
.pc-done textarea{display:block;width:100%;margin:6px 0 16px;border:2px dashed #000;background:#fff;padding:12px;font:400 .95rem/1.5 var(--type);resize:vertical}
.pc-copied{margin:12px 0 0;font-weight:700;min-height:1.5em}

/* the side column */
.ct-side{display:grid;gap:44px;padding-top:30px}
.ct-side .note{max-width:none;transform:rotate(1.2deg)}
.ct-quick h2{font-family:var(--marker);font-weight:400;font-size:1.45rem;margin:0 0 10px;line-height:1.2}
.ct-quick .faq{border-top-width:1.5px}
.ct-quick .faq summary{padding:11px 30px 11px 2px}
.ct-quick .faq details > :not(summary){margin:0 2px 14px}
.ct-bugnote{padding:0 6px}
.ct-bugnote p{margin:0 0 .8em}
.ct-ticks{list-style:none;padding:0;margin:0 0 14px}
.ct-ticks li{position:relative;padding:6px 0 6px 36px;border-bottom:1.5px dotted #000}
.ct-ticks li::before{content:"✶";position:absolute;left:4px;top:4px;color:var(--riso);font-size:1.2rem}
.ct-ticks small{color:var(--ink2);display:block;font-size:.88rem}

@media (max-width:1100px){ .ct-grid{grid-template-columns:1fr} .ct-side{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));padding-top:0} }
@media (max-width:820px){
  .pc-stack{padding:40px 0 0 12px}
  .pc-front{width:76%}
  .postcard{grid-template-columns:1fr;padding:24px 18px 22px;transform:none}
  .pc-msg{padding:0 0 22px}
  .pc-addr{border-left:0;border-top:2px solid #000;padding:22px 0 0}
  .pc-stamp-corner{width:76px;height:92px;margin-right:6px}
  .pc-postmark{left:-96px;top:14px;width:140px}
  .pc-done{margin-left:0;padding:26px 18px 22px}
}

/* ================= 404: this tape got chewed ================= */
.nf-zone{max-width:1180px}
.nf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px 40px;align-items:center;padding:52px 48px 56px}
.nf .tape.nf-t1{right:30px;top:-14px;transform:rotate(6deg)}
.nf-code{font-size:1rem;margin:0 0 18px}
.nf h1{font-size:clamp(2.8rem,5.6vw,4.6rem);margin:0 0 18px}
:lang(th) .nf h1{font-size:clamp(2.4rem,5vw,4rem)}
.nf-text > p{max-width:46ch}
.nf-controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:20px}
.nf-controls .cta{margin-top:0}
.nf-counter{margin-left:0}
.nf-status{font-size:1.3rem;min-height:1.6em;margin:16px 0 0;transform:rotate(-1.5deg)}
.nf-links{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:20px}
.nf-links .dymo:lang(th){letter-spacing:0}
.nf-wiggle{animation:jiggle .35s ease 3}
.nf-art{min-width:0}
.nf-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:none;filter:drop-shadow(7px 9px 0 rgba(0,0,0,.14))}
.nf-tape{fill:none;stroke:#3b2a1d;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.nf-sheen{fill:none;stroke:#a07c55;stroke-width:1.6;stroke-dasharray:16 26;opacity:.8}
.nf-l1{font-family:var(--cut);font-size:24px}
.nf-l2{font-family:var(--marker);font-size:21px}
.nf-pencil{cursor:grab}
.turning .nf-pencil{cursor:grabbing}
.nf-grab{pointer-events:all}
.nf-hint{font-family:var(--marker);font-size:22px;fill:var(--riso)}
.touched .nf-hint{opacity:0;transition:opacity .4s}
.fixed .nf-pencil{cursor:default}

@media (max-width:860px){
  .nf{grid-template-columns:1fr;padding:40px 22px 44px}
  .nf-art{order:-1;max-width:460px;width:100%;margin:0 auto}
}
@media (max-width:640px){ .nf{padding:30px 16px 36px} }

/* ================= Thai: never tracked ================= */
:lang(th) .fp-doc .stamp,:lang(th) .nf .stamp{letter-spacing:0}

/* ================= print the legal pages cleanly ================= */
@media print{
  body{background:#fff}
  body::before,.topbar,.jback,.fp-tabs,.tape,.staple,.langhint{display:none!important}
  .fp-doc .leaf{padding:0!important;box-shadow:none;transform:none}
  .sheet::after{display:none}
  .fp-doc .margin-note{float:none;margin:0 0 .5em;width:auto}
  .fp-top{display:block;margin:0}
  .fp-part > h2::before{display:none}
  a{text-decoration:underline}
}
.nw{white-space:nowrap}