/* ═══════════════════════════════════════════════════════════════════
   paper-feel.css — the "feel the weight" paper demo
   Pair with /assets/js/paper-feel.js (deferred). Markup contract:
   <div data-paper-feel></div> — JS builds everything inside.

   Two linked visuals driven by one gsm slider (70–200):
   · the droop — a held sheet seen side-on; heavier paper holds itself
   · show-through — the reverse side ghosting through at light weights
   The two things a screen normally can't tell you about paper.
═══════════════════════════════════════════════════════════════════ */

.pfeel{max-width:880px;margin:56px auto 0;background:#fffdf8;border:.5px solid var(--rule-lt);padding:36px 36px 30px}
.pfeel-row{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}

/* ── The droop ─────────────────────────────────────────────────── */
.pfeel-droop{position:relative}
.pfeel-droop svg{display:block;width:100%;height:auto}
.pfeel-droop .pd-sheet{fill:none;stroke:#d9d2c2;stroke-width:3;stroke-linecap:round}
.pfeel-droop .pd-sheetline{fill:none;stroke:rgba(0,0,0,.22);stroke-width:1;stroke-linecap:round}
.pfeel-droop .pd-clamp{fill:#2e2a26}
.pfeel-droop .pd-shadow{fill:rgba(0,0,0,.07)}
.pfeel-label{position:absolute;left:0;bottom:-2px;font-family:var(--fb);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}

/* ── Show-through ──────────────────────────────────────────────── */
.pfeel-ghost{position:relative;background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 10px 24px -18px rgba(26,21,18,.4);padding:22px 24px;height:170px;overflow:hidden}
.pfeel-ghost .pg-front,.pfeel-ghost .pg-back{font-family:var(--fd);font-size:11.5px;line-height:1.75;color:#2e2a26}
.pfeel-ghost .pg-back{position:absolute;inset:22px 24px;transform:scaleX(-1);color:#000;opacity:.22;transition:opacity .35s ease;pointer-events:none;user-select:none}
.pfeel-ghost .pg-tag{position:absolute;right:10px;bottom:8px;font-family:var(--fb);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--mute)}

/* ── Slider + readout ──────────────────────────────────────────── */
.pfeel-ctl{display:flex;align-items:center;gap:22px;margin-top:30px}
.pfeel-ctl input[type=range]{flex:1;accent-color:var(--red);cursor:pointer}
.pfeel-read{min-width:240px;text-align:right}
.pfeel-read .pr-gsm{font-family:var(--fd);font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums}
.pfeel-read .pr-stock{display:block;font-family:var(--fb);font-size:12px;color:var(--mute);line-height:1.5}
.pfeel-cap{margin-top:16px;font-family:var(--fb);font-size:12.5px;color:var(--mute);font-style:italic;text-align:center}

@media(max-width:760px){
  .pfeel{padding:24px 18px 20px}
  .pfeel-row{grid-template-columns:1fr;gap:24px}
  .pfeel-ctl{flex-direction:column;align-items:stretch;gap:10px}
  .pfeel-read{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .pfeel-ghost .pg-back{transition:none}
}