/* Shared by both pond versions: the produck.dev nav (smaller), the profile card, the zoom-out button and the quack bubble. */
:root{--ink:#0E0E0E;--ink-soft:#2A2622;--cream:#F4E9CF;--paper:#FFFDF6;--orange:#FF7A1A;--orange-soft:#F89A33;--muted:#6B6457;--wood:#7A4E2A;--wood-dark:#3b2512;
  --display:"Plus Jakarta Sans",system-ui,sans-serif;--pixel:"Pixelify Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}

body::before{content:"";position:fixed;top:0;left:0;right:0;height:4px;background:var(--orange);z-index:5}
.topnav{--side:118px;position:absolute;top:0;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:var(--side) auto var(--side);align-items:center;gap:22px;
  padding:13px 26px 12px;white-space:nowrap;background:var(--ink);color:var(--paper);border-radius:0 0 18px 18px;box-shadow:0 4px 0 rgba(14,14,14,.28);transition:transform .8s cubic-bezier(.2,.8,.2,1);z-index:6}
.topnav .brand img{display:block;height:26px;width:auto}
.topnav .nav-links{display:flex;gap:22px;justify-self:start}
.topnav .nav-links a{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);opacity:.85}
.topnav .nav-links a:hover{opacity:1;color:var(--orange-soft)}
.topnav .nav-cta{justify-self:end;text-align:right;font:600 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--orange-soft)}
.topnav .nav-cta::after{content:" ↗"}
.topnav .nav-cta:hover{color:var(--orange)}

/* follow-all pill, bottom left. Hidden during the intro and while a card is open */
.follow{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;transition:opacity .3s,transform .3s;z-index:7}
.follow-x{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--display);padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--paper);border:2.5px solid var(--ink);box-shadow:0 3px 0 rgba(14,14,14,.35)}
.follow-x svg{width:14px;height:14px;fill:currentColor}
.follow-x:hover{background:var(--orange);color:var(--ink)}
.pre .follow,.dim .follow{opacity:0;transform:translateY(10px);pointer-events:none}

/* hover popup with their face */
.peek{position:absolute;left:0;top:0;display:flex;align-items:center;gap:10px;background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:6px 14px 6px 6px;box-shadow:0 4px 0 var(--ink);
  white-space:nowrap;pointer-events:none;opacity:0;transform-origin:50% 100%;transition:opacity .15s;z-index:9}
.peek.on{opacity:1;animation:peekin .28s cubic-bezier(.3,1.5,.5,1)}
.peek::after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-8px;border:8px solid transparent;border-top-color:var(--ink);border-bottom:0}
.peek .pp{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;background:var(--cream);display:grid;place-items:center;font:800 15px var(--display)}
.peek b{display:block;font:800 15px/1.15 var(--display)}
.peek small{display:block;font:500 12px var(--display);color:var(--muted)}
@keyframes peekin{from{transform:var(--peek-t) scale(.6)}to{transform:var(--peek-t) scale(1)}}

.tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;font:700 13px var(--display);background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:3px 11px 3px 3px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .12s;z-index:9}
.tag img,.tag span.i{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink);object-fit:cover;background:var(--cream);display:grid;place-items:center;font-size:9px}
.tag.on{opacity:1}

/* profile card: who on the left, what they're about on the right. Click anywhere outside to close. */
.card{position:absolute;left:50%;bottom:22px;width:min(660px,calc(100vw - 32px));transform:translate(-50%,calc(100% + 60px));transition:transform .55s cubic-bezier(.2,.8,.2,1);
  display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;
  background:var(--paper);border:2.5px solid var(--ink);border-radius:22px;box-shadow:0 8px 0 var(--ink);padding:18px 22px 18px 18px;z-index:8}
.card.on{transform:translate(-50%,0)}
.card .who{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.card .pfp{width:72px;height:72px;border-radius:50%;border:2.5px solid var(--ink);object-fit:cover;background:var(--cream);display:grid;place-items:center;font:800 24px var(--display)}
.card h2{margin:2px 0 0;font-size:22px;line-height:1.1}
.card .work{color:var(--muted);font-size:14px;margin-top:-4px}
.xbtn{display:inline-flex;align-items:center;gap:7px;font:700 13px var(--display);padding:7px 13px;border-radius:999px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:0 3px 0 rgba(14,14,14,.35);margin-top:4px}
.xbtn svg{width:13px;height:13px;fill:currentColor}
.xbtn:hover{background:var(--orange);color:var(--ink)}
.card .about{display:grid;gap:12px;border-left:2px dashed #d8ccb0;padding-left:20px;min-width:0}
.card .bio{margin:0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
.card .said+.bio{font-size:13px;line-height:1.45;color:var(--muted)}
/* the quote is a speech bubble pointing back at them */
.said{position:relative;margin:0;background:var(--cream);border:2px solid var(--ink);border-radius:14px;padding:12px 14px 10px 16px;box-shadow:0 3px 0 var(--ink)}
.said::before{content:"";position:absolute;left:-11px;top:18px;border:9px solid transparent;border-right-color:var(--ink);border-left:0}
.said::after{content:"";position:absolute;left:-7px;top:20px;border:7px solid transparent;border-right-color:var(--cream);border-left:0}
.said p{margin:0;font:700 18px/1.3 var(--display);color:var(--ink);text-wrap:pretty}
.said p::before{content:"“";color:var(--orange);margin-right:1px}
.said p::after{content:"”";color:var(--orange)}
.said a{display:inline-block;margin-top:6px;font:600 10.5px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

.said a:hover{color:var(--ink);text-decoration:underline}

.home{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:8px;font:700 13px var(--display);padding:9px 14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--paper);box-shadow:0 3px 0 var(--ink);cursor:pointer;color:var(--ink);
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.home.on{opacity:1;transform:none;pointer-events:auto}
.home svg{width:15px;height:15px}
.dim .home{bottom:auto;top:56px}

/* quack */
.quack{position:absolute;left:50%;bottom:100%;transform-origin:30% 100%;font:700 15px var(--pixel);color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:12px;padding:3px 9px 4px;white-space:nowrap;pointer-events:none;
  box-shadow:0 2px 0 var(--ink);animation:quack 1.1s cubic-bezier(.3,1.5,.5,1) both;z-index:3}
.quack::after{content:"";position:absolute;left:12px;bottom:-8px;border:7px solid transparent;border-top-color:var(--ink);border-bottom:0}
.quack.small{font-size:12px;padding:2px 7px 3px;animation-duration:1.4s}
@keyframes quack{0%{opacity:0;transform:translate(-30%,6px) scale(.4)}18%{opacity:1;transform:translate(-30%,-6px) scale(1.08)}30%{transform:translate(-30%,-6px) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-30%,-16px) scale(1)}}

@media (max-width:760px){
  .topnav{padding:11px 18px 10px;gap:14px}
  .topnav{--side:96px}
  .topnav .nav-cta{font-size:10px;letter-spacing:.02em}
  .topnav .nav-links{gap:12px}
  .topnav .nav-links a{font-size:10px;letter-spacing:.02em}
  .follow{left:12px;bottom:max(12px,env(safe-area-inset-bottom));gap:8px}
  .follow-x{font-size:13px;padding:8px 13px}
  .topnav .brand img{height:22px}
            .card{grid-template-columns:1fr;gap:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:16px}
  .card .who{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px;align-items:center}
  .card .pfp{grid-row:1/3;width:56px;height:56px}
  .card .work{margin-top:0}
  .card .xbtn{grid-column:1/3;justify-self:start;margin-top:8px}
  .card .about{border-left:0;padding-left:0}
  .card .bio{font-size:15px}
  .said p{font-size:16px}
  .said::before{left:28px;top:-11px;border:9px solid transparent;border-bottom-color:var(--ink);border-top:0}
  .said::after{left:30px;top:-7px;border:7px solid transparent;border-bottom-color:var(--cream);border-top:0}
  .home{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}
  .dim .home{top:52px}
}