:root{
  --ink:#2b1d3a;
  --paper:#fdf6ec;
  --lav:#e7defc;
  --mint:#d5f3e3;
  --butter:#fff1bf;
  --blush:#ffdce8;
  --sky:#d8ecff;
  --coral:#ff5d73;
  --violet:#7c3aed;
  --lime:#65c518;
  --cyan:#0eb5cd;
  --sun:#ffb627;
  --radius:22px;
  --border:3px solid var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
body{
  font-family:"Space Grotesk",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(60vw 60vw at 8% -5%, var(--lav) 0%, transparent 60%),
    radial-gradient(50vw 50vw at 100% 10%, var(--blush) 0%, transparent 55%),
    radial-gradient(55vw 55vw at 0% 70%, var(--mint) 0%, transparent 55%),
    radial-gradient(45vw 45vw at 95% 95%, var(--sky) 0%, transparent 55%),
    var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--sun);color:var(--ink)}
body::before{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(130% 130% at 50% 35%, transparent 55%, rgba(43,29,58,.10) 100%);
}
a{color:inherit}
img,svg{max-width:100%;display:block}

/* ---------- 3D bubble layer ---------- */
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none}
header,main,footer{position:relative;z-index:1}

/* bubble letters (big titles) */
.bl{display:inline-block;transition:transform .18s ease,color .3s;cursor:default}
.bl:hover{transform:translateY(-10px) rotate(-7deg) scale(1.18)}
@media (prefers-reduced-motion:no-preference){
  .bl{animation:lfloat 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.07s)}
}
@keyframes lfloat{0%,100%{translate:0 0}50%{translate:0 -6px}}

/* ---------- nav ---------- */
header{
  position:sticky;top:12px;z-index:50;
  display:flex;justify-content:center;padding:0 16px;
}
.navpill{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
  background:rgba(253,246,236,.9);backdrop-filter:blur(8px);
  border:var(--border);border-radius:999px;
  box-shadow:5px 5px 0 var(--violet),12px 18px 28px -10px rgba(43,29,58,.25);
  padding:8px 14px;max-width:860px;
}
.navpill .brand{
  font-family:"Fraunces",serif;font-weight:900;font-size:1.05rem;
  text-decoration:none;padding:2px 10px;border-radius:999px;background:var(--butter);
  border:2px solid var(--ink);white-space:nowrap;
}
.navpill nav{display:flex;gap:2px;flex-wrap:wrap;justify-content:center}
.navpill nav a{
  text-decoration:none;font-weight:500;font-size:.92rem;
  padding:4px 11px;border-radius:999px;border:2px solid transparent;
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.navpill nav a:hover{background:var(--blush);border-color:var(--ink)}
.navpill nav a[aria-current="page"]{background:var(--mint);border-color:var(--ink);font-weight:700}

/* ---------- hero / page heads ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.hero{
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;
  padding:clamp(40px,8vw,90px) 0 clamp(24px,4vw,48px);
}
.hero h1,.pagetitle{
  font-family:"Fraunces",serif;font-weight:900;
  font-size:clamp(2.6rem,7vw,5rem);line-height:1.02;letter-spacing:-.02em;
  text-shadow:4px 5px 0 rgba(43,29,58,.10);
}
.grad{
  background:linear-gradient(92deg,var(--violet),var(--coral) 45%,var(--sun) 80%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kicker{
  display:inline-block;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.14em;
  background:var(--mint);border:2px solid var(--ink);border-radius:999px;
  padding:4px 14px;margin-bottom:18px;transform:rotate(-1.5deg);
  box-shadow:3px 3px 0 var(--cyan);
}
.lede{font-size:clamp(1.02rem,1.6vw,1.18rem);margin:18px 0 8px;max-width:52ch}
.pagehead{padding:clamp(40px,7vw,70px) 0 0}
.pagehead .pagetitle{font-size:clamp(2.4rem,6vw,4rem)}

.promptbox{
  margin:22px 0 26px;border:var(--border);border-radius:16px;background:#fff;
  box-shadow:6px 6px 0 var(--coral);overflow:hidden;max-width:560px;
}
.promptbox .pb-top{
  display:flex;align-items:center;gap:8px;background:var(--lav);
  border-bottom:2px solid var(--ink);padding:7px 12px;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;
}
.pb-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink)}
.pb-dot:nth-child(1){background:var(--coral)}
.pb-dot:nth-child(2){background:var(--sun)}
.pb-dot:nth-child(3){background:var(--lime)}
.promptbox .pb-body{
  font-family:"JetBrains Mono",monospace;font-size:clamp(.8rem,1.4vw,.95rem);
  padding:14px 16px;min-height:3.4em;
}
.pb-body .slash{color:var(--violet);font-weight:700}
.caret{display:inline-block;width:.55em;height:1.1em;background:var(--coral);vertical-align:text-bottom;animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  text-decoration:none;font-weight:700;font-size:.95rem;
  border:var(--border);border-radius:14px;padding:10px 18px;background:#fff;
  box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;
  display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.x{background:var(--sky)}
.btn.gh{background:var(--butter)}
.btn.md{background:var(--mint)}
.btn.al{background:var(--blush)}
.btn.kf{background:var(--lav)}

/* scroll-in reveal (JS adds .reveal, then .on when visible) */
.reveal{opacity:0;translate:0 18px;transition:opacity .55s ease,translate .55s ease}
.reveal.on{opacity:1;translate:0 0}

/* ---------- gnome ---------- */
.gnomeplot{position:relative;display:flex;justify-content:center;align-items:flex-end}
.gnome{width:min(320px,70vw);cursor:pointer;filter:drop-shadow(8px 10px 0 rgba(43,29,58,.18));transition:transform .2s}
.gnome:hover{transform:rotate(-2deg) scale(1.02)}
.gnome:focus{outline:none}
.gnome:focus-visible{outline:4px dashed var(--violet);outline-offset:8px;border-radius:24px}
.gnome .hat-main{transition:fill .3s}
.gnome .eye{transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .gnome .eye{animation:gblink 4.6s infinite}
  .gnome .eye.r{animation-delay:.05s}
}
@keyframes gblink{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.06)}97%{transform:scaleY(1)}}
.gnome .arm-r{transform-origin:25% 85%;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .gnome:hover .arm-r{animation:wave .9s ease-in-out 2}
}
@keyframes wave{50%{transform:rotate(-16deg)}}
.gnome .drop{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .gnome .drop{animation:drip 2.8s ease-in infinite}
  .gnome .drop.d2{animation-delay:.9s}
  .gnome .drop.d3{animation-delay:1.8s}
}
@keyframes drip{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}45%{opacity:0;transform:translateY(16px)}100%{opacity:0}}
.bob{animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.bubble{
  position:absolute;top:-8px;right:0;max-width:230px;
  background:#fff;border:var(--border);border-radius:16px 16px 16px 4px;
  padding:10px 14px;font-size:.88rem;font-weight:500;
  box-shadow:4px 4px 0 var(--sun);opacity:0;transform:translateY(8px) rotate(2deg);
  transition:opacity .25s,transform .25s;pointer-events:none;z-index:2;
}
.bubble.show{opacity:1;transform:translateY(0) rotate(2deg)}
.gnome-hint{font-size:.75rem;text-align:center;opacity:.65;margin-top:10px;font-style:italic}

/* ---------- ticker ---------- */
.ticker{
  border-top:var(--border);border-bottom:var(--border);
  background:var(--ink);color:var(--paper);
  overflow:hidden;white-space:nowrap;padding:10px 0;margin:28px 0 0;
  transform:rotate(-.6deg) scale(1.02);
}
.ticker-track{display:inline-block;animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker span{font-family:"JetBrains Mono",monospace;font-size:.85rem;margin:0 14px}
.ticker .t1{color:var(--sun)}.ticker .t2{color:#7ee0f0}.ticker .t3{color:#ffb3c2}.ticker .t4{color:#b8f27c}.ticker .t5{color:#d3c1ff}

/* ---------- sections ---------- */
section{padding:clamp(48px,7vw,84px) 0 0}
.sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.sec-head h2{font-family:"Fraunces",serif;font-weight:900;font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.01em}
.sec-head .squig{flex:1;min-width:60px;height:14px;background:
  radial-gradient(circle at 6px 0, transparent 5px, var(--ink) 5px, var(--ink) 7px, transparent 7px);
  background-size:16px 14px;background-repeat:repeat-x;opacity:.35}
.sec-head .tag{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--butter);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;
  transform:rotate(1.5deg);
}

/* garden beds (fully clickable) */
.beds{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.bed{
  display:block;text-decoration:none;color:inherit;cursor:pointer;
  border:var(--border);border-radius:var(--radius);padding:22px 20px 20px;position:relative;
  transition:transform .15s,box-shadow .15s;
}
.bed:nth-child(1){background:var(--blush);box-shadow:6px 6px 0 var(--coral),14px 20px 30px -10px rgba(43,29,58,.28);transform:rotate(-.7deg)}
.bed:nth-child(2){background:var(--butter);box-shadow:6px 6px 0 var(--sun),14px 20px 30px -10px rgba(43,29,58,.28);transform:rotate(.6deg)}
.bed:nth-child(3){background:var(--mint);box-shadow:6px 6px 0 var(--lime),14px 20px 30px -10px rgba(43,29,58,.28);transform:rotate(-.4deg)}
.bed:nth-child(4){background:var(--sky);box-shadow:6px 6px 0 var(--cyan),14px 20px 30px -10px rgba(43,29,58,.28);transform:rotate(.8deg)}
.bed:hover{transform:rotate(0) translateY(-5px)}
.bed:hover .go{transform:translateX(4px)}
.bed .emo{font-size:1.7rem;line-height:1;margin-bottom:10px}
.bed h3{font-family:"Fraunces",serif;font-size:1.18rem;margin-bottom:6px}
.bed p{font-size:.92rem}
.bed .go{display:inline-block;margin-top:12px;font-weight:700;font-size:.85rem;transition:transform .15s}

/* projects (fully clickable cards) */
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.proj{
  background:#fff;border:var(--border);border-radius:var(--radius);
  padding:24px 22px 20px;display:flex;flex-direction:column;gap:10px;
  box-shadow:7px 7px 0 var(--lav),16px 24px 36px -12px rgba(43,29,58,.30);transition:transform .15s,box-shadow .15s;position:relative;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--tx,0px),var(--ty,0px));
  cursor:pointer;
}
.proj:hover{--tx:-3px;--ty:-3px;box-shadow:10px 10px 0 var(--violet),22px 32px 44px -12px rgba(43,29,58,.35)}
.proj h3{font-family:"Fraunces",serif;font-size:1.35rem}
.proj h3 a{text-decoration:none}
.proj h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.proj h3 a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px}
.status{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  border:2px solid var(--ink);border-radius:999px;padding:2px 10px;
}
.status.oss{background:var(--mint)}
.status.exp{background:var(--butter)}
.status.wip{background:var(--blush)}
.status.hub{background:var(--sky)}
.proj p{font-size:.93rem;flex:1}
.proj .useful{font-size:.83rem;background:var(--paper);border:2px dashed var(--ink);border-radius:12px;padding:8px 12px}
.proj .useful b{font-weight:700}
.proj .plink{font-weight:700;font-size:.9rem;text-decoration:none;color:var(--violet);position:relative;z-index:2;align-self:flex-start}
.proj .plink:hover{color:var(--coral)}

/* writing */
.writing-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
.artlist{display:flex;flex-direction:column;gap:12px}
.art{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  background:#fff;border:var(--border);border-radius:16px;padding:13px 16px;
  box-shadow:4px 4px 0 var(--mint),10px 14px 22px -8px rgba(43,29,58,.20);transition:transform .13s,box-shadow .13s;
}
.art:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cyan),14px 18px 26px -8px rgba(43,29,58,.26)}
.art .num{font-family:"Fraunces",serif;font-weight:900;font-size:1.25rem;color:var(--coral);min-width:1.6em;text-align:center}
.art .t{font-weight:500;font-size:.95rem;line-height:1.35}
.chipcloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{font-size:.78rem;font-weight:500;border:2px solid var(--ink);border-radius:999px;padding:3px 11px;background:#fff;transition:transform .15s}
.chip:hover{transform:translateY(-3px) rotate(-2deg)}
.chip:nth-child(4n+1){background:var(--blush)}
.chip:nth-child(4n+2){background:var(--butter)}
.chip:nth-child(4n+3){background:var(--sky)}
.chip:nth-child(4n){background:var(--mint)}
.writing-side{
  border:var(--border);border-radius:var(--radius);background:var(--lav);
  padding:24px 22px;box-shadow:6px 6px 0 var(--violet),14px 20px 30px -10px rgba(43,29,58,.28);transform:rotate(.7deg);
}
.writing-side h3{font-family:"Fraunces",serif;font-size:1.2rem;margin-bottom:8px}
.writing-side p{font-size:.92rem;margin-bottom:14px}
.writing-side .btn{font-size:.88rem}

/* experiments / terminal */
.term{
  background:var(--ink);color:#e8e0f5;border:var(--border);border-radius:var(--radius);
  box-shadow:8px 8px 0 var(--cyan),20px 30px 48px -10px rgba(43,29,58,.40);overflow:hidden;
}
.term-top{
  display:flex;align-items:center;gap:8px;background:#3d2b57;
  padding:9px 14px;border-bottom:2px solid #1d1229;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:#cbb8ea;
}
.term-body{
  font-family:"JetBrains Mono",monospace;font-size:clamp(.74rem,1.4vw,.88rem);
  padding:18px 20px 22px;line-height:1.75;min-height:230px;
}
.term-body .ln{opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.term-body .ln.on{opacity:1;transform:none}
.term-body .p{color:#8fd414}
.term-body .c{color:#7ee0f0}
.term-body .d{color:#9b87bd}
.term-body .y{color:var(--sun)}
.term-note{font-size:.85rem;margin-top:16px;opacity:.85;max-width:60ch}

/* personal note */
.note{
  border:var(--border);border-radius:var(--radius);background:var(--butter);
  box-shadow:7px 7px 0 var(--sun),16px 24px 36px -12px rgba(43,29,58,.28);padding:clamp(24px,4vw,40px);
  transform:rotate(-.5deg);position:relative;overflow:hidden;
}
.note::after{content:"❋";position:absolute;right:-10px;bottom:-30px;font-size:9rem;opacity:.12;transform:rotate(15deg)}
.note p{max-width:64ch;font-size:clamp(.98rem,1.5vw,1.08rem)}
.note p + p{margin-top:12px}
.note .sig{font-family:"Fraunces",serif;font-weight:900;font-size:1.3rem;margin-top:18px;transform:rotate(-2deg);display:inline-block}

/* footer */
footer{margin-top:clamp(56px,8vw,90px);border-top:var(--border);background:var(--lav);padding:40px 0 26px}
.foot-inner{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-direction:column;gap:6px}
.foot-links a{font-weight:500;text-decoration:none;font-size:.95rem}
.foot-links a:hover{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px}
.foot-links h4,.foot-gnome h4{font-family:"Fraunces",serif;font-size:1.05rem;margin-bottom:8px}
.foot-gnome{display:flex;align-items:center;gap:14px}
.foot-gnome svg{width:78px;transition:transform .25s}
.foot-gnome:hover svg{transform:rotate(-5deg) scale(1.06)}
.gnome-mini .eye{transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .gnome-mini .eye{animation:gblink 5.2s infinite}
  .gnome-mini .eye.r{animation-delay:.06s}
}
.colophon{margin-top:30px;font-size:.8rem;opacity:.7;text-align:center}

/* responsive */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;text-align:left}
  .gnomeplot{order:-1;margin-top:8px}
  .gnome{width:min(200px,52vw)}
  .bubble{right:auto;left:60%}
  .writing-grid{grid-template-columns:1fr}
  .writing-side{transform:none}
}
@media (max-width:520px){
  .navpill nav a{font-size:.8rem;padding:3px 8px}
  .btnrow{gap:9px}
  .btn{padding:9px 14px;font-size:.88rem}
}