/* B2 Postcards from the yard */
#postcards { padding: clamp(64px, 7vw, 104px) 0 clamp(64px, 7vw, 104px); border-top: 1.5px solid var(--ink); overflow: hidden; }
#postcards .pc-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 40px; margin-bottom: 32px; }
#postcards .track-tag { margin-bottom: 18px; }
#postcards .pc-lede { max-width: 52ch; margin: 22px 0 0; font-size: 18px; }
#postcards .pc-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
#postcards .pc-prev, #postcards .pc-flipbtn { display: none; }

/* the table: a warm desk mat with drafting corners */
#postcards .pc-table {
  position: relative; background: var(--shell); border: 1.5px solid var(--ink);
  padding: 28px; box-shadow: inset 0 0 0 10px var(--shell), inset 0 0 0 11px var(--rule-strong);
}
#postcards .pc-table::before, #postcards .pc-table::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: solid var(--ink); pointer-events: none;
}
#postcards .pc-table::before { top: 18px; left: 18px; border-width: 1.5px 0 0 1.5px; }
#postcards .pc-table::after { bottom: 18px; right: 18px; border-width: 0 1.5px 1.5px 0; }
#postcards .pc-cards { position: relative; height: 560px; }
#postcards .pc-keys { position: absolute; left: 32px; bottom: 10px; margin: 0; font-size: 11px; }
#postcards .pc-hint {
  position: absolute; left: 50%; top: -74px; display: flex; align-items: flex-end; gap: 6px; margin: 0; text-align: right;
  z-index: 0; pointer-events: none;
}
#postcards .pc-hint .anno-arrow { transform: translateY(40px); }
#postcards .pc-status { min-height: 1.4em; margin: 14px 0 0; color: var(--graphite); }

/* a postcard */
#postcards .pc-card {
  --cw: 280px;
  position: absolute; left: 0; top: 0; width: var(--cw); aspect-ratio: 280 / 224;
  perspective: 1200px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  outline: none;
}
#postcards .pc-card.is-live { transition: none; cursor: grabbing; }
#postcards .pc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,.7,.2,1); }
#postcards .pc-card.is-flipped .pc-inner { transform: rotateY(180deg); }
#postcards .pc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--white); border: 1px solid var(--rule-strong);
  box-shadow: 0 1px 0 var(--rule), 0 10px 22px -12px rgba(20,22,27,.55);
}
#postcards .pc-card.is-live .pc-face { box-shadow: 0 1px 0 var(--rule), 0 22px 34px -14px rgba(20,22,27,.6); }
#postcards .pc-card:focus-visible .pc-face { outline: 3px solid var(--cobalt); outline-offset: 3px; }
#postcards .pc-front { padding: 10px 10px 0; display: grid; grid-template-rows: auto 1fr; }
#postcards .pc-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper); }
#postcards .pc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
#postcards .pc-postmark { position: absolute; right: 6px; top: 6px; width: 84px; color: var(--white); opacity: .92; transform: rotate(-8deg); filter: drop-shadow(0 1px 1px rgba(20,22,27,.5)); }
#postcards .pc-cap { margin: 0; align-self: center; font: 400 21px/1.05 var(--accent-serif); font-style: italic; padding: 0 2px; }

#postcards .pc-back {
  transform: rotateY(180deg); display: grid; grid-template-columns: 1fr 104px; gap: 12px; padding: 14px;
  background: var(--white) repeating-linear-gradient(transparent 0 25px, var(--cobalt-wash) 25px 26px) 0 14px / 100% calc(100% - 28px) no-repeat;
}
#postcards .pc-note { margin: 0; font: 400 20px/26px var(--accent-serif); font-style: italic; color: var(--cobalt-ink); border-right: 1px solid var(--rule-strong); padding-right: 10px; }
#postcards .pc-note.is-long { font-size: 17px; line-height: 22px; }
#postcards .pc-addr { display: flex; flex-direction: column; gap: 4px; }
#postcards .pc-stamp {
  align-self: flex-end; width: 70px; height: 72px; padding: 4px; margin-bottom: 4px; background: var(--orange);
  outline: 3px dotted var(--white); outline-offset: -3px; border: 1px solid var(--ink); transform: rotate(3deg);
  display: grid; place-items: end start;
}
#postcards .pc-stamp span { font: 800 12px/1 var(--display); text-transform: uppercase; color: var(--ink); letter-spacing: .02em; padding: 2px; }
#postcards .pc-addr p { margin: 0; font: 400 15px/1.2 var(--accent-serif); font-style: italic; border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px; }
#postcards .pc-addr p span { font: 500 9px/1 var(--mono); font-style: normal; text-transform: uppercase; color: var(--graphite); margin-right: 4px; }
#postcards .pc-try { all: unset; box-sizing: border-box; display: block; margin-top: 2px; min-height: 24px; font: 700 10px/1.2 var(--mono); font-style: normal; text-transform: uppercase; color: var(--cobalt-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
#postcards .pc-try:hover { color: var(--orange-ink); }
#postcards .pc-try:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

@media (max-width: 1100px) {
  #postcards .pc-head { grid-template-columns: 1fr; }
  #postcards .pc-controls { justify-content: flex-start; }
  #postcards .pc-hint { display: none; }
  #postcards .pc-cards { height: 620px; }
}

/* narrow: a swipeable stack */
@media (max-width: 640px) {
  #postcards .pc-prev, #postcards .pc-flipbtn { display: inline-flex; }
  #postcards [data-pc="deal"] { display: none; }
  #postcards .pc-wrap { display: flex; flex-direction: column; }
  #postcards .pc-head { display: contents; }
  #postcards .pc-head-copy { order: 0; margin-bottom: 24px; }
  #postcards .pc-table { order: 1; }
  #postcards .pc-controls { display: grid; grid-template-columns: 1fr 1fr; order: 2; margin-top: 20px; }
  #postcards .pc-status { order: 3; }
  #postcards .pc-stamp span { font-size: 10px; }
  #postcards [data-pc="next"] { order: 1; } #postcards [data-pc="flip"] { order: 2; } #postcards [data-pc="shuffle"] { order: 3; }
  #postcards .pc-table { padding: 20px 10px 36px; }
  #postcards .pc-cards { height: 300px; }
  #postcards .pc-card { --cw: min(300px, calc(100vw - 2 * var(--pad) - 40px)); touch-action: pan-y; }
  #postcards .pc-card:not(.is-top) { cursor: default; }
  #postcards .pc-keys { left: 0; right: 0; text-align: center; }
  #postcards .pc-keys::after { content: ""; }
  #postcards .pc-note { font-size: 18px; line-height: 23px; }
  #postcards .pc-back { grid-template-columns: 1fr 92px; padding: 12px; }
  #postcards .pc-stamp { width: 62px; height: 64px; }
  #postcards .pc-addr p { font-size: 13px; }
  #postcards .pc-cap { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  #postcards .pc-card, #postcards .pc-inner { transition: none; }
}