/* A postcard: white card-stock, one shadow, faces that turn over. */
.r-3 { --tilt: -3deg; } .r-2 { --tilt: -2deg; } .r-1 { --tilt: -1deg; } .r-15 { --tilt: -1.5deg; }
.r1 { --tilt: 1deg; } .r15 { --tilt: 1.5deg; } .r2 { --tilt: 2deg; } .r35 { --tilt: 3.5deg; }
.postcard { position: relative; display: flex; transform: rotate(var(--tilt, 0deg)); }
.postcard__inner { flex: 1; display: grid; transform: perspective(1400px) rotateY(0); transform-style: preserve-3d; transition: transform 400ms var(--ease-turn); }
.postcard[data-flipped] > .postcard__inner { transform: perspective(1400px) rotateY(180deg); }
.face {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; padding: 10px;
  background: var(--paper); border-radius: 2px; box-shadow: var(--card-shadow);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.back { transform: rotateY(180deg); gap: var(--s2); }
.front { cursor: pointer; }
.front img { width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; }
.face__title { padding: var(--s3) var(--s1) 0; }
.face__line { padding: var(--s1) var(--s1) var(--s2); font-size: 1.0625rem; line-height: 1.3; color: var(--muted); }

.turn {
  position: absolute; z-index: 3; top: var(--s4); right: var(--s4); display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--s3); border: 1.5px solid var(--sea-700); border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.96); color: var(--sea-900); font: 800 var(--fs-small) / 1 var(--font-sans);
  transition: background-color 200ms ease, color 200ms ease;
}
.turn::after { content: ""; position: absolute; inset: -4px; }
.turn .icon { width: 1.125rem; height: 1.125rem; }
.turn[aria-pressed="true"] { background: var(--sea-900); color: #fff; border-color: var(--sea-900); }
.back__title { padding-right: 112px; min-height: 36px; display: flex; align-items: center; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sea-700); }
.back .hand { color: var(--sea-700); }
.note { font-size: 1.0625rem; line-height: 1.5; font-style: italic; }
.inwb { font-size: var(--fs-small); line-height: 1.35; color: var(--muted); border-top: 1px dashed var(--terra-400); padding-top: var(--s2); margin-top: auto; }
.inwb b { display: block; font-size: var(--fs-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sea-700); }
.sign { text-align: right; }
@media (min-width: 900px) { .face { padding: 16px; } .back__title { padding-right: 120px; } }
@media (hover: hover) and (pointer: fine) { .turn:hover { background: var(--sea-900); color: #fff; } }

/* No JavaScript: both faces, one after the other, nothing to turn. */
html:not(.js) .postcard__inner { display: block; transform: none; }
html:not(.js) .back { transform: none; margin-top: var(--s4); }
html:not(.js) .turn, html:not(.js) .score { display: none; }

@media (prefers-reduced-motion: reduce) {
  .postcard__inner, .postcard[data-flipped] > .postcard__inner { transform: none; transition: none; }
  .face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity 200ms ease; }
  .back { transform: none; opacity: 0; }
  .postcard[data-flipped] .back { opacity: 1; }
  .postcard[data-flipped] .front { opacity: 0; }
  html:not(.js) .back { opacity: 1; }
}