/* The watercolor is a portrait postcard resting on warm, lightly grained paper. */
:root {
  color-scheme: light;
  font-family: var(--latin);
  color: #24251f;
  background: #FFFFEC;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
a { color: inherit; }
:focus-visible { outline: 2px solid #375c70; outline-offset: 4px; }
.postcard-page {
  min-height: calc(100svh - var(--header-height));
  padding: clamp(20px, 4vw, 44px) max(18px, env(safe-area-inset-right)) 48px max(18px, env(safe-area-inset-left));
  background-color: #FFFFEC;
  background-image: url("handmade-paper.svg");
  background-size: 480px 480px;
}
.invitation {
  position: relative;
  width: min(100%, 640px);
  margin: 0 auto;
  padding: 8px;
  background: #fffdf7;
  box-shadow: 0 2px 4px #5b51451a, 0 12px 30px #5b514524;
}
.postcard-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1368;
  overflow: hidden;
  container-type: inline-size;
}
.painting { position: absolute; inset: 0; overflow: hidden; }
/* Exact approved painting crop from scan 3: (400,32), 1080 × 1368.
   The card keeps that ratio on every screen; no landscape crop or distortion. */
.painting-crop { position: absolute; inset: 0; overflow: hidden; }
.painting img { position: absolute; width: 157.407407%; height: auto; max-width: none; left: -37.037037%; top: -2.339181%; }
.invitation-text {
  position: absolute;
  top: 13%;
  left: 7%;
  right: 5%;
  font-size: 7.3cqw;
  line-height: 1.3;
  font-style: italic;
  color: #454640;
  mix-blend-mode: multiply;
  transform: rotate(-.45deg);
  transform-origin: left center;
}
.invitation-text h1, .invitation-text p { font-size: inherit; font-weight: 400; margin: 0; }
.invitation-text h1 { white-space: nowrap; }
.invitation-text:lang(zh-Hant) { font-family: var(--chinese); font-style: normal; }
.invitation-text p.invitation-location {
  margin-top: .24em;
  font-size: .66em;
  line-height: 1.4;
}
/* Clip dry graphite grain to the actual glyphs: the watercolor stays untouched.
   Plain graphite is the fallback when a browser cannot clip text backgrounds. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .invitation-text h1, .invitation-text time, .invitation-location, .album-message p {
    background-color: #454640;
    background-image: url("pencil-grain.svg");
    background-size: 128px 128px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active) {
  .invitation-text h1, .invitation-text time, .invitation-location, .album-message p {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}
/* The paper and header stay still while the two equally sized cards slide. */
.postcard-page { padding-left: 0; padding-right: 0; }
.postcard-deck { width: min(100%, 704px); margin: 0 auto; overflow: hidden; touch-action: pan-y pinch-zoom; user-select: none; }
.postcard-track { display: flex; width: 200%; transition: transform 420ms cubic-bezier(.22,.7,.28,1); }
.postcard-slide { flex: 0 0 50%; min-width: 0; padding: 0 32px 32px; }
.album { background-image: url("handmade-paper.svg"); background-size: 480px; }
.album-art { overflow: visible; }
.album-art::after { display: none; }
.mounted-photo { position: absolute; top: 3%; left: 50%; width: 70%; margin: 0; padding: 1.5%; background: #fffdf7; transform: translateX(-50%) rotate(-3deg); box-shadow: 1px 4px 8px #54482d30; }
.mounted-photo img { display: block; width: 100%; height: auto; }
.mounted-photo::before, .mounted-photo::after { content: ""; position: absolute; z-index: 1; width: 10%; aspect-ratio: 1; top: -3px; left: -3px; background: linear-gradient(135deg,#d7cbb5 0%,#eee5d5 49%,transparent 50%); filter: drop-shadow(0 1px 1px #54482d33); }
.mounted-photo::after { top: auto; left: auto; bottom: -3px; right: -3px; transform: rotate(180deg); }
.album-message { position: absolute; left: 3%; right: 3%; bottom: 2%; text-align: center; font-style: italic; color: #454640; }
.album-message p { font-weight: 400; }
.album-title { font-size: 5.8cqw; line-height: 1.1; margin: 0 0 1.2cqw; }
.album-detail { font-size: max(11px,4.2cqw); line-height: 1.2; margin: 0; }
.album-message:lang(zh-Hant) { font-family: var(--chinese); font-style: normal; }
.postcard-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto; color: #454640; }
.postcard-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.postcard-controls button:disabled { opacity: .22; cursor: default; }
.postcard-controls svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.postcard-counter { font-size: 14px; letter-spacing: 2px; }
@media (max-width:650px) { .postcard-slide { padding-left: max(18px,env(safe-area-inset-left)); padding-right: max(18px,env(safe-area-inset-right)); padding-bottom: 25px; } }
@media (prefers-reduced-motion:reduce) { .postcard-track { transition: none; } }
/* Fine paper grain lies over the ink too, so lettering belongs to the card. */
.postcard-art::after { content: ""; position: absolute; inset: 0; background: url("paper-grain.svg"); opacity: .35; pointer-events: none; }
@media (max-width: 650px) {
  .invitation { padding: 6px; }
  .postcard-page { padding-top: 22px; padding-bottom: 30px; }
}