/* ════ Postcards ════════════════════════════════════════════════════════════
   A classic postcard per stop. Front: the photo, stamp and postmark.
   Back: the details, written like a real card. Click (or Enter / Space) turns it over. */
.pc { --paper: #FBF3E1; --ink: #2A160B; container-type: inline-size; perspective: 2400px;
  width: var(--pc-w, min(980px, 90vw, calc((100svh - 9rem) / .75))); margin: 4vh auto 5vh; transform: rotate(var(--tilt)); cursor: pointer; outline: none;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pc:hover, .pc.flipped { transform: rotate(0); }
.pc:focus-visible .pc-face { outline: 3px solid var(--fg); outline-offset: 6px; }
.pc-inner { display: grid; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.35, .7, .25, 1); }
.pc.flipped .pc-inner { transform: rotateY(180deg); }
.pc-face { grid-area: 1 / 1; position: relative; background: var(--paper); color: var(--ink); text-align: left;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 2px 3px rgba(40, 18, 6, .18), 0 30px 60px -24px rgba(40, 18, 6, .55); }
.pc-back { transform: rotateY(180deg); }

/* ── Front ── */
.pc-front { padding: 2.2cqw 2.2cqw 7cqw; }
.pc-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #2A160B; }
.pc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: url(#film); }
/* Photos appear whole, never half-drawn: until one has fully loaded its frame is a soft, slowly pulsing
   placeholder in the card's own tint, so you can see it's on its way. */
html.js .pc-photo:not(.loaded) { background: color-mix(in srgb, var(--tint, #C9A46A) 45%, var(--paper)); animation: developing 1.6s ease-in-out infinite; }
html.js .pc-photo:not(.loaded) img { visibility: hidden; }
@keyframes developing { 50% { background: color-mix(in srgb, var(--tint, #C9A46A) 25%, var(--paper)); } }
.pc-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22;
  background: radial-gradient(55% 45% at 95% 10%, var(--leak), transparent 70%); }
.pc-caption { position: absolute; left: 3cqw; bottom: 2.2cqw; margin: 0; font: italic 500 max(15px, 2.4cqw)/1.2 var(--serif); }
.pc-hint { position: absolute; right: 3cqw; bottom: 2.5cqw; font: 600 max(9px, 1.2cqw) var(--sans); letter-spacing: .24em;
  text-transform: uppercase; opacity: .5; transition: opacity .3s; }
.pc:hover .pc-hint { opacity: .9; }

/* stamp + postmark */
.pc-brand-stamp { position: absolute; z-index: 2; top: 3cqw; right: 3cqw; width: 13cqw;
  transform: rotate(7deg); pointer-events: none; }
.pc-brand-stamp img { display: block; width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .33)); }
.pc-side .pc-brand-stamp { top: 0; right: 0; width: 13cqw; }
.pc-stamp { position: absolute; z-index: 2; top: 4.5cqw; right: 4.5cqw; width: 11cqw; aspect-ratio: 4 / 5; padding: 4px;
  display: flex; flex-direction: column; justify-content: space-between; background: var(--paper);
  -webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 2.6px, #0000 96%, #000) -4px -4px / 8px 8px;
          mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle 2.6px, #0000 96%, #000) -4px -4px / 8px 8px; }
.pc-stamp::before { content: ""; position: absolute; inset: 4px; background: var(--img) center / cover, var(--tint);
  filter: url(#film) sepia(.35) saturate(1.2); box-shadow: inset 0 0 0 3px var(--tint); }
.pc-stamp span { position: relative; z-index: 1; font: 700 max(7px, .95cqw)/1.1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: #FBF3E1; padding: 5px; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); }
.pc-stamp span:last-child { align-self: flex-end; font: 900 max(10px, 1.8cqw)/1 var(--serif); letter-spacing: 0; }
.pc-postmark { position: absolute; z-index: 3; top: 3cqw; right: 10cqw; width: 28cqw; color: rgba(251, 243, 225, .9);
  transform: rotate(-12deg); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(42, 22, 11, .6)); }
.pm-ring { font: 700 9px var(--sans); letter-spacing: .14em; fill: currentColor; }
.pm-mid { font: 900 13px var(--serif); fill: currentColor; }

/* ── Back ── */
.pc-back { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: auto 1fr; column-gap: 4cqw; padding: 3.4cqw 4cqw 4cqw;
  background: linear-gradient(rgba(42, 22, 11, .03), rgba(42, 22, 11, .03)), var(--paper); }
.pc-heading { grid-column: 1 / -1; margin: 0 0 2.6cqw; text-align: center; font: 900 max(13px, 2.6cqw)/1 var(--serif);
  letter-spacing: .5em; padding-left: .5em; text-transform: uppercase; font-variation-settings: "SOFT" 0; }
.pc-message { display: flex; flex-direction: column; font-family: var(--serif); font-variation-settings: "SOFT" 100; }
.pc-hello { margin: 0 0 1.4cqw; font: italic 700 max(14px, 3.1cqw)/1.2 var(--serif); }
.pc-msg { margin: 0 0 3.4cqw; font: italic 400 max(13px, 2.6cqw)/1.35 var(--serif); }
.pc-label { margin: 0 0 .8cqw; font: 600 max(9px, 1.15cqw) var(--sans); letter-spacing: .26em; text-transform: uppercase; opacity: .65; }
.pc-musts { list-style: none; padding: 0; margin: 0 0 2.4cqw; font: 500 max(12px, 2.3cqw)/1.6 var(--serif); }
.pc-musts li::before { content: "— "; opacity: .5; }
.pc-tip { margin: auto 0 0; padding-top: 2cqw; border-top: 1px dashed rgba(42, 22, 11, .3); font: italic 400 max(12px, 1.9cqw)/1.4 var(--serif); opacity: .8; }
.pc-sign { margin: 2cqw 0 0; font: italic 700 max(13px, 2.3cqw) var(--serif); text-align: right; }
.pc-side { position: relative; display: flex; flex-direction: column; border-left: 1.5px solid rgba(42, 22, 11, .35); padding-left: 4cqw; }
.pc-side .pc-stamp { top: 0; right: 0; width: 12cqw; }
.pc-side::before { content: ""; height: 17cqw; }
.pc-side .pc-postmark { top: -1cqw; right: 9cqw; width: 26cqw; color: rgba(42, 22, 11, .55); filter: none; }
.pc-address { list-style: none; padding: 0; margin: auto 0 1cqw; }
.pc-address li { display: flex; gap: 1.6cqw; align-items: baseline; padding: 1.2cqw 0 .6cqw; border-bottom: 1px solid rgba(42, 22, 11, .35);
  font: italic 400 max(12px, 1.9cqw)/1.3 var(--serif); }
.pc-address .k { flex: none; width: 7.5cqw; font: 600 max(8px, 1.05cqw) var(--sans); font-style: normal; letter-spacing: .22em;
  text-transform: uppercase; opacity: .6; }
.pc-credit { position: absolute; left: 4cqw; bottom: 1.6cqw; font: 500 max(8px, 1cqw) var(--sans); letter-spacing: .2em;
  text-transform: uppercase; opacity: .45; }

/* small cards: keep the message, drop the address side */
@container (max-width: 560px) {
  .pc-back { grid-template-columns: 1fr; padding: 5cqw; }
  .pc-side { display: none; }
  .pc-heading { margin-bottom: 3cqw; }
}

/* stop text under the card */
.stop .title { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .pc-inner { transition: none; }
}
@media (max-width: 700px) {
  .pc { width: var(--pc-w, min(90vw, 480px)); }
}