/* The Maya Trilogy: dark edition */
:root {
  --bg: #120a10;
  --bg-2: #1a0f17;
  --card: #22141e;
  --card-2: #2b1a26;
  --line: rgba(255, 236, 225, .09);
  --text: #f4ebe4;
  --text-soft: #cdbab0;
  --text-faint: #94817a;
  --gold: #dcbc7e;
  --gold-hi: #f0d9a4;
  --gold-lo: #8a6a33;
  --rose: #e9849b;
  --rose-deep: #b8475f;
  --accent: var(--rose);
  --bubble-k: #2c1e29;
  --bubble-m: #6a2b43;
  --bubble-m-text: #fff2f4;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --page: min(36rem, 100% - 2.5rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100svh; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
strong { font-weight: 700; color: var(--text); }

/* ───────────────── THE TWO STILLS ─────────────────
   Two full-bleed painted scenes with live light, petals and tilt parallax on
   top, the words in the dark lower third. #arrival is the sealed letter
   (art-first.css) with the riddle; #gate is the book on the windowsill
   (cover-art.css), shown after the letter. */
.still { position: fixed; inset: 0; z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #0d0609; transition: opacity 1.1s ease; }
.still.gone { opacity: 0; pointer-events: none; }
.backdrop { position: fixed; inset: 0; overflow: hidden; perspective: 900px; }
.hero {
  --tx: 0px; --ty: 0px; --rx: 0deg; --ry: 0deg;
  position: absolute; left: 50%; top: 0;
  width: min(112vw, 82svh); aspect-ratio: 1122 / 1402; /* the art's exact proportions, so layers line up */
  transform: translate3d(calc(-50% + var(--tx)), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03);
  transition: transform .3s ease-out;
  will-change: transform;
}
.plate { position: absolute; inset: 0; background: #2a0f1c center / 100% 100% no-repeat; transition: filter 1.8s ease; }
.still-art { position: absolute; inset: 0; background: #1a0a10 center / 100% 100% no-repeat; }
.hero-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,6,9,.25) 0%, rgba(13,6,9,0) 12%, rgba(13,6,9,0) 66%, rgba(13,6,9,.82) 90%, #0d0609 100%),
              linear-gradient(90deg, #0d0609 0%, rgba(13,6,9,0) 6%, rgba(13,6,9,0) 94%, #0d0609 100%); }
/* the book, cut out of the painting: 505,715 → 995,925 in the 1122×1402 art */
.bk-box { position: absolute; left: 45.009%; top: 50.999%; width: 43.672%; height: 14.979%; transform-origin: 55% 55%; transition: transform 1.7s cubic-bezier(.3,.1,.2,1), filter 1.7s ease, opacity .35s ease; }
.bk { position: absolute; inset: 0; background-size: 100% 100%; }
.bk-bare { clip-path: polygon(1.22% 28.10%, 4.59% 23.33%, 40.82% 11.90%, 97.96% 49.52%, 98.78% 51.19%, 98.16% 72.62%, 57.35% 88.10%, 2.04% 48.81%); }
.bk-rib { clip-path: polygon(1.22% 28.10%, 4.59% 23.33%, 23.98% 15.71%, 41.33% 12.62%, 45.92% 7.62%, 51.53% 2.86%, 57.65% 5.24%, 62.65% 14.76%, 66.73% 20.95%, 70.82% 30.48%, 97.96% 49.52%, 98.78% 51.19%, 98.16% 72.62%, 84.49% 82.86%, 57.35% 88.10%, 56.94% 97.14%, 51.53% 92.86%, 32.86% 77.14%, 25.51% 75.71%, 2.04% 48.81%); }
.bk-bow { clip-path: polygon(42.35% 21.43%, 42.86% 13.10%, 45.92% 7.62%, 51.53% 2.86%, 57.65% 5.24%, 62.65% 14.76%, 66.73% 20.95%, 70.92% 30.48%, 66.33% 33.33%, 56.12% 27.38%, 50% 30.95%, 47.96% 36.9%, 43.88% 36.9%, 42.04% 29.76%);
  transform-origin: 47% 31%; transition: transform 1.1s cubic-bezier(.45,0,.7,.2), opacity 1s ease .1s; }
.bk-shadow { position: absolute; left: 46%; top: 60.6%; width: 41%; height: 4.5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); opacity: .7; transition: opacity 1.4s ease, transform 1.6s ease; }
.glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(40% 32% at calc(50% + var(--gx, 0%)) calc(34% + var(--gy, 0%)), rgba(255,214,170,.55), transparent 70%); transition: background .3s ease-out; }
.flicker { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(45% 30% at 50% 40%, rgba(255,170,90,.16), transparent 70%); animation: flicker 3.2s infinite; }
@keyframes flicker { 0%, 100% { opacity: .75; } 18% { opacity: 1; } 22% { opacity: .62; } 40% { opacity: .9; } 47% { opacity: .7; } 70% { opacity: 1; } 76% { opacity: .8; } }
.dust { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.dust i { position: absolute; bottom: -10px; border-radius: 50%; background: #ffd9a8; box-shadow: 0 0 6px 1px rgba(255,200,140,.7); opacity: 0; animation: rise linear infinite; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .85; } 85% { opacity: .5; } 100% { transform: translate(var(--dx), -105svh); opacity: 0; } }
.gate-petals { position: fixed; inset: 0 -60px; pointer-events: none; overflow: hidden; transition: transform .35s ease-out; }
.gate-petals span { position: absolute; top: -30px; animation: drift linear infinite; filter: blur(var(--b, 0px)); }
@keyframes drift { to { transform: translate(var(--dx), 110svh) rotate(var(--spin)); } }
.tilt-chip {
  position: fixed; z-index: 2; top: calc(.9rem + env(safe-area-inset-top, 0px)); right: .9rem;
  border: 1px solid rgba(255,225,190,.35); background: rgba(20,8,14,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #f6e2c0; font: 600 .74rem var(--sans); padding: .5rem .85rem; border-radius: 999px;
}
.gate-inner {
  position: relative; z-index: 1; min-height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
  transition: opacity .7s ease, transform .9s ease;
}
.gate-copy { text-align: center; margin-bottom: 1.2rem; }
.gate-date { font: 700 .7rem var(--sans); letter-spacing: .34em; text-indent: .34em; color: rgba(246,226,192,.78); margin: 0 0 .5rem; }
.gate-title { font: 500 clamp(2.4rem, 11vw, 3.2rem)/1.02 var(--serif); font-style: italic; margin: 0; color: #fbeedd; letter-spacing: -.005em; text-shadow: 0 2px 24px rgba(0,0,0,.65), 0 0 40px rgba(233,132,155,.25); }
.gate-line { font: 500 .98rem var(--sans); color: rgba(246,231,214,.8); margin: .6rem 0 0; text-shadow: 0 1px 12px rgba(0,0,0,.7); }

.riddle {
  width: min(21.5rem, 100%); text-align: center; position: relative;
  padding: 1.15rem 1.15rem 1rem; border-radius: 20px;
  background: linear-gradient(180deg, rgba(60,18,34,.55), rgba(22,8,15,.72));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255,214,190,.16);
  box-shadow: inset 0 1px 0 rgba(255,240,225,.08), 0 24px 50px -26px rgba(0,0,0,.95);
}
.r-prompt { font: 500 .93rem/1.45 var(--sans); color: #efdfd2; margin: 0 0 .85rem; }
.r-line { display: flex; align-items: baseline; justify-content: center; gap: .45rem; flex-wrap: wrap; font: italic 600 1.22rem var(--serif); color: #f8e8cf; }
.r-line input {
  width: 8.6rem; border: 0; outline: none; text-align: center; border-radius: 10px;
  padding: .45rem .4rem .4rem; font: 700 1.05rem var(--sans); color: #fff6e8;
  background: rgba(0,0,0,.38); box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,220,190,.18);
  transition: box-shadow .2s;
}
.r-line input::placeholder { color: rgba(255,220,190,.38); letter-spacing: .2em; }
.r-line input:focus { box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 0 0 2px rgba(239,142,165,.6); }
.r-btn {
  margin-top: 1rem; display: inline-flex; align-items: center; gap: .55rem;
  border: 0; border-radius: 999px; padding: .8rem 1.7rem;
  background: linear-gradient(180deg, #f8cdd6, #dc7d94); color: #2a0f19;
  font: 800 .84rem var(--sans); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 12px 26px -12px rgba(233,132,155,.95), inset 0 1px 0 rgba(255,255,255,.55);
  animation: beat 2.6s ease-in-out infinite;
}
@keyframes beat { 0%, 30%, 60%, 100% { transform: scale(1); } 15%, 45% { transform: scale(1.04); } }
.r-btn:active { transform: scale(.97); }
.r-msg { min-height: 1.3em; margin: .7rem 0 0; font: 600 .9rem/1.4 var(--sans); color: #f7c3cd; }
.riddle.shake { animation: shake .45s; }
@keyframes shake { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

/* ── the sealed letter: its candles are top left, and the wax seal waits for the riddle ── */
#arrival .flicker { background: radial-gradient(48% 30% at 12% 9%, rgba(255,170,90,.22), transparent 70%); }
.seal-ring {
  position: absolute; left: 42.1%; top: 45.9%; width: 24%; aspect-ratio: 1; margin: -12% 0 0 -12%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255,216,172,.55), rgba(255,190,140,.17) 55%, transparent);
  animation: seal-pulse 3.4s ease-in-out infinite; transition: transform .95s ease, opacity .6s ease;
}
@keyframes seal-pulse { 0%, 100% { opacity: .2; transform: scale(.88); } 50% { opacity: .85; transform: scale(1.1); } }
/* the riddle is solved: the words leave, the picture settles exactly where the letter sequence picks it up */
#arrival .gate-petals, #arrival .glare, #arrival .flicker, #arrival .dust { transition: opacity .8s ease; }
#arrival.leaving .gate-inner, #arrival.leaving .tilt-chip { opacity: 0; transform: translateY(24px); pointer-events: none; }
#arrival.leaving .hero { transform: translate3d(-50%, 0, 0) scale(1); transition: transform .8s ease; }
#arrival.leaving .gate-petals, #arrival.leaving .glare, #arrival.leaving .flicker { opacity: 0; }
#arrival.leaving .seal-ring { animation: none; opacity: 1; transform: scale(1.75); background: radial-gradient(closest-side, rgba(255,246,228,.95), rgba(255,206,160,.5) 42%, transparent); }
/* the book's still has no riddle, only its words and one button */
#gate .gate-inner { padding-bottom: calc(16svh + env(safe-area-inset-bottom, 0px)); }
#gate .gate-copy { margin-bottom: .2rem; }
#open-book { margin: 1.15rem 0 0; }

/* ── opening: the book floats up, the ribbon comes off, it opens, we fall into page one ── */
#gate.opening .gate-inner { opacity: 0; transform: translateY(24px); pointer-events: none; }
#gate.opening .tilt-chip { opacity: 0; pointer-events: none; }
#gate.lift .plate { filter: brightness(.5) saturate(.9) blur(2.5px); }
#gate.lift .bk-shadow { opacity: 0; transform: scale(.7); }
#gate.lift .bk-box { transform: translateY(-62%) rotate(-3deg) scale(1.16); filter: drop-shadow(0 22px 18px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(255,196,150,.45)); }
.flare { position: fixed; left: 50%; top: 45%; width: 10px; height: 10px; z-index: 2; pointer-events: none; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(1);
  background: radial-gradient(closest-side, rgba(255,250,235,1), rgba(255,214,170,.85) 35%, rgba(240,150,140,.35) 65%, transparent); }
#gate.flash .flare { animation: flare 1.1s ease-out forwards; }
@keyframes flare { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(60); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(90); } }
.stage3 { position: fixed; inset: 0; z-index: 2; pointer-events: none; display: grid; place-items: center; perspective: 1200px; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(70% 55% at 50% 48%, rgba(255,226,196,.0), rgba(0,0,0,0)); }
#gate.swap .stage3 { opacity: 1; }
#gate.turn .stage3 { background: radial-gradient(70% 55% at 50% 48%, rgba(255,214,180,.38), rgba(60,14,30,0) 70%); transition: opacity .5s ease, background 1.5s ease; }
.b3 { --t: 16px; position: relative; width: min(60vw, 16rem); aspect-ratio: 2 / 3; transform-style: preserve-3d; will-change: transform; }
.b3 > div { position: absolute; }
.b3-back { inset: 0; border-radius: 3px 10px 10px 3px; background: #3c0f21; transform: translateZ(calc(var(--t) * -1)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
.b3-block { right: 3px; top: 1.5%; width: var(--t); height: 97%; transform-origin: right center; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #efe2c8 0 1px, #d7c6a4 1px 2px); }
.b3-spine { left: 0; top: 0; width: var(--t); height: 100%; transform-origin: left center; transform: rotateY(-90deg); background: linear-gradient(90deg, #3c0f21, #5d1a31 50%, #3c0f21); }
.b3-page {
  inset: 1.5% 1.8% 1.5% 0; transform: translateZ(-1px); border-radius: 2px 7px 7px 2px;
  background: radial-gradient(120% 90% at 40% 30%, #fffaf0, #f1e5cf); box-shadow: inset 10px 0 18px -10px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #3b2a24; padding: 8%;
}
.b3-page p { margin: 0; }
.pg1 { font: italic 600 .95rem var(--serif); color: #8a6a33; }
.pg2 { font: 600 2rem/1 var(--serif); color: #6b1d34; margin: .2rem 0 .7rem !important; }
.pg3 { font: 500 .66rem/1.55 var(--sans); color: #6e5c53; }
.pg4 { font: italic 600 1rem var(--serif); margin-top: .8rem !important; color: #3b2a24; }
.b3-cover { inset: 0; transform-origin: left center; transform: translateZ(1px); transform-style: preserve-3d; transition: transform 1.7s cubic-bezier(.45,.05,.25,1); }
.b3-front, .b3-inside { position: absolute; inset: 0; border-radius: 3px 10px 10px 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.b3-front { background-size: cover; background-position: center; box-shadow: inset 8px 0 12px -6px rgba(0,0,0,.6), inset -1px 0 1px rgba(255,255,255,.08); display: grid; place-items: center; }
.b3-front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255,235,210,.0) 35%, rgba(255,235,210,.14) 50%, rgba(255,235,210,0) 65%); }
.b3-title { display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: 0; transition: opacity .8s ease; }
#gate.titled .b3-title { opacity: 1; }
.b3-title span { font: 600 1.7rem/1 var(--serif); filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }
.b3-title i { width: 2.6rem; height: 1px; background: linear-gradient(90deg, transparent, #d9b878, transparent); }
.b3-title small { font: 700 .5rem var(--sans); letter-spacing: .3em; }
.b3-inside { transform: rotateY(180deg); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.06) 0 1px, transparent 1.5px) 0 0 / 9px 9px, linear-gradient(160deg, #4a1630, #2a0c1a); box-shadow: inset -10px 0 18px -8px rgba(0,0,0,.6); }
#gate.open .b3-cover { transform: translateZ(1px) rotateY(-170deg); }
/* the ribbon: a canvas lying on the cover and reaching past it, and the band where it wraps round the book's sides */
.rb { position: absolute; pointer-events: none; filter: drop-shadow(0 2px 2.5px rgba(22,4,9,.55)); transition: opacity .3s ease; }
.b3-block::after, .b3-spine::after { content: ""; position: absolute; left: 0; right: 0; top: var(--rb-y, 40%); height: var(--rb-w, 0); opacity: 0; transition: opacity .25s ease;
  background: linear-gradient(180deg, #a8765c, #d9a98c 30%, #c08a6c 55%, #9c6a52); }
.b3.tied .b3-block::after, .b3.tied .b3-spine::after { opacity: 1; }
.curtain { position: fixed; inset: 0; z-index: 4; background: #120a10; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
#gate.dim .curtain { opacity: 1; }
@media (max-height: 700px) { .gate-title { font-size: 2.2rem; } .gate-copy { margin-bottom: .9rem; } }

/* ───────────────── PROGRESS ───────────────── */
#progress { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: calc(3px + env(safe-area-inset-top, 0px)); pointer-events: none; }
#progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--rose), var(--gold)); }
#chapter {
  position: fixed; top: calc(.6rem + env(safe-area-inset-top, 0px)); left: 50%; z-index: 30;
  transform: translate(-50%, -160%);
  padding: .32rem .9rem; border-radius: 999px;
  background: rgba(34,20,30,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  font: 600 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-hi);
  transition: transform .5s var(--ease); white-space: nowrap; pointer-events: none;
}
#chapter.show { transform: translate(-50%, 0); }
#chapter:empty { display: none; }

/* ───────────────── GENERIC ───────────────── */
.page { position: relative; padding: 5rem 0; }
.wrap { width: var(--page); margin-inline: auto; position: relative; }
.kicker { font: 700 .72rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 .7rem; }
.display { font: 700 clamp(1.9rem, 8vw, 2.6rem)/1.12 var(--sans); margin: 0 0 1rem; letter-spacing: -.02em; }
.lede { font: 400 1.08rem/1.6 var(--sans); color: var(--text-soft); }
.center { text-align: center; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* tap affordance */
.tap-hint {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 700 .68rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hint-ink, var(--gold-hi));
  background: var(--hint-bg, rgba(220,188,126,.12)); border: 1px solid var(--hint-line, rgba(220,188,126,.35));
  padding: .3rem .65rem; border-radius: 999px; transition: opacity .4s;
}
.tap-hint::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hint-dot, var(--gold-hi)); animation: ping 1.6s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(240,217,164,.7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(240,217,164,0); } }
.tap-hint.gone { opacity: 0; }
.pulse { animation: pulse-ring 2s infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(233,132,155,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(233,132,155,0); } }

/* ───────────────── PROLOGUE ───────────────── */
#prologue { padding-top: 7rem; overflow: hidden; background: radial-gradient(90% 21rem at 50% 23rem, #2a1424, rgba(42,20,36,0) 100%) var(--bg); }
.legend { border: 1px solid var(--line); background: var(--card); border-radius: 18px; padding: 1.1rem 1.1rem 1rem; margin: 0 0 3rem; }
.legend p { margin: 0 0 .9rem; color: var(--text-soft); font-size: 1rem; line-height: 1.6; }
.legend .keys { display: flex; gap: 1.3rem; flex-wrap: wrap; font-size: .92rem; color: var(--text-soft); }
.legend .keys > span { display: inline-flex; align-items: center; gap: .5rem; }
.pro-after { font: 500 1.2rem/1.55 var(--sans); margin: 2.2rem 0 3.5rem; color: var(--text); text-align: center; }
.pro-callback { font: 700 clamp(1.8rem, 8vw, 2.5rem)/1.15 var(--sans); text-align: center; margin: 3rem 0; letter-spacing: -.01em; }
.pro-callback em { display: block; margin-top: .6rem; color: var(--gold-hi); font-style: normal; font-size: .78em; }
.pro-verdict { font: 500 1.15rem/1.6 var(--sans); text-align: center; margin: 2.5rem 0 1.5rem; color: var(--text-soft); }
.pro-verdict strong { color: var(--gold-hi); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 2rem 0 1.4rem; }
.stats div { background: var(--bg-2); padding: 1.2rem .6rem; text-align: center; }
.stats b { display: block; font: 700 clamp(1.6rem, 7vw, 2.1rem)/1.1 var(--sans); color: var(--gold-hi); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stats span { display: block; margin-top: .35rem; font: 600 .7rem/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.stats-note { text-align: center; color: var(--text-faint); font-size: .86rem; line-height: 1.5; margin: 0; }
.scroll-hint { text-align: center; font: 600 .95rem var(--sans); color: var(--text-soft); margin-top: 2.5rem; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

/* ───────────────── CHAT ───────────────── */
.chat { display: flex; flex-direction: column; gap: .3rem; margin: .6rem 0; }
.stamp { align-self: center; margin: .3rem 0 .6rem; font: 600 .72rem var(--sans); letter-spacing: .04em; background: rgba(255,255,255,.07); color: var(--text-soft); padding: .28rem .75rem; border-radius: 8px; }
.msg { display: none; }
.msg.show { display: block; }
.line { display: flex; align-items: flex-end; gap: .45rem; }
.msg.m .line { flex-direction: row-reverse; }
.msg.show .line { animation: bubble .26s var(--ease) both; }
.msg.show .stamp.day { animation: chip .28s ease both; }
@keyframes chip { from { opacity: 0; transform: scale(.9); } }
.stamp.day { display: table; margin: .7rem auto .65rem; max-width: 90%; text-align: center; line-height: 1.35; background: rgba(20,12,18,.72); color: #e9dccf; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.msg:first-of-type .stamp.day { margin-top: .1rem; }
/* time (and her read ticks) tucked into the corner of each bubble, like WhatsApp */
.b .t { float: right; display: inline-flex; align-items: center; gap: .2rem; margin: .5rem -.15rem -.2rem .75rem; font: 500 .68rem/1 var(--sans); letter-spacing: .02em; opacity: .62; white-space: nowrap; }
.b .ticks { width: .95rem; height: .6rem; color: #9fd0ff; opacity: 1; }
@keyframes bubble { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.av { flex: 0 0 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font: 800 .72rem var(--sans); }
.av.k { background: #3a2a37; color: #eadbd2; border: 1px solid rgba(255,255,255,.14); }
.av.m { background: var(--accent); color: #1a0f17; }
.av.blank { visibility: hidden; }
.b {
  max-width: calc(100% - 3.6rem); padding: .52rem .82rem .58rem; border-radius: 16px;
  font: 400 .98rem/1.42 var(--sans); white-space: pre-line; overflow-wrap: anywhere;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.msg.k .b { background: var(--bubble-k); color: var(--text); }
.msg.m .b { background: var(--bubble-m); color: var(--bubble-m-text); }
.msg.k.first .b { border-bottom-left-radius: 5px; }
.msg.m.first .b { border-bottom-right-radius: 5px; }
.typing { display: inline-flex; gap: 4px; padding: .72rem .85rem; border-radius: 16px; background: var(--bubble-k); }
.msg.m .typing { background: var(--bubble-m); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* ───────────────── VOLUMES ───────────────── */
.vol-one { --accent: #b9a0e6; --bubble-m: #4b3b6a; --glow: #3a2a5a; }
.vol-two { --accent: #8fb6e2; --bubble-m: #2f4865; --glow: #1f3350; }
.vol-three { --accent: #ef8ea5; --bubble-m: #6d2a44; --glow: #4a1a2e; }
.vol-cover {
  min-height: 92svh; display: grid; place-items: center; text-align: center;
  position: relative; overflow: hidden; padding: 4rem 1.4rem;
  background: radial-gradient(80% 55% at 50% 45%, var(--glow), var(--bg) 75%);
}
.vol-cover .vlabel { font: 700 .74rem var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.vol-cover .numeral { font: 600 clamp(6.5rem, 38vw, 10rem)/.85 var(--serif); margin: 0; color: var(--accent); text-shadow: 0 0 40px rgba(0,0,0,.4); }
.vol-cover h2 { font: 700 clamp(2.1rem, 10vw, 3rem)/1.05 var(--sans); margin: 1.1rem 0 .4rem; letter-spacing: -.02em; }
.vol-cover .years { font: 600 1rem var(--sans); color: var(--text-soft); margin: 0 0 1.2rem; }
.vol-cover .blurb { font: 400 1.05rem/1.6 var(--sans); color: var(--text-soft); max-width: 25rem; margin: 0 auto; }
.vol-cover .rule { width: 3rem; height: 2px; border-radius: 1px; margin: 1.4rem auto; background: var(--accent); opacity: .6; }
.vol-cover .realnote { font: 500 .86rem/1.55 var(--sans); color: var(--text-faint); margin: 1.4rem auto 0; max-width: 22rem; }
.doodles { position: absolute; inset: 0; pointer-events: none; }
.doodles span { position: absolute; font-size: 1.3rem; opacity: .28; animation: float 9s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px) rotate(8deg); } }
.vol-body { padding: 1rem 0 5rem; position: relative; }

/* ───────────────── SCENES ───────────────── */
.scene-head { display: flex; align-items: baseline; gap: .7rem; }
.scene-n { font: 700 .74rem var(--sans); letter-spacing: .12em; color: var(--accent); }
.scene h3 { font: 700 1.55rem/1.2 var(--sans); margin: 0; letter-spacing: -.015em; }
.scene .date { font: 600 .75rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin: .35rem 0 0; }
.scene .date .age { text-transform: none; letter-spacing: 0; color: var(--text-soft); font-weight: 500; }
.context { margin: .9rem 0 0; font: 400 .97rem/1.62 var(--sans); color: var(--text-soft); }
.context b {
  display: inline-block; margin-right: .5rem; vertical-align: .1em;
  font: 800 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #150b12; background: var(--accent); padding: .3rem .5rem; border-radius: 999px;
}
.card > .context { margin: .1rem .25rem .85rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: .9rem .8rem .5rem; margin-top: .8rem; box-shadow: 0 18px 40px -26px rgba(0,0,0,.8); }
.note {
  margin: 1rem 0 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--accent);
  font: 500 1.02rem/1.55 var(--sans); color: var(--text);
  opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.note.in { opacity: 1; transform: none; }
.note .from { display: block; font: 700 .66rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .15rem; }
.stampcard {
  margin: 1.2rem auto 0; max-width: 21rem; text-align: center;
  border: 2px solid var(--rose); color: var(--rose); border-radius: 12px; padding: .9rem 1rem;
  font: 500 .95rem/1.5 var(--sans); transform: rotate(-2.5deg) scale(.6); opacity: 0;
  transition: transform .6s cubic-bezier(.3,1.6,.5,1), opacity .3s; background: rgba(233,132,155,.06);
}
.stampcard strong { font: 700 1.25rem/1.4 var(--sans); color: var(--text); display: block; }
.stampcard small { color: var(--text-soft); }
.stampcard.in { transform: rotate(-2.5deg) scale(1); opacity: 1; }
/* on paper it is a rubber stamp in red ink */
.leaf .stampcard { border-color: #a3243f; color: #a3243f; background: rgba(163,36,63,.05); }
.leaf .stampcard strong { color: #8c1c35; }
.leaf .stampcard small { color: #a3243f; }
.countdown { display: inline-block; margin-top: .5rem; font: 700 .78rem var(--sans); letter-spacing: .06em; color: var(--bg); background: var(--accent); padding: .3rem .75rem; border-radius: 999px; }
.widget { margin-top: 1.2rem; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.widget.in { opacity: 1; transform: none; }

/* sh */
.sh-box { text-align: center; padding: .6rem 0 .2rem; }
.sh-btn {
  width: 6.4rem; height: 6.4rem; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 30%, #e2d5f7, var(--accent) 60%, #6c55a0);
  box-shadow: 0 10px 24px -8px rgba(120,90,190,.7), inset 0 -4px 0 rgba(0,0,0,.18);
  font: 800 2rem var(--sans); color: #1d1330; transition: transform .1s;
}
.sh-btn:active { transform: scale(.92); }
.sh-box .tap-hint { margin-top: 1rem; }
.sh-count { font: 600 .88rem var(--sans); color: var(--text-soft); margin-top: .7rem; min-height: 1.3em; }
.sh-msg { font: 700 1rem/1.3 var(--sans); color: var(--accent-ink); min-height: 1.4em; margin-top: .3rem; }
.sh-pop { position: fixed; pointer-events: none; font: 800 1.2rem var(--sans); color: #6c55a0; animation: pop 1s ease-out forwards; z-index: 40; }
@keyframes pop { to { transform: translate(var(--dx), -80px) scale(1.3); opacity: 0; } }

/* raven */
.raven { position: relative; height: 70px; overflow: hidden; }
.raven svg { position: absolute; top: 10px; left: -80px; width: 64px; height: auto; }
.leaf .raven path:nth-of-type(1) { fill: #34475f; }
.leaf .raven path:nth-of-type(2) { fill: #24364c; }
.leaf .raven circle { fill: #f3e9d6; }
.raven.in svg { animation: fly 4.5s ease-in-out forwards; }
@keyframes fly { 0% { left: -80px; top: 30px; } 50% { top: 4px; } 100% { left: calc(100% + 10px); top: 20px; } }

/* poll */
.poll { background: var(--card-2); border: 1px solid var(--line); border-radius: 18px; padding: 1rem; }
.poll-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .3rem; flex-wrap: wrap; }
.poll h4 { margin: 0; font: 700 1.05rem var(--sans); }
.opt { display: block; width: 100%; text-align: left; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.04); padding: .7rem .8rem; margin: .5rem 0 0; border-radius: 12px; transition: border-color .2s, background .2s; }
.opt:active { background: rgba(255,255,255,.09); }
.opt .row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .98rem; }
.opt .row span:first-child::before { content: ""; display: inline-block; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--text-faint); margin-right: .6rem; vertical-align: -.2rem; transition: .2s; }
.opt.on { border-color: var(--accent); }
.opt.on .row span:first-child::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--card-2); }
.opt .v { font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.opt .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.07); margin-top: .45rem; overflow: hidden; }
.opt .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .7s var(--ease); }
/* her answer was not one of the printed choices: a dashed, slightly crooked row in handwriting */
.poll-pen { display: flex; align-items: center; gap: .6rem; margin: 1.05rem 0 0; font: 700 .62rem var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint); }
.poll-pen::before, .poll-pen::after { content: ""; flex: 1; border-top: 1px dashed rgba(255,255,255,.2); }
.opt.writein { margin-top: .75rem; border: 1.5px dashed var(--rose); background: rgba(233,132,155,.07); transform: rotate(-1.1deg); }
.opt.writein .row { color: var(--rose); }
.opt.writein .row span:first-child { font: 700 1.55rem/1 var(--hand, 'Caveat', cursive); }
.opt.writein .row span:first-child::before { display: none; }
.opt.writein.on { border-style: solid; }
/* the poll as it arrived in the chat */
.wa-poll { display: block; min-width: 11.5rem; white-space: normal; }
.wa-poll b { display: block; font-weight: 700; margin-bottom: .35rem; }
.wa-opt { display: flex; align-items: center; gap: .55rem; padding: .34rem 0; border-top: 1px solid rgba(255,255,255,.09); }
.wa-opt i { flex: 0 0 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid currentColor; opacity: .55; }
.poll-msg { font: 700 1rem/1.35 var(--sans); color: var(--accent); min-height: 1.5em; margin-top: .7rem; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 0; background: var(--accent); color: #1a0f17; border-radius: 999px;
  padding: .78rem 1.4rem; font: 700 .9rem var(--sans); letter-spacing: .02em;
}
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--ghost-line, rgba(255,255,255,.22)); }
.btn[disabled] { opacity: .5; cursor: default; }

/* certificate */
.cert {
  position: relative; overflow: hidden; text-align: center; color: #2b201c;
  padding: 2.5rem 1.6rem 1.6rem; border-radius: 6px;
  background: radial-gradient(120% 90% at 50% 40%, #fffaf0, #f3e7d2);
  border: 7px solid #6b1d34;
  box-shadow: inset 0 0 0 4px #f6eddc, inset 0 0 0 6px #b08848, inset 0 0 0 9px #f6eddc, inset 0 0 0 10px #d9b878, 0 24px 50px -24px rgba(0,0,0,.9);
}
.cert .c { position: absolute; width: 1.5rem; height: 1.5rem; border: solid #b08848; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 100%; }
.cert .c::after { content: ""; position: absolute; inset: 5px -6px -6px 5px; border: solid #b08848; border-width: 1px 0 0 1px; border-top-left-radius: 100%; opacity: .7; }
.cert .tl { top: 18px; left: 18px; }
.cert .tr { top: 18px; right: 18px; transform: scaleX(-1); }
.cert .bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.cert .br { bottom: 18px; right: 18px; transform: scale(-1, -1); }
.cert-k { font: 700 .62rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #b08848; margin: .4rem 0 .5rem; }
.cert-t { font: 600 1.9rem/1.05 var(--serif); color: #6b1d34; margin: 0; }
.cert-orn { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: .7rem 0; }
.cert-orn::before, .cert-orn::after { content: ""; width: 3.5rem; height: 1px; background: #b08848; }
.cert-orn span { width: .5rem; height: .5rem; background: #b08848; transform: rotate(45deg); }
.cert-c { font: italic 600 1.1rem var(--serif); color: #6e5c53; margin: 0; }
.cert-n { font: 600 2.6rem/1.1 var(--serif); margin: .2rem auto .6rem; padding-bottom: .4rem; border-bottom: 1px solid #b08848; max-width: 15rem; }
.cert-b { font: 400 .95rem/1.55 var(--sans); margin: 0 auto .7rem; max-width: 22rem; }
.cert-terms { font: 800 .64rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6b1d34; margin: 0 0 1.1rem; }
.cert-foot { display: flex; justify-content: space-between; gap: .8rem; }
.cert-foot > div { flex: 1; min-width: 0; }
.cert-foot > div { display: flex; flex-direction: column; align-items: center; }
.cert-foot .sig { font: italic 600 1.6rem/1 var(--serif); padding: 0 .8rem .2rem; border-bottom: 1px solid #6e5c53; }
.cert-foot .dt { font: 600 .98rem/1.6 var(--serif); padding: 0 .3rem .15rem; border-bottom: 1px solid #6e5c53; white-space: nowrap; }
.cert-foot small { font: 500 .6rem/1.3 var(--sans); color: #6e5c53; margin-top: .3rem; }
.seal-stamp {
  position: relative; margin: 1rem auto 0; width: 4.8rem; height: 4.8rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #d0546d, #952139 55%, #5d0f22);
  color: rgba(255,232,232,.95); font: 800 .52rem/1.25 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 12px rgba(0,0,0,.3), inset 0 0 0 4px rgba(255,220,220,.15);
  transform: rotate(-12deg) scale(2.4); opacity: 0; transition: transform .45s cubic-bezier(.3,1.5,.5,1), opacity .2s; pointer-events: none;
}
.seal-stamp.in { transform: rotate(-12deg) scale(1); opacity: 1; }
.cert-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.cert-actions .btn:not(.ghost) { --accent: var(--gold-hi); }
.cert-msg { text-align: center; font: 600 .9rem var(--sans); color: var(--text-soft); min-height: 1.3em; margin: .6rem 0 0; }

/* verdict counter */
.verdicts { text-align: center; background: var(--card-2); border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem 1rem; }
.verdicts .gavel { font-size: 1.8rem; display: inline-block; transform-origin: 80% 80%; }
.verdicts.in .gavel { animation: gavel .5s ease-in-out 3; }
@keyframes gavel { 50% { transform: rotate(-35deg); } }
.verdicts .n { font: 800 3.2rem/1 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin-top: .4rem; }
.verdicts .l { font: 600 .98rem/1.5 var(--sans); color: var(--text); margin-top: .5rem; }
.verdicts .s { font: 500 .84rem/1.5 var(--sans); color: var(--text-faint); margin-top: .25rem; }

/* recorder */
.recorder { border-radius: 22px; padding: 1.2rem 1.1rem 1.1rem; background: linear-gradient(160deg, #4a1c30, #26101b); border: 1px solid rgba(239,142,165,.3); }
.rec-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.onair { display: inline-flex; align-items: center; gap: .45rem; font: 800 .7rem var(--sans); letter-spacing: .18em; color: #ffd8df; }
.onair i { width: 9px; height: 9px; border-radius: 50%; background: #8a5560; }
.recorder.recording .onair i { background: #ff5f6d; box-shadow: 0 0 10px #ff5f6d; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.rec-limit { font: 600 .75rem var(--sans); color: #e3bcc6; }
.rec-title { font: 800 1.4rem/1.25 var(--sans); margin: .8rem 0 .4rem; }
.rec-copy { font: 400 .98rem/1.55 var(--sans); color: #f0d4da; margin: 0 0 1.1rem; }
.rec-copy small { display: block; color: #d3a6b1; margin-top: .5rem; font-size: .86rem; }
.rec-main { display: flex; align-items: center; gap: 1rem; }
.rec-btn { flex: 0 0 4.4rem; height: 4.4rem; border-radius: 50%; border: 0; background: radial-gradient(circle at 35% 30%, #ff8d9c, #e0405a 60%, #a8203a); display: grid; place-items: center; box-shadow: 0 10px 22px -8px rgba(224,64,90,.8); }
.rec-btn svg { width: 1.7rem; height: 1.7rem; }
.rec-btn .sq { width: 1.25rem; height: 1.25rem; border-radius: 4px; background: #fff; display: block; }
.rec-state { flex: 1; min-width: 0; }
.rec-time { font: 800 1.6rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.rec-hint { font: 600 .88rem/1.4 var(--sans); color: #ecc8d0; margin-top: .35rem; }
.rec-meter { display: flex; align-items: center; gap: 3px; height: 28px; margin-top: .9rem; }
.rec-meter i { flex: 1; height: 12%; background: #ffb3c0; border-radius: 2px; transition: height .08s; opacity: .85; }
.rec-review { margin-top: 1.1rem; }
.rec-review audio { width: 100%; }
.rec-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.rec-actions .btn:not(.ghost) { --accent: #ffa2b3; }
.rec-status { font: 600 .92rem/1.5 var(--sans); margin-top: .9rem; min-height: 1.4em; color: #ffd8df; }
.rec-status.ok { color: #bfe8c8; }
.rec-status.err { color: #ffc9b0; }

/* ───────────────── THE DECK ─────────────────
   Between the letter and the book: notes on the letter's own paper, one for
   each thing he wrote to her, with her reply clipped to it. Swiped sideways. */
#attempts { position: relative; background: var(--bg); padding: .5rem 0 2.5rem; overflow: hidden; }
#book.shut #attempts { padding-bottom: 6rem; } /* while it is the end of the page */
#attempts .wrap .flourish { margin: 0 auto 1.5rem; color: var(--gold); }
.deck-title { margin: 0 0 .9rem; font: italic 500 clamp(1.7rem, 7.4vw, 2.15rem)/1.2 var(--display); color: #fbeedd; text-wrap: balance; }
.deck-intro { max-width: 25rem; margin: 0 auto; font: 400 1.04rem/1.65 var(--book); color: var(--text-soft); text-wrap: pretty; }
.deck { display: flex; align-items: center; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2.2rem max(1.4rem, (100% - 19.5rem) / 2) 2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.deck::-webkit-scrollbar { display: none; }
.attempt { flex: 0 0 min(19.5rem, 82vw); scroll-snap-align: center; position: relative; display: flex; flex-direction: column; min-height: 24rem; cursor: pointer;
  padding: 1.25rem 1.3rem 1.2rem; border-radius: 3px 3px 9px 9px; transform: rotate(-.7deg);
  box-shadow: 0 22px 34px -22px #000, 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(120,90,50,.12); }
.attempt:nth-child(2n) { transform: rotate(.6deg); }
.attempt:nth-child(3n) { transform: rotate(-.25deg); }
.attempt .top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding-bottom: .55rem; margin-bottom: .9rem; border-bottom: 1px solid rgba(110,80,45,.22); }
.attempt .d { font: 700 1.45rem/1 var(--hand); color: #8a2f45; }
.attempt .no { font: 700 .6rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #9a8572; white-space: nowrap; }
.attempt blockquote { margin: 0; font: 400 1.04rem/1.62 var(--book); color: #33261f; white-space: pre-line; overflow-wrap: anywhere; }
.attempt.long blockquote { font-size: .97rem; line-height: 1.56; }
/* a short note is written larger, like a line that got a card to itself */
.attempt.short blockquote { margin-top: .5rem; font: italic 500 1.5rem/1.38 var(--display); color: #4a1a2a; text-wrap: balance; }
.attempt .her { margin-top: auto; padding-top: 1.2rem; display: flex; flex-direction: column; align-items: flex-end; gap: .28rem; }
.attempt .her .who { font: 700 .6rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #9a8572; margin: 0 .2rem .1rem 0; }
.attempt .her .r { max-width: 92%; padding: .4rem .75rem .45rem; border-radius: 15px; border-bottom-right-radius: 5px; background: #6a2b43; color: #fff2f4; font: 400 .95rem/1.4 var(--sans); white-space: pre-line; overflow-wrap: anywhere; box-shadow: 0 2px 5px rgba(60,20,30,.25); }
.dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 1rem; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.15); transition: .3s; }
.dots i.on { background: var(--rose); width: 18px; border-radius: 3px; }
.swipe { display: flex; justify-content: center; margin: .9rem 0 0; }
.swipe .tap-hint::after { content: "→"; animation: nudge 1.4s ease-in-out infinite; font-size: .9rem; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.deck-outro { margin: 0 0 2.2rem; font: italic 400 1.08rem/1.6 var(--book); color: var(--text-soft); text-wrap: balance; }

/* ───────────────── GIFTS ───────────────── */
#gifts { background: radial-gradient(90% 55% at 50% 35%, #3b1426, var(--bg) 75%); text-align: center; overflow: hidden; }
.kees-stage { position: relative; display: grid; place-items: center; margin-top: 2rem; }
.kees { width: 12.5rem; height: auto; cursor: pointer; filter: drop-shadow(0 22px 26px rgba(0,0,0,.55)); transition: transform .3s; border: 0; background: none; padding: 0; border-radius: 28px; }
.kees svg { width: 100%; height: auto; display: block; }
.kees.wiggle { animation: wiggle .7s ease-in-out 2; }
@keyframes wiggle { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.kees.opened { transform: scale(.85); }
.kees-tap { margin: 1.3rem 0 0; }
.envelopes { display: grid; gap: 1.2rem; margin-top: 1.6rem; }
.env { text-align: left; opacity: 0; transform: translateY(60px) scale(.9); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.env.out { opacity: 1; transform: none; }
.env-inner { position: relative; border-radius: 18px; background: var(--card); border: 1px solid var(--line); padding: 1.4rem 1.2rem 1.2rem; overflow: hidden; }
.env-inner::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: repeating-linear-gradient(-45deg, var(--rose) 0 10px, transparent 10px 20px, #8fb6e2 20px 30px, transparent 30px 40px); opacity: .8; }
.env-label { font: 700 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: .2rem; }
.env h4 { font: 800 1.5rem/1.2 var(--sans); margin: .3rem 0 .6rem; }
.env p { margin: 0 0 .7rem; color: var(--text-soft); font: 400 1rem/1.6 var(--sans); }
.rx { width: 100%; border-collapse: collapse; font-size: .94rem; margin: .3rem 0 .6rem; }
.rx td { padding: .45rem 0; border-bottom: 1px dashed rgba(255,255,255,.12); vertical-align: top; }
.rx td:first-child { width: 40%; font: 700 .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding-top: .62rem; padding-right: .5rem; }
.rx small { color: var(--text-faint); }
.code { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; padding: .75rem .9rem; border-radius: 12px; background: rgba(233,132,155,.08); border: 1px dashed var(--rose); font: 700 1.05rem var(--sans); letter-spacing: .06em; color: var(--rose); }
.code button, .code a { border: 0; background: var(--rose); color: #1a0f17; border-radius: 999px; padding: .45rem .9rem; font: 700 .74rem var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.code.pending { font: 600 .92rem/1.4 var(--sans); letter-spacing: 0; justify-content: center; text-align: center; color: var(--text-soft); }
.fine { font: 700 .64rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin-top: .6rem; }

/* prescription pad */
.rxpad {
  --ink-blue: #1f3d8f;
  background: #fbfcf8 !important; color: #23262e; border: 0 !important;
  padding: 1.6rem 1.15rem 1.2rem !important; border-radius: 4px 4px 10px 10px !important;
  background-image: repeating-linear-gradient(180deg, transparent 0 2.1rem, rgba(31,61,143,.07) 2.1rem calc(2.1rem + 1px)) !important;
  box-shadow: 0 22px 40px -22px rgba(0,0,0,.9), 0 2px 0 #e9ebe4, 0 4px 0 #dfe2da;
}
.rxpad::before { /* torn perforated top */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; opacity: 1 !important;
  background: radial-gradient(circle at 7px -2px, var(--bg) 6px, transparent 6.5px) 0 0 / 14px 10px repeat-x !important;
}
.rxpad .ink { color: var(--ink-blue); }
.rx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding-bottom: .8rem; border-bottom: 2px solid #1f3d8f; }
.rx-doc { font: 800 1.35rem/1.1 var(--sans); color: #1f3d8f; letter-spacing: -.01em; }
.rx-cred { font: 600 .74rem/1.4 var(--sans); color: #4a5470; margin-top: .25rem; }
.rx-clinic { font: 500 .7rem/1.4 var(--sans); color: #7a8196; letter-spacing: .02em; }
.rx-cad { font-size: 1.9rem; line-height: 1; color: #1f3d8f; opacity: .8; }
.rx-meta { display: grid; gap: .1rem; margin: .7rem 0 .4rem; }
.rx-field { display: flex; align-items: baseline; gap: .6rem; padding: .35rem 0; border-bottom: 1px dotted #b9bfcc; }
.rx-field .k, .rx-signwrap .k { flex: 0 0 5.6rem; font: 700 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #7a8196; }
.rx-field .v { font: 600 1rem/1.35 var(--sans); }
.rx-body { display: flex; gap: .7rem; margin-top: .9rem; }
.rx-mark { flex: 0 0 auto; font: 600 2.9rem/0.8 var(--serif); color: #1f3d8f; position: relative; padding-right: .1rem; }
.rx-mark span { font-size: .55em; margin-left: -.22em; position: relative; top: .25em; }
.rx-meds { margin: .2rem 0 0; padding-left: 1.1rem; display: grid; gap: .8rem; flex: 1; }
.rx-meds li::marker { font: 700 .9rem var(--sans); color: #1f3d8f; }
.rx-med { font: 700 1.08rem/1.35 var(--sans); }
.rx-sig { font: 400 .93rem/1.5 var(--sans); color: #3c4150; margin-top: .15rem; }
.rx-sig b { font-weight: 800; color: #1f3d8f; }
.rx-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; }
.rx-foot .rx-field { flex: 1; min-width: 9rem; }
.rx-signwrap { display: flex; flex-direction: column; align-items: center; }
.rx-sign { font: italic 600 1.7rem/1 var(--serif); padding: 0 1rem .2rem; border-bottom: 1px solid #23262e; transform: rotate(-4deg); }
.rx-signwrap .k { flex: none; margin-top: .35rem; }
.rx-stamp {
  display: inline-block; margin: 1rem 0 .2rem; padding: .35rem .7rem;
  border: 2px solid #b8475f; border-radius: 6px; color: #b8475f;
  font: 800 .64rem var(--sans); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-2.5deg); opacity: .85;
}
.rxpad .code { background: #eef1fa; border-color: #1f3d8f; color: #1f3d8f; }
.rxpad .code button, .rxpad .code a { background: #1f3d8f; color: #fff; }
.rxpad .code.pending { color: #4a5470; }
.rxpad .fine { color: #7a8196; }
/* what the voucher is worth and how to use it, under its code */
.gift-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.1rem; margin-top: .85rem; }
.gift-facts .rx-field { flex-direction: column; align-items: flex-start; gap: .12rem; padding: .3rem 0 .4rem; }
.gift-facts .rx-field .k { flex: none; }
.gift-facts .rx-field .v { font-size: 1.08rem; }
.env .gift-how { margin: .8rem 0 .2rem; font: 400 .9rem/1.5 var(--sans); color: var(--text-soft); }
.rxpad .gift-how { color: #3c4150; }
.gift-how b { margin-right: .35rem; font: 700 .62rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #7a8196; }
.coupon-dl { display: block; width: 100%; margin-top: .8rem; padding: .7rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); font: 700 .78rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.coupon-dl:active { transform: scale(.98); } .coupon-dl[disabled] { opacity: .6; }
.rxpad .coupon-dl { border-color: #1f3d8f; background: #eef1fa; color: #1f3d8f; }

/* ───────────────── ENDING ───────────────── */
#ending { min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; background: radial-gradient(70% 50% at 50% 50%, #3b1426, var(--bg) 75%); }
#ending h2 { font: 600 clamp(1.8rem, 8vw, 2.6rem)/1.2 var(--sans); margin: 0; letter-spacing: -.02em; }
#ending h2 span { display: block; font: 600 clamp(3rem, 15vw, 4.4rem)/1.05 var(--serif); color: var(--gold-hi); margin-top: .5rem; }
.pts { margin: 2.4rem 0 .2rem; font: 800 2.1rem var(--sans); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.pts-note { font: 600 .95rem var(--sans); color: var(--text-soft); margin: 0; }
.vol4 { font: 500 1rem var(--sans); color: var(--text-faint); margin-top: 2.6rem; }

/* petals */
.petal { position: fixed; top: -40px; z-index: 45; pointer-events: none; will-change: transform; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--drift), 112vh) rotate(var(--spin)); } }

/* ───────────────── PRIVATE APPENDIX (optional) ───────────────── */
#seal { background: linear-gradient(180deg, var(--bg) 0%, #0b0509 100%); text-align: center; padding: 4rem 0 6rem; }
.seal-title { font: 700 .74rem var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin: 0; }
.seal-name { font: 700 2rem/1.2 var(--sans); margin: .6rem 0 .3rem; }
.seal-note { font: 500 1rem var(--sans); color: var(--text-soft); margin: 0; }
.checks { display: inline-grid; gap: .6rem; text-align: left; margin: 1.4rem auto 0; }
.checks label { display: flex; gap: .7rem; align-items: center; font-size: 1rem; cursor: pointer; }
.checks input { appearance: none; -webkit-appearance: none; width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--gold); border-radius: 5px; display: grid; place-items: center; margin: 0; }
.checks input:checked { background: var(--gold); }
.checks input:checked::after { content: "✓"; color: var(--bg); font-size: .85rem; font-weight: 800; }
.seal-wrap { position: relative; width: 10rem; height: 10rem; margin: 2rem auto 1rem; }
.wax {
  position: absolute; inset: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #c64860, #8f1f36 55%, #5d0f22 100%);
  box-shadow: inset 0 -8px 16px rgba(0,0,0,.4), inset 0 6px 10px rgba(255,255,255,.2), 0 12px 24px rgba(0,0,0,.5);
  display: grid; place-items: center; color: rgba(255,220,220,.55); font: 600 3.4rem var(--serif);
  clip-path: polygon(50% 0, 61% 4%, 72% 2%, 80% 10%, 91% 13%, 94% 24%, 100% 33%, 97% 45%, 100% 56%, 95% 66%, 96% 78%, 86% 85%, 80% 95%, 68% 96%, 57% 100%, 46% 97%, 34% 99%, 25% 91%, 13% 88%, 9% 77%, 2% 67%, 4% 55%, 0 44%, 5% 33%, 4% 21%, 14% 14%, 21% 4%, 33% 3%);
  transition: transform .2s, filter .3s; touch-action: none; -webkit-user-select: none; user-select: none;
}
.wax[disabled] { filter: grayscale(.6) brightness(.6); cursor: not-allowed; }
.wax.pressing { transform: scale(.95); }
.wax.broken { animation: crack .9s forwards; }
@keyframes crack { 30% { transform: scale(1.08) rotate(-4deg); } 100% { transform: scale(1.6) rotate(12deg); opacity: 0; filter: blur(4px); } }
.ring { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); transform: rotate(-90deg); pointer-events: none; }
.ring circle { fill: none; stroke: var(--gold-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 380; stroke-dashoffset: 380; }
.hold-label { font: 600 .95rem var(--sans); color: var(--gold-hi); min-height: 1.4em; margin: 0; }
.later { margin-top: 1.2rem; border: 0; background: none; color: var(--text-faint); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
#appendix { padding-bottom: 6rem; }
.apx-head { text-align: center; padding: 6rem 0 2rem; }
.apx-head h2 { font: 700 clamp(2rem, 9vw, 2.8rem)/1.15 var(--sans); margin: 0; }
.apx-head p { font: 500 1rem var(--sans); color: var(--text-soft); margin: .8rem 0 0; }
#appendix h3 { font: 700 .76rem var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); text-align: center; margin: 4rem 0 1.4rem; }
.apx-p { font: 400 1.08rem/1.8 var(--sans); margin: 0 0 1.3rem; white-space: pre-line; }


/* ───────────────── INNER DESIGN: chat screens, chapters, paintings ───────────────── */
.display { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
h2.display { font-size: clamp(2rem, 8.5vw, 2.7rem); line-height: 1.12; }
body::after { /* fine film grain over the whole book */
  content: ""; position: fixed; inset: 0; z-index: 25; pointer-events: none; opacity: .045; mix-blend-mode: overlay;
  background: radial-gradient(circle at 20% 30%, #fff 0 .6px, transparent 1px) 0 0 / 3px 3px, radial-gradient(circle at 70% 60%, #000 0 .6px, transparent 1px) 0 0 / 4px 4px;
}

/* ───────────────── THE PAGE ─────────────────
   The book is a stack of leaves on the dark desk: cream paper with grain, a
   shadowed gutter on the binding side, the edges of the pages beneath, a page
   number. What was going on back then is written on the page in ink; the chat
   lies on it like a phone left on the open book. */
:root {
  --paper: #efe3cc;
  --ink: #2b201c;
  --accent-ink: #8c2a45;
  --book: 'Lora', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
}
.vol-one { --accent-ink: #5f4699; }
.vol-two { --accent-ink: #2c5a8d; }
.vol-three { --accent-ink: #a12c4c; }
.leaf {
  /* on paper, text is ink */
  --text: #2b201c; --text-soft: #5b4a42; --text-faint: #786456; --line: rgba(74,44,26,.2);
  --ghost-line: rgba(74,44,26,.42); --hint-ink: #6c5119; --hint-bg: rgba(138,106,51,.13); --hint-line: rgba(138,106,51,.5); --hint-dot: #8a6a33;
  color: var(--text);
  /* side margins: --inset is added on top of the padding for text, so prose sits further in than the phone */
  --inset: .6rem;
  position: relative; width: min(38.6rem, 100% - .9rem); margin: 0 auto 1.6rem; padding: 2.5rem 1.1rem 1.3rem;
  border-radius: 2px 7px 7px 2px;
  background:
    linear-gradient(90deg, rgba(92,58,34,.36), rgba(92,58,34,.11) .55rem, rgba(92,58,34,0) 1.7rem),
    linear-gradient(270deg, rgba(255,255,255,.4), rgba(255,255,255,0) .4rem),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .23 0 0 0 0 .12 0 0 0 .55 -.21'/%3E%3C/filter%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .38 0 0 0 0 .2 0 0 0 .42 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"),
    linear-gradient(175deg, #f6ecd9, var(--paper) 55%, #e6d7bc);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    2px 3px 0 -1px #e3d4b8, 2px 3px 0 0 #a8957a,
    4px 6px 0 -1px #d9c8aa, 4px 6px 0 0 #96846b,
    0 30px 46px -22px #000;
}
/* the phone and the dark cards keep their night colours on the page */
.leaf .phone, .leaf .poll, .leaf .verdicts, .leaf .recorder {
  --text: #f4ebe4; --text-soft: #cdbab0; --text-faint: #94817a; --line: rgba(255,236,225,.09);
  --ghost-line: rgba(255,255,255,.22); --hint-ink: var(--gold-hi); --hint-bg: rgba(220,188,126,.12); --hint-line: rgba(220,188,126,.35); --hint-dot: var(--gold-hi);
  color: var(--text);
}
.leaf .phone { border-color: #0d060b; box-shadow: 0 0 0 4px #24161f, 0 0 0 5px #4a3541, 0 24px 34px -18px rgba(50,28,16,.75), 0 3px 8px rgba(50,28,16,.28); }
.leaf .poll, .leaf .verdicts, .leaf .recorder { box-shadow: 0 20px 30px -20px rgba(50,28,16,.7); }
.leaf .kicker { color: #8a6a33; }
.leaf .scene-head, .leaf .pro-after, .leaf .pro-callback, .leaf .stats-note { margin-inline: var(--inset); }
@media (min-width: 720px) { .leaf { --inset: .7rem; padding-inline: 2rem; } }
.leaf .cert-actions .btn:not(.ghost) { --accent: #6b1d34; color: #fff4ea; }
.leaf.settle { opacity: 0; transform: perspective(1500px) rotateY(-7deg) translateY(1.4rem); transform-origin: 0 30%; transition: opacity .5s ease, transform .85s var(--ease); }
.leaf.settle.in { opacity: 1; transform: none; }
.folio { display: flex; align-items: center; justify-content: center; gap: .9rem; margin: 2rem 0 0; font: italic 500 1rem/1 var(--book); color: var(--text-faint); }
.folio i { width: 1.7rem; height: 1px; background: currentColor; opacity: .45; }

/* chapter openers */
.scene-head { display: block; text-align: center; margin: .2rem 0 1.8rem; }
.scene-n { display: block; font: 700 .7rem var(--sans); letter-spacing: .32em; text-indent: .32em; text-transform: uppercase; color: var(--accent-ink); }
.scene h3 { font: 600 clamp(1.75rem, 7.6vw, 2.15rem)/1.16 var(--display); margin: .6rem 0 0; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.flourish { display: block; width: 8.6rem; margin: .9rem auto 0; color: var(--accent-ink); }
.flourish svg { display: block; width: 100%; height: auto; overflow: visible; }
.flourish path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s cubic-bezier(.5,.1,.3,1) .25s; }
.reveal.in .flourish path { stroke-dashoffset: 0; }

/* back then, in ink: a handwritten tag, then prose that goes down in coloured ink and dries dark */
.narr { position: relative; margin: 0 var(--inset) 1.7rem; }
.narr-tag {
  display: inline-block; position: relative; margin: 0 0 .75rem; padding: 0 .3rem .32rem 0;
  font: 700 1.6rem/1 var(--hand); color: var(--accent-ink); transform: rotate(-2.5deg); transform-origin: 0 100%;
  clip-path: inset(-30% 100% -40% 0); transition: clip-path .7s ease .1s;
}
.narr-tag::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .45rem; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5C20 1 44 7 68 3S93 5 99 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5C20 1 44 7 68 3S93 5 99 2' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat; }
.narr.in .narr-tag { clip-path: inset(-30% -6% -40% 0); }
.narr-text { margin: 0; font: 400 1.08rem/1.74 var(--book); color: var(--ink); }
.narr-text::after { content: ""; display: block; clear: both; }
.narr .cap { float: left; margin: .36rem .22rem 0 0; font: 600 3.4rem/.78 var(--display); color: var(--accent-ink); }
.narr .w, .narr .cap { --d: calc(min(var(--i, 0) * 22ms, 1.25s) + .4s); opacity: 0; transition: opacity .4s ease var(--d), color 1.5s ease calc(var(--d) + .25s); }
.narr .w { color: var(--accent-ink); }
.narr.in .w, .narr.in .cap { opacity: 1; }
.narr.in .w { color: var(--ink); }

/* today, in ink: his comment under the chat */
.narr.today { margin: 1.9rem var(--inset) 0; }
.today .narr-text + .narr-text { margin-top: .85rem; }
.today .narr-text strong { font-weight: 700; }
.today .countdown { display: block; width: max-content; margin-top: .95rem; background: var(--accent-ink); color: #fbf3e4; }

/* a chat, as it would look on her phone */
.phone {
  border-radius: 26px; overflow: hidden; position: relative;
  background: #170d14; border: 1px solid rgba(255,235,225,.1);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.95), 0 0 0 6px rgba(255,255,255,.02), inset 0 1px 0 rgba(255,255,255,.05);
}
.phone-bar { display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem .7rem; background: rgba(36,20,31,.96); border-bottom: 1px solid rgba(255,235,225,.07); }
.phone-bar .av { flex-basis: 2.1rem; height: 2.1rem; font-size: .82rem; }
.pb-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pb-t b { font: 700 1rem var(--sans); color: #fbf1e8; }
.pb-t small { font: 500 .78rem var(--sans); color: #8fd6a2; white-space: nowrap; }
.phone-body {
  padding: .9rem .7rem .7rem; position: relative;
  background-color: color-mix(in srgb, var(--accent) 7%, #120a10);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.075' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(28 30) rotate(-12)'%3E%3Cpath d='M0 14c-7-6-6-16 0-22 6 6 7 16 0 22z'/%3E%3Cpath d='M0 14c-9 1-15-6-15-13 8-1 14 5 15 13z'/%3E%3Cpath d='M0 14c9 1 15-6 15-13-8-1-14 5-15 13z'/%3E%3Cpath d='M0 14v14'/%3E%3C/g%3E%3Cg transform='translate(118 22) rotate(8)'%3E%3Cpath d='M0 0h18v12a9 9 0 0 1-18 0z'/%3E%3Cpath d='M18 3h3a4 4 0 0 1 0 8h-3'/%3E%3Cpath d='M5-5c-2-3 2-4 0-7M11-5c-2-3 2-4 0-7'/%3E%3C/g%3E%3Cg transform='translate(170 70) rotate(-8)'%3E%3Cpath d='M-8-8c-4 0-6 4-5 9 1 4 1 11 4 11 2 0 2-6 4-6s2 6 4 6c3 0 3-7 4-11 1-5-1-9-5-9-2 0-2 1-3 1s-1-1-3-1z'/%3E%3C/g%3E%3Cg transform='translate(72 92) rotate(6)'%3E%3Cpath d='M-10-4l2-9 6 5h4l6-5 2 9a10 9 0 1 1-20 0z'/%3E%3Cpath d='M-4 2h0M4 2h0M0 5l-1 1M-14 4h-6M-14 7l-5 2M14 4h6M14 7l5 2'/%3E%3C/g%3E%3Cg transform='translate(30 140) rotate(-10)'%3E%3Cpath d='M0 6c-6-4-10-8-10-12a5 5 0 0 1 10-1 5 5 0 0 1 10 1c0 4-4 8-10 12z'/%3E%3C/g%3E%3Cg transform='translate(128 132)'%3E%3Cellipse cx='-6' cy='0' rx='5' ry='7'/%3E%3Cellipse cx='6' cy='0' rx='5' ry='7'/%3E%3Ccircle cx='-4' cy='2' r='1.6'/%3E%3Ccircle cx='8' cy='2' r='1.6'/%3E%3C/g%3E%3Cg transform='translate(176 168) rotate(20)'%3E%3Cpath d='M4-9a10 10 0 1 0 0 18 8 8 0 1 1 0-18z'/%3E%3C/g%3E%3Cg transform='translate(84 176) rotate(-14)'%3E%3Cpath d='M0-8l2.4 5 5.6.8-4 4 1 5.6L0 4.8-5 7.4l1-5.6-4-4 5.6-.8z'/%3E%3C/g%3E%3C/g%3E%3Ctext x='150' y='106' font-family='sans-serif' font-size='13' font-weight='700' fill='%23fff' fill-opacity='.07' transform='rotate(-10 150 106)'%3Esh%3C/text%3E%3Ctext x='14' y='92' font-family='sans-serif' font-size='11' font-weight='700' fill='%23fff' fill-opacity='.06' transform='rotate(12 14 92)'%3E:3%3C/text%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.phone .chat { margin: .2rem 0 0; min-height: 3rem; }
.phone-body { transition: height .3s ease; }
.msg.k.first .b, .msg.m.first .b { position: relative; }
.msg.k.first .b::before, .msg.m.first .b::before { content: ""; position: absolute; bottom: 0; width: 10px; height: 12px; }
.msg.k.first .b::before { left: -5px; background: radial-gradient(circle at 0 0, transparent 9px, var(--bubble-k) 9.5px); }
.msg.m.first .b::before { right: -5px; background: radial-gradient(circle at 100% 0, transparent 9px, var(--bubble-m) 9.5px); }

/* volume covers: full-bleed paintings */
.vol-cover { min-height: 100svh; display: flex; align-items: flex-end; justify-content: center; padding: 0 1.4rem calc(3.2rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); text-align: center; position: relative; overflow: hidden; }
.vol-art { position: absolute; left: 50%; top: 0; width: min(112vw, 82svh); aspect-ratio: 1122 / 1402; background: center / cover no-repeat; transform: translate3d(-50%, 0, 0) scale(1.06); will-change: transform; }
.vol-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,10,16,.35) 0%, rgba(18,10,16,0) 14%, rgba(18,10,16,0) 52%, rgba(18,10,16,.86) 78%, var(--bg) 96%), linear-gradient(90deg, var(--bg) 0, transparent 6%, transparent 94%, var(--bg) 100%); }
.vol-text { position: relative; max-width: 28rem; }
.vol-text .vlabel { font: 700 .72rem var(--sans); letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
.vol-text h2 { font: 600 italic clamp(2.6rem, 12vw, 3.6rem)/1.02 var(--display); margin: 0 0 .5rem; color: #fff6ee; text-shadow: 0 2px 24px rgba(0,0,0,.6); }
.vol-text .years { font: 600 .95rem var(--sans); letter-spacing: .12em; color: var(--text-soft); margin: 0; }
.vol-text .rule { width: 3rem; height: 1px; margin: 1.2rem auto; background: var(--accent); opacity: .7; }
.vol-text .blurb { font: 400 1.05rem/1.6 var(--sans); color: #eadbd0; margin: 0 auto; }
.vol-text .realnote { font: 500 .82rem/1.55 var(--sans); color: var(--text-faint); margin: 1.1rem auto 0; max-width: 22rem; }
.vol-body { padding: 3.5rem 0 4rem; }
.prelude-text { font: italic 500 1.25rem/1.6 var(--display); color: var(--ink); text-align: center; margin: .2rem var(--inset) 2rem; text-wrap: balance; }

/* prologue: front matter */
#prologue .wrap { width: auto; }
.legend { background: transparent; border: 0; padding: 0; margin: 0 var(--inset) 1.9rem; }
.legend .kicker { margin-bottom: .9rem; }
.legend .lg-text, .pro-about { font: 400 1.08rem/1.74 var(--book); color: var(--ink); margin: 0 0 1.2rem !important; }
.lg-text strong { font-weight: 700; }
.legend .keys { justify-content: flex-start; gap: .7rem 1.3rem; }
.legend.opening { text-align: center; margin-bottom: 1.8rem; }
.legend.opening .lg-text { font: italic 500 1.4rem/1.45 var(--display); color: var(--text); margin-bottom: 0 !important; text-wrap: balance; }
.pro-verdict { font: italic 500 1.14rem/1.6 var(--book); color: var(--ink); margin: 2rem var(--inset) 1.4rem; }
.pro-about { margin: 0 var(--inset) !important; }
#prologue .scroll-hint { margin: 2.6rem 0 0; }
.leaf > .stats:first-child { margin-top: 0; }
.leaf .stats { background: rgba(74,44,26,.28); border-color: rgba(74,44,26,.34); border-radius: 6px; }
.leaf .stats div { background: #f3e9d6; }
.leaf .stats b { color: var(--accent-ink); }
.leaf .pro-verdict strong, .leaf .pro-callback em { color: var(--accent-ink); }
.pro-after { font: italic 500 1.35rem/1.55 var(--display); }
.pro-callback { font-family: var(--display); font-weight: 600; }
.pro-callback em { font-style: italic; }
.stats b { font-family: var(--display); font-weight: 700; }

/* the fancy kees, photographed */
.kees { width: min(78vw, 20rem); aspect-ratio: 1122 / 1402; border-radius: 26px; overflow: hidden; position: relative; display: block; margin: 0 auto; filter: none; box-shadow: 0 30px 60px -28px rgba(0,0,0,.95); }
.kees-photo { position: absolute; inset: 0; background: #3b1426 center / cover no-repeat; transition: transform 1.2s cubic-bezier(.3,.1,.2,1), filter 1.2s ease; }
.kees-glow { position: absolute; inset: 0; background: radial-gradient(45% 30% at 50% 22%, rgba(255,236,210,.55), transparent 70%); opacity: 0; transition: opacity 1s ease; mix-blend-mode: screen; }
.kees.wiggle .kees-photo { animation: wiggle .7s ease-in-out 2; }
.kees.opened { transform: none; }
.kees.opened .kees-photo { transform: scale(1.08) translateY(-3%); filter: brightness(1.08); }
.kees.opened .kees-glow { opacity: 1; }

/* ───────────────── THE LETTER ─────────────────
   The first thing she reads. The opened envelope sits above; the sheet is the
   same paper the letter sequence unfolds, so the two line up exactly. */
#letter { position: relative; isolation: isolate; overflow: hidden; background: #0d0609; padding: 0 0 5rem; }
#letter::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 14rem; background: linear-gradient(180deg, rgba(18,10,16,0), var(--bg)); }
.letter-art { position: absolute; z-index: -1; left: 50%; top: 0; width: min(112vw, 82svh); aspect-ratio: 1122 / 1402; transform: translateX(-50%); background: center / 100% 100% no-repeat; }
.letter-art::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, #0d0609 0%, rgba(13,6,9,0) 15%, rgba(13,6,9,0) 52%, rgba(13,6,9,.88) 78%, #0d0609 97%),
  linear-gradient(90deg, #0d0609 0%, rgba(13,6,9,0) 7%, rgba(13,6,9,0) 93%, #0d0609 100%); }
#letter .wrap { padding-top: calc(min(112vw, 82svh) * .84); }
.sheet { position: relative; width: min(36rem, 100% - .5rem); margin: 0 auto; border-radius: 5px 5px 14px 14px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(120,90,50,.1); }
.sheet .sign { margin: 1.7rem 0 0; font: italic 400 1.04rem/1.5 var(--book); color: #6e5c53; }
.sheet .name { display: inline-block; margin: .15rem 0 1.5rem; font: 700 2.6rem/1 var(--hand); color: #8a2f45; transform: rotate(-3deg); transform-origin: 0 100%; }
.sheet .ps { margin-bottom: 0; font: italic 400 .98rem/1.65 var(--book); color: #6f5d53; }
/* under the letter: a few words, then the way on to the book */
.bridge { max-width: 24rem; margin: 3.4rem auto 0; padding: 0 1.4rem; text-align: center; }
.bridge .flourish { margin: 0 auto 1.5rem; color: var(--gold); }
.bridge .kicker { margin: 0 0 .7rem; }
.bridge-line { margin: 0 0 .6rem; font: italic 500 1.32rem/1.5 var(--display); color: #fbeedd; text-wrap: balance; }
.bridge.done .r-btn { display: none; }
/* everything after the letter stays out of the page until the book has been opened */
#book.shut > :not(#letter):not(#attempts) { display: none !important; }

/* the end: back at the window, the book gone from the sill, the candle still burning */
#ending { position: relative; isolation: isolate; background: var(--bg) !important; }
.end-art { position: absolute !important; inset: 0 auto auto 50% !important; width: min(112vw, 82svh); aspect-ratio: 1122 / 1402; height: auto !important; transform: translateX(-50%); background-size: cover !important; z-index: -1; }
.end-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,10,16,.55), rgba(18,10,16,.38) 30%, rgba(18,10,16,.85) 75%, #120a10 99%); }
#ending .wrap { padding-top: 32svh; }
#ending h2 { font-family: var(--display); font-weight: 500; }
#ending h2 span { font-family: var(--display); font-style: italic; font-weight: 600; }

/* ───────────────── CINEMA: full-screen sequences for the kees and the letter ───────────────── */
html.cinema, html.cinema body { overflow: hidden; }
.cine { position: fixed; inset: 0; z-index: 60; background: #0d0609; overflow: hidden; opacity: 0; transition: opacity .45s ease; touch-action: none; }
.cine.on { opacity: 1; }
.cine.out { opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.cine-hero {
  position: absolute; top: 0; left: 50%; width: min(112vw, 82svh); margin-left: calc(min(112vw, 82svh) / -2);
  aspect-ratio: 1122 / 1402; will-change: transform;
  transition: transform 1.4s cubic-bezier(.3,.1,.2,1), filter 1.2s ease;
}
.cine-hero > div { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.cine-fade { pointer-events: none; background:
  linear-gradient(180deg, #0d0609 0%, rgba(13,6,9,0) 16%, rgba(13,6,9,0) 66%, rgba(13,6,9,.85) 90%, #0d0609 100%),
  linear-gradient(90deg, #0d0609 0%, rgba(13,6,9,0) 7%, rgba(13,6,9,0) 93%, #0d0609 100%) !important; }
.cine .dust { position: absolute; }
.cine-caption { position: absolute; left: 0; right: 0; bottom: calc(12svh + env(safe-area-inset-bottom, 0px)); text-align: center; padding: 0 1.5rem; opacity: 0; transform: translateY(10px); transition: opacity .9s ease, transform .9s ease; }
.cine-caption b { display: block; font: italic 600 clamp(1.7rem, 7.5vw, 2.2rem)/1.15 var(--display); color: #fbeedd; text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.cine-caption span { display: block; margin-top: .5rem; font: 500 .98rem var(--sans); color: rgba(246,231,214,.8); }
.cine.cap .cine-caption { opacity: 1; transform: none; }

/* kees: push in, light from the opening, two cards rise out from behind the bag's front */
.k-rays { opacity: 0; transition: opacity .9s ease; mix-blend-mode: screen;
  background: radial-gradient(34% 16% at 48.8% 16%, rgba(255,240,215,.95), rgba(255,214,170,.45) 45%, transparent 75%),
              conic-gradient(from 150deg at 48.8% 18%, transparent 0 8deg, rgba(255,226,190,.18) 12deg, transparent 18deg 28deg, rgba(255,226,190,.14) 33deg, transparent 40deg 50deg, rgba(255,226,190,.16) 55deg, transparent 60deg) !important; }
.cine-kees.glow .k-rays { opacity: 1; animation: rays 2.4s ease-in-out infinite alternate; }
@keyframes rays { to { opacity: .7; } }
.k-front { clip-path: polygon(25.22% 17.97%, 72.46% 17.97%, 76.02% 17.62%, 77.18% 52.21%, 72.46% 55.35%, 24.51% 54%); }
.cine-hero > .k-card {
  inset: auto; left: 48.8%; top: 21%; width: 21%; aspect-ratio: 5 / 7; margin-left: -10.5%;
  border-radius: 6px; transform: translate(var(--x0, 0), 0) rotate(0deg) scale(.86);
  transition: transform 1.35s cubic-bezier(.16,.84,.24,1);
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6%;
  container-type: inline-size;
}
.k-card.c1 { --x0: -12%; background: radial-gradient(120% 90% at 30% 20%, #fffaf0, #f0e2c8) !important; color: #6b1d34; outline: 1px solid #b08848; outline-offset: -4px; }
.k-card.c2 { --x0: 12%; background: #fbfcf8 !important; color: #1f3d8f; border-top: 3px solid #1f3d8f; }
.k-card small { font: 700 9.5cqw/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8a6a33; }
.k-card b { font: italic 600 26cqw/1.1 var(--display); margin: 8cqw 0 6cqw; }
.k-card i { font: 600 10.5cqw/1.3 var(--sans); font-style: normal; color: #6e5c53; }
.k-card.c2 small { color: #4a5470; }
.k-card.c2 b { font: 600 56cqw/1 var(--serif); font-style: normal; }
.cine-kees.rise1 .k-card.c1 { transform: translate(-62%, -124%) rotate(-9deg) scale(1.04); }
.cine-kees.rise2 .k-card.c2 { transform: translate(62%, -118%) rotate(8deg) scale(1.04); }
.cine-kees.float .k-card { animation: kfloat 3s ease-in-out infinite; }
.cine-kees.float .k-card.c2 { animation-delay: -1.4s; }
@keyframes kfloat { 50% { translate: 0 -4%; } }
.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe9c4; box-shadow: 0 0 8px 2px rgba(255,214,160,.9); opacity: 0; animation: spark 1.5s ease-out forwards; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(1.1); } }

/* letter: the seal breaks, the flap turns over, the letter slides out of the pocket, rises, unfolds, and becomes the page */
.l-plain, .l-open { opacity: 0; transition: opacity .28s ease; }
.cine-letter.crack .l-plain { opacity: 1; }
.cine-letter.opened .l-open { opacity: 1; }
.l-pocket, .l-flap, .l-flapshade { visibility: hidden; }
.cine-letter.lifting .l-pocket, .cine-letter.lifting .l-flap, .cine-letter.lifting .l-flapshade { visibility: visible; }
.l-flap { transform-origin: 0 0; will-change: transform; }
.cine-hero > .l-flapshade { background: #2a170d; opacity: 0; }
.l-flash { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, #fff8ea, rgba(255,214,170,.9) 40%, rgba(240,150,140,.3) 70%, transparent); }
.cine-letter.crack .l-flash { animation: lflash .9s ease-out forwards; }
@keyframes lflash { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; transform: scale(16); } 100% { opacity: 0; transform: scale(26); } }
.shard { position: absolute; width: 11px; height: 9px; margin: -5px; background: linear-gradient(140deg, #a8223f, #5d0f22); clip-path: polygon(0 20%, 60% 0, 100% 45%, 70% 100%, 15% 80%); opacity: 0; animation: shard 1.1s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes shard { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); } }
.cine-letter.dim .cine-hero { filter: brightness(.35) blur(4px); }
.l-stage { position: absolute; inset: 0; perspective: 1500px; pointer-events: none; }
.fold { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; opacity: 0; will-change: transform; } /* no filter here: it would flatten the 3D fold */
.l-shadow, .l-veil { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; will-change: transform; }
.l-shadow { background: #120406; border-radius: 3px; }
.l-veil { background: linear-gradient(180deg, #cba27a, #f3d2ac 62%); mix-blend-mode: multiply; } /* candlelight on the letter while it is still in the scene, deeper inside the envelope */
.pn { position: absolute; left: 0; right: 0; height: 33.3334%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.4,.05,.2,1); }
.pn.mid { top: 33.3333%; transition: transform 1s cubic-bezier(.4,.05,.2,1), box-shadow .9s ease; }
.fold.up .pn.mid { box-shadow: 0 34px 50px -18px rgba(0,0,0,.75); } /* only once it has left the envelope */
.pn.top { top: 0; transform-origin: 50% 100%; transform: translateZ(9px) rotateX(-179deg); }
.pn.bot { top: 66.6666%; transform-origin: 50% 0; transform: translateZ(1px) rotateX(179deg); }
.fold.u1 .pn.top { transform: translateZ(0) rotateX(0deg); }
.fold.u2 .pn.bot { transform: translateZ(0) rotateX(0deg); }
.pn-front, .pn-back { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pn-back { transform: rotateX(180deg); background: linear-gradient(180deg, #efe2cd, #e2d2b8); box-shadow: inset 0 0 30px rgba(120,90,50,.18); display: grid; place-items: center; }
.pn-back span { font: italic 600 1.9rem var(--display); color: #7a2a40; opacity: .85; }
.pn-in { position: absolute; left: 0; right: 0; top: 0; height: 300%; }
.pn.mid .pn-in { top: -100%; } .pn.bot .pn-in { top: -200%; }
.pn.top .pn-front { border-radius: 6px 6px 0 0; } .pn.bot .pn-front { border-radius: 0 0 6px 6px; }
.pn-front::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 -1px 0 rgba(120,90,50,.16), inset 0 1px 0 rgba(120,90,50,.1); }
/* the paper, shared by the animated letter and the real one so the hand-over is seamless */
.paper { background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E"), radial-gradient(40rem 26rem at 30% 0, #fffaf2, #f3e7d6); color: #2b201c; padding: 2.3rem 1.4rem 2rem; }
.paper .date { margin: 0 0 1.5rem; text-align: right; font: italic 400 .96rem/1.3 var(--book); color: #7a675d; }
.paper .sal { font: italic 600 1.7rem var(--display); color: #6b1d34; margin: 0 0 1rem; }
.paper p { color: #33261f; font: 400 1.08rem/1.78 var(--book); margin: 0 0 1.15rem; }

/* parts that wait for the chat before them */
.held { display: none !important; }
.tail { height: 34svh; display: grid; place-items: start center; padding-top: 1.6rem; }
.tail span { font: 600 .74rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: .5rem; opacity: .8; }
.tail i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dot 1s infinite; }
.tail i:nth-child(2) { animation-delay: .15s; } .tail i:nth-child(3) { animation-delay: .3s; }

@media (max-width: 360px) {
  .b { font-size: .94rem; }
  .scene h3 { font-size: 1.4rem; }
}
@media (min-width: 720px) {
  .page { padding: 7rem 0; }
  .envelopes { grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .note, .widget, .leaf.settle, .narr .w, .narr .cap { opacity: 1 !important; transform: none !important; }
  .narr-tag { clip-path: none; }
  .flourish path { stroke-dashoffset: 0; }
  .msg { display: block; }
}

/* her appointment on the first present (booking.js) */
.env { min-width: 0; } /* the strip of days scrolls inside the card instead of widening it */
.bk-host { margin-top: 1rem; padding: 1.05rem 1rem 1.1rem; border-radius: 16px; border: 1px solid rgba(255,236,225,.13); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.bk-host[data-state=booked] { border-color: rgba(220,188,126,.45); background: linear-gradient(180deg, rgba(220,188,126,.11), rgba(220,188,126,.03)); }
.bk-host .bk-line { margin: 0 0 .95rem; color: var(--text); font: 600 1.04rem/1.5 var(--sans); }
.bk-host .bk-small { margin: .75rem 0 0; color: var(--text-soft); font: 400 .9rem/1.5 var(--sans); }
.bk-host .bk-small:empty { display: none; }
.bk-go { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; border: 0; border-radius: 999px; padding: .92rem 1rem; background: linear-gradient(180deg, #f3a0b4, var(--rose)); color: #1a0f17; font: 800 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 22px -12px rgba(233,132,155,.9); transition: transform .15s, opacity .2s; }
.bk-go:active { transform: scale(.98); }
.bk-go[disabled] { opacity: .45; box-shadow: none; }
.bk-go svg { width: 1.1rem; height: 1.1rem; }
.bk-link { display: block; margin: .85rem auto 0; border: 0; background: none; color: var(--text-soft); font: 500 .88rem var(--sans); text-decoration: underline; text-underline-offset: 3px; }
/* the three questions */
.bk-host .bk-h { display: flex; align-items: center; gap: .55rem; margin: 1.3rem 0 .7rem; font: 700 .7rem var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.bk-host .bk-h:first-child { margin-top: 0; }
.bk-n { flex: 0 0 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(220,188,126,.55); background: rgba(220,188,126,.14); color: var(--gold-hi); font: 700 .72rem var(--sans); letter-spacing: 0; }
.bk-h small { margin-left: auto; text-transform: none; letter-spacing: 0; font: 500 .76rem var(--sans); color: var(--text-faint); }
.bk-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.bk-chips .wide { grid-column: 1 / -1; }
.bk-chip { border: 1px solid rgba(255,236,225,.15); background: rgba(255,255,255,.05); color: var(--text); border-radius: 999px; padding: .56rem .95rem; font: 600 .9rem var(--sans); transition: background .2s, border-color .2s, color .2s, transform .15s; }
.bk-chip:active, .bk-day:active { transform: scale(.96); }
.bk-who { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .95rem .3rem .32rem; }
.bk-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-who i svg { width: .95rem; height: .95rem; }
.bk-who i { flex: 0 0 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: 50%; background: rgba(233,132,155,.18); color: var(--rose); font: 700 .78rem var(--sans); }
.bk-chip.on, .bk-day.on { background: var(--rose); border-color: var(--rose); color: #1a0f17; box-shadow: 0 8px 18px -10px rgba(233,132,155,.95); }
.bk-who.on i { background: rgba(26,15,23,.16); color: #1a0f17; }
/* the days run off the right edge of the card and fade there, so it is plain that there are more */
.bk-days { display: flex; gap: .45rem; overflow-x: auto; margin-right: -1rem; padding: .1rem 2.2rem .55rem 0; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.6rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.6rem), transparent); }
.bk-days::-webkit-scrollbar { display: none; }
.bk-day { flex: 0 0 3.55rem; height: 4.5rem; display: grid; justify-items: center; align-content: center; gap: .1rem; scroll-snap-align: start; border: 1px solid rgba(255,236,225,.15); background: rgba(255,255,255,.05); color: var(--text); border-radius: 14px; padding: 0; transition: background .2s, border-color .2s, transform .15s; }
.bk-day b { font: 700 1.2rem/1.1 var(--sans); }
.bk-day small { font: 700 .62rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.bk-day.on small { color: #4a1626; }
.bk-day[disabled] { opacity: .3; background: none; border-style: dashed; }
.bk-days .bk-hint { flex: 1; margin-right: 1rem; }
.bk-host .bk-part { margin: .95rem 0 .5rem; color: var(--text-soft); font: 600 .8rem var(--sans); }
.bk-host .bk-part:first-child { margin-top: 0; }
.bk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.bk-grid .bk-chip { padding: .62rem .2rem; text-align: center; }
.bk-host .bk-hint { margin: 0; padding: .85rem .9rem; border-radius: 12px; border: 1px dashed rgba(255,236,225,.17); color: var(--text-faint); font: 400 .9rem/1.45 var(--sans); }
.bk-host .bk-warn { margin: .2rem 0 0; color: var(--gold); font: 500 .85rem/1.5 var(--sans); }
.bk-host .bk-warn:empty { display: none; }
/* waiting: placeholders with a light passing over them, and three dots that keep moving */
.bk-skel { display: block; border: 0; background: linear-gradient(100deg, rgba(255,255,255,.05) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.05) 70%) 0 0 / 300% 100%; animation: bk-shimmer 1.2s linear infinite; }
.bk-skel.bk-day { box-shadow: none; }
.bk-skel.bk-chip { height: 2.55rem; padding: 0; }
@keyframes bk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bk-host .bk-wait { display: flex; align-items: center; gap: .45rem; }
.bk-h .bk-dots { margin-right: .1rem; }
.bk-dots { display: inline-flex; gap: .2rem; }
.bk-dots i { width: .34rem; height: .34rem; border-radius: 50%; background: var(--rose); animation: bk-dot 1s ease-in-out infinite; }
.bk-dots i:nth-child(2) { animation-delay: .15s; }
.bk-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bk-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-.26rem); opacity: 1; } }
/* an appointment as a calendar leaf */
.bk-leaf { display: flex; align-items: stretch; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,236,225,.15); background: rgba(0,0,0,.24); }
.bk-leaf-day { flex: 0 0 4.5rem; display: grid; justify-items: center; align-content: center; gap: .08rem; padding: .75rem 0; background: var(--rose); color: #1a0f17; }
.bk-leaf-day b { font: 800 1.75rem/1 var(--sans); }
.bk-leaf-day small { font: 800 .64rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.bk-leaf-info { display: grid; align-content: center; gap: .22rem; min-width: 0; padding: .75rem .95rem; }
.bk-leaf-info b { font: 700 1.4rem/1.1 var(--sans); color: var(--text); }
.bk-leaf-info span { font: 500 .86rem/1.35 var(--sans); color: var(--text-soft); }
.bk-host[data-state=booked] .bk-leaf-day { background: var(--gold); }
.bk-end { display: grid; gap: .75rem; margin-top: 1.2rem; animation: bk-in .35s var(--ease) both; }
.bk-end[hidden] { display: none; }
.bk-end .bk-small { margin: 0; text-align: center; }
@keyframes bk-in { from { opacity: 0; transform: translateY(8px); } }
.bk-note { width: 100%; border: 1px solid rgba(255,236,225,.15); border-radius: 12px; background: rgba(0,0,0,.25); color: var(--text); padding: .75rem .85rem; font: 400 16px var(--sans); outline: none; } /* 16px: a smaller box makes an iPhone zoom in when she taps it */
.bk-note:focus { border-color: var(--rose); }
/* waiting for him, and done */
.bk-host .bk-live { display: flex; align-items: flex-start; gap: .65rem; margin: .9rem 0 0; color: var(--text-soft); font: 400 .9rem/1.5 var(--sans); }
.bk-pulse { flex: 0 0 .6rem; height: .6rem; margin-top: .42rem; border-radius: 50%; background: var(--rose); animation: bk-pulse 1.6s ease-out infinite; }
@keyframes bk-pulse { from { box-shadow: 0 0 0 0 rgba(233,132,155,.6); } to { box-shadow: 0 0 0 .6rem rgba(233,132,155,0); } }
.bk-done { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; color: var(--gold-hi); }
.bk-done svg { width: 1.75rem; height: 1.75rem; }
.bk-title { font: 800 1.3rem var(--sans); }
@media (prefers-reduced-motion: reduce) { .bk-skel, .bk-dots i, .bk-pulse, .bk-end { animation: none; } }