/* Postcards in HTML (cards.js). One card = one container; every size is in cqw, so it scales as a piece.
   Fonts are the app's postcard faces: Homemade Apple (cursive), Caveat (hand), Mrs Saint Delafield (script),
   Oranienbaum (display), Courier Prime (type), Newsreader (serif). */
.pc {
  --ink: #2b2a28;
  --sepia: #5a3121;
  --red: #c2452d;
  --blue: #0e2fa0;
  container-type: inline-size;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 0.6cqw;
  color: var(--ink);
  background: #f3eadb;
  box-shadow: 0 0.4cqw 0.8cqw rgba(10, 20, 60, 0.12), 0 2.6cqw 5cqw rgba(10, 20, 60, 0.24);
  user-select: none;
  -webkit-user-select: none;
}
/* paper tooth: a faint grain over every card */
.pc::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pc p { margin: 0; }
.pc img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.pc .type { font: 400 2.2cqw/1.4 'Courier Prime', monospace; letter-spacing: 0.12em; }
.pc .msg { font-size: calc(var(--fs) * var(--fit, 1)); line-height: var(--lh); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 0.18cqw), var(--rule, rgba(43, 42, 40, 0.28)) 0 var(--lh)); background-position: 0 0.5cqw; overflow: hidden; overflow-wrap: anywhere; }
.pc .st { position: absolute; display: block; width: 13cqw; aspect-ratio: 647 / 831; background: #fff; padding: 0.7cqw; box-shadow: 0 0.3cqw 0.6cqw rgba(0, 0, 0, 0.18);
  /* perforated edge: holes punched along every side */
  -webkit-mask: radial-gradient(circle, transparent 0.42cqw, #000 0.48cqw) -0.65cqw -0.65cqw / 1.3cqw 1.3cqw, linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite: source-over;
  mask: radial-gradient(circle, transparent 0.42cqw, #000 0.48cqw) -0.65cqw -0.65cqw / 1.3cqw 1.3cqw, linear-gradient(#000 0 0) content-box;
  mask-composite: add; }
.pc .pm { position: absolute; width: 30cqw; opacity: 0.78; mix-blend-mode: multiply; }
.pc .ln { display: block; height: 0.2cqw; background: currentColor; opacity: 0.55; margin-top: 4.6cqw; }
.pc .l, .pc .r { position: absolute; top: 0; bottom: 0; }

/* ---- Airmail: photo on a perforated mount; back edged in par-avion stripes */
.pc-airmail.f-side { background: #e3e9f0; display: grid; place-items: center; }
.pc-airmail .perf { width: 90%; height: 86%; background: #fffdf8; padding: 2.2cqw; rotate: -1deg; box-shadow: 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.2);
  -webkit-mask: radial-gradient(circle, transparent 0.75cqw, #000 0.82cqw) -1.1cqw -1.1cqw / 2.2cqw 2.2cqw, linear-gradient(#000 0 0) content-box; -webkit-mask-composite: source-over;
  mask: radial-gradient(circle, transparent 0.75cqw, #000 0.82cqw) -1.1cqw -1.1cqw / 2.2cqw 2.2cqw, linear-gradient(#000 0 0) content-box; mask-composite: add; }
.pc-airmail.b-side { background: #fbfaf7; border: 2.4cqw solid; border-image: repeating-linear-gradient(-45deg, var(--red) 0 2.6cqw, #fbfaf7 0 3.9cqw, var(--blue) 0 6.5cqw, #fbfaf7 0 7.8cqw) 12; color: var(--blue); }
.pc-airmail .l { left: 4cqw; width: 50cqw; padding-top: 4cqw; display: flex; flex-direction: column; gap: 2cqw; }
.pc-airmail .l .msg { --fs: 3.1cqw; --lh: 6.4cqw; --rule: rgba(14, 47, 160, 0.3); font-family: 'Homemade Apple', cursive; height: 38cqw; }
.pc-airmail .sign { font: 4.2cqw 'Homemade Apple', cursive; text-align: right; margin-top: -2cqw; }
.pc-airmail .r { right: 4cqw; width: 34cqw; border-left: 0.25cqw solid rgba(14, 47, 160, 0.45); padding-left: 4cqw; }
.pc-airmail .r .st { right: 0; top: 3.5cqw; }
.pc-airmail .r .pm { right: 6cqw; top: 9cqw; width: 26cqw; rotate: 8deg; }
.pc-airmail .r .to { margin-top: 33cqw; font: 3.6cqw 'Homemade Apple', cursive; border-bottom: 0.2cqw solid rgba(14, 47, 160, 0.55); padding-bottom: 0.6cqw; }

/* ---- Café: a photo in a thin dark line, the place in spaced serif; sepia ink */
.pc-cafe { background: #f3eadb; color: var(--sepia); }
.pc-cafe .frame { position: absolute; left: 4.3cqw; right: 4.3cqw; top: 4.3cqw; height: 54cqw; border: 0.2cqw solid var(--sepia); padding: 1.1cqw; }
.pc-cafe .cap { position: absolute; left: 0; right: 0; bottom: 3.6cqw; text-align: center; font: 600 2.4cqw 'Newsreader', serif; letter-spacing: 0.3em; }
.pc-cafe.b-side header { position: absolute; left: 4cqw; right: 4cqw; top: 3.4cqw; text-align: center; }
.pc-cafe .head { font: 600 5.4cqw 'Newsreader', serif; letter-spacing: 0.3em; border-bottom: 0.25cqw solid; display: inline-block; padding: 0 1cqw 0.6cqw; }
.pc-cafe header .pm { right: -1cqw; top: -1.5cqw; width: 24cqw; rotate: -10deg; }
.pc-cafe .l { left: 5cqw; width: 50cqw; top: 15cqw; border-right: 0.25cqw solid; padding-right: 4cqw; }
.pc-cafe .l .msg { --fs: 4.4cqw; --lh: 6.2cqw; --rule: rgba(90, 49, 33, 0.3); font-family: 'Caveat', cursive; font-weight: 500; color: var(--ink); height: 38cqw; }
.pc-cafe .l .type { font-size: 1.7cqw; margin-top: 2cqw; }
.pc-cafe .r { right: 5cqw; width: 33cqw; top: 15cqw; }
.pc-cafe .r .st { right: 0; top: 0; }
.pc-cafe .lab { font: 600 2cqw 'Newsreader', serif; letter-spacing: 0.25em; }
.pc-cafe .r .lab:first-of-type { margin-top: 22cqw; }
.pc-cafe .r .to { font: 500 4.8cqw/1.25 'Caveat', cursive; border-bottom: 0.2cqw solid; margin-bottom: 1.6cqw; }

/* ---- Greetings: the place in big letters with the photo inside them */
.pc-greetings { background: #f3eadb; color: var(--blue); }
.pc-greetings.f-side { outline: 0.35cqw solid var(--blue); outline-offset: -2cqw; }
/* the place's photo fills the card; the lettering sits on a cream plate, its letters cut from the same photo */
.pc-greetings .shot { position: absolute; inset: 3.2cqw; }
.pc-greetings .plate { position: absolute; left: 50%; bottom: 6cqw; translate: -50% 0; display: grid; justify-items: center; gap: 0.4cqw; padding: 1.4cqw 5cqw 1.8cqw; background: #f3eadb; box-shadow: 0 0.6cqw 1.6cqw rgba(10, 20, 60, 0.3); }
.pc-greetings .hi { font: 6.4cqw/1 'Mrs Saint Delafield', cursive; color: var(--red); rotate: -4deg; margin-bottom: -1.4cqw; position: relative; z-index: 1; }
.pc-greetings .big { font: 400 calc(min(14cqw, 66cqw / var(--len))) / 1 'Oranienbaum', serif; letter-spacing: 0.02em; background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 0.25cqw var(--blue); filter: drop-shadow(0.4cqw 0.45cqw 0 rgba(14, 47, 160, 0.9)); }
.pc-greetings .by { font: 1.6cqw 'Courier Prime', monospace; letter-spacing: 0.3em; border-top: 0.25cqw solid; padding-top: 1cqw; margin-top: 0.6cqw; }
.pc-greetings .head { position: absolute; left: 0; width: 56cqw; top: 4cqw; text-align: center; font: 600 3.6cqw 'Newsreader', serif; letter-spacing: 0.35em; color: var(--ink); }
.pc-greetings .l { left: 5cqw; width: 48cqw; top: 12cqw; color: var(--ink); }
.pc-greetings .dear { font: 500 5cqw 'Caveat', cursive; }
.pc-greetings .l .msg { --fs: 4.4cqw; --lh: 6cqw; font: 500 calc(4.4cqw * var(--fit)) / 6cqw 'Caveat', cursive; height: 30cqw; margin-top: 1cqw; }
.pc-greetings .sign { font: 500 4.6cqw 'Caveat', cursive; text-align: right; margin-top: 1cqw; }
.pc-greetings .r { right: 5cqw; width: 35cqw; border-left: 0.25cqw solid var(--ink); padding-left: 4cqw; top: 4cqw; bottom: 4cqw; color: var(--ink); }
.pc-greetings .r .st { right: 0; top: 0; }
.pc-greetings .r .pm { right: 7cqw; top: 6cqw; width: 26cqw; rotate: -12deg; }
.pc-greetings .r .to { margin-top: 31cqw; font: 500 5cqw 'Caveat', cursive; border-bottom: 0.22cqw solid; }

/* ---- Kraft: black-and-white photo on the front; kraft paper, red letters, a photo clipped on */
.pc-kraft.f-side { background: #3a3733; }
.pc-kraft .bw { filter: grayscale(1) contrast(1.08) brightness(0.9); }
.pc-kraft.f-side .from { position: absolute; left: 6cqw; bottom: 5cqw; font: 12cqw/1 'Mrs Saint Delafield', cursive; color: #f6eedf; rotate: -4deg; text-shadow: 0 0.4cqw 1.6cqw rgba(0, 0, 0, 0.45); }
.pc-kraft.b-side { background: #d8c09a; }
.pc-kraft .l { left: 6cqw; width: 42cqw; top: 5cqw; }
.pc-kraft .head { font: 400 10.4cqw/1 'Oranienbaum', serif; color: var(--red); letter-spacing: 0.02em; }
.pc-kraft.b-side .from { font: 7.6cqw/1.1 'Mrs Saint Delafield', cursive; margin: 0 0 2cqw 1cqw; rotate: -4deg; }
.pc-kraft .ft { font: 500 3.6cqw/1.5 'Caveat', cursive; }
.pc-kraft .ft b { font: 400 1.9cqw 'Courier Prime', monospace; color: var(--red); letter-spacing: 0.1em; display: inline-block; width: 9cqw; }
.pc-kraft .clip { position: absolute; left: 4cqw; top: 39cqw; width: 36cqw; height: 25cqw; margin: 0; padding: 1.3cqw; background: #fffdf8; rotate: -3deg; box-shadow: 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.25);
  -webkit-mask: radial-gradient(circle, transparent 0.5cqw, #000 0.56cqw) -0.75cqw -0.75cqw / 1.5cqw 1.5cqw, linear-gradient(#000 0 0) content-box; -webkit-mask-composite: source-over;
  mask: radial-gradient(circle, transparent 0.5cqw, #000 0.56cqw) -0.75cqw -0.75cqw / 1.5cqw 1.5cqw, linear-gradient(#000 0 0) content-box; mask-composite: add; }
.pc-kraft .paperclip { position: absolute; left: 2cqw; top: 35cqw; width: 4.2cqw; height: 12cqw; border: 0.6cqw solid #8d9399; border-radius: 3cqw; rotate: 25deg; }
.pc-kraft .r { right: 5cqw; width: 40cqw; border-left: 0.3cqw solid var(--red); padding-left: 4cqw; top: 4cqw; bottom: 4cqw; }
.pc-kraft .r .pm { left: 0; top: 2cqw; width: 30cqw; rotate: -6deg; }
.pc-kraft .r .st { right: 0; top: 0; }
.pc-kraft .r .msg { --fs: 4.4cqw; --lh: 5.8cqw; --rule: rgba(43, 42, 40, 0.35); font-family: 'Caveat', cursive; font-weight: 500; margin-top: 21cqw; height: 35cqw; }

/* ---- Telegram: a deckled photo taped down; typed, urgent, STOP */
.pc-telegram.f-side { background: #7c8c7a; display: grid; place-items: center; }
.pc-telegram .deckle { width: 86%; height: 82%; background: #faf6ee; padding: 2cqw; rotate: 1.2deg; box-shadow: 0 0.6cqw 1.4cqw rgba(0, 0, 0, 0.25); clip-path: polygon(0% 1%, 4% 0%, 9% 1%, 15% 0%, 22% 1%, 28% 0%, 35% 1%, 41% 0%, 48% 1%, 55% 0%, 61% 1%, 68% 0%, 74% 1%, 81% 0%, 87% 1%, 94% 0%, 100% 1%, 99% 8%, 100% 16%, 99% 25%, 100% 33%, 99% 42%, 100% 50%, 99% 58%, 100% 67%, 99% 75%, 100% 84%, 99% 92%, 100% 99%, 94% 100%, 87% 99%, 81% 100%, 74% 99%, 68% 100%, 61% 99%, 55% 100%, 48% 99%, 41% 100%, 35% 99%, 28% 100%, 22% 99%, 15% 100%, 9% 99%, 4% 100%, 0% 99%, 1% 92%, 0% 84%, 1% 75%, 0% 67%, 1% 58%, 0% 50%, 1% 42%, 0% 33%, 1% 25%, 0% 16%, 1% 8%); }
.pc .tape { position: absolute; width: 18cqw; height: 5cqw; background: rgba(246, 238, 223, 0.82); box-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.12); }
.pc-telegram .tape.a { left: 4cqw; top: 4cqw; rotate: -32deg; }
.pc-telegram .tape.b { right: 4cqw; bottom: 4cqw; rotate: -32deg; }
.pc-telegram.b-side { background: #faf6ee; }
.pc-telegram header { position: absolute; left: 5cqw; right: 5cqw; top: 4cqw; border-bottom: 0.25cqw solid var(--red); padding-bottom: 1.6cqw; color: var(--red); }
.pc-telegram .head { font: 400 8cqw/1 'Oranienbaum', serif; letter-spacing: 0.18em; }
.pc-telegram .l { left: 5cqw; width: 56cqw; top: 22cqw; }
.pc-telegram .l .msg { --fs: 3.2cqw; --lh: 6.4cqw; font-family: 'Courier Prime', monospace; letter-spacing: 0.04em; height: 39cqw; }
.pc-telegram .r { right: 5cqw; width: 26cqw; top: 22cqw; color: var(--red); display: grid; gap: 2cqw; align-content: start; }
.pc-telegram .r .type { font-size: 2.2cqw; }
.pc-telegram .r .pm { position: static; width: 34cqw; rotate: -10deg; margin-top: 3cqw; }

/* ---- Field journal: two polaroids and tape; typed notes in cobalt */
.pc-field { background: #faf6ee; color: var(--blue); }
.pc-field .pol { position: absolute; margin: 0; width: 40cqw; height: 46cqw; background: #fff; padding: 2.4cqw 2.4cqw 8cqw; box-shadow: 0 0.6cqw 1.6cqw rgba(0, 0, 0, 0.2); }
.pc-field .pol.a { left: 8cqw; top: 7cqw; rotate: -5deg; }
.pc-field .pol.b { right: 8cqw; top: 13cqw; rotate: 4deg; }
.pc-field .tape.a { left: 22cqw; top: 4cqw; rotate: -12deg; background: rgba(232, 176, 75, 0.85); }
.pc-field .tape.b { right: 18cqw; top: 10cqw; rotate: 9deg; background: rgba(157, 182, 166, 0.88); }
.pc-field.b-side header { position: absolute; left: 5cqw; top: 5cqw; }
.pc-field .l { left: 5cqw; width: 50cqw; top: 14cqw; border-right: 0.25cqw dashed; padding-right: 4cqw; bottom: 5cqw; }
.pc-field .l .msg { --fs: 3cqw; --lh: 5.6cqw; --rule: rgba(14, 47, 160, 0.25); font-family: 'Courier Prime', monospace; height: 44cqw; }
.pc-field .r { right: 5cqw; width: 32cqw; top: 4cqw; }
.pc-field .r .st { right: 0; top: 0; }
.pc-field .r .pm { left: -3cqw; top: 9cqw; width: 26cqw; rotate: 10deg; }
.pc-field .r .type:first-of-type { margin-top: 34cqw; }
.pc-field .r .to { font: 3.6cqw 'Courier Prime', monospace; border-bottom: 0.2cqw solid; padding-bottom: 0.4cqw; }