/* The home page: the passport, front cover to back. Motion is the app's: the press of LiveStamp.swift (drawn by the
   stamp shader in stamp-gl.js), the cover's turn, ink filling the map. Everything here animates transform and opacity only;
   under prefers-reduced-motion every piece is shown as it ends. */

section { position: relative; }
.section { padding: clamp(72px, 10vw, 136px) 0; }
.section-head { max-width: 760px; }
.section-head .lede { margin-top: 20px; }
.center-head { margin-inline: auto; text-align: center; }
.center-head .lede { margin-inline: auto; }

/* ---------- Hero: the booklet ---------- */
.hero { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); overflow: hidden; }
.hero::before { /* a guilloche rosette behind the booklet, printed faint as on a passport's first page */
  content: ""; position: absolute; width: min(1180px, 160vw); aspect-ratio: 1; right: -16%; top: 50%; transform: translateY(-50%);
  background: url("../img/rosette-print.svg") center / contain no-repeat; opacity: 0.08; pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; min-height: min(700px, calc(100svh - var(--header) - 40px)); }
.hero-copy h1 { font-size: clamp(44px, 4.9vw, 72px); max-width: 9.6em; }
.hero-copy .lede { margin: 24px 0 32px; max-width: 25em; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .hero-copy .lede { margin: 18px 0 24px; }
}

/* The stage is two pages wide on a large screen: the closed book sits in its middle, and as the cover opens the book slides
   so the cover lies open on the left and the first page on the right. On a smaller screen the cover opens and goes. */
.booklet-stage { --page-w: clamp(230px, 20.5vw, 296px); position: relative; width: calc(var(--page-w) * 2); justify-self: center; }
.booklet-frame { position: relative; width: var(--page-w); margin-inline-start: var(--page-w); aspect-ratio: 0.706; perspective: 2200px; }
.booklet { position: absolute; inset: 0; transform-style: preserve-3d; }
.page {
  position: absolute; inset: 0; border-radius: 3px 12px 12px 3px; overflow: hidden;
  background-color: #F9F6EF; background-image: url("../img/print-waves.svg"); background-size: 300px 300px;
  box-shadow: inset 12px 0 18px -14px rgb(43 47 58 / 0.45), 0 30px 50px -28px rgb(27 42 74 / 0.55), 0 0 0 1px rgb(43 47 58 / 0.08);
}
.page-head, .page-no { position: absolute; left: 0; right: 0; text-align: center; font: 600 11px/1 var(--sans); letter-spacing: 0.32em; color: var(--print); }
.page-head { top: 6.5%; }
.page-no { bottom: 4.5%; font: 400 12px/1 var(--mono); letter-spacing: 0.1em; }
.page canvas, .page .fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.page .fallback img { position: absolute; width: var(--w); transform: translate(-50%, -50%) rotate(var(--r)); left: var(--x); top: var(--y); }
.leaf { display: none; }
.cover { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; z-index: 2; }
.cover-face, .cover-inside { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cover-face { border-radius: 3px 14px 14px 3px; }
.cover-face img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; box-shadow: 0 30px 50px -24px rgb(19 32 59 / 0.7); }
.cover-inside { transform: rotateY(180deg); border-radius: 14px 3px 3px 14px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 30% 10%, rgb(255 255 255 / 0.09), transparent 60%), var(--navy);
  box-shadow: inset -14px 0 20px -14px rgb(0 0 0 / 0.55), 0 30px 50px -28px rgb(19 32 59 / 0.6); }
.cover-inside::before { content: ""; position: absolute; width: 150%; aspect-ratio: 1; left: -25%; top: -6%; background: url("../img/rosette-foil.svg") center / contain no-repeat; opacity: 0.2; }
.cover-inside .crest { position: relative; width: 26%; color: var(--foil); opacity: 0.85; }

.booklet-frame .cover { transform: rotateY(-178deg); }
.motion .booklet-frame:not(.is-open) .cover { transform: rotateY(0deg); }
.motion .booklet-frame .cover { transition: transform 1.3s cubic-bezier(0.45, 0.05, 0.2, 1), opacity 0.45s 0.7s; }
.motion .booklet-frame:not(.is-open) .booklet { transform: translateX(-50%) rotate(-2.5deg); }
.motion .booklet-frame .booklet { transition: transform 1.3s cubic-bezier(0.45, 0.05, 0.2, 1); }
@media (max-width: 1100px) { /* no room for the cover on the left: it opens and goes */
  .booklet-stage { --page-w: clamp(240px, 36vw, 320px); width: var(--page-w); }
  .booklet-frame { margin-inline-start: 0; }
  .booklet-frame .cover, .motion .booklet-frame.is-open .cover { transform: rotateY(-150deg); opacity: 0; }
  .motion .booklet-frame:not(.is-open) .cover { transform: rotateY(0deg); opacity: 1; }
  .motion .booklet-frame:not(.is-open) .booklet { transform: rotate(-2.5deg); }
}
@media (max-width: 860px) {
  .booklet-stage { --page-w: min(74vw, 330px); margin-top: 22px; }
}

/* ---------- The camera roll: a map that inks ---------- */
.photos { padding-bottom: clamp(56px, 8vw, 112px); }
.atlas { position: relative; margin: clamp(32px, 5vw, 56px) auto 0; width: min(100% - 2 * var(--gutter), 1360px); }
.atlas svg { width: 100%; height: auto; overflow: visible; }
.atlas .land path { fill: #E3DACA; stroke: #F7F3EA; stroke-width: 0.45; }
.atlas .inked path { stroke: #F7F3EA; stroke-width: 0.45; opacity: 0.92; transform-box: fill-box; transform-origin: center; }
.motion .atlas:not(.is-inking) .inked path { opacity: 0; transform: scale(1.35); }
.motion .atlas.is-inking .inked path { transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-press); transition-delay: var(--d, 0s); }
.atlas-count { position: absolute; left: 0; bottom: 4%; display: flex; align-items: baseline; gap: 10px; color: var(--navy); }
.atlas-count .n { font: 400 clamp(44px, 5vw, 72px)/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; min-width: 1.15em; }
.atlas-count .l { font-size: 16px; color: var(--print); }
@media (max-width: 640px) { .atlas-count { position: static; margin-top: 8px; } }

.rules { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 72px); }
.rules p { margin: 0; padding: 18px 0; border-top: 1px dashed rgb(91 104 135 / 0.38); font-size: 16px; }
.rules b { color: var(--navy); font-weight: 600; }
.promise { grid-column: 1 / -1; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 22px 26px; border-radius: 18px; background: var(--navy); color: var(--paper); }
.promise strong { font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--serif); font-weight: 400; margin-inline-end: auto; }
.promise a { color: var(--foil); font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; } }

/* ---------- The spread: a stamp for every country ---------- */
.stamps { background-color: var(--paper-deep); }
.spread-wrap { margin-top: clamp(36px, 5vw, 60px); display: grid; justify-items: center; gap: 18px; }
.spread { position: relative; width: min(100% - 2 * var(--gutter), 1080px); display: grid; grid-template-columns: 1fr 1fr; border-radius: 14px;
  box-shadow: 0 44px 60px -36px rgb(27 42 74 / 0.45), 0 0 0 1px rgb(43 47 58 / 0.07); }
.spread .sheet { position: relative; aspect-ratio: 0.71; background-color: #F9F6EF; background-image: url("../img/print-waves.svg"); background-size: 360px 360px; }
.spread .sheet:first-child { border-radius: 14px 3px 3px 14px; box-shadow: inset -22px 0 26px -22px rgb(43 47 58 / 0.42); }
.spread .sheet:last-child { border-radius: 3px 14px 14px 3px; box-shadow: inset 22px 0 26px -22px rgb(43 47 58 / 0.42); }
.spread .page-head { top: 5%; }
.spread .page-no { bottom: 4%; }
.spread canvas, .spread .fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.spread .fallback img { position: absolute; width: var(--w); left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(var(--r)); }
.spread-foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: center; max-width: 760px; padding-inline: var(--gutter); text-align: center; }
.spread-foot p { margin: 0; font-size: 15px; color: #4E5A77; } /* 5.4:1 on the deeper paper */
@media (max-width: 720px) { /* the pages one under the other, each pressed as it arrives */
  .spread { width: min(100% - 2 * var(--gutter), 420px); grid-template-columns: 1fr; gap: 18px; box-shadow: none; }
  .spread .sheet:first-child, .spread .sheet:last-child { border-radius: 4px 14px 14px 4px; box-shadow: inset 14px 0 18px -16px rgb(43 47 58 / 0.4), 0 30px 44px -30px rgb(27 42 74 / 0.5); }
}

/* ---------- Finishes: the dark stamp page ---------- */
.finishes { background: radial-gradient(90% 70% at 72% 45%, #232846 0%, var(--midnight) 62%); color: rgb(247 243 234 / 0.86); }
.finishes .display { color: var(--paper); }
.finishes .lede { color: rgb(247 243 234 / 0.86); }
.fin-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.fin-copy .lede { margin-top: 20px; }
.ladder { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 2px; }
.ladder button {
  width: 100%; display: grid; grid-template-columns: 9.5em 1fr; align-items: baseline; gap: 4px 14px; text-align: start; cursor: pointer;
  padding: 11px 14px; border: 0; border-radius: 12px; background: transparent; color: rgb(247 243 234 / 0.82); transition: background-color 0.2s;
}
.ladder button:hover { background: rgb(255 255 255 / 0.05); }
.ladder button[aria-pressed="true"] { background: rgb(255 255 255 / 0.09); color: var(--paper); box-shadow: inset 0 0 0 1px rgb(217 178 95 / 0.45); }
.ladder .name { font: 400 24px/1.1 var(--serif); color: var(--paper); }
.ladder .band { font-size: 14.5px; color: rgb(247 243 234 / 0.78); }
.ladder .home { margin-top: 10px; }
.fin-note { margin-top: 22px; font-size: 13px; color: rgb(247 243 234 / 0.7); }
.fin-stage { margin: 0; position: relative; display: grid; justify-items: center; gap: 18px; }
.fin-canvas-wrap { position: relative; width: min(100%, 560px); aspect-ratio: 1.3; touch-action: pan-y; cursor: grab; }
.fin-canvas-wrap canvas, .fin-canvas-wrap .fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.fin-canvas-wrap .fallback img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.fin-stage figcaption { text-align: center; max-width: 30em; }
.fin-stage .what { font: 400 26px/1.2 var(--serif); color: var(--paper); }
.fin-stage .why { font-size: 15px; color: rgb(247 243 234 / 0.8); margin-top: 6px; }
.fin-stage .hint { font-size: 13px; color: rgb(247 243 234 / 0.7); margin-top: 10px; }
.tilt-btn { margin-top: 12px; }
@media (max-width: 900px) { /* the heading, then the stamp held under the header while the ladder scrolls past it */
  .finishes { background: var(--midnight); }
  .fin-grid { grid-template-columns: 1fr; gap: 20px; }
  .fin-copy { display: contents; }
  .fin-copy h2 { order: 1; }
  .fin-copy .lede { order: 2; margin-top: 0; }
  .fin-stage { order: 3; position: sticky; top: var(--header); z-index: 1; padding: 6px 0 12px; background: linear-gradient(var(--midnight) 82%, rgb(22 22 28 / 0)); }
  .fin-stage .hint, .tilt-btn { display: none; }
  .fin-canvas-wrap { width: min(100%, 420px); aspect-ratio: 1.55; }
  .ladder { order: 4; margin-top: 0; }
  .fin-note { order: 5; margin-top: 4px; }
  .ladder button { grid-template-columns: 7.6em 1fr; padding: 10px 12px; }
  .ladder .name { font-size: 21px; }
}

/* ---------- Places, visas, blacklight ---------- */
.places-grid { margin-top: clamp(36px, 5vw, 60px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto; gap: clamp(20px, 3vw, 32px); }
.cell { border-radius: 22px; padding: clamp(22px, 3vw, 36px); background: rgb(255 255 255 / 0.5); box-shadow: inset 0 0 0 1px rgb(91 104 135 / 0.16); }
.cell h3 { margin-bottom: 10px; }
.cell p { font-size: 16px; }
.cell-places { grid-row: span 2; display: grid; grid-template-rows: auto 1fr; gap: 18px; background: var(--midnight); color: rgb(247 243 234 / 0.86); box-shadow: none; overflow: hidden; }
.cell-places h3 { color: var(--paper); }
.figures { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.figures li { display: grid; }
.figures .n { font: 400 30px/1 var(--serif); color: var(--foil); }
.figures .l { font-size: 13.5px; color: rgb(247 243 234 / 0.8); line-height: 1.35; margin-top: 3px; }
.places-shots { display: flex; gap: 12px; align-items: flex-start; justify-content: center; margin: 22px -8px -40px; }
.places-shots img { width: 46%; border-radius: 20px; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.8); }
.places-shots img:nth-child(2) { margin-top: 30px; }
.cell-visa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: center; }
.cell-visa img { border-radius: 12px; box-shadow: 0 18px 34px -20px rgb(27 42 74 / 0.6); transform: rotate(-2deg); }
.cell-uv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px; align-items: center; }
.uv-page {
  position: relative; aspect-ratio: 0.72; border-radius: 6px 14px 14px 6px; overflow: hidden; cursor: crosshair; touch-action: pan-y;
  background-color: #F9F6EF; background-image: url("../img/print-waves.svg"); background-size: 260px;
  box-shadow: 0 24px 40px -26px rgb(27 42 74 / 0.6), 0 0 0 1px rgb(43 47 58 / 0.08);
}
.uv-page .entry, .uv-page .exit { position: absolute; left: 50%; width: 64%; transform: translate(-50%, -50%) rotate(-4deg); }
.uv-page .entry { top: 33%; left: 46%; }
.uv-page .exit { top: 68%; left: 55%; transform: translate(-50%, -50%) rotate(5deg); }
.uv-page .page-head { top: auto; bottom: 5%; }
.uv-dark { position: absolute; inset: 0; background: #1E1638; }
.uv-dark .entry, .uv-dark .exit { filter: brightness(0.3) saturate(0.35) hue-rotate(200deg); opacity: 0.85; }
.uv-dark .print { position: absolute; left: 4%; top: 5%; width: 92%; mix-blend-mode: screen; }
.uv-full { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); pointer-events: none; }
.uv-page.lamp-on .uv-full { opacity: 1; }
.uv-lens { position: absolute; left: 0; top: 0; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px rgb(165 120 255 / 0.55), 0 0 40px 8px rgb(120 80 255 / 0.35); transition: opacity 0.25s; will-change: transform; }
.uv-lens .uv-dark { will-change: transform; }
.uv-page.lens-on .uv-lens { opacity: 1; }
.uv-page.lamp-on .uv-lens { opacity: 0; }
.cell-uv .btn { margin-top: 6px; }
@media (max-width: 980px) {
  .places-grid { grid-template-columns: 1fr; }
  .cell-places { grid-row: auto; }
  .places-shots { margin-bottom: -60px; }
}
@media (max-width: 560px) {
  .cell-visa, .cell-uv { grid-template-columns: 1fr; }
  .uv-page { width: min(100%, 300px); justify-self: center; }
}

/* ---------- Covers ---------- */
.covers-grid { list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(22px, 2.4vw, 34px) clamp(14px, 1.8vw, 26px); perspective: 1400px; }
.covers-grid li { display: grid; gap: 10px; align-content: start; }
.cv { position: relative; aspect-ratio: 0.705; border-radius: 3px 10px 10px 3px; overflow: hidden; transform-origin: 0 50%;
  box-shadow: 0 16px 28px -16px rgb(19 32 59 / 0.65), 0 2px 4px -2px rgb(19 32 59 / 0.3); }
.cv img { width: 100%; height: 100%; object-fit: cover; }
.cv::after { /* the light on the foil, moved by the pointer */
  content: ""; position: absolute; width: 160%; aspect-ratio: 1; left: -30%; top: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 246 220 / 0.5), rgb(255 246 220 / 0.14) 45%, transparent 70%);
  mix-blend-mode: soft-light; opacity: 0; transform: translate(var(--lx, 0px), var(--ly, 0px)); transition: opacity 0.3s;
}
.cv:hover::after { opacity: 1; }
.motion .covers-grid:not(.is-in) .cv { transform: rotateY(-75deg); opacity: 0; }
.motion .covers-grid .cv { transition: transform 0.9s var(--ease-out), opacity 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.covers-grid .nm { font: 400 21px/1.1 var(--serif); color: var(--navy); }
.covers-grid .how { font-size: 13.5px; line-height: 1.4; color: var(--print); }
@media (max-width: 1100px) { .covers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .covers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .covers-grid .nm { font-size: 18px; } .covers-grid .how { font-size: 13px; } }

/* ---------- Films ---------- */
.films { background-color: var(--paper-deep); }
.film-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.film-player { position: relative; width: min(100%, 340px); justify-self: center; aspect-ratio: 886 / 1920; border-radius: 44px; overflow: hidden; background: var(--midnight);
  box-shadow: 0 0 0 9px #101018, 0 0 0 10px #2A2A33, 0 40px 70px -30px rgb(19 32 59 / 0.75); }
.film-player video, .film-player img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: auto 0 0 0; margin: auto; display: flex; justify-content: center; padding-bottom: 28px; background: linear-gradient(transparent, rgb(0 0 0 / 0.45)); height: 45%; align-items: flex-end; }
.film-player.is-playing .film-play, .film-player.is-playing > img { display: none; }
.film-copy .lede { margin-top: 20px; }
.film-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 0; }
.film-facts li { padding: 14px 0; border-top: 1px dashed rgb(91 104 135 / 0.38); font-size: 16px; }
.film-facts b { color: var(--navy); font-weight: 600; }
.studio-shots { margin-top: 30px; display: flex; gap: 14px; }
.studio-shots img { width: min(44%, 210px); border-radius: 20px; box-shadow: 0 18px 34px -20px rgb(19 32 59 / 0.6); }
.studio-shots img:nth-child(2) { transform: translateY(22px) rotate(1.5deg); }
@media (max-width: 860px) { .film-grid { grid-template-columns: 1fr; } .film-player { width: min(76vw, 320px); } }

/* ---------- Friends ---------- */
.friends-grid { margin-top: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); align-items: start; }
.friend { margin: 0; display: grid; gap: 16px; }
.friend img { border-radius: 30px; box-shadow: 0 30px 50px -30px rgb(19 32 59 / 0.7), 0 0 0 1px rgb(0 0 0 / 0.05); }
.friend:nth-child(2) { margin-top: clamp(40px, 7vw, 110px); }
.friend:nth-child(3) { margin-top: clamp(20px, 3.5vw, 55px); }
.friend figcaption { font-size: 16px; }
.friend figcaption b { display: block; font: 400 24px/1.15 var(--serif); color: var(--navy); margin-bottom: 4px; font-weight: 400; }
.friends-foot { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.friends-foot p { margin: 0; color: var(--print); font-size: 15px; max-width: 46em; }
@media (max-width: 760px) {
  .friends-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 24px; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
  .friends-grid::-webkit-scrollbar { display: none; }
  .friend { scroll-snap-align: center; }
  .friend:nth-child(2), .friend:nth-child(3) { margin-top: 0; }
}

/* ---------- The souvenir sheet ---------- */
.sheet-wrap { margin-top: clamp(36px, 5vw, 60px); padding: clamp(18px, 2.4vw, 28px); border-radius: 6px; background: #E4DAC6;
  box-shadow: 0 30px 60px -40px rgb(27 42 74 / 0.5), 0 0 0 1px rgb(91 104 135 / 0.12); }
.sheet-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: clamp(14px, 2vw, 22px); }
.pstamp { --perf: 7px; position: relative; padding: 14px; background: #fff;
  -webkit-mask: radial-gradient(circle at center, transparent 3.2px, #000 3.6px) -3.5px -3.5px / var(--perf) var(--perf) repeat, linear-gradient(#000 0 0) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
  mask: radial-gradient(circle at center, transparent 3.2px, #000 3.6px) -3.5px -3.5px / var(--perf) var(--perf) repeat, linear-gradient(#000 0 0) 7px 7px / calc(100% - 14px) calc(100% - 14px) no-repeat;
  filter: drop-shadow(0 1px 1.5px rgb(27 42 74 / 0.18)); }
.pstamp .inner { height: 100%; display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 18px; background: var(--c, var(--navy)); color: var(--paper); }
.pstamp h3 { font: 400 27px/1.08 var(--serif); color: var(--paper); }
.pstamp p { margin: 0; font-size: 15px; line-height: 1.45; color: rgb(247 243 234 / 0.88); }
.pstamp .pic { align-self: end; justify-self: center; width: min(100%, 230px); border-radius: 16px; box-shadow: 0 14px 30px -16px rgb(0 0 0 / 0.7); }
.pstamp[data-c="navy"] { --c: var(--navy); }
.pstamp[data-c="burgundy"] { --c: #5E1A26; }
.pstamp[data-c="forest"] { --c: #1F3B2D; }
.pstamp[data-c="midnight"] { --c: var(--midnight); }
.pstamp.big { grid-row: span 2; }
.pstamp.big .pic { width: min(80%, 260px); }
.pstamp .denom { position: absolute; right: 26px; top: 24px; font: 700 13px/1 var(--mono); letter-spacing: 0.14em; color: rgb(247 243 234 / 0.6); }
.pstamp.wide { grid-column: span 2; }
.pstamp.wide .inner { grid-template-columns: 1fr auto; grid-template-rows: auto; align-items: center; }
.pstamp.wide .pic { width: 150px; }
@media (max-width: 860px) { .sheet-grid { grid-template-columns: 1fr 1fr; } .pstamp.big { grid-row: auto; grid-column: span 2; } .pstamp.wide { grid-column: span 2; } }
@media (max-width: 560px) { .sheet-grid { grid-template-columns: 1fr; } .pstamp.big, .pstamp.wide { grid-column: auto; } .pstamp.wide .inner { grid-template-columns: 1fr; } }

/* ---------- The back cover ---------- */
.back { background: var(--navy); color: rgb(247 243 234 / 0.9); padding: clamp(80px, 11vw, 150px) 0 clamp(60px, 8vw, 100px); overflow: hidden; }
.back::before { content: ""; position: absolute; width: min(900px, 140vw); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: url("../img/rosette-foil.svg") center / contain no-repeat; opacity: 0.12; pointer-events: none; }
.back .wrap { position: relative; display: grid; justify-items: center; text-align: center; }
.back .crest { width: 74px; height: 74px; color: var(--foil); margin-bottom: 26px; }
.back .display { color: var(--paper); max-width: 13em; }
.back .lede { color: rgb(247 243 234 / 0.88); margin: 22px auto 34px; max-width: 34em; }
.back .ctas { justify-content: center; }