:root {
  --bg: #1d1234; --ink: #fff6e0; --a: #ff4f79; --b: #ffd23f;
  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Libre Caslon Text", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #0d0a14; color: var(--ink); font: 16px/1.4 var(--font); display: grid; place-items: center; overflow: hidden; }
button, input { font: inherit; }
a { color: inherit; }

/* Story frame: 9:16 on desktop, the whole screen on phones. */
#frame {
  position: relative; overflow: hidden;
  width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9));
  background: var(--bg); color: var(--ink); transition: background .45s, color .45s;
  container-type: inline-size;
}
@media (max-width: 600px) { #frame { width: 100vw; height: 100dvh; } }

.bars { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 6; }
.bars i { flex: 1; height: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.bars i.on { opacity: .95; }
.brand { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 12px); left: 14px; font-weight: 800; font-size: 13px; z-index: 6; opacity: .85; }
.close { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 8px); right: 10px; z-index: 7; border: 0; background: none; color: inherit; font-weight: 600; font-size: 13px; cursor: pointer; opacity: .8; padding: 4px 6px; }
.tap { position: absolute; top: 0; bottom: 0; z-index: 4; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tap.prev { left: 0; width: 30%; }
.tap.next { right: 0; width: 70%; }
.hint { position: absolute; bottom: max(8px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 11px; opacity: .55; z-index: 5; pointer-events: none; }
.slide { position: absolute; inset: 0; padding: calc(max(10px, env(safe-area-inset-top)) + 54px) 7cqw calc(max(8px, env(safe-area-inset-bottom)) + 28px); display: flex; flex-direction: column; }

h1, h2, p { margin: 0; }
.kicker { font-weight: 600; font-size: 4.2cqw; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.huge { font-weight: 800; font-size: 15cqw; line-height: .92; letter-spacing: -.02em; overflow-wrap: anywhere; }
.big { font-weight: 800; font-size: 9.5cqw; line-height: 1.02; letter-spacing: -.015em; overflow-wrap: anywhere; }
.mid { font-weight: 600; font-size: 6.2cqw; line-height: 1.15; }
.small { font-size: 3.6cqw; opacity: .8; line-height: 1.4; }
.a { color: var(--a); } .b { color: var(--b); }
.grow { flex: 1; min-height: 0; }
.center { display: flex; flex-direction: column; justify-content: center; }

/* Entrance animation, staggered by --d. */
.rise { opacity: 0; transform: translateY(18px); animation: rise .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d, 0) * 120ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.pop { transform: scale(.2); opacity: 0; animation: pop .6s cubic-bezier(.2,1.4,.3,1) forwards; animation-delay: calc(var(--d, 0) * 140ms + 100ms); }
@keyframes pop { to { transform: none; opacity: 1; } }
.dot { transform-box: fill-box; transform-origin: center; animation: pop .5s cubic-bezier(.2,1.4,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .rise, .pop, .dot { animation: none; opacity: 1; transform: none; } }

svg.map { width: 100%; height: 100%; display: block; }

/* Start screen */
.start { justify-content: safe center; overflow-y: auto; }
.start .field { position: relative; display: block; margin-top: 4cqw; }
.start label { display: block; font-size: 3.6cqw; font-weight: 600; opacity: .85; margin-bottom: 1.5cqw; }
.start input { width: 100%; border: 0; border-radius: 3cqw; padding: 3.6cqw 4cqw; font-size: max(16px, 5.4cqw); font-weight: 600; background: rgba(255,255,255,.12); color: inherit; outline: none; }
.start input:focus { background: rgba(255,255,255,.2); }
.start input::placeholder { color: inherit; opacity: .4; }
.sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin-top: 1cqw; background: #2b2047; border-radius: 3cqw; overflow: hidden; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.4); }
.sugg button { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; color: var(--ink); text-align: left; padding: 2.8cqw 4cqw; font-size: 4.2cqw; font-weight: 600; cursor: pointer; }
.sugg button + button { border-top: 1px solid rgba(255,255,255,.08); }
.sugg button:hover, .sugg button:focus { background: rgba(255,255,255,.1); outline: none; }
.sugg small { opacity: .6; font-weight: 400; }
.go { margin-top: 5cqw; width: 100%; border: 0; border-radius: 99px; padding: 4cqw; font-size: 5.2cqw; font-weight: 800; background: var(--ink); color: var(--bg); cursor: pointer; }
.go:disabled { opacity: .5; cursor: default; }
.err { min-height: 1.4em; margin-top: 2cqw; font-size: 3.6cqw; color: var(--b); }
details.about { margin-top: 5cqw; font-size: 3.4cqw; opacity: .8; }
details.about summary { cursor: pointer; font-weight: 600; }
details.about p { margin-top: 2cqw; line-height: 1.5; }

/* Book page */
.page { background: #f3ede1; color: #221d17; border-radius: 2cqw; padding: 4cqw 5cqw; font-family: var(--serif); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.3); transform: rotate(var(--rot, -1.5deg)); }
.page .hd { display: flex; justify-content: space-between; font-size: 3cqw; color: #8c8273; margin-bottom: 2cqw; font-style: italic; }
.page ol { list-style: none; margin: 0; padding: 0; font-size: 4.4cqw; line-height: 1.5; }
.page li.dim { color: #8c8273; }
.page li.blur { color: #b8ad99; letter-spacing: .3em; }
.page li.hit { color: #a3301f; font-weight: 700; font-size: 5.6cqw; position: relative; z-index: 0; }
.page li.hit::before { content: ""; position: absolute; left: -2cqw; right: -2cqw; top: 8%; bottom: 8%; background: rgba(163,48,31,.12); border-radius: 1cqw; z-index: -1; }
.page.none { font-family: var(--font); padding: 5cqw; }

/* Surname types */
.badge { border-radius: 5cqw; padding: 5cqw; color: #1d1234; }
.badge .t { font-weight: 800; font-size: 7.4cqw; line-height: 1; }
.badge .who { font-size: 3.4cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; opacity: .75; margin-bottom: 1.5cqw; }
.badge p { margin-top: 2cqw; font-size: 3.8cqw; }

/* Final: card + controls */
.final { padding-top: calc(max(10px, env(safe-area-inset-top)) + 40px); gap: 3cqw; padding-left: 5cqw; padding-right: 5cqw; }
.cardwrap { flex: 1; min-height: 0; display: grid; place-items: center; }
.card { container-type: inline-size; background: var(--cbg); color: var(--cink); border-radius: 3cqw; overflow: hidden; position: relative; display: flex; flex-direction: column; padding: 6cqw;
        box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 3cqw 8cqw rgba(0,0,0,.45); }
.card.story { aspect-ratio: 9 / 16; height: 100%; max-width: 100%; }
.card.square { aspect-ratio: 1; width: 100%; max-height: 100%; }
.card .cb { font-weight: 800; font-size: 4cqw; letter-spacing: .04em; opacity: .85; }
.card .names { font-weight: 800; line-height: .95; letter-spacing: -.02em; margin-top: 4cqw; overflow-wrap: anywhere; }
.card.story .names { font-size: 11cqw; }
.card.square .names { font-size: 8.5cqw; }
.card .names .x { font-size: .55em; opacity: .7; }
.card .facts { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 4cqw; }
.card .f .l { font-size: 3.2cqw; text-transform: uppercase; letter-spacing: .1em; opacity: .7; font-weight: 600; }
.card .f .v { font-size: 6.4cqw; font-weight: 800; line-height: 1.05; }
.card .f.letters .v { font-size: 22cqw; line-height: .85; }
.card .f.map { flex: 1; min-height: 20cqw; }
.card .foot { display: flex; justify-content: space-between; gap: 3cqw; font-size: 3.2cqw; opacity: .75; font-weight: 600; }
.controls { flex: none; display: grid; gap: 2.4cqw; font-size: 3.4cqw; }
.row { display: flex; gap: 1.6cqw; flex-wrap: wrap; align-items: center; }
.row .lbl { font-weight: 600; opacity: .7; width: 15cqw; }
.tg { border: 1.5px solid currentColor; background: none; color: inherit; border-radius: 99px; padding: 1.2cqw 2.6cqw; font-size: 3.2cqw; font-weight: 600; cursor: pointer; opacity: .6; }
.tg.on { background: var(--ink); color: var(--bg); border-color: var(--ink); opacity: 1; }
.tg:disabled { opacity: .25; cursor: default; }
.acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2cqw; }
.acts button { border: 0; border-radius: 99px; padding: 3cqw 1cqw; font-weight: 800; font-size: 3.8cqw; cursor: pointer; background: var(--ink); color: var(--bg); }
.acts button.ghost { background: none; color: var(--ink); border: 1.5px solid currentColor; }
.toast { position: absolute; left: 50%; bottom: 18cqw; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 2cqw 4cqw; border-radius: 99px; font-weight: 600; font-size: 3.6cqw; z-index: 20; }

/* "Did you mean" under the form */
.dym { color: var(--ink); font-size: 3.8cqw; line-height: 1.5; }
.dym + .dym { margin-top: 2cqw; }
.dym button { border: 0; border-radius: 99px; margin: 1cqw 1cqw 0 0; padding: 1.4cqw 3cqw; font-weight: 700; font-size: 3.8cqw; background: var(--b); color: #1d1234; cursor: pointer; }
.dym button.keep { background: none; color: inherit; border: 1.5px solid currentColor; font-weight: 600; opacity: .8; }
/* Outbound links on slides sit above the tap zones. */
.out { position: relative; z-index: 6; align-self: flex-start; margin-top: 3cqw; font-weight: 600; font-size: 3.8cqw; }