/* Hero mockups A, B, C (2026-10-08): three new directions after he dropped the morph ("i dont like how the
   pengu becomes me when hovering"). Mockups to pick from, not the build. lil ghayzal's palette, from the
   NFT (the audit): sky, dark, cream, pink kept to Let's talk. */
:root { --sky: #98cdcd; --dark: #0e2a30; --cream: #f4e7d9; --pink: #ec0b8d; --jersey: #22a9e0; --tan: #ce9a6d; --ink: #130a10;
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, .05, 0, 1); --ease-out: cubic-bezier(.165, .84, .44, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; }
body { font-family: 'Azeret Mono', ui-monospace, monospace; color: var(--dark); background: var(--sky); }
img { display: block; user-select: none; -webkit-user-drag: none; }
.mono { font-family: 'Azeret Mono', ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.disp { font-family: 'Saira', sans-serif; font-stretch: 62%; font-weight: 800; text-transform: uppercase; }

/* the top bar, as on the site (not wired: a mockup) */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 40px; pointer-events: none; }
.top > * { pointer-events: auto; }
.mark { font-family: 'Saira'; font-stretch: 62%; font-weight: 700; font-size: 26px; line-height: 1; color: inherit; text-decoration: none; }
.mark small { display: block; margin-top: 10px; font-family: 'Azeret Mono'; font-weight: 400; font-stretch: 100%; font-size: 11px; letter-spacing: .06em; max-width: 360px; line-height: 1.5; opacity: .75; }
.controls { display: flex; gap: 10px; }
.btn { height: 38px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 99px; border: 1px solid currentColor;
  font-size: 11px; color: inherit; text-decoration: none; background: none; letter-spacing: .18em; text-transform: uppercase; font-family: 'Azeret Mono'; cursor: pointer;
  transition: transform .4s var(--ease), background-color .3s, color .3s; }
.btn.talk { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn:not(.talk) { border-color: color-mix(in srgb, currentColor 22%, transparent); }
.btn:hover { transform: translateY(-2px); }

/* the lab's switch between the mockups */
.lab { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; display: flex; gap: 6px; padding: 6px; border-radius: 99px;
  background: rgba(14, 42, 48, .82); backdrop-filter: blur(8px); font-size: 10.5px; }
.lab a { padding: 8px 14px; border-radius: 99px; color: #cfe6e6; text-decoration: none; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.lab a[aria-current] { background: var(--cream); color: var(--dark); }
.lab a:hover:not([aria-current]) { color: #fff; }

.hint { position: fixed; right: 40px; bottom: 30px; z-index: 30; font-size: 11px; opacity: .7; pointer-events: none; }

@media (max-width: 760px) {
  .top { padding: 16px 18px; } .mark { font-size: 22px; } .mark small { max-width: 220px; font-size: 10px; }
  .btn.sound, .btn.talk { display: none; }
  .hint { right: 18px; bottom: 76px; }
  .lab { bottom: 14px; font-size: 9px; max-width: calc(100vw - 20px); overflow-x: auto; } .lab a { padding: 7px 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }