/* dennis: one postcard on a felt table. Fonts: Fraunces, Hanken Grotesk (SIL OFL 1.1), self-hosted. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
:root {
  --bg: #7C4A4A; --ink: #2B2528; --muted: #6A5D5A; --accent: #8E1B1E;
  --font-display: "Fraunces", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --gut: clamp(6px, .7vw, 14px);
  --mh: clamp(190px, 27svh, 300px);
  --soft: cubic-bezier(.22, .8, .24, 1);
}
html, body { height: 100%; }
body > .sr-only, body > [aria-live] { position: fixed !important; }
body { background: var(--bg) url("/img/bits/surface.webp") center/cover fixed; color: var(--ink); overflow-x: hidden; }

.table { min-height: 100svh; padding: var(--gut); perspective: 2200px; display: flex; overflow: hidden; }
.card, .flip { flex: 1; display: flex; transform-style: preserve-3d; min-height: 0; }
.card { will-change: transform; }
.flip { position: relative; }
.face {
  flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0;
  background: #FAF4EA url("/img/bits/paper.webp") center/cover;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(43, 20, 20, .35), 0 14px 40px rgba(43, 20, 20, .32);
}

/* the photograph */
.photo { position: relative; z-index: 0; isolation: isolate; flex: 1; min-height: 340px; margin: var(--gut) var(--gut) 0; overflow: hidden; cursor: pointer; background: #975F5F; }
.backdrop { position: absolute; inset: -3%; width: 106%; max-width: none; height: 106%; object-fit: cover; }
.backdrop.still { inset: 0; width: 100%; height: 100%; }
.lost .photo { cursor: default; }
.light { position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(38% 46% at 42% 40%, rgba(255, 226, 205, .85), rgba(255, 226, 205, 0) 72%);
  animation: pool 19s ease-in-out infinite alternate; }
@keyframes pool { from { transform: translate3d(-4%, -2%, 0); opacity: .75; } to { transform: translate3d(6%, 3%, 0); opacity: 1; } }
.bird { position: absolute; left: 50%; bottom: -3%; height: 104%; aspect-ratio: 1; transform: translateX(-50%); transform-origin: 50% 92%; pointer-events: none; }
.bird img { position: absolute; max-width: none; }
.base { inset: 0; width: 100%; height: 100%; }
.heads { position: absolute; left: 14.99%; top: 0; width: 69.93%; height: 55.98%; transform-origin: 50% 100%; }
.heads img { inset: 0; width: 100%; height: 100%; opacity: 0; }
.heads img.on { opacity: 1; }
.motes, .crumbs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crumb { position: absolute; width: clamp(16px, 1.9vw, 34px); height: auto; margin: -1em 0 0 -1em; max-width: none; filter: drop-shadow(1px 2px 1px rgba(40, 15, 15, .45)); }

/* paper cards that act as buttons */
.pcard {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: var(--btn-h); padding: .35em 1.5em; border: 0; color: var(--ink); text-decoration: none; cursor: pointer;
  font: 500 clamp(17px, 1.05vw, 21px)/1.1 var(--font-body); white-space: nowrap;
  background: url("/img/bits/card-cream.webp") center/100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60, 35, 30, .3));
  transition: transform .6s var(--soft), filter .25s ease-out;
}
.pcard.short { background-image: url("/img/bits/card-cream-short.webp"); padding-inline: 1.2em; min-width: 76px; }
.pcard.gold { background-image: url("/img/bits/card-gold.webp"); font-weight: 650; min-height: clamp(56px, 3.6vw, 70px); padding-inline: 1.7em; font-size: clamp(18px, 1.15vw, 23px); }
.pcard:hover { transform: translateY(-2px); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), filter .25s ease-out; filter: drop-shadow(0 4px 3px rgba(60, 35, 30, .34)); }
.pcard:active { transform: translateY(1px) scale(.975); transition: transform 35ms linear; }
.pcard.is-off { opacity: .5; cursor: not-allowed; transform: none; }
.pcard img { flex: none; }
[data-copy-text], .no-ca { text-transform: lowercase; }
.no-ca { opacity: 1 !important; }

.pair { position: absolute; left: calc(var(--gut) * 2 + 8px); right: calc(var(--gut) * 2 + 8px); bottom: calc(var(--mh) + 18px); display: flex; justify-content: space-between; pointer-events: none; z-index: 3; }
.pair .pcard { pointer-events: auto; }

/* the white margin */
.margin { position: relative; z-index: 2; flex: none; min-height: var(--mh); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 64px); padding: var(--s2) clamp(20px, 3vw, 60px); }
.contract { display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; min-width: 0; }
.ca-row { display: flex; align-items: center; gap: var(--s2); max-width: 100%; }
[data-ca] { font: 500 clamp(17px, 1.05vw, 21px)/1.3 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; }
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.mark { text-align: center; }
.mark h1 { margin: 0; font: italic 560 clamp(90px, min(11vw, 20svh), 230px)/.92 var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; letter-spacing: -.012em; color: var(--ink); padding-bottom: .04em; }
.ticker { margin: .1em 0 0; font: 500 clamp(18px, 1.1vw, 22px)/1.2 var(--font-body); color: var(--muted); }
.lore { justify-self: end; max-width: 30em; }
.lore p { margin: 0; font-size: clamp(18px, 1.28vw, 24px); line-height: 1.35; }
.lore .risk { margin-top: .75em; font-size: clamp(16px, .9vw, 18px); line-height: 1.3; color: var(--muted); }

/* the back */
.back { position: absolute; inset: 0; transform: rotateY(180deg); background: #FAF4EA url("/img/bits/back.webp") center/100% 100%; }
.note { position: absolute; left: 7%; top: 18%; width: 38%; }
.note p { margin: 0; font: italic 500 clamp(30px, 3.6vw, 68px)/1.22 var(--font-display); font-variation-settings: "opsz" 144, "SOFT" 60; }
.note .sign { margin-top: .5em; }
.to { position: absolute; left: 57%; bottom: 47.8%; margin: 0; font: italic 500 clamp(18px, 1.5vw, 28px)/1.2 var(--font-display); }
#turnback { margin-top: clamp(16px, 2.2vw, 40px); }

/* 404 */
.lost .margin .lore { justify-self: start; }
.lost .margin .contract { align-items: flex-end; }

/* phones and narrow windows: the postcard stands upright */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  :root { --gut: 8px; --mh: auto; }
  .table { min-height: 0; }
  .photo { flex: none; height: min(42svh, 92vw); min-height: 220px; }
  .pair { position: static; padding: var(--s2) var(--s2) 0; gap: var(--s1); }
  .pair .pcard { flex: auto; padding-inline: 1em; }
  .margin { display: flex; flex-direction: column; align-items: stretch; gap: var(--s2); padding: var(--s1) var(--s2) var(--s4); }
  .mark { order: -1; }
  .mark h1 { font-size: min(27vw, 118px); }
  .contract { align-items: stretch; }
  .ca-row { justify-content: space-between; }
  .buy-row .gold { flex: 1 1 100%; padding-inline: .6em; font-size: 17px; }
  .buy-row .short { flex: 1; }
  .lore { justify-self: auto; text-align: center; max-width: none; align-self: center; }
  .lore p { font-size: 18px; }
  .back { background-image: url("/img/bits/back-tall.webp"); }
  .note { left: 9%; top: 9%; width: 60%; }
  .note p { font-size: clamp(30px, 10vw, 54px); }
  .to { left: 10%; bottom: 37%; font-size: 18px; }
  .lost .margin .contract { align-items: stretch; }
  .lost .margin .lore { text-align: center; align-self: center; }
}