: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;
  -webkit-font-smoothing:antialiased;
  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%),
    linear-gradient(180deg, #fffaf0 0%, var(--paper) 40%, #f7ecdd 100%);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--sun);color:var(--ink)}
/* sky glow lives BEHIND the bubble canvas — no darkening wash over it */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42vw 42vw at 80% -10%, rgba(255,206,90,.42) 0%, rgba(255,182,39,.14) 45%, transparent 72%),
    radial-gradient(30vw 24vw at 6% 110%, rgba(101,197,24,.12) 0%, transparent 70%);
}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
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;
  /* paper halo = sticker edge: keeps letters readable over any bubble */
  text-shadow:
    2px 0 0 var(--paper),-2px 0 0 var(--paper),0 2px 0 var(--paper),0 -2px 0 var(--paper),
    2px 2px 0 var(--paper),-2px 2px 0 var(--paper),2px -2px 0 var(--paper),-2px -2px 0 var(--paper),
    5px 6px 0 rgba(43,29,58,.12);
}
.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;
  /* soft light halo lifts body copy off the bubbles */
  text-shadow:
    -1px -1px 0 rgba(253,246,236,.85),1px -1px 0 rgba(253,246,236,.85),
    -1px 1px 0 rgba(253,246,236,.85),1px 1px 0 rgba(253,246,236,.85),
    0 0 8px rgba(253,246,236,.9);
}
.pagehead{padding:clamp(40px,7vw,70px) 20px 0}
.pagehead .pagetitle{font-size:clamp(2.4rem,6vw,4rem)}

.promptbox{
  margin:22px 0 26px;border:var(--border);border-radius:18px;background:#fff;
  box-shadow:7px 7px 0 var(--coral),18px 26px 34px -14px rgba(43,29,58,.35);
  overflow:hidden;max-width:560px;position:relative;
  transform:rotate(-.5deg);
  transition:transform .18s,box-shadow .18s;
}
.promptbox:hover{transform:rotate(0) translateY(-3px);box-shadow:9px 9px 0 var(--coral),22px 32px 40px -14px rgba(43,29,58,.4)}
.promptbox .pb-top{
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--lav) 0%,var(--blush) 60%,var(--butter) 100%);
  border-bottom:2px solid var(--ink);padding:8px 12px;
  font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:700;letter-spacing:.08em;
}
.pb-top .pb-name{display:inline-flex;align-items:center;gap:6px;margin-left:2px;
  background:#fff;border:2px solid var(--ink);border-radius:8px;padding:1px 8px;
  box-shadow:2px 2px 0 rgba(43,29,58,.25)}
.pb-top .pb-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;
  font-size:.62rem;letter-spacing:.12em;color:var(--ink);opacity:.75}
.pb-top .pb-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime);
  border:1.5px solid var(--ink);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(101,197,24,.28)}}
.pb-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);
  box-shadow:inset -1.5px -1.5px 0 rgba(43,29,58,.22)}
.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 14px 44px;position:relative;
  /* FIXED height (3 mono lines) — the typewriter must never reflow the page */
  height:calc(3 * 1.55em + 28px);overflow:hidden;
  background:
    linear-gradient(180deg, rgba(231,222,252,.55), rgba(231,222,252,0) 14px),
    repeating-linear-gradient(180deg, transparent 0 1.55em, rgba(43,29,58,.05) 1.55em calc(1.55em + 1px));
  line-height:1.55;
}
.pb-body::before{
  content:"01";position:absolute;left:0;top:0;bottom:0;width:32px;
  display:flex;justify-content:center;padding-top:15px;
  font-size:.68rem;font-weight:700;color:var(--violet);opacity:.55;
  background:rgba(231,222,252,.45);border-right:2px dashed rgba(43,29,58,.25);
}
.pb-body .slash{color:#fff;background:var(--violet);border-radius:6px;padding:1px 7px;
  font-weight:700;box-shadow:2px 2px 0 rgba(43,29,58,.3);margin-right:2px;display:inline-block}
.caret{display:inline-block;width:.55em;height:1.1em;background:var(--coral);vertical-align:text-bottom;
  border-radius:2px;box-shadow:0 0 8px rgba(255,93,115,.8);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),10px 14px 18px -8px rgba(43,29,58,.3)}
.btn:active{transform:translate(1px,1px) scale(.96);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}

/* shared focus ring for keyboard users */
:where(a,button,summary):focus-visible{
  outline:3px dashed var(--violet);outline-offset:3px;border-radius:6px;
}

/* ---------- gnome ---------- */
.gnomeplot{position:relative;display:flex;justify-content:center;align-items:flex-end}
#gnome3d{display:none;width:min(340px,72vw);cursor:pointer}
#gnome3d:focus{outline:none}
#gnome3d:focus-visible{outline:4px dashed var(--violet);outline-offset:8px;border-radius:24px}
.gnomeplot.has3d #gnome3d{display:block}
.gnomeplot.has3d .gnome{display:none}
.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:.75;margin-top:10px;font-style:italic;
  text-shadow:-1px -1px 0 var(--paper),1px -1px 0 var(--paper),-1px 1px 0 var(--paper),1px 1px 0 var(--paper);
}

/* ---------- 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;
  text-shadow:
    2px 0 0 var(--paper),-2px 0 0 var(--paper),0 2px 0 var(--paper),0 -2px 0 var(--paper),
    2px 2px 0 var(--paper),-2px 2px 0 var(--paper),2px -2px 0 var(--paper),-2px -2px 0 var(--paper);
}
.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, 3D-tilt like the project cards) */
.beds{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;perspective:1100px}
.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,opacity .55s ease,translate .55s ease;
  transform:rotate(var(--rot,0deg)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transform-style:preserve-3d;overflow:hidden;
}
.bed::after{ /* sheen that sweeps on hover */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.5) 46%, transparent 60%);
  translate:-120% 0;transition:translate .5s ease;
}
.bed:hover::after{translate:120% 0}
.bed:nth-child(1){--rot:-.7deg;background:var(--blush);box-shadow:6px 6px 0 var(--coral),14px 20px 30px -10px rgba(43,29,58,.28)}
.bed:nth-child(2){--rot:.6deg;background:var(--butter);box-shadow:6px 6px 0 var(--sun),14px 20px 30px -10px rgba(43,29,58,.28)}
.bed:nth-child(3){--rot:-.4deg;background:var(--mint);box-shadow:6px 6px 0 var(--lime),14px 20px 30px -10px rgba(43,29,58,.28)}
.bed:nth-child(4){--rot:.8deg;background:var(--sky);box-shadow:6px 6px 0 var(--cyan),14px 20px 30px -10px rgba(43,29,58,.28)}
.bed:hover{--rot:0deg;--lift:-6px}
.bed:nth-child(1):hover{box-shadow:9px 9px 0 var(--coral),20px 30px 40px -12px rgba(43,29,58,.36)}
.bed:nth-child(2):hover{box-shadow:9px 9px 0 var(--sun),20px 30px 40px -12px rgba(43,29,58,.36)}
.bed:nth-child(3):hover{box-shadow:9px 9px 0 var(--lime),20px 30px 40px -12px rgba(43,29,58,.36)}
.bed:nth-child(4):hover{box-shadow:9px 9px 0 var(--cyan),20px 30px 40px -12px rgba(43,29,58,.36)}
.bed:active{--lift:-2px}
.bed:hover .go{transform:translateX(4px)}
.bed .emo{
  font-size:1.6rem;line-height:1;margin-bottom:12px;width:52px;height:52px;
  display:grid;place-items:center;background:#fff;border:2.5px solid var(--ink);border-radius:16px;
  box-shadow:3px 3px 0 rgba(43,29,58,.25);transform:rotate(-3deg);transition:transform .18s;
}
.bed:hover .emo{transform:rotate(3deg) scale(1.08)}
.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,opacity .55s ease,translate .55s ease;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::before{ /* glare that follows the pointer, sells the 3D tilt */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(190px circle at var(--mx,50%) var(--my,50%), rgba(255,241,191,.5), transparent 65%);
  opacity:0;transition:opacity .25s;
}
.proj:hover::before{opacity:1}
.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,opacity .55s ease,translate .55s ease;
}
.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}
.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 .wrap{position:relative}
#note .wrap::after{ /* washi tape holding the note down (outside .note, which clips) */
  content:"";position:absolute;top:-13px;left:52px;width:96px;height:28px;
  background:rgba(124,58,237,.30);border:2px solid rgba(43,29,58,.30);border-radius:4px;
  transform:rotate(-4deg);backdrop-filter:blur(1px);pointer-events:none;
}
.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 — rolling-hill divider into an evening garden */
footer{margin-top:clamp(72px,9vw,110px);position:relative;padding:14px 0 26px;
  background:linear-gradient(180deg,var(--lav) 0%,#dccbf7 55%,#d3bef4 100%)}
.foot-wave{position:absolute;top:-42px;left:0;width:100%;height:44px;display:block}
.foot-inner{display:grid;grid-template-columns:1.7fr 1fr 1fr .9fr;gap:28px;align-items:flex-start;padding-top:26px}
@media (max-width:820px){.foot-inner{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-inner{grid-template-columns:1fr}}
.foot-links{display:flex;flex-direction:column;gap:7px}
.foot-links a{
  font-weight:500;text-decoration:none;font-size:.95rem;position:relative;padding-left:0;
  transition:padding-left .16s,color .16s;
}
.foot-links a::before{
  content:"✿";position:absolute;left:-2px;opacity:0;font-size:.7em;top:.35em;
  color:var(--coral);transition:opacity .16s;
}
.foot-links a:hover{padding-left:16px;color:var(--violet)}
.foot-links a:hover::before{opacity:1}
.foot-links h4,.foot-gnome h4{font-family:"Fraunces",serif;font-size:1.05rem;margin-bottom:8px}
.foot-links h4{display:inline-flex;align-items:center;gap:8px}
.foot-links h4::after{content:"";flex:1;min-width:34px;height:2.5px;background:var(--ink);opacity:.2;border-radius:2px}
.foot-gnome{display:flex;align-items:center;gap:16px}
.foot-gnome svg{width:96px;transition:transform .25s;filter:drop-shadow(4px 6px 0 rgba(43,29,58,.16))}
.foot-gnome:hover svg{transform:rotate(-4deg) scale(1.05)}
.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}
  .gnome-mini .firefly{animation:fly 5s ease-in-out infinite}
  .gnome-mini .firefly.f2{animation-delay:2.4s}
}
@keyframes fly{0%,100%{transform:translate(0,0);opacity:.9}30%{transform:translate(-7px,-9px);opacity:.4}65%{transform:translate(5px,-14px);opacity:.95}}
.colophon{
  margin-top:30px;font-size:.8rem;opacity:.75;text-align:center;position:relative;padding-top:18px;
}
.colophon::before{
  content:"❀ ✿ ❀";letter-spacing:1.2em;display:block;margin-bottom:8px;
  font-size:.7rem;opacity:.55;color:var(--violet);
}

/* 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}
  .promptbox .pb-body{height:calc(4 * 1.55em + 28px)} /* narrow lines wrap more */
}