/* PAPI — sky edition.
   Palette sampled from the canon photograph: the steel-blue sky he squints into,
   his tan coat, the cream urajiro, and the tip of the tongue. */
:root {
  --sky-hi: #4F76A2;
  --sky: #6A8FB7;
  --sky-lo: #A7BFD8;
  --paper: #EAF1F8;
  --cream: #FFF3E0;
  --coat: #D98B3A;
  --tongue: #E88A96;
  --tongue-deep: #DD6F7E;
  --glint: #FFD84A;
  --ink: #0E1A30;
  --ink-2: #1B2C4B;
  /* the day: noon, golden hour, sunset and night stops for the page-long sky */
  --noon-hi: #7AA0CB;
  --gold-hi: #8FA8C8;
  --gold: #EDC99B;
  --gold-lo: #F2A868;
  --dusk-hi: #B784A7;
  --dusk: #EE8F7A;
  --dusk-lo: #F7B36B;
  --night-lo: #26386A;
  --sky-deep: #3F6694;
  --dawn-hi: #2E4378;
  --dawn: #6C6FA3;
  --dawn-mid: #E59AA0;
  --dawn-lo: #FFC98A;

  --display: 'Dela Gothic One', 'Hiragino Sans', sans-serif;
  --body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-lid: cubic-bezier(.75, 0, .2, 1);
  --intro: 1.1s;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
/* the page holds still while the opening plays, so an early scroll cannot cut across it */
html.intro-lock, html.intro-lock body { overflow: hidden; overscroll-behavior: none; }
html.still { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--sky-hi);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.hold :focus-visible, .viewer :focus-visible { outline-color: var(--cream); }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ink); color: var(--cream); padding: .6rem 1rem; border-radius: 999px;
  text-decoration: none; font-weight: 700;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--gutter), 78rem); margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .75em 1.45em;
  border: 2px solid var(--ink); border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: 1.05rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease-out), background-color .2s, color .2s, box-shadow .35s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); transition-duration: .08s; }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: var(--ink-2); }
.btn-tongue { background: var(--tongue); color: var(--ink); box-shadow: 0 .3rem 0 var(--ink); }
.btn-tongue:hover { background: var(--tongue-deep); box-shadow: 0 .45rem 0 var(--ink); }
.btn-tongue:active { box-shadow: 0 .1rem 0 var(--ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--cream); }

/* ---------- Load: the squint ---------- */
.lids { display: none; }
.js:not(.still) .lids {
  display: block; position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden;
}
@property --lid-h { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* the open eye is a hole in the ink, animated as paint so nothing shifts layout */
.lid {
  position: absolute; inset: 0;
  background: radial-gradient(59vw calc(var(--lid-h) / 2) at 50% var(--eye-y, 42%), transparent 97%, var(--ink) 100%);
  animation: squint 2.3s var(--ease-lid) .15s forwards;
}
@keyframes squint {
  0%   { --lid-h: 0px; }
  32%  { --lid-h: 9vh; }
  58%  { --lid-h: 9vh; }
  100% { --lid-h: 340vh; }
}
.lids.done, .seen .lids { display: none !important; }
.seen { --intro: 0s; }

/* ---------- Top bar ---------- */
.bar {
  position: absolute; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: 1.5rem;
  padding: clamp(.9rem, 2vw, 1.4rem) var(--gutter);
}
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; font-family: var(--display); font-size: 1.05rem; letter-spacing: .01em;
}
.brand img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); }
.bar-nav { display: flex; gap: 1.6rem; margin-left: auto; font-weight: 700; }
.bar-nav a { text-decoration: none; background: linear-gradient(currentColor 0 0) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease-out); padding-block: .2rem; }
.bar-nav a:hover { background-size: 100% 2px; }
.bar-cta { min-height: 2.6rem; padding: .6em 1.2em; font-size: .98rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  height: max(100svh, 44rem);
  overflow: hidden;
  perspective: 1400px;
}

/* ---------- The day: one fixed sky the whole page scrolls through ---------- */
.daysky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.layer { position: absolute; inset: 0; will-change: opacity; }
.l-morning { background: linear-gradient(180deg, var(--sky-hi) 0%, var(--sky) 58%, var(--sky-lo) 100%); }
.l-noon { background: linear-gradient(180deg, var(--noon-hi) 0%, var(--sky-lo) 55%, var(--paper) 100%); }
.l-gold { background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 62%, var(--gold-lo) 100%); }
.l-dusk { background: linear-gradient(180deg, var(--dusk-hi) 0%, var(--dusk) 55%, var(--dusk-lo) 100%); }
.l-dawn { background: linear-gradient(180deg, var(--dawn-hi) 0%, var(--dawn) 42%, var(--dawn-mid) 76%, var(--dawn-lo) 100%); }
.l-night {
  background:
    radial-gradient(110% 40% at 50% 115%, color-mix(in oklab, var(--night-lo) 90%, transparent), transparent 75%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink) 45%, var(--ink-2) 100%);
}
.js .l-noon, .js .l-gold, .js .l-dusk, .js .l-night, .l-dawn { opacity: 0; }
/* no JS: the page reads as a plain morning sky */
.nstars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, var(--cream), transparent 70%),
    radial-gradient(1px 1px at 90px 110px, var(--cream), transparent 70%),
    radial-gradient(1.2px 1.2px at 160px 60px, var(--sky-lo), transparent 70%),
    radial-gradient(1px 1px at 50px 170px, var(--cream), transparent 70%);
  background-size: 200px 200px;
  opacity: .7;
}
.nstars.n2 { background-size: 330px 290px; background-position: 70px 40px; animation: twinkle-field 5s ease-in-out infinite alternate; }
@keyframes twinkle-field { from { opacity: .15; } to { opacity: .8; } }
.sun-clip { position: absolute; inset: 0 0 auto; height: var(--horizon-y); overflow: hidden; }
.daysky { --horizon-y: 66vh; }
.sun-halo {
  position: absolute; left: 50%; top: 50%; width: 260%; height: 260%; margin: -130% 0 0 -130%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--coat) 55%, transparent), color-mix(in oklab, var(--tongue) 22%, transparent) 45%, transparent);
  opacity: var(--sun-low, 0);
}
.horizon-glow {
  position: absolute; left: 0; right: 0; top: calc(var(--horizon-y) - 30vh); height: 60vh; pointer-events: none;
  background: radial-gradient(60% 50% at var(--sun-x, 30vw) 50%, color-mix(in oklab, var(--glint) 60%, transparent), color-mix(in oklab, var(--coat) 30%, transparent) 40%, transparent 75%);
  opacity: 0; will-change: opacity;
}
.horizon { position: absolute; left: 0; right: 0; top: calc(var(--horizon-y) - 20px); height: 40px; opacity: 0; will-change: opacity; }
.horizon .dd { --dd-c: var(--ink); }
.sun {
  position: absolute; left: 0; top: 0; width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin;
  transform: translate3d(62vw, 16vh, 0);
  will-change: transform, opacity;
}
.sun-core, .sun-low { position: absolute; inset: 0; border-radius: 50%; }
.sun-halo, .sun-core, .sun-low { pointer-events: none; }
.sun-core {
  background: radial-gradient(closest-side, var(--cream) 0 17%, var(--glint) 22% 26%, color-mix(in oklab, var(--glint) 45%, transparent) 36%, transparent 100%);
  animation: sun-breathe 6s ease-in-out infinite alternate;
}
.sun-low {
  background: radial-gradient(closest-side, var(--glint) 0 20%, var(--coat) 27%, color-mix(in oklab, var(--tongue-deep) 45%, transparent) 42%, transparent 100%);
  opacity: var(--sun-low, 0);
  transform: scale(1.25);
}
@keyframes sun-breathe { to { transform: scale(1.06); } }
.moon {
  position: absolute; right: 17vw; top: 13vh; width: 4.2rem; height: 4.2rem; border-radius: 50%;
  box-shadow: inset -1.1rem .45rem 0 0 var(--cream), 0 0 3rem -.5rem color-mix(in oklab, var(--cream) 40%, transparent);
  rotate: -18deg; opacity: 0; will-change: opacity, transform;
}
.clouds { position: absolute; inset: 0; will-change: transform, opacity; }
.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18) 55%, rgba(255, 255, 255, 0));
  animation: drift linear infinite;
}
.c1 { width: 44vw; height: 9vw; top: 30%; left: 10%; opacity: .45; animation-duration: 170s; animation-delay: -20s; }
.c2 { width: 30vw; height: 7vw; top: 76%; left: 30%; opacity: .7; animation-duration: 120s; animation-delay: -40s; }
.c3 { width: 60vw; height: 14vw; top: 86%; left: -30%; opacity: .8; animation-duration: 150s; animation-delay: -70s; }
@keyframes drift { from { transform: translateX(-20vw); } to { transform: translateX(110vw); } }

.masthead {
  position: absolute; z-index: 1;
  left: calc(var(--gutter) - .06em); top: clamp(5rem, 13vh, 8.5rem);
  display: flex;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(7rem, 25vw, 30rem);
  line-height: .78; letter-spacing: -.035em;
  color: var(--ink);
  perspective: 900px;
  will-change: transform;
}
/* hero type waits for its web font, so the swap never visibly reflows the first screen */
.js:not(.fonts) .masthead, .js:not(.fonts) .hero-copy { visibility: hidden; }
.mh-l { display: inline-block; transform-origin: 50% 100%; will-change: translate, rotate; }

.hero-rig {
  position: absolute; z-index: 2;
  right: -1.5vw; bottom: 0;
  height: min(84%, calc(56vw * 1.115));
  aspect-ratio: 920 / 1026;
  transform-origin: 60% 100%;
  will-change: transform;
}
.hero-breathe { height: 100%; transform-origin: 50% 100%; will-change: transform; animation: breathe 4.5s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.012); } }
.hero-papi {
  width: 100%; height: 100%; max-width: none;
  filter: drop-shadow(0 1.5rem 2.5rem rgba(14, 26, 48, .28));
  -webkit-mask-image: linear-gradient(180deg, black 80%, transparent 100%); mask-image: linear-gradient(180deg, black 80%, transparent 100%);
}

.hero-copy {
  position: absolute; z-index: 3;
  left: var(--gutter); bottom: clamp(2rem, 7vh, 4.5rem);
  max-width: 30rem;
}
.pair {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6.2vw, 5.6rem); line-height: .9; letter-spacing: -.02em;
}
.tagline {
  margin-top: .9rem;
  font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.1;
}
.sub { margin-top: .6rem; font-size: 1.12rem; font-weight: 700; line-height: 1.45; max-width: 26rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* load choreography, runs as the lids open */
.js:not(.still) .mh-l { animation: rise 1.1s var(--ease-out) both; animation-delay: calc(var(--intro) + .15s + var(--i) * 70ms); }
.js:not(.still) .hero-rig { animation: papi-up 1.4s var(--ease-out) calc(var(--intro) + .1s) both; }
.js:not(.still) .hero-copy > * { animation: fade-up .9s var(--ease-out) both; }
.js:not(.still) .hero-copy > :nth-child(1) { animation-delay: calc(var(--intro) + .55s); }
.js:not(.still) .hero-copy > :nth-child(2) { animation-delay: calc(var(--intro) + .65s); }
.js:not(.still) .hero-copy > :nth-child(3) { animation-delay: calc(var(--intro) + .75s); }
.js:not(.still) .hero-copy > :nth-child(4) { animation-delay: calc(var(--intro) + .85s); }
.js:not(.still) .bar { animation: fade 1s ease calc(var(--intro) + .7s) both; }
@keyframes rise { from { transform: translateY(45%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes papi-up { from { translate: 0 14%; } to { translate: 0 0; } }
@keyframes fade-up { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Section type ---------- */
.h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.5rem, 6.2vw, 5.8rem); line-height: .94; letter-spacing: -.025em;
  text-wrap: balance;
}
.lede { margin-top: 1.1rem; font-size: 1.2rem; line-height: 1.5; max-width: 30rem; }

/* ---------- Lore ---------- */
.lore { padding-block: clamp(5rem, 12vw, 10rem); }
.facts { margin-top: clamp(3rem, 6vw, 5rem); }
.fact {
  display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; gap: 1rem 2.5rem;
  padding-block: clamp(1.6rem, 3.2vw, 2.6rem);
  border-top: 2px solid var(--ink);
}
.fact:last-child { border-bottom: 2px solid var(--ink); }
.fact-name {
  display: flex; align-items: baseline; gap: .8rem;
  font-family: var(--body); font-weight: 700; font-size: 1.1rem; padding-top: .55rem;
}
.fact-num { font-family: var(--display); font-weight: 400; color: var(--ink-2); min-width: 2.2rem; font-size: 1.3rem; }
.fact-line {
  font-weight: 700; font-size: clamp(1.65rem, 3.6vw, 3.3rem); line-height: 1.12; letter-spacing: -.012em;
  max-width: 21em; text-wrap: balance;
}
.pill {
  display: inline-block; vertical-align: -.14em;
  width: 2em; height: 1em; margin-inline: .06em;
  border-radius: 999px; overflow: hidden;
  background: var(--sky-lo);
  box-shadow: inset 0 0 0 2px var(--ink);
  transition: clip-path .9s var(--ease-out);
}
.pill img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; position: relative; z-index: -1; }
.pill { position: relative; isolation: isolate; }
.js:not(.still) .fact .pill { clip-path: inset(0 1em round 999px); }
.js:not(.still) .fact.in .pill { clip-path: inset(0 0 round 999px); }
.pill img { transition: transform .6s var(--ease-out); }
.fact-line:hover .pill img { transform: scale(1.25); }

/* ---------- Ask Papi ---------- */
.ask { padding-block: clamp(5rem, 12vw, 10rem); }
.ask-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.ask-intro { position: sticky; top: 3rem; }
/* The conversation lives in one frosted glass panel, like a Messages window resting
   on the golden sky: a quiet header, the thread, and the compose bar docked below. */
.chat-card {
  position: relative; min-width: 0; border-radius: 2rem;
  background: color-mix(in oklab, var(--paper) 58%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .35),
    0 0 0 1px rgba(14, 26, 48, .06),
    0 2px 4px rgba(14, 26, 48, .04),
    0 14px 32px -10px rgba(14, 26, 48, .2),
    0 44px 90px -28px rgba(14, 26, 48, .28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .chat-card { background: color-mix(in oklab, var(--paper) 94%, transparent); }
}
.chat-head {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1.1rem 1.5rem .85rem;
  border-bottom: 1px solid rgba(14, 26, 48, .08);
}
.chat-head-avatar { width: 2.9rem; height: 2.9rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--cream), 0 2px 8px rgba(14, 26, 48, .18); }
.chat-head-name { font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.chat-body { padding: 1.3rem clamp(1rem, 2.4vw, 1.6rem) 1rem; }

.chat { display: flex; flex-direction: column; gap: .55rem; }
.chat { position: relative; }
.msg { position: relative; display: flex; align-items: flex-end; gap: .6rem; max-width: 40rem; }
.msg p { text-wrap: balance; }
.msg p { padding: .6rem 1rem; border-radius: 1.2rem; }
.msg.you { align-self: flex-end; max-width: 85%; }
/* your side: a deep sky bubble with cream text (5.5:1) */
.msg.you p {
  background: var(--sky-deep); color: var(--cream);
  border-bottom-right-radius: .4rem;
  font-weight: 700; font-size: 1.05rem; line-height: 1.35;
  box-shadow: 0 1px 1px rgba(14, 26, 48, .12), 0 4px 12px -6px rgba(14, 26, 48, .35);
}
/* Papi's side: his stamp, refined for the panel */
.msg.papi p {
  background: var(--cream); border: 1.5px solid var(--ink); border-bottom-left-radius: .4rem;
  font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.15; letter-spacing: -.01em;
  padding: .7rem 1.05rem;
  box-shadow: 0 .22rem 0 var(--ink);
  text-wrap: pretty;
  transform-origin: 0 100%;
}
@keyframes stamp {
  from { transform: scale(1.08) rotate(-1.2deg); box-shadow: 0 0 0 var(--ink); }
  to { transform: none; box-shadow: 0 .22rem 0 var(--ink); }
}
.js:not(.still) .msg.papi.landed p { animation: stamp .42s cubic-bezier(.3, 1.5, .5, 1) both; }
/* the original line pulses when he reuses it for your question (own name, so it replays) */
@keyframes stamp-echo {
  from { transform: scale(1.08) rotate(-1.2deg); box-shadow: 0 0 0 var(--ink); }
  to { transform: none; box-shadow: 0 .22rem 0 var(--ink); }
}
.js:not(.still) .msg.papi.echo p { animation: stamp-echo .42s cubic-bezier(.3, 1.5, .5, 1) both; }
/* read receipt: hangs under the question, so it never adds height */
.msg.you .seen {
  position: absolute; right: .4rem; top: calc(100% + .15rem);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2);
  opacity: 0; transition: opacity .3s ease;
}
.msg.you.seen-on .seen { opacity: 1; }
.msg.papi + .msg.you { margin-top: .9rem; }
.msg.you + .msg.papi { margin-top: .5rem; }
.avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--ink); flex: none; }
.typing { display: inline-flex; gap: .3rem; padding: .85rem 1rem; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 1.3rem; border-bottom-left-radius: .4rem; }
.typing { transition: opacity .2s ease; }
.typing.off { opacity: 0; }
/* bored dots: they sag rather than bounce, and the third can barely be bothered */
.typing i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink); animation: sag 1.6s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .25s; }
.typing i:nth-child(3) { animation-delay: .5s; animation-duration: 3.2s; }
@keyframes sag { 0%, 100% { transform: translateY(0); opacity: .4; } 45% { transform: translateY(.2rem); opacity: .9; } }

.js:not(.still) .msg { opacity: 0; transform: translateY(.6rem); transition: opacity .4s ease, transform .5s var(--ease-out); }
.js:not(.still) .msg.you { transform: translateX(1rem); }
.js:not(.still) .msg.shown { opacity: 1; transform: none; }
.msg.papi.thinking p { visibility: hidden; }
.msg.papi.thinking .typing { position: absolute; left: 2.85rem; bottom: 0; }
.msg.tease { position: absolute; left: 0; bottom: 0; }

/* ask him yourself: a reserved slot, so a new exchange never moves the page */
.ask-slot, .ask-form { display: none; }
.js .ask-slot { display: flex; flex-direction: column; justify-content: flex-start; gap: .55rem; position: relative; min-height: 10.5rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px dashed rgba(14, 26, 48, .12); }
.ask-thread { min-width: 0; }
.ask-slot .msg.you p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
/* compose bar, docked to the bottom of the panel */
.js .ask-form {
  display: flex; align-items: center; gap: .55rem;
  padding: .75rem .8rem .8rem clamp(1rem, 2.4vw, 1.4rem);
  border-top: 1px solid rgba(14, 26, 48, .08);
  border-radius: 0 0 2rem 2rem;
  background: rgba(255, 255, 255, .22);
}
.ask-form input {
  flex: 1; min-width: 0; min-height: 2.75rem; padding: .55rem 1.1rem;
  font: 500 1.0625rem var(--body); color: var(--ink);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(14, 26, 48, .14); border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(14, 26, 48, .06);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ask-form input::placeholder { color: var(--ink-2); opacity: .6; }
.ask-form input:focus { outline: none; background: rgba(255, 255, 255, .85); border-color: var(--sky-deep); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sky-deep) 22%, transparent); }
.send {
  flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: var(--sky-deep); color: var(--cream); cursor: pointer;
  box-shadow: 0 2px 6px -1px rgba(14, 26, 48, .35);
  transition: transform .25s var(--ease-out), opacity .2s ease, background-color .2s ease;
}
.send svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.send:hover { transform: scale(1.06); }
.send:active { transform: scale(.94); }
.ask-form input:placeholder-shown + .send { opacity: .4; }
.send[aria-disabled="true"] { opacity: .4; }

/* ---------- Faces ---------- */
.faces { padding-block: clamp(5rem, 12vw, 10rem); }
.faces-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; }
.faces-head .lede { max-width: 24rem; }
.wall {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.4rem, 2.4vw, 2.2rem) clamp(.8rem, 1.6vw, 1.4rem);
}
.face {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left;
  border-radius: 0;
}
.face img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 1.1rem;
  background: var(--sky-lo);
  transition: border-radius .55s var(--ease-out), transform .55s var(--ease-out);
}
.face:hover img, .face:focus-visible img { border-radius: 50%; transform: scale(.97) rotate(-2deg); }
@media (hover: hover) and (pointer: fine) { .js:not(.still) .face:hover img { transform: none; } }
.face:focus-visible { outline: none; }
.face:focus-visible img { outline: 3px solid var(--ink); outline-offset: 4px; }
.cap {
  display: inline-block; margin-top: .65rem; padding: .3rem .65rem; border-radius: .7rem;
  font-size: .95rem; font-weight: 700; line-height: 1.3;
  background: color-mix(in oklab, var(--cream) 88%, transparent);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (max-width: 960px) { .wall li:first-child .cap { font-family: var(--display); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.6rem); line-height: 1.1; } }

/* ---------- Hold ---------- */
.night { position: relative; isolation: isolate; overflow: hidden; color: var(--cream); transition: color .6s ease; }
.night.dusklit { color: var(--ink); }
.night .hold-hint, .night .hold-close { transition: color .6s ease; }
.night.dusklit .hold-hint, .night.dusklit .hold-close { color: var(--ink-2); }
.night.dawning .hold-title, .night.dawning .hold-line, .night.dawning .hold-hint { text-shadow: 0 .1rem 1.2rem rgba(14, 26, 48, .55); }
.foot, .foot p { transition: color .6s ease, border-color .6s ease; }
.night.dawning .foot, .night.dawning .hold-close { color: var(--ink); border-color: var(--ink); }
.hold {
  position: relative; isolation: isolate;
  padding-block: max(70vh, 22rem) clamp(7rem, 16vw, 12rem);
}
.stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stars svg { width: 100%; height: 100%; display: block; }
.stars circle { fill: var(--cream); }
.stars .tw { animation: twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.35); } }
.hold-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.4rem, 11.5vw, 11rem); line-height: .9; letter-spacing: -.03em;
}
.hold-line { margin-top: 1.8rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 700; max-width: 30rem; }
.hold .btn-big { margin-top: 2.2rem; min-height: 3.8rem; font-size: 1.2rem; padding-inline: 2rem; box-shadow: 0 .35rem 0 var(--sky-hi); border-color: var(--cream); }
.hold .btn-big:hover { box-shadow: 0 .5rem 0 var(--sky-hi); }
.hold-close { margin-top: 2.5rem; font-family: var(--display); font-size: 1.25rem; color: var(--sky-lo); }
.peek-rig {
  position: absolute; z-index: -1; right: 0; bottom: 0;
  width: clamp(16rem, 42vw, 38rem);
  translate: 0 44%;
  transition: translate 1.6s var(--ease-out);
}
.papi-peek { width: 100%; position: relative; }
.dawn-sun {
  position: absolute; left: 30%; top: -6%; width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--cream) 0 22%, var(--glint) 30% 34%, color-mix(in oklab, var(--coat) 55%, transparent) 52%, transparent);
  opacity: var(--dawn, 0);
  transform: translateY(calc((1 - var(--dawn, 0)) * 55%)) scale(calc(.7 + var(--dawn, 0) * .5));
}
.still .dawn-sun { transform: none; }
.js:not(.still) .peek-rig { translate: 0 90%; }
.js:not(.still) .peek-rig.in { translate: 0 44%; }

.foot { position: relative; color: var(--sky-lo); padding: 0 var(--gutter) 2.5rem; font-size: .9rem; }
.foot p { max-width: 44rem; border-top: 1px solid var(--ink-2); padding-top: 1.5rem; }

/* ---------- Viewer ---------- */
.viewer {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink);
  display: none; place-items: center;
}
.viewer[open] { display: grid; }
.viewer::backdrop { background: rgba(14, 26, 48, .88); backdrop-filter: blur(6px); }
.viewer-card {
  width: min(92vw, 34rem); background: var(--cream); border-radius: 1.6rem; padding: 1rem;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, .35);
}
.viewer[open] .viewer-card { animation: pop .5s var(--ease-out); }
@keyframes pop { from { transform: scale(.92) translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } }
.viewer-stage { aspect-ratio: 1; display: grid; place-items: center; }
.viewer-img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.1rem; transition: border-radius .6s var(--ease-out), transform .6s var(--ease-out); background: var(--sky-lo); }
.viewer.pfp .viewer-img { border-radius: 50%; transform: scale(.9); }
.viewer-bar { padding: 1rem .4rem .3rem; }
.viewer-cap { font-family: var(--display); font-size: 1.35rem; line-height: 1.15; min-height: 1.15em; }
.viewer-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.vbtn {
  min-height: 3rem; padding: .7em 1.3em; border: 2px solid var(--ink); border-radius: 999px; background: none;
  font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s;
}
.vbtn[aria-pressed="true"], .vbtn:hover { background: var(--ink); color: var(--cream); }
.viewer .viewer-actions :focus-visible { outline-color: var(--ink); }
.vnav, .vclose {
  position: fixed; display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; border: 2px solid var(--cream);
  background: rgba(14, 26, 48, .6); color: var(--cream); cursor: pointer;
  transition: background-color .2s, transform .3s var(--ease-out);
}
.vnav:hover, .vclose:hover { background: var(--cream); color: var(--ink); }
.vnav svg, .vclose svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.vprev { left: clamp(.6rem, 3vw, 2.5rem); top: 50%; translate: 0 -50%; }
.vnext { right: clamp(.6rem, 3vw, 2.5rem); top: 50%; translate: 0 -50%; }
.vclose { right: clamp(.6rem, 3vw, 2.5rem); top: clamp(.6rem, 3vw, 2rem); }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .bar-nav { display: none; }
  .bar-cta { margin-left: auto; }
  .ask-grid { grid-template-columns: minmax(0, 1fr); }
  .ask-intro { position: static; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall li:first-child { grid-column: span 2; grid-row: span 2; }
  .fact { grid-template-columns: 1fr; }
  .fact-name { padding-top: 0; }
}

@media (max-width: 720px) {
  .hero { height: auto; display: flex; flex-direction: column; padding-top: 5.5rem; }
  .masthead { position: relative; left: -.04em; top: 0; margin-inline: var(--gutter); font-size: 27vw; }
  .hero-rig { position: relative; align-self: flex-end; height: auto; width: 86vw; margin: -14vw -2vw 0 0; }
  .hero-papi { -webkit-mask-image: linear-gradient(180deg, black 58%, transparent 97%); mask-image: linear-gradient(180deg, black 58%, transparent 97%); filter: none; }
  .hero-copy { position: relative; z-index: 3; left: 0; bottom: 0; margin: -16vw var(--gutter) 0; padding-bottom: 3rem; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-cta { display: none; }
  .peek-rig { width: 68vw; }
  .foot { padding-bottom: 92vw; }
}

/* ---------- Doodles: hand-drawn reactions ---------- */
.lore, .ask, .faces { overflow-x: clip; }
.mark { position: relative; white-space: nowrap; }
.msg[data-doodle] { position: relative; }
.dd { position: absolute; overflow: visible; pointer-events: none; z-index: 4; --dd-c: var(--ink); }
.dd.pink { --dd-c: var(--tongue-deep); }
/* yellow glint, with a hairline ink edge so it holds on the tan coat */
.dd.glint { --dd-c: var(--glint); filter: drop-shadow(0 0 1px var(--ink)) drop-shadow(0 1px 1.5px rgba(14, 26, 48, .45)); }
.dd.cream, .dd.faint { --dd-c: var(--cream); }
/* the pen: a monoline stroke, or the mask stroke that reveals a brush ribbon */
.dd .pen {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset var(--t, .4s) cubic-bezier(.3, .6, .35, 1) var(--d, 0s), opacity 0s linear var(--d, 0s);
}
.dd .ln { stroke: var(--dd-c); }
.dd .ink { fill: var(--dd-c); }
.dd.on .pen { stroke-dashoffset: 0; opacity: 1; }
.dd:not(.on) .pen { transition-duration: .25s, 0s; transition-delay: 0s, .25s; }
.dd.instant .pen, .dd.instant .star-dot, .dd.instant .blot { transition: none; }
.dd.faint .ln { opacity: 0; }
.dd.faint.on .ln { opacity: .5; }
.dd.faint .pom { stroke: var(--tongue); }
.peek-rig .dd { transform: rotate(-9deg); transform-origin: 60% 0; }
.dd .star-dot { fill: var(--cream); opacity: 0; transition: opacity .5s ease var(--d, 0s); }
.dd .star-dot.pom { fill: var(--tongue); }
.dd.on .star-dot { opacity: 1; animation: twinkle 2.6s ease-in-out infinite; animation-delay: var(--tw, 0s); transform-box: fill-box; transform-origin: center; }
.dd-glint.on { animation: glint-pop .5s var(--ease-out) both; transform-box: fill-box; }
@keyframes glint-pop { 0% { scale: .7; } 55% { scale: 1.08; } 100% { scale: 1; } }
.dd-sweat.on { animation: trickle 2.8s ease-in-out 1.2s infinite; }
@keyframes trickle { 0%, 55%, 100% { translate: 0 0; } 75% { translate: 0 .3rem; } 85% { translate: 0 .15rem; } }

.face { position: relative; }
.face.peek img { border-radius: 50%; transform: scale(.97) rotate(-2deg); }

/* Solana coins: drawn, filled, tumbling, and a bonk on Papi's head */
.coin { position: absolute; top: 0; z-index: -1; pointer-events: none; animation: coin-fall var(--fall, 5s) cubic-bezier(.5, 0, .75, .9) forwards; }
.coin .dd { animation: tumble 1.5s ease-in-out .9s infinite; }
.coin .blot { fill: var(--ink); opacity: 0; transition: opacity .4s ease .5s; }
.coin .on .blot { opacity: 1; }
.coin .mark-sol { opacity: 0; transition: opacity .4s ease .6s; }
.coin .on .mark-sol { opacity: 1; }
.coin.hit { animation: coin-bonk .8s var(--ease-out) forwards; }
.coin.hit .dd { animation: none; }
@keyframes coin-fall {
  0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; }
  8% { opacity: 1; }
  35% { transform: translate(var(--sway, 1rem), calc(var(--drop) * .3)) rotate(8deg); }
  70% { transform: translate(calc(var(--sway, 1rem) * -.6), calc(var(--drop) * .68)) rotate(-5deg); }
  100% { transform: translate(0, var(--drop)) rotate(0deg); opacity: 1; }
}
@keyframes coin-bonk {
  0% { transform: translate(0, var(--drop)) scale(1.12, .8); opacity: 1; }
  45% { transform: translate(calc(var(--kick) * .5), calc(var(--drop) - 2.6rem)) rotate(18deg); opacity: 1; }
  100% { transform: translate(var(--kick), calc(var(--drop) - .6rem)) rotate(40deg) scale(.7); opacity: 0; }
}
@keyframes tumble { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.2); } }
.bonk { position: absolute; width: 100px; height: 46px; z-index: -1; pointer-events: none; }
.papi-peek.bonked { animation: bonked .45s var(--ease-out); }
@keyframes bonked { 0% { transform: none; } 25% { transform: translateY(.45rem) rotate(-1deg); } 100% { transform: none; } }

/* the blep: a tongue tip slides out under tongue-pink buttons */
.btn-tongue { position: relative; }
.btn-tongue::after {
  content: ''; position: absolute; left: 50%; top: calc(100% + .3rem - 2px);
  width: 1.1rem; height: 0; margin-left: -.55rem;
  background: var(--tongue); border: 2px solid var(--ink); border-top: 0;
  border-radius: 0 0 .6rem .6rem;
  opacity: 0;
  transition: height .35s var(--ease-out), opacity 0s linear .35s;
}
.btn-tongue:hover::after, .btn-tongue:focus-visible::after { height: .8rem; opacity: 1; transition: height .35s var(--ease-out), opacity 0s; }

.float-cta {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1.2rem, 3vw, 2rem); z-index: 60;
  /* parked out of view AND invisible: iOS Safari paints the page behind its glass toolbar */
  translate: 0 calc(100% + 6rem); visibility: hidden;
  transition: translate .6s var(--ease-out), visibility 0s linear .6s, transform .35s var(--ease-out), background-color .2s, box-shadow .35s var(--ease-out);
}
.float-cta.up { translate: 0 0; visibility: visible; transition-delay: 0s; }
.float-cta.up.aside { translate: 0 calc(100% + 6rem); visibility: hidden; transition-delay: 0s, .6s, 0s, 0s, 0s; }


/* offscreen sections and the pause toggle freeze every loop */
[data-live="0"] *, .paused * { animation-play-state: paused !important; }


/* ---------- Faces: the wall assembles like stickers slapping down ---------- */
@keyframes assemble {
  from { translate: var(--ax, 0) var(--ay, 0); rotate: var(--ar, 0deg); scale: .7; opacity: 0; }
  35% { opacity: 1; }
  to { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; }
}
@supports (animation-timeline: view()) {
  .js:not(.still) .wall li { animation: assemble linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  /* scroll-linked, not autonomous: the pause toggle must not freeze it half-built */
  .paused .wall li, [data-live="0"] .wall li { animation-play-state: running !important; }
}
.js:not(.still) .wall.scatter li { translate: var(--ax) var(--ay); rotate: var(--ar); scale: .7; opacity: 0; }
.js:not(.still) .wall.scatter.assembled li { animation: assemble .9s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms); }

/* dock lens: JS sets --lift per tile while the pointer glides over the wall */
.face img { box-shadow: 0 calc(var(--lift, 0) * 1.1rem) calc(var(--lift, 0) * 2rem) rgba(14, 26, 48, calc(var(--lift, 0) * .35)); }

/* the thumbnail grows into the viewer */
::view-transition-group(root) { animation-duration: .45s; }
::view-transition-group(face-hero) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .9, .25, 1); }
::view-transition-old(face-hero), ::view-transition-new(face-hero) { height: 100%; object-fit: cover; }
.viewer.vt[open] .viewer-card { animation: none; }

/* ---------- Hold to launch ---------- */
.hold .btn-big { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.hold .btn-big::before {
  content: ''; position: absolute; inset: -.6rem; border-radius: 999px; padding: .28rem;
  background: conic-gradient(from -90deg, var(--glint) calc(var(--hold, 0) * 1turn), color-mix(in oklab, var(--cream) 16%, transparent) 0);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.hold .btn-big.charging::before, .hold .btn-big.approved::before { opacity: 1; }
.hold .btn-big.approved { background: var(--glint); }
.hold-hint { margin-top: 1.1rem; font-size: .95rem; font-weight: 700; color: var(--sky-lo); }
.trails { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hold-glow {
  position: absolute; z-index: -1; left: var(--wx, 50%); top: var(--wy, 50%);
  width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--glint) 55%, transparent), color-mix(in oklab, var(--tongue) 18%, transparent) 45%, transparent);
  opacity: calc(var(--warp, 0) * .9); scale: calc(.4 + var(--warp, 0) * .6);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}