/* One coordinate system: the open folder is 1.73 units wide per unit high.
   Physical measurements and the assembled pocket photograph are still missing. */
:root {
  color-scheme: light;
  --folder-ratio: 1.73;
  --left-panel-width: 21.5%;
  --center-panel-width: 39%;
  --right-panel-width: 39.5%;
  --card-width: 94%;
  --insert-width: 88%;
  --insert-top: 0%;
  --insert-step: 4%;
  --pocket-height: 32%;
  --paper: #254e47;
  --paper-light: #315b53;
  --paper-dark: #1f433d;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: #eeeae3; color: #3e4941; font-family: Georgia, 'Times New Roman', serif; }
main { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 32px 0; overflow-x: clip; }
.page-heading { text-align: center; margin: 0 0 32px; }
.page-heading p { margin: 0 0 10px; font-size: 12px; letter-spacing: .16em; }
h1 { margin: 0; font-size: 24px; font-weight: normal; }
.stage { width: 100%; padding: 0 18px; }
.folder {
  width: 100%; max-width: 1320px; aspect-ratio: var(--folder-ratio);
  margin: 0 auto; position: relative; display: flex;
  transform-style: preserve-3d; perspective: 2400px;
  transform-origin: 41% center;
  transition: transform 900ms cubic-bezier(.35, 0, .2, 1);
}
.center-panel, .right-panel, .left-paper, .pocket-front, .panel-back {
  background-color: var(--paper);
  /* Fine, subdued highlights approximate pearlescent stock without repainting any artwork. */
  background-image: url('../assets/folder/grain.svg'), linear-gradient(105deg, #ffffff08, #ffffff00 38%, #0000000a);
}
.left-panel { width: var(--left-panel-width); height: 100%; position: relative; }
.left-panel { z-index: 3; transform-origin: right center; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.35, 0, .2, 1); }
.center-panel { z-index: 1; }
.right-panel { z-index: 2; transform-origin: left center; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(.35, 0, .2, 1); }
.panel-back { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; box-shadow: 2px 4px 8px #16342f24; }
.right-panel .pocket-area { backface-visibility: hidden; }
.folder.is-closed, .folder.is-folding { transform: translateX(9%); }
.folder.is-closed .left-panel { transform: rotateY(180deg); }
.folder.is-closed.is-unlatched .left-panel { transform: rotateY(0deg); }
.folder.is-closed .right-panel, .folder.is-folding .right-panel { transform: rotateY(-180deg); }
.opening-flap { width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer; transform-style: preserve-3d; }
.opening-flap:disabled { cursor: default; }
.opening-flap:focus-visible { background-color: #3d655a; }
.flap-monogram { position: absolute; width: 65%; height: auto; left: 22.5%; top: 50%; transform: translateY(-50%) rotateY(180deg); backface-visibility: hidden; opacity: .3; filter: drop-shadow(-1px -1px 0 #ffffff50); pointer-events: none; }
.close-folder { background: none; border: 0; border-bottom: 1px solid #727d7060; padding: 5px 0; color: inherit; font: inherit; cursor: pointer; margin-bottom: 8px; }
.close-folder:focus-visible { outline: 2px solid #9b8960; outline-offset: 3px; }
.card-shortcuts[hidden], .close-folder[hidden], .geometry-note[hidden] { display: none; }
.left-paper {
  position: absolute; inset: 0;
  /* Photo: diagonal shoulders and a rounded outward point along the left edge. */
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 49% 100%, 1.5% 54%, 0 51%, .7% 47%);
  background-color: var(--paper-light);
}
.center-panel { width: var(--center-panel-width); height: 100%; position: relative; border-left: 1px solid #b0c5b12b; }
.right-panel { width: var(--right-panel-width); height: 100%; position: relative; border-left: 1px solid #102d2975; box-shadow: inset 2px 0 2px #ffffff0b; }
.main-card {
  position: absolute; width: var(--card-width); height: auto;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; box-shadow: 0 1px 2px #102d2933;
}
.pocket-area { position: absolute; inset: 0; isolation: isolate; overflow: hidden; }
.card { padding: 0; border: 0; background: transparent; border-radius: 0; cursor: pointer; aspect-ratio: 1333 / 2000; }
.card img { width: 100%; height: auto; display: block; }
.card:focus-visible { outline: 2px solid #d8c998; outline-offset: 4px; }
.insert {
  position: absolute; top: var(--insert-top); left: 50%; width: var(--insert-width); height: auto;
  transform: translateX(-50%); display: block;
  /* The upper cut is baked into the image's alpha channel. */
  filter: drop-shadow(0 -1px 1px #183b3926);
  pointer-events: none;
}
.dress-code-card {
  z-index: 1;
}
.reception-card {
  top: calc(var(--insert-top) + var(--insert-step));
  z-index: 2;
}
.gifts-card {
  top: calc(var(--insert-top) + var(--insert-step) * 2);
  z-index: 3;
}
.pocket-front {
  position: absolute; z-index: 5; bottom: 0; left: 2%; width: 96%; height: var(--pocket-height);
  border-top: 1px solid #acc3b14a;
  box-shadow: 0 -2px 3px #18352f38, inset 1px 0 #c6d0b51a, inset -1px 0 #112f2c33;
  background-color: var(--paper-light);
}
.pocket-area { cursor: pointer; }
.pocket-area.is-extracting { overflow: visible; clip-path: inset(-120% -2% 0 -2%); }
.insert.is-lifting { transform: translateX(-50%) translateY(var(--lift)); transition: transform 420ms cubic-bezier(.35, 0, .2, 1); }
.insert.is-lifting.is-returning { transform: translateX(-50%); }
.reader[hidden] { display: none; }
.reader { position: fixed; inset: 0; height: 100dvh; z-index: 20; overflow: auto; overscroll-behavior: contain; }
.reader-backdrop { position: fixed; inset: 0; background: rgb(37 44 39 / .56); opacity: 0; transition: opacity 450ms ease; }
.reader.is-reading .reader-backdrop { opacity: 1; }
.reading-space { position: relative; min-height: 100%; pointer-events: none; }
.qr-rsvp-area { position: absolute; z-index: 2; left: var(--start-x); top: var(--start-y); width: var(--start-width); aspect-ratio: 1333 / 2000; transform-origin: top left; transform: translate(var(--travel-x), var(--travel-y)) scale(var(--read-scale)); pointer-events: none; }
.qr-rsvp-area[hidden] { display: none; }
.qr-rsvp-link { position: absolute; left: 66%; top: 74%; width: 21%; height: 14%; pointer-events: auto; cursor: pointer; }
.qr-rsvp-link:focus-visible { outline: 3px solid #8d713e; outline-offset: 4px; }
.card.card-flight { position: absolute; left: var(--start-x); top: var(--start-y); width: var(--start-width); height: auto; transform-origin: top left; transform: translate(0, 0) scale(1); z-index: 1; pointer-events: auto; cursor: default; transition: transform 650ms cubic-bezier(.3, 0, .2, 1); filter: drop-shadow(0 10px 14px #162b2638); box-shadow: none; }
.card.card-flight { clip-path: inset(0 0 var(--concealed-bottom, 0%) 0); transition: transform 650ms cubic-bezier(.3, 0, .2, 1), clip-path 650ms cubic-bezier(.3, 0, .2, 1); }
.reader.is-reading .card-flight { transform: translate(var(--travel-x), var(--travel-y)) scale(var(--read-scale)); clip-path: inset(0); }
/* The principal card approaches directly on a backing of the same green stock;
   inserts first rise in the real pocket, then travel to this reading surface. */
.main-card.card-flight::before { content: ''; position: absolute; inset: -2.5%; background: var(--paper); box-shadow: 0 2px 5px #14362c33; z-index: -1; }
.reader-controls { position: fixed; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; color: #fffdf5; font: 12px system-ui, sans-serif; opacity: 0; transition: opacity 250ms; }
.reader.is-reading .reader-controls { opacity: 1; }
.reader-controls { padding-top: max(10px, env(safe-area-inset-top)); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); background: linear-gradient(#243d34d9, #243d3400); }
.reader-actions { display: flex; gap: 8px; flex-shrink: 0; }
.zoom-card { border: 1px solid #ffffff50; background: #243d34; color: #fffdf5; padding: 9px 12px; border-radius: 3px; font: inherit; cursor: pointer; }
.zoom-card:focus-visible { outline: 2px solid #d8c998; outline-offset: 3px; }
.zoom-card, .close-card, .close-folder, .card-shortcuts button { min-height: 44px; touch-action: manipulation; }
.close-card { border: 1px solid #ffffff50; background: #243d34; color: #fffdf5; padding: 9px 14px; border-radius: 3px; font: inherit; cursor: pointer; }
.close-card span { margin-left: 10px; font-size: 17px; }
.close-card:focus-visible, .card-shortcuts button:focus-visible { outline: 2px solid #d8c998; outline-offset: 3px; }
.card-shortcuts { display: flex; justify-content: center; gap: 16px; margin: 10px 0 14px; }
.card-shortcuts button { background: none; border: 0; border-bottom: 1px solid #727d7060; padding: 5px 0; color: inherit; font: inherit; cursor: pointer; }
.geometry-note { opacity: .75; }
.sr-only { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.is-reading { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .insert.is-lifting, .card.card-flight, .reader-backdrop, .reader-controls { transition: none; } }
footer { text-align: center; margin: 30px auto 0; max-width: 580px; padding: 0 24px; font-family: system-ui, sans-serif; font-size: 11px; line-height: 1.6; color: #656b61; }
footer p { margin: 0 0 6px; }
footer p:first-child { letter-spacing: .08em; }
@media (min-width: 768px) { .stage { width: 82%; margin: 0 auto; padding: 0; } }
@media (max-width: 600px) { main { padding: 24px 0; } .page-heading { margin-bottom: 28px; } h1 { font-size: 21px; } footer { margin-top: 26px; } }
@media (max-width: 767px) {
  html { scrollbar-gutter: auto; }
  .stage { padding-inline: 12px; }
  footer { padding-inline: 16px; font-size: 12px; }
  .card-shortcuts { gap: 8px; }
  .card-shortcuts button { min-width: 88px; padding: 8px; }
  .reader-controls { gap: 8px; }
  #reader-title { font-size: 11px; line-height: 1.3; }
  .reader-actions { gap: 6px; }
  .close-card, .zoom-card { padding-inline: 10px; }
  .close-card span { margin-left: 4px; }
  .geometry-note { display: none; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .stage { transition: margin 900ms cubic-bezier(.35, 0, .2, 1); }
  .stage.is-closed { margin-block: 18vw; }
  .folder.is-closed, .folder.is-folding { transform: translateX(9%) scale(1.65); }
}
@media (prefers-reduced-motion: reduce) { .folder, .left-panel, .right-panel, .stage { transition: none; } }
@media (orientation: landscape) and (max-height: 600px) {
  main { padding: 8px max(12px, env(safe-area-inset-left)); }
  .page-heading { display: none; }
  .stage { width: min(92%, calc((100svh - 116px) * 1.73)); margin: 0 auto; padding: 0; }
  footer { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 12px; max-width: none; }
  #folder-hint { width: 100%; }
  .card-shortcuts { margin: 0; gap: 12px; }
  .close-folder { margin: 0; }
  .geometry-note { display: none; }
}