/* ============================================================
   THE BOARD · pins.css — the four pin types
   Sticky 1×1 · Card 1×1 · Flyer 1×2 · Paper 1×2
   ============================================================ */

/* ---------- wrapper: slot placement + imperfection ---------- */
.pin-wrap{position:relative;display:grid;place-items:center;overflow:visible;-webkit-tap-highlight-color:transparent}
.pin-wrap.tall{grid-row:span 2}

/* the physical object. JS sets --t (deg), --ox/--oy (px), --d (drift seed) */
.pin-obj{
  position:relative;cursor:pointer;
  transform:rotate(calc(var(--t,0deg) * var(--tilt-mult))) translate(calc(var(--ox,0px) * var(--tilt-mult)), calc(var(--oy,0px) * var(--tilt-mult)));
  transition:transform .18s ease, filter .18s ease;
  will-change:transform;
}
.pin-obj:hover{transform:rotate(calc(var(--t,0deg) * var(--tilt-mult) * .4)) translate(calc(var(--ox,0px) * var(--tilt-mult)),calc(var(--oy,0px) * var(--tilt-mult))) scale(1.03);z-index:30}
.pin-wrap:hover{z-index:30}

/* pushpin */
.ppin{position:absolute;top:-6px;left:50%;width:14px;height:14px;border-radius:50%;transform:translateX(-50%);z-index:5;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.75),transparent 42%),var(--pc,var(--terra));
  box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 -2px 3px rgba(0,0,0,.3)}
.ppin::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:4px;background:rgba(0,0,0,.35);transform:translateX(-50%)}
.ppin.teal{--pc:var(--teal-2)}
.ppin.char{--pc:#211d18}
.ppin.cream{--pc:#cdbd97}

/* tape strips (flyers) */
.tape{position:absolute;width:34%;height:13px;background:rgba(232,220,196,.32);backdrop-filter:blur(1px);z-index:5;box-shadow:0 1px 2px rgba(0,0,0,.18);border-left:1px dashed rgba(0,0,0,.12);border-right:1px dashed rgba(0,0,0,.12)}
.tape.tl{left:-8px;top:-5px;transform:rotate(-42deg)}
.tape.tr{right:-8px;top:-5px;transform:rotate(42deg)}

/* like chip + tag links */
.pin-meta{position:absolute;right:-4px;bottom:-7px;z-index:6;display:flex;gap:4px;align-items:center}
.like-chip{display:inline-flex;align-items:center;gap:4px;background:var(--char);color:var(--cream);border-radius:999px;padding:3px 8px;font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:.06em;box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .12s}
.like-chip:active{transform:scale(1.15)}
.like-chip.liked{background:var(--terra);color:var(--cream)}
.pin-tags{position:absolute;left:-2px;bottom:-7px;z-index:6;display:flex;gap:4px}
.pin-tags a{font-family:var(--f-mono);font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;background:var(--teal-2);color:var(--cream);padding:3px 6px;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.3)}

/* locked badge */
.lock-dot{position:absolute;left:-4px;top:-4px;z-index:6;width:16px;height:16px;border-radius:50%;background:var(--char);display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.4)}
.lock-dot::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--terra)}

/* shared paper grain on light objects */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:4;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.1;mix-blend-mode:multiply}

/* ============================================================
   1 · STICKY NOTE — 1×1, overhangs its landscape cell
   ============================================================ */
.p-sticky{
  width:calc(var(--colw) * .88);aspect-ratio:1;
  background:var(--sc,var(--postit));color:var(--char-2);
  padding:9% 10%;display:flex;flex-direction:column;
  font-family:var(--f-marker);font-weight:600;
  font-size:clamp(10px,calc(var(--colw) * .135),24px);line-height:1.06;
  box-shadow:0 1px 2px rgba(0,0,0,.18), 0 7px 14px -5px rgba(0,0,0,.4);
  overflow:hidden;
}
/* curled bottom-right corner */
.p-sticky::before{content:"";position:absolute;right:0;bottom:0;width:22%;height:22%;
  background:linear-gradient(315deg,transparent 47%,rgba(0,0,0,.16) 50%,rgba(255,255,255,.35) 56%,var(--sc,var(--postit)) 62%);
  filter:drop-shadow(-2px -2px 3px rgba(0,0,0,.12))}
.p-sticky .txt{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.p-sticky .by{margin-top:auto;font-family:var(--f-mono);font-weight:500;font-size:.42em;letter-spacing:.12em;text-transform:uppercase;opacity:.55;line-height:1}
.p-sticky.sc-cream{--sc:#ece1c8}
.p-sticky.sc-teal{--sc:#8db3ac}
.p-sticky.sc-sienna{--sc:#cd7c5c}
.p-sticky.sc-yellow{--sc:#e8c95a}

/* ============================================================
   2 · PLAYING CARD — 1×1, portrait inside cell
   ============================================================ */
.p-card{
  width:calc(var(--colw) * .68);aspect-ratio:5/7;
  background:#f0e8d4;color:var(--char);border-radius:6% / 4.3%;
  box-shadow:0 1px 2px rgba(0,0,0,.2), 0 8px 18px -6px rgba(0,0,0,.45), inset 0 0 0 1px rgba(10,10,10,.08);
  font-size:calc(var(--colw) * .06);
  overflow:hidden;display:flex;
}
.p-card .face{position:relative;flex:1;margin:6%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* corner index */
.cidx{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.2em;line-height:1;font-family:var(--f-head);font-weight:900;font-size:1.9em;letter-spacing:-.02em}
.cidx.tl{top:0;left:0}
.cidx.br{bottom:0;right:0;transform:rotate(180deg)}
.cidx .pip{width:1em;height:1em}

/* pips — brand vocabulary, pure CSS shapes */
.pip{display:inline-block;position:relative;flex:none}
.pip.t{border-radius:50%;background:var(--teal-2)}
.pip.t::after{content:"T";position:absolute;inset:0;display:grid;place-items:center;color:var(--cream);font-family:var(--f-head);font-weight:900;font-size:.62em;line-height:1;padding-bottom:.06em}
.pip.disco{border-radius:50%;background:
  linear-gradient(rgba(10,10,10,.5) 1px,transparent 1px),
  linear-gradient(90deg,rgba(10,10,10,.5) 1px,transparent 1px),
  radial-gradient(circle at 32% 28%,#fdf6e2,#cdbd97 70%);
  background-size:25% 25%,25% 25%,auto}
.pip.record{border-radius:50%;background:
  radial-gradient(circle,var(--terra) 0 18%,#16120e 19% 38%,#241e17 39% 44%,#16120e 45% 62%,#241e17 63% 68%,#16120e 69%)}

/* template A — classic face */
.p-card.ct-classic .big{font-family:var(--f-head);font-weight:900;font-size:5.2em;line-height:.85;letter-spacing:-.04em;text-transform:uppercase}
.p-card.ct-classic .big em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--terra-2);text-transform:none}
.p-card.ct-classic .under{margin-top:.6em;font-family:var(--f-mono);font-weight:600;font-size:1.05em;letter-spacing:.2em;text-transform:uppercase;color:var(--teal-2)}

/* template B — tarot / text-forward */
.p-card.ct-tarot .face{border:1.5px solid var(--char);border-radius:1em 1em 38% 38% / 1em 1em 16% 16%;margin:8%;padding:10% 8%}
.p-card.ct-tarot .num{font-family:var(--f-mono);font-weight:600;font-size:1.1em;letter-spacing:.3em;color:var(--terra-2)}
.p-card.ct-tarot .pip{width:2.6em;height:2.6em;margin:.8em 0}
.p-card.ct-tarot .ttl{font-family:var(--f-head);font-weight:900;font-size:2em;line-height:.92;letter-spacing:-.02em;text-transform:uppercase}
.p-card.ct-tarot .line{margin-top:.7em;font-family:var(--f-serif);font-style:italic;font-size:1.45em;line-height:1.15;color:var(--char-3)}

/* template C — minimal */
.p-card.ct-min .pip{position:absolute;width:1.2em;height:1.2em}
.p-card.ct-min .pip.c1{top:0;left:0}
.p-card.ct-min .pip.c2{bottom:0;right:0}
.p-card.ct-min .mid{font-family:var(--f-head);font-weight:900;font-size:2.3em;line-height:.95;letter-spacing:-.02em;text-transform:uppercase;max-width:9ch}
.p-card.ct-min .mid em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--terra-2);text-transform:none}

/* ============================================================
   3 · FLYER — 1×2 slot, fills it at ≈4:5
   ============================================================ */
.p-flyer{
  width:100%;height:100%;
  background:var(--char);color:var(--cream);
  font-size:calc(var(--colw) * .035);
  box-shadow:0 2px 3px rgba(0,0,0,.25), 0 12px 26px -8px rgba(0,0,0,.5);
  overflow:hidden;isolation:isolate;
}
/* halftone + grain */
.p-flyer::before{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,.55) .5px,transparent .9px);
  background-size:3.5px 3.5px;mix-blend-mode:multiply;opacity:.4}
/* fold crease */
.p-flyer::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;
  background:linear-gradient(180deg,transparent calc(50% - 1px),rgba(255,255,255,.06) calc(50% - 1px),rgba(0,0,0,.22) 50%,rgba(255,255,255,.05) calc(50% + 1px),transparent calc(50% + 1px));
  mix-blend-mode:overlay}

.p-flyer .fin{position:absolute;inset:0;padding:7% 7.5%;display:flex;flex-direction:column;z-index:2}
.p-flyer .frow{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.p-flyer .ftag{font-family:var(--f-mono);font-weight:600;font-size:1.5em;letter-spacing:.2em;text-transform:uppercase;border:.13em solid currentColor;border-radius:99em;padding:.4em .9em;line-height:1;white-space:nowrap}
.p-flyer .fmono{font-family:var(--f-mono);font-weight:500;font-size:1.4em;letter-spacing:.16em;text-transform:uppercase;line-height:1.4}
.p-flyer .fhead{font-family:var(--f-head);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.88}
/* registration drift on headline */
.p-flyer .fhead.drift{text-shadow:.05em .035em 0 rgba(196,98,61,.55)}
.p-flyer .farrow{font-family:var(--f-head);font-weight:900;font-size:4.6em;line-height:.7}

/* palette roles */
.p-flyer.fr-char{background:var(--char);color:var(--cream)}
.p-flyer.fr-cream{background:var(--cream);color:var(--char)}
.p-flyer.fr-terra{background:var(--terra);color:var(--cream)}
.p-flyer.fr-teal{background:var(--teal);color:var(--char)}
.p-flyer .ac{color:var(--fac,var(--terra))}
.p-flyer.fr-terra .ac,.p-flyer.fr-teal .ac{--fac:var(--char)}

/* template A — stacked bars (EQ / barcode) */
.p-flyer.ft-bars .bars{display:flex;flex-direction:column;gap:.5em;margin:1.2em 0;flex:1;justify-content:center}
.p-flyer.ft-bars .bars i{display:block;height:1.1em;background:currentColor;opacity:.92}
.p-flyer.ft-bars .bars i.a{background:var(--fac,var(--terra))}
.p-flyer.ft-bars .bars i:nth-child(1){width:88%}
.p-flyer.ft-bars .bars i:nth-child(2){width:64%;height:.55em}
.p-flyer.ft-bars .bars i:nth-child(3){width:96%}
.p-flyer.ft-bars .bars i:nth-child(4){width:42%;height:.55em}
.p-flyer.ft-bars .bars i:nth-child(5){width:74%}
.p-flyer.ft-bars .bars i:nth-child(6){width:58%;height:1.7em}
.p-flyer.ft-bars .fhead{font-size:5.4em}

/* template B — concentric rings / target, split */
.p-flyer.ft-rings .rings{position:absolute;right:-22%;top:18%;width:75%;aspect-ratio:1;border-radius:50%;z-index:1;
  background:repeating-radial-gradient(circle,var(--fac,var(--terra)) 0 7%,transparent 7% 16%)}
.p-flyer.ft-rings .fin{justify-content:flex-end}
.p-flyer.ft-rings .frow.top{position:absolute;top:7%;left:7.5%;right:7.5%}
.p-flyer.ft-rings .fhead{font-size:4.8em;max-width:7ch;position:relative;z-index:2}
.p-flyer.ft-rings .fmono{margin-top:1em}

/* template C — big type only */
.p-flyer.ft-type .fhead{font-size:7.2em;flex:1;display:flex;flex-direction:column;justify-content:center;letter-spacing:-.04em}
.p-flyer.ft-type .fhead em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.02em;color:var(--fac,var(--terra))}
.p-flyer.fr-terra.ft-type .fhead em,.p-flyer.fr-teal.ft-type .fhead em{color:var(--char)}

/* photo slot inside flyer (templates A/B optional) */
.p-flyer .fphoto{position:relative;height:30%;margin:1em 0;background:#221c16;overflow:hidden}
.p-flyer .fphoto::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(232,220,196,.06) 6px 8px)}
.p-flyer .fphoto::after{content:attr(data-label);position:absolute;right:.8em;bottom:.6em;font-family:var(--f-mono);font-size:1.2em;letter-spacing:.18em;text-transform:uppercase;color:rgba(232,220,196,.35)}
.p-flyer .fphoto img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.05)}

/* ============================================================
   4 · RIPPED 8.5×11 PAPER — 1×2 slot
   ============================================================ */
.p-paper{
  width:96%;height:99%;align-self:start;
  background:#efe6cf;color:#2b251c;
  font-size:calc(var(--colw) * .052);
  padding:10% 8% 9% 16%;
  box-shadow:0 2px 3px rgba(0,0,0,.2), 0 10px 22px -8px rgba(0,0,0,.45);
  overflow:hidden;
}
/* ruled lines + red margin */
.p-paper.ruled{background:
  linear-gradient(90deg,transparent 11.5%,rgba(196,98,61,.45) 11.5%,rgba(196,98,61,.45) calc(11.5% + 1px),transparent calc(11.5% + 1px)),
  repeating-linear-gradient(180deg,transparent 0 calc(1.62em - 1px),rgba(107,155,148,.4) calc(1.62em - 1px) 1.62em),
  #efe6cf;
  background-position:0 0,0 .5em,0 0}
/* torn edge variants (clip top) */
.p-paper.tear-a{clip-path:polygon(0 2.2%,4% .6%,9% 2.8%,15% 1%,22% 3%,28% .8%,35% 2.6%,43% 1.2%,50% 3.2%,57% 1%,64% 2.8%,71% .7%,78% 2.4%,85% 1.1%,91% 2.9%,96% 1.3%,100% 2.6%,100% 100%,0 100%)}
.p-paper.tear-b{clip-path:polygon(0 1%,6% 2.9%,12% .8%,19% 3.1%,25% 1.4%,33% 2.7%,40% .6%,48% 2.5%,55% 1%,61% 3%,69% 1.5%,75% 3.2%,82% .9%,88% 2.6%,94% .8%,100% 2%,100% 100%,0 100%)}
.p-paper.tear-c{clip-path:polygon(0 2.8%,5% 1%,11% 3.2%,18% 1.6%,24% 2.9%,31% .7%,39% 2.3%,46% .9%,53% 2.8%,60% 1.2%,67% 3.1%,74% 1%,81% 2.7%,87% 1.4%,93% 3%,100% 1.2%,100% 100%,0 100%)}
/* 3-hole punch */
.p-paper .holes{position:absolute;left:4.5%;top:0;bottom:0;width:1em;display:flex;flex-direction:column;justify-content:space-around;align-items:center;pointer-events:none}
.p-paper .holes i{width:.95em;height:.95em;border-radius:50%;background:var(--hole,#1c1916);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
/* fold shadow */
.p-paper .fold{position:absolute;left:0;right:0;top:46%;height:2px;background:linear-gradient(180deg,rgba(0,0,0,.13),rgba(255,255,255,.4));pointer-events:none}

.p-paper .ph-title{font-family:var(--f-mono);font-weight:600;font-size:.92em;letter-spacing:.18em;text-transform:uppercase;color:var(--terra-2);margin-bottom:.9em}
.p-paper .body{line-height:1.62;display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.p-paper.f-hand .body{font-family:var(--f-marker);font-weight:500;font-size:1.34em;line-height:1.21}
.p-paper.f-type .body{font-family:var(--f-mono);font-weight:400;font-size:.86em;line-height:1.62}
.p-paper .by{position:absolute;bottom:4%;right:7%;font-family:var(--f-mono);font-weight:500;font-size:.74em;letter-spacing:.14em;text-transform:uppercase;opacity:.5}