/* ---------- Pages ---------- */
.page {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; height: 100%;
  background: var(--paper); color: var(--ink);
  --band: var(--cover-1, var(--navy));
}
/* paper grain */
.page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: 0.55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .47 0 0 0 0 .40 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* guilloché band along the outer edge */
.page::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 16%; pointer-events: none; z-index: 0;
  opacity: 0.14;
  background-image:
    repeating-radial-gradient(circle at 0 50%, var(--band) 0 0.6px, transparent 0.6px 6px),
    repeating-linear-gradient(0deg, var(--band) 0 0.6px, transparent 0.6px 5px),
    repeating-linear-gradient(60deg, var(--band) 0 0.5px, transparent 0.5px 7px);
  -webkit-mask-image: linear-gradient(90deg, #000 20%, transparent);
  mask-image: linear-gradient(90deg, #000 20%, transparent);
}
.page--left::after { left: 0; }
.page--right::after { right: 0; transform: scaleX(-1); }

.page__no {
  position: absolute; bottom: 3.5%; z-index: 1;
  font-family: var(--font-mono); font-size: calc(var(--half-w) * 0.028); letter-spacing: 0.25em; color: var(--ink-faint);
}
.page--left .page__no { left: 9%; }
.page--right .page__no { right: 9%; }
.page__head {
  position: absolute; top: 4%; left: 0; right: 0; z-index: 1; text-align: center;
  font-family: var(--font-mono); font-size: calc(var(--half-w) * 0.026); letter-spacing: 0.3em; color: var(--ink-faint);
}
.page__watermark {
  position: absolute; left: 12%; right: 12%; top: 22%; height: 56%; z-index: 0;
  opacity: 0.07; color: var(--ink); pointer-events: none;
}
/* faint abstract landscape watermark on visa pages (never an emblem) */
.page--visa::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' fill='none' stroke='%231b1a1f' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' opacity='.09'%3E%3Ccircle cx='146' cy='38' r='12'/%3E%3Cpath d='M8 84 L48 40 L70 66 L84 52 L120 84'/%3E%3Cpath d='M12 96 q12 -6 24 0 t24 0 t24 0 t24 0 t24 0 t24 0 t24 0'/%3E%3Cpath d='M28 108 q12 -6 24 0 t24 0 t24 0 t24 0 t24 0 t24 0'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .47 0 0 0 0 .40 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 62% auto, 180px 180px;
  background-position: 50% 58%, 0 0;
  background-repeat: no-repeat, repeat;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--visa::before { mix-blend-mode: screen; opacity: .35; } }
:root[data-theme="dark"] .page--visa::before { mix-blend-mode: screen; opacity: .35; }
.page__stamps { position: absolute; inset: 0; z-index: 2; }

/* ---------- Stamps ---------- */
.stamp {
  position: absolute; transform-origin: 50% 50%;
  transform: rotate(var(--rot, 0deg));
  opacity: 0;
}
.stamp.is-landed { opacity: 1; }
.stamp .stamp-svg { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
@keyframes thunk {
  0%   { opacity: 0; transform: rotate(var(--rot)) scale(1.22); filter: contrast(1.4); }
  50%  { opacity: 1; transform: rotate(var(--rot)) scale(0.985); filter: contrast(1.3); }
  100% { opacity: 1; transform: rotate(var(--rot)) scale(1); filter: contrast(1); }
}
.stamp.is-thunk { animation: thunk var(--dur-thunk) var(--ease-thunk) forwards; }
@keyframes page-shake {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(0.6px, 1.6px); }
  60% { transform: translate(-0.4px, -0.9px); }
}
.page.is-shaking { animation: page-shake 220ms ease-out; }
.stamp.is-lifted {
  transform: rotate(var(--rot)) scale(1.06) translateY(-2%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}
/* dark paper: ink is inverted (hue kept) and screened, so stamps read as light ink on dim paper */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page .stamp .stamp-svg { mix-blend-mode: screen; opacity: .9; filter: invert(1) hue-rotate(180deg) saturate(1.1); }
}
:root[data-theme="dark"] .page .stamp .stamp-svg { mix-blend-mode: screen; opacity: .9; filter: invert(1) hue-rotate(180deg) saturate(1.1); }

/* ---------- Inside cover ---------- */
.page--cover-inside { display: grid; place-items: center; align-content: center; gap: 8%; text-align: center; padding: 14% 12%; }
/* the same emblem as the cover, blind-embossed into the paper */
.page--cover-inside .motif {
  width: 52%; height: auto; aspect-ratio: 120 / 130; opacity: 0.9;
  filter:
    saturate(0.55) brightness(0.92)
    drop-shadow(0 1px 0 rgba(255,255,255,.85))
    drop-shadow(0 -0.6px 0 rgba(0,0,0,.28));
}
.page--cover-inside p {
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 12, "SOFT" 60, "WONK" 1;
  font-size: calc(var(--half-w) * 0.052); line-height: 1.4; color: var(--ink-soft); text-wrap: balance;
}

/* ---------- Data page ---------- */
.page__emblem {
  position: absolute; left: 50%; top: 52%; width: 66%; height: auto; aspect-ratio: 120 / 130;
  transform: translate(-50%, -50%); z-index: 0; opacity: 0.05; pointer-events: none;
  filter: saturate(0.25) brightness(0.75);
}
.page--data > *:not(.page__emblem) { position: relative; z-index: 1; }
.page--data { padding: 12% 12% 10%; display: flex; flex-direction: column; gap: 6%; }
.page--data .data__row { display: flex; gap: 7%; align-items: flex-start; }
.page--data .photo-slot {
  width: 36%; aspect-ratio: 3 / 4; flex: none; position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--paper-3), var(--paper-2)); border: 1px solid var(--line);
}
.page--data .photo-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink-faint); }
.page--data dl { margin: 0; display: grid; gap: 0.35em; align-content: start; flex: 1; }
.page--data dt { font-family: var(--font-mono); font-size: calc(var(--half-w) * 0.026); letter-spacing: 0.22em; color: var(--ink-faint); text-transform: uppercase; }
.page--data dd { margin: 0 0 0.45em; font-family: var(--font-serif); font-size: calc(var(--half-w) * 0.055); line-height: 1.1; font-variation-settings: "opsz" 24, "SOFT" 30, "WONK" 0; }
.page--data .data__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em 1em; }
.page--data .notice {
  margin-top: auto; font-family: var(--font-mono); font-size: calc(var(--half-w) * 0.026);
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--ink-faint); text-align: center;
}