.collection-filter{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:25px 0 2px}.collection-filter button{padding:10px 16px;border:2px solid #2c211b;border-radius:999px;background:#fff7dc;color:#2c211b;font-weight:900;cursor:pointer}.collection-filter button.active{background:#213e7c;color:#fff}.postcard[hidden]{display:none}.print-explainer{display:grid;gap:5px;margin-bottom:16px;padding:14px 17px;background:#fff8e8;border-left:6px solid #213e7c;line-height:1.4}.print-explainer strong{font-size:12px;letter-spacing:.08em}.print-explainer span{font-size:13px}/* ── Postcard front ─────────────────────────────────────────── */
.postcard-preview{display:block}
.postcard-preview .front{width:100%;aspect-ratio:1.5/1;margin-bottom:28px;position:relative;overflow:hidden;border-radius:4px;box-shadow:4px 6px 0 rgba(54,35,22,.22)}
.postcard-preview .front img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Postcard back (ruled + stamp + address) ────────────────── */
.postcard-preview .back{
  display:grid;
  grid-template-columns:1fr 1px 44%;
  width:min(100%,640px);
  aspect-ratio:1.5/1;
  margin:0 auto 28px;
  background:#fffef8;
  box-shadow:4px 6px 0 rgba(54,35,22,.22);
  border:1px solid #d4cfc0;
  border-radius:4px;
  overflow:hidden;
  font-family:Georgia,serif;
}
/* vertical divider */
.postcard-preview .back .divider{background:#b8b0a0;width:1px}
/* message side */
.postcard-preview .message-side{
  padding:18px 16px 14px;
  display:flex;flex-direction:column;gap:0;overflow:hidden;
}
.postcard-preview .message-side .pc-label{
  font:700 9px/1 'DM Sans',sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  color:#8a7a6a;margin-bottom:8px;
}
.postcard-preview .message-side p{
  margin:0;font-size:13px;line-height:28px;
  white-space:pre-wrap;overflow-wrap:anywhere;
  color:#1a1208;flex:1;
}
/* address side */
.postcard-preview .address-side{
  display:flex;flex-direction:column;
  padding:12px 14px 12px 18px;
  gap:10px;
}
.postcard-preview .stamp-area{
  align-self:flex-end;
  width:52px;height:64px;
  border:2px dashed #b8b0a0;
  border-radius:3px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:#b8b0a0;text-align:center;letter-spacing:.04em;
  flex-shrink:0;
}
.postcard-preview .address-block{
  flex:1;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:3px;
}
.postcard-preview .address-block .from-line{
  font:600 9px 'DM Sans',sans-serif;
  letter-spacing:.1em;color:#8a7a6a;text-transform:uppercase;margin-bottom:4px;
}
.postcard-preview .address-block .to-line{
  font-size:11px;line-height:1.45;color:#2a1c10;
}
.postcard-preview .privacy-stamp{
  font:700 7px 'DM Sans',sans-serif;
  letter-spacing:.1em;color:#8a7a6a;text-transform:uppercase;
  margin-top:6px;opacity:.7;
}

/* ── font variants ──────────────────────────────────────────── */
#print-card[data-font="hand"] .message-side p,
#overflow-preview[data-font="hand"] .letter-page-lines{font-family:'Segoe Script','Comic Sans MS',cursive;font-size:14px}
#print-card[data-font="type"] .message-side p,
#overflow-preview[data-font="type"] .letter-page-lines{font-family:'Courier New',Courier,monospace;font-size:12px}
#print-card[data-font="classic"] .message-side p,
#overflow-preview[data-font="classic"] .letter-page-lines{font-family:Georgia,serif;font-size:13px}

/* ── Overflow letter pages (lined notepad) ──────────────────── */
.overflow-preview{margin-top:8px}
.overflow-heading{display:flex;justify-content:space-between;gap:15px;align-items:flex-end;margin-bottom:14px}
.overflow-heading strong{font:18px 'Archivo Black',sans-serif}
.overflow-heading span{font-size:12px;color:#6b5848}

.letter-page-preview{
  width:min(100%,540px);
  aspect-ratio:8.5/11;
  margin:0 auto 28px;
  background:#fff;
  border:1px solid #d4cfc0;
  box-shadow:4px 6px 0 rgba(54,35,22,.18);
  border-radius:4px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.letter-page-header{
  display:flex;justify-content:flex-end;align-items:center;gap:8px;
  padding:12px 22px 0;
  background:transparent;
  flex-shrink:0;
}
.letter-page-header strong{font:600 9px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#b3a795}
.letter-page-header span{display:none}
.letter-page-lines{
  flex:1;
  padding:6px 36px 24px;
  font-size:13px;
  line-height:28px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:#1a1208;
  /* plain letter paper: faint writing lines only */
  background:repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 27px,
      #e3ddd0 27px,
      #e3ddd0 28px
    );
  background-position:0 34px;
  background-size:100% 28px;
}
.letter-page-lines.empty-hint{color:#b8b0a0;font-style:italic}

@media(max-width:700px){
  .overflow-heading{display:grid}
  .postcard-preview .back{grid-template-columns:1fr 1px 42%;aspect-ratio:auto;min-height:220px}
  .letter-page-preview{aspect-ratio:auto;min-height:320px}
}
@media print{
  .print-explainer{display:none!important}
  .postcard-preview .front{break-after:page}
  .postcard-preview .back,.letter-page-preview{width:auto;box-shadow:none;break-before:page;border:0}
}

.postcard-top{position:relative}
.postcard-top .like{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border-radius:999px;background:rgba(255,247,220,.93);border:1.5px solid #6e5238;color:#7a1a20;font:800 12px 'DM Sans',sans-serif;line-height:1;cursor:pointer;user-select:none;z-index:2}
.postcard-top .like.on{background:#c71924;color:#fff;border-color:#8a0f17}