/* The two visible slots work with any number of city cards. */
.postcard-deck {
  --front-pose: translate(23%, 145px) rotate(7deg);
  --back-pose: translate(0, 0) rotate(-9deg) scale(.92);
  isolation: isolate;
  overflow: visible;
}
.postcard-deck .postcard {
  appearance: none;
  border: 0;
  font: inherit;
  text-align: left;
  width: 67%;
  max-width: 410px;
  left: 8%;
  top: 38px;
  padding: 9px 9px 0;
  transform-origin: 50% 60%;
  transform: var(--back-pose);
  z-index: 1;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  /* Position is owned only by WAAPI: a CSS transform transition replays the final move on mobile. */
  transition: box-shadow .22s ease;
}
.postcard-deck .postcard[data-slot="0"] { transform: var(--front-pose); z-index: 3; }
.postcard-deck .postcard[data-slot="1"] { transform: var(--back-pose); z-index: 1; }
.postcard-deck .postcard img { width: 100%; aspect-ratio: 1.55; height: auto; pointer-events: none; }
.card-caption { display: flex; justify-content: space-between; align-items: center; padding: 14px 6px 15px; line-height: 1.3; font-size:20px; font-weight: 700; pointer-events: none; }
.card-caption small { display: block; font-size:14px; letter-spacing: .17em; font-weight: 500; margin-top: 5px; }

.postcard:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
.postcard-deck.is-turning .postcard { cursor: progress; transition: none; }
.postcard-deck .hero-star { z-index: 4; pointer-events: none; }
.postcard-deck .star-one { right: 2%; top: 30px; width: 87px; height: 87px; }
.postcard-deck .star-two { right: 0; top: 163px; }
.postcard-deck .star-three { left: 2%; bottom: 97px; }
.deck-controls { position: absolute; inset: auto 0 0 5%; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
#postcard-hint { font-size:16.5px; line-height: 1.55; color: #d9e4ff; }

.deck-pager { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.deck-pager button { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid var(--line); border-radius: 50%; background: none; font-size:20px; line-height: 1; color: var(--yellow); }
.deck-pager button:hover { color: var(--blue-dark); background: var(--yellow); border-color: var(--yellow); }
.deck-pager button[aria-disabled="true"] { opacity: .5; cursor: progress; }
.deck-count { font-size:15px; font-variant-numeric: tabular-nums; letter-spacing: .08em; white-space: nowrap; }
@media(hover:hover) and (pointer:fine) {
  .postcard-deck:not(.is-turning):not(.is-hinting) .postcard[data-slot="0"]:hover { box-shadow: 0 29px 75px #00195866; }
  .postcard-deck:not(.is-turning):not(.is-hinting) .postcard[data-slot="1"]:hover { box-shadow: 0 26px 70px #00195855; }
}
@media(max-width:1120px) {
  .postcard-deck { --front-pose: translate(23%, 128px) rotate(7deg); }
  .deck-controls { gap: 12px; }
  .deck-pager { gap: 8px; }
  #postcard-hint { font-size:15px; }
  .postcard-deck .star-one { width: 68px; height: 68px; }
}
@media(max-width:850px) and (min-width:601px) {
  .postcard-deck { --front-pose: translate(20%, 116px) rotate(7deg); height: 465px; }
  .postcard-deck .postcard { width: 73%; left: 3%; }
  .card-caption { font-size:18px; padding: 11px 4px; }
  .card-caption small { font-size:14px; }
  .deck-controls { flex-wrap: wrap; bottom: 12px; left: 0; gap: 12px; }
  #postcard-hint { flex: 1; min-width: 150px; }
  .deck-pager button { width: 31px; height: 31px; }
  .postcard-deck .star-one { right: -2%; top: 4px; width: 56px; height: 56px; }
  .postcard-deck .star-two { width: 25px; height: 25px; }
}
@media(max-width:600px) {
  .postcard-deck { --front-pose: translate(23%, 116px) rotate(7deg); height: 465px; margin-top: 44px; }
  .postcard-deck .postcard { width: 70%; left: 5%; top: 22px; padding: 7px 7px 0; }
  .card-caption { font-size:18px; padding: 12px 4px; }
  .card-caption small { font-size:14px; }
  
  .deck-controls { left: 0; bottom: 1px; gap: 12px; }
  .deck-pager { gap: 8px; }
  .deck-pager button { width: 34px; height: 34px; }
  .deck-count { font-size:14px; }
  #postcard-hint { font-size:15px; }
  .postcard-deck .star-one { top: 2px; right: 0; width: 56px; height: 56px; }
  .postcard-deck .star-two { right: -1%; top: 110px; width: 26px; height: 26px; }
  .postcard-deck .star-three { bottom: 105px; left: 1%; width: 24px; height: 24px; }
}
@media(max-width:360px) {
  .postcard-deck { height: 432px; --front-pose: translate(23%, 110px) rotate(7deg); }
  .card-caption { font-size:18px; }
  .deck-pager { gap: 5px; }
  .deck-pager button { width: 31px; height: 31px; }
  #postcard-hint { font-size:14px; }
}

@media(prefers-reduced-motion:reduce) {
  .postcard-deck .postcard { transition: none; }
  .postcard-deck .postcard[data-slot="0"]:hover { transform: var(--front-pose) !important; }
  .postcard-deck .postcard[data-slot="1"]:hover { transform: var(--back-pose) !important; }
}

/* Inverted brand mark: no white tile behind the new blue asset. */
.process-emblem img { background: var(--blue); padding: 0; }

/* Each photo keeps its own proportions in both animated slots. */
.postcard-deck{height:690px}
.postcard-deck .postcard-portrait{width:52%;max-width:310px;--front-pose:translate(34%,25px) rotate(7deg)}
.postcard-deck .postcard-portrait img{aspect-ratio:3 / 4;object-position:center!important}
.card-caption{gap:8px}
.card-caption small{letter-spacing:.04em}
.deck-controls{flex-wrap:wrap;gap:14px 20px}
#postcard-hint{flex:1 1 220px}
.deck-pager{gap:10px}
.deck-pager button{width:40px;height:40px}
@media(max-width:1120px){.postcard-deck{height:610px}}
@media(max-width:850px) and (min-width:601px){
 .postcard-deck{height:550px}
 .postcard-deck .postcard-portrait{width:59%;--front-pose:translate(35%,30px) rotate(7deg)}
 .deck-controls{bottom:0}
}
@media(max-width:600px){
 .postcard-deck{height:550px;--front-pose:translate(23%,155px) rotate(7deg)}
 .postcard-deck .postcard-portrait{width:56%;--front-pose:translate(38%,35px) rotate(7deg)}
 #postcard-hint{flex-basis:100%;font-size:15px}
 .deck-controls{gap:12px}
 .deck-pager{margin-left:auto}
}
@media(max-width:360px){
 .postcard-deck{height:520px;--front-pose:translate(23%,140px) rotate(7deg)}
 .card-caption{gap:4px;padding-inline:2px}
 .card-caption small{letter-spacing:0}
}

@media(max-width:1120px){.postcard-deck .star-three{bottom:155px}}

.photo-credit{font-size:14px;padding-bottom:20px;color:var(--muted)}
.photo-credit a{text-decoration:underline}

/* Smooth transformed photographs without adding artificial blur or sharpening. */
.postcard-deck .postcard img{display:block;image-rendering:auto;backface-visibility:hidden;transform:translateZ(0)}
.card-caption{pointer-events:auto}
.card-expand{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;background:transparent;color:var(--blue-dark);border:0;border-radius:50%;cursor:zoom-in;padding:10px}
.card-expand svg{width:24px;height:24px}
.card-expand:hover,.card-expand:focus-visible{background:#b9caf5;outline:2px solid var(--blue)}
.photo-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:8vh 8vw;border:0;background:transparent;color:white;overflow:hidden}
.photo-dialog::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(5px)}
.photo-dialog[open]{display:grid;place-items:center}
.photo-dialog figure{margin:0;max-width:80vw;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.photo-dialog figure img{width:auto;height:auto;max-width:80vw;max-height:78dvh;object-fit:contain;box-shadow:0 20px 70px #0008;border-radius:3px}
.photo-dialog figcaption{font-size:18px;line-height:1.4;text-align:center}
.photo-close{position:absolute;right:3vw;top:3vh;width:48px;height:48px;border:1px solid #ffffff80;border-radius:50%;background:#062573;color:white;font:32px/1 Arial;cursor:pointer}
.photo-close:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
@media(max-width:600px){.photo-dialog{padding:10vh 5vw}.photo-dialog figure,.photo-dialog figure img{max-width:90vw}.photo-dialog figure img{max-height:75dvh}}
.photo-dialog figure img{pointer-events:auto}