/* Papi — official links (link-tree), layout modeled on juliandoesit.com.
   Self-contained: no external fonts/CDN.
   Palette (2026-09-28, operator): soft purple "rainbow" — lavender → violet → orchid → periwinkle,
   kept low-saturation so it is easy on the eyes. Was coral/orange. */
:root{
  --ink:#15111C;      /* deep plum-black */
  --ink-2:#1E1829;    /* raised surface */
  --ink-3:#2B2238;    /* card / border  */
  --cream:#F6F1FB;
  --lavender:#C9B8FF;
  --violet:#A98BF5;
  --orchid:#D6A6E8;
  --periwinkle:#9FB0F7;
  --accent:#B79CFF;   /* single-colour accent (handle, dot, arrow) */
  --on-accent:#1C1230;/* text on the purple gradient */
  --grad:linear-gradient(120deg,#9FB0F7 0%,#B79CFF 30%,#D6A6E8 62%,#C9B8FF 100%);
  --grad-hover:linear-gradient(120deg,#AFBEFA 0%,#C4ADFF 30%,#E0B6EE 62%,#D6C8FF 100%);
  --muted:rgba(246,241,251,.62);
  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;background:var(--ink)}  /* min-height (not height) so the bg grows with a tall page — no seam */
body{
  font-family:var(--f-body);
  color:var(--cream);
  background:
    radial-gradient(70% 45% at 15% 0%, rgba(159,176,247,.16) 0%, transparent 70%),
    radial-gradient(60% 40% at 90% 10%, rgba(214,166,232,.14) 0%, transparent 70%),
    radial-gradient(90% 60% at 50% 110%, rgba(169,139,245,.14) 0%, transparent 70%),
    var(--ink);
  min-height:100dvh;
  /* column + margin:auto on .tree centers when it fits, and scrolls from the top when it
     doesn't — justify/align:center would push the avatar above the scrollable area. */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:32px 20px;
  -webkit-font-smoothing:antialiased;
}
.grain{
  position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== shared identity block (gate + tree use the same header) ===== */
/* gradient ring: padding-box fill + border-box gradient */
.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;object-position:center 25%;
  border:2.5px solid transparent;
  background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box, var(--grad) border-box;
  margin:0 auto 14px;display:block}
.name{font-family:var(--f-display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;color:var(--cream)}
.name--lg{font-size:2.1rem}
.name span{color:var(--accent)}
.meta{color:var(--muted);font-size:.95rem;margin-top:5px}
.intro{color:var(--cream);font-size:1rem;line-height:1.5;margin:16px auto 0;max-width:34ch;opacity:.9}
.handle{font-weight:600;font-size:.95rem;margin-top:2px;
  color:var(--accent);background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* ===== shared buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:1rem;
  border:1.5px solid transparent;border-radius:999px;
  padding:14px 26px;cursor:pointer;text-decoration:none;width:100%;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.btn--coral{background:var(--grad);color:var(--on-accent)}   /* class name kept; now purple */
.btn--coral:hover{background:var(--grad-hover);transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(183,156,255,.7)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(246,241,251,.3)}
.btn--ghost:hover{background:rgba(201,184,255,.08);border-color:var(--lavender);transform:translateY(-2px)}

/* ===== age gate ===== */
.gate{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:24px}
.card{
  position:relative;z-index:1;width:100%;max-width:380px;text-align:center;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:24px;
  padding:34px 28px 28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 60px -30px rgba(169,139,245,.35);
}
.gate__line{color:var(--cream);font-size:.9rem;margin-top:20px;font-weight:500}
.gate__sub{color:var(--muted);font-size:.92rem;margin-top:6px;margin-bottom:20px}
.actions{display:flex;flex-direction:column;gap:12px}

/* ===== in-app browser escape ===== */
.escape{position:fixed;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(21,17,28,.96)}
.escape[hidden]{display:none}
.escape__arrow{position:fixed;top:10px;right:18px;font-size:2.6rem;color:var(--accent);
  animation:nudge 1.1s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-6px)}}
.escape__stay{background:none;border:0;color:var(--muted);font-size:.85rem;margin-top:4px;
  text-decoration:underline;cursor:pointer;font-family:var(--f-body)}

/* ===== link tree ===== */
.tree{position:relative;z-index:1;width:100%;max-width:420px;text-align:center;padding:8px 8px 40px;margin:auto 0}
.tree__heading{color:var(--muted);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-top:26px}
.links{display:flex;flex-direction:column;gap:13px;margin-top:16px}
.link{
  display:flex;align-items:center;justify-content:center;gap:10px;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;
  text-decoration:none;color:var(--cream);
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:16px;
  padding:17px 22px;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.link:hover{transform:translateY(-2px);background:var(--ink-3);border-color:rgba(201,184,255,.35)}
.link--primary{background:var(--grad);background-size:160% 100%;color:var(--on-accent);border-color:transparent;
  animation:shimmer 9s ease-in-out infinite alternate}
.link--primary + .link--primary{animation-delay:-4.5s}
.link--primary:hover{background:var(--grad-hover);box-shadow:0 16px 40px -16px rgba(183,156,255,.7)}
@keyframes shimmer{from{background-position:0% 50%}to{background-position:100% 50%}}
.link__badge{font-size:.72rem;font-weight:800;letter-spacing:.02em;background:var(--on-accent);color:var(--cream);
  border-radius:999px;padding:3px 9px}
.link--primary .link__badge{background:rgba(28,18,48,.85)}

/* ===== email list ("inner circle") ===== */
.club{margin-top:34px;padding:26px 22px 22px;text-align:center;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:20px;
  box-shadow:0 0 60px -34px rgba(169,139,245,.45)}
.club__kicker{color:var(--accent);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.club__title{font-family:var(--f-display);font-weight:800;font-size:1.35rem;letter-spacing:-.01em;margin-top:6px}
.club__lead{color:var(--muted);font-size:.95rem;line-height:1.5;margin:8px auto 0;max-width:30ch}
.club__list{list-style:none;margin:18px auto 0;max-width:290px;text-align:left;display:flex;flex-direction:column;gap:9px}
.club__list li{position:relative;padding-left:22px;font-size:.95rem;line-height:1.4}
.club__list li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;
  background:var(--grad)}
.club__form{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.club__form[hidden]{display:none}
.club__input{width:100%;font:inherit;font-size:1rem;color:var(--cream);text-align:center;
  background:var(--ink);border:1.5px solid var(--ink-3);border-radius:999px;padding:14px 20px;outline:none;
  transition:border-color .15s ease}
.club__input::placeholder{color:rgba(246,241,251,.4)}
.club__input:focus{border-color:var(--lavender)}
.club__note{color:var(--muted);font-size:.8rem;margin-top:12px}
.club__note.is-ok{color:var(--lavender);font-size:.95rem;font-weight:600}
.club__note.is-error{color:#F2A7B8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .link--primary,.escape__arrow{animation:none}
}