:root, [data-theme="dark"]{
  /* dark (default) */
  --bg:#12111A;
  --ink:#F3F0E8;
  --sub:#B8B3A6;
  --line:rgba(243,240,232,0.18);
  --indigo:#8B86FF;
  --coral:#FF6B4A;
  --green:#2ECF8F;
  --yellow:#FFD15C;
  --card:#FFFFFF;
  --card-ink:#1A1918;
  --card-sub:#5E5A52;
  --surface-hero:#2A1820;
  --surface-focus:#1A1B3A;
  --surface-projects:#18142E;
  --surface-notes:#2E1814;
  --surface-hobbies:#2A2210;
  --surface-about:#102820;
  --nav-bg:rgba(18,17,26,0.92);
  --nav-border:rgba(243,240,232,0.12);
  --footer-bg:#0A0910;
  --footer-ink:#F3F0E8;
  --footer-muted:#9A958B;
  --footer-border:rgba(243,240,232,0.1);
  --social-border:rgba(243,240,232,0.28);
  --shadow:5px 5px 0 rgba(0,0,0,0.35);
  --shadow-hover:8px 8px 0 rgba(0,0,0,0.4);
  --radius:20px;
  --bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
  --bounce-soft:cubic-bezier(0.22, 1.25, 0.36, 1);
  --bounce-in:cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --bounce-out:cubic-bezier(0.68, -0.4, 0.265, 1.35);
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#FFFBF5;
  --ink:#1A1918;
  --sub:#5E5A52;
  --line:#E6DFD0;
  --indigo:#3B34D9;
  --coral:#F25A3C;
  --green:#0D8A5F;
  --yellow:#E5A800;
  --card:#FFFFFF;
  --card-ink:#1A1918;
  --card-sub:#5E5A52;
  --surface-hero:#FFE8D6;
  --surface-focus:#EBE8FC;
  --surface-projects:#E8E6F8;
  --surface-notes:#FFE9E2;
  --surface-hobbies:#FFF4D4;
  --surface-about:#E3F3EB;
  --nav-bg:rgba(255,251,245,0.92);
  --nav-border:rgba(26,25,24,0.12);
  --footer-bg:#1A1918;
  --footer-ink:#F3F0E8;
  --footer-muted:#9A958B;
  --footer-border:rgba(243,240,232,0.1);
  --social-border:rgba(243,240,232,0.28);
  --shadow:5px 5px 0 rgba(26,25,24,0.12);
  --shadow-hover:8px 8px 0 rgba(26,25,24,0.16);
  color-scheme:light;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.skip-link{
  position:absolute;left:12px;top:-48px;
  background:var(--coral);color:#FFFDF6;
  padding:10px 16px;border-radius:10px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;
  z-index:100;transition:top .2s ease;
}
.skip-link:focus{top:12px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  transition:
    background-color .5s cubic-bezier(0.4, 0, 0.2, 1),
    color .4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* smooth theme shifts — color props only; motion keeps its own bounce rules */
section,
.card,
.now-item,
.entry,
header.site,
footer,
.logo-mark,
.chip,
.pill,
.theme-toggle,
.menu-toggle,
.btn-resume,
.social,
.eyebrow,
.sec-title,
.sec-sub,
.principles li,
nav.links a,
.hobby-blob,
.grad-text{
  transition:
    background-color .5s cubic-bezier(0.4, 0, 0.2, 1),
    color .4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color .4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1),
    fill .35s ease,
    stroke .35s ease,
    background .5s cubic-bezier(0.4, 0, 0.2, 1);
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  letter-spacing:-0.025em;
  margin:0 0 .4em;
  line-height:1.15;
  transition:color .4s cubic-bezier(0.4, 0, 0.2, 1);
}
p{margin:0 0 1em;color:var(--sub); transition:color .4s cubic-bezier(0.4, 0, 0.2, 1);}
a{color:inherit;text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,52px);}
section{padding:clamp(56px,8vw,96px) 0;}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--indigo);
  margin-bottom:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:'';
  width:8px;height:8px;
  border-radius:50%;
  background:var(--coral);
  display:inline-block;
  animation:pulseDot 2.4s var(--bounce-in) infinite;
}
@keyframes pulseDot{
  0%,100%{transform:scale(1);opacity:1;}
  30%{transform:scale(1.45);opacity:.6;}
  50%{transform:scale(0.92);opacity:.85;}
  70%{transform:scale(1.2);opacity:.75;}
}

/* ─── Nav ─── */
header.site{
  position:sticky;top:0;z-index:50;
  background:var(--nav-bg);
  backdrop-filter:blur(12px);
  border-bottom:2px solid var(--nav-border);
  transition:background-color .35s ease, border-color .35s ease;
}
.navwrap{
  max-width:1100px;margin:0 auto;
  padding:14px clamp(20px,5vw,52px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.nav-right{
  display:flex;align-items:center;gap:10px;
  margin-left:auto;
}
.btn-resume{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;
  padding:9px 16px;
  border-radius:999px;
  background:var(--coral);
  color:#FFFDF6;
  border:2px solid transparent;
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;
  transition:transform .22s var(--bounce), box-shadow .2s var(--bounce), background .2s var(--bounce);
  box-shadow:3px 3px 0 rgba(0,0,0,0.35);
}
.btn-resume:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:5px 5px 0 rgba(0,0,0,0.4);
  background:#FF7A5C;
}
.btn-resume svg{flex-shrink:0;}
.theme-toggle{
  width:40px;height:40px;
  border-radius:12px;
  border:2px solid var(--nav-border);
  background:transparent;
  color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:
    transform .28s var(--bounce),
    background-color .4s cubic-bezier(0.4, 0, 0.2, 1),
    color .35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color .4s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.theme-toggle:hover{
  transform:translateY(-2px) rotate(-8deg);
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon{
  display:none;
  transition:transform .4s var(--bounce), opacity .3s ease;
}
[data-theme="dark"] .theme-toggle .icon-sun{display:block; animation:iconIn .45s var(--bounce) both;}
[data-theme="light"] .theme-toggle .icon-moon{display:block; animation:iconIn .45s var(--bounce) both;}
@keyframes iconIn{
  from{opacity:0; transform:scale(0.5) rotate(-40deg);}
  to{opacity:1; transform:scale(1) rotate(0deg);}
}
/* brief page wash when theme flips */
html.theme-animating body::after{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:9999;
  background:var(--bg);
  opacity:0;
  animation:themeWash .55s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes themeWash{
  0%{opacity:0;}
  35%{opacity:0.18;}
  100%{opacity:0;}
}
@media(max-width:760px){
  .nav-right{width:100%; justify-content:flex-end; order:2; gap:8px;}
  .btn-resume{padding:8px 14px;font-size:12px;}
}
.logo{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:20px;
  display:flex;align-items:center;gap:10px;
}
.logo-mark{
  width:34px;height:34px;
  border-radius:10px;
  background:var(--coral);
  color:#FFFDF6;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:13px;
  letter-spacing:-0.04em;
  display:inline-flex;align-items:center;justify-content:center;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 rgba(28,27,26,0.18);
  transition:transform .28s var(--bounce), box-shadow .25s var(--bounce);
  animation:logoPulse 3.2s var(--bounce-soft) infinite;
  flex-shrink:0;
}
@keyframes logoPulse{
  0%,100%{box-shadow:3px 3px 0 rgba(28,27,26,0.18); transform:scale(1);}
  40%{box-shadow:4px 4px 0 rgba(28,27,26,0.12); transform:scale(1.06);}
  55%{box-shadow:2px 2px 0 rgba(28,27,26,0.2); transform:scale(0.97);}
  70%{box-shadow:3px 3px 0 rgba(28,27,26,0.15); transform:scale(1.03);}
}
.logo:hover .logo-mark{
  transform:scale(1.1) rotate(-6deg);
  box-shadow:5px 5px 0 rgba(28,27,26,0.2);
  animation-play-state:paused;
}
/* legacy dot support in footer */
.logo .dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--coral);
  display:inline-block;
  box-shadow:0 0 0 3px rgba(255,90,60,0.2);
}
nav.links{display:flex;gap:3px;flex-wrap:wrap;}
nav.links a{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  padding:8px 15px;
  border-radius:999px;
  transition:
    transform .22s var(--bounce),
    background-color .4s cubic-bezier(0.4, 0, 0.2, 1),
    color .35s cubic-bezier(0.4, 0, 0.2, 1);
}
nav.links a:hover{
  background:var(--ink);color:var(--bg);
  transform:translateY(-3px) rotate(-2deg) scale(1.04);
}
.menu-toggle{
  display:none;
  background:none;
  border:2px solid rgba(243,240,232,0.35);
  border-radius:12px;
  padding:8px 12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s var(--bounce), color .2s var(--bounce);
}
.menu-toggle:hover{background:var(--ink);color:var(--bg);}
@media(max-width:760px){
  nav.links{display:none;width:100%;flex-direction:column;gap:2px;padding-top:8px;order:3;}
  nav.links.open{display:flex;}
  .navwrap{flex-wrap:wrap;}
  .menu-toggle{display:block;}
  .nav-right{order:2;}
}

/* ─── Hero ─── */
.hero{
  padding-top:clamp(64px,10vw,108px);
  position:relative;overflow:hidden;
  background:var(--surface-hero);
  color:var(--ink);
}
.hero h1{color:var(--ink);}
.hero-glow{
  position:absolute;inset:-25%;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,197,61,0.4), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(55,48,224,0.25), transparent 48%),
    radial-gradient(circle at 72% 88%, rgba(255,90,60,0.28), transparent 46%);
  filter:blur(8px);
  animation:blobDrift 24s var(--bounce-soft) infinite alternate;
  will-change:transform;
}
@keyframes blobDrift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(-4%,4%) scale(1.08);}
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:clamp(28px,4.5vw,60px);
  align-items:center;
}
.hero-art{
  filter:drop-shadow(7px 12px 0 rgba(28,27,26,0.1));
  animation:artFloat 9s var(--bounce-soft) infinite;
  will-change:transform;
}
/* parallax layers driven by JS */
[data-parallax]{
  --parallax-y:0px;
  --parallax-x:0px;
  will-change:transform;
}
.hero-glow[data-parallax]{
  transform:translate3d(var(--parallax-x), var(--parallax-y), 0);
  animation:none;
}
.parallax-wrap,
[data-parallax]:not(.hero-glow){
  transform:translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
}
@media(max-width:860px){
  .parallax-wrap{max-width:300px;margin:0 auto;order:-1;}
}
@keyframes artFloat{
  0%,100%{transform:translateY(0) rotate(0deg) scale(1);}
  18%{transform:translateY(-16px) rotate(1.5deg) scale(1.02);}
  32%{transform:translateY(-6px) rotate(-0.4deg) scale(0.995);}
  50%{transform:translateY(-13px) rotate(-1deg) scale(1.015);}
  68%{transform:translateY(-4px) rotate(0.5deg) scale(1.005);}
  82%{transform:translateY(-9px) rotate(0.8deg) scale(1.01);}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-art{max-width:300px;margin:0 auto;order:-1;}
}
.hero h1{
  font-size:clamp(40px,6.8vw,72px);
  line-height:1.02;
  max-width:14ch;
}
.grad-text{
  background:linear-gradient(100deg,var(--indigo),var(--coral) 40%,var(--yellow) 70%,var(--coral) 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 6s var(--bounce-soft) infinite alternate;
}
@keyframes gradShift{
  0%{background-position:0% center;}
  100%{background-position:100% center;}
}
.hero .lede{
  font-size:clamp(18px,2.1vw,22px);
  max-width:48ch;
  margin-top:20px;
  color:var(--sub);
  line-height:1.55;
}
.sticker-row{
  display:flex;flex-wrap:wrap;gap:12px;
  margin:36px 0 10px;
  position:relative;
}
.sticker{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;
  padding:11px 17px 11px 13px;
  border-radius:16px;
  border:2.5px solid var(--ink);
  background:#fff;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .25s var(--bounce), box-shadow .25s var(--bounce);
  animation:stickerBob 4.8s var(--bounce-in) infinite;
  cursor:default;
  will-change:transform;
}
.sticker span{font-size:18px;line-height:1;display:inline-block;transition:transform .25s var(--bounce);}
.sticker:hover{
  transform:translate(-4px,-5px) rotate(0deg) scale(1.06) !important;
  box-shadow:8px 8px 0 var(--ink);
  animation-play-state:paused;
}
.sticker:hover span{transform:scale(1.25) rotate(-8deg);}
@keyframes stickerBob{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg));}
  20%{transform:translateY(-11px) rotate(calc(var(--r,0deg) + 2deg));}
  35%{transform:translateY(-4px) rotate(calc(var(--r,0deg) - 0.5deg));}
  50%{transform:translateY(-9px) rotate(var(--r,0deg));}
  65%{transform:translateY(-3px) rotate(calc(var(--r,0deg) + 0.8deg));}
  80%{transform:translateY(-6px) rotate(calc(var(--r,0deg) - 1.2deg));}
}
.rot0{--r:-3.5deg;animation-delay:0s;}
.rot1{--r:2.5deg;animation-delay:.55s;}
.rot2{--r:-2deg;animation-delay:1.1s;}
.rot3{--r:3.5deg;animation-delay:1.65s;}
.rot4{--r:-1deg;animation-delay:.3s;}
.sticker-green{background:#DDF3E9;}
.sticker-indigo{background:#E4E1FA;}
.sticker-coral{background:#FFE6DF;}
.sticker-yellow{background:#FFF0C9;}

/* ─── Deep solid section backgrounds ─── */
#focus{background:var(--surface-focus); color:var(--ink);}
#projects{background:var(--surface-projects); color:var(--ink);}
#notes{background:var(--surface-notes); color:var(--ink);}
#hobbies{background:var(--surface-hobbies); color:var(--ink);}
#about{background:var(--surface-about); color:var(--ink);}

section .sec-sub,
section > .wrap > p{color:var(--sub);}
#about .about-list{color:var(--sub);}
#about .principles li{
  border-bottom-color:var(--line);
  color:var(--ink);
}

/* white cards — dark type inside */
section .card{
  background:var(--card);
  color:var(--card-ink);
  border-color:transparent;
  box-shadow:var(--shadow);
}
[data-theme="light"] section .card{
  border-color:var(--card-ink);
}
section .card:hover{box-shadow:var(--shadow-hover);}
section .card p,
section .card .dek,
section .card .meta{color:var(--card-sub);}
section .card h3,
section .card h4{color:var(--card-ink);}
section .now-item{
  background:var(--card);
  color:var(--card-ink);
  border-color:transparent;
}
[data-theme="light"] section .now-item{border-color:var(--card-ink);}
section .now-item p{color:var(--card-ink);}
section .entry[open]{
  border-color:transparent;
  box-shadow:6px 6px 0 rgba(123,117,255,0.25);
}
[data-theme="light"] section .entry[open]{
  border-color:var(--indigo);
  box-shadow:6px 6px 0 rgba(59,52,217,0.15);
}
section .focus-card{border-color:transparent;}
[data-theme="light"] section .focus-card{border-color:var(--indigo);}
section .hobby-green,
section .hobby-indigo,
section .hobby-coral,
section .hobby-yellow{border-color:transparent;}
[data-theme="light"] section .hobby-green{border-color:var(--green);}
[data-theme="light"] section .hobby-indigo{border-color:var(--indigo);}
[data-theme="light"] section .hobby-coral{border-color:var(--coral);}
[data-theme="light"] section .hobby-yellow{border-color:#C99A12;}
.pill{border-color:rgba(26,25,24,0.12); color:var(--card-sub);}
.chip{background:var(--card-ink); color:var(--card);}
.expand-hint{color:var(--indigo);}
.entry summary:hover .expand-hint{color:var(--coral);}
.hobby-cta{color:var(--indigo);}
.hobby-cta:hover{color:var(--coral);}
.proj-label{color:var(--coral);}
.entry-body{border-top-color:rgba(26,25,24,0.12);}
.entry-body blockquote{color:var(--card-ink);}
.entry-body pre{background:#1A1918; color:#F3F0E8;}

/* ─── Scroll reveal: staggered enter (no exit — cleaner for reading) ─── */
.reveal{
  opacity:0;
  transform:translateY(28px) scale(0.98);
  transition:
    opacity .7s var(--bounce),
    transform .7s var(--bounce);
  transition-delay:calc(var(--stagger, 0) * 70ms);
  will-change:opacity, transform;
}
.reveal.in{
  opacity:1;
  transform:translateY(0) scale(1);
}
.reveal-left{ transform:translateX(-28px) scale(0.98); }
.reveal-left.in{ transform:translateX(0) scale(1); }
.reveal-right{ transform:translateX(28px) scale(0.98); }
.reveal-right.in{ transform:translateX(0) scale(1); }
.reveal-scale{ transform:scale(0.94); }
.reveal-scale.in{ transform:scale(1); }

/* hero load-in (page open, not scroll) */
.hero-enter{
  opacity:0;
  transform:translateY(28px);
  animation:heroEnter .85s var(--bounce) both;
  animation-delay:calc(var(--stagger, 0) * 90ms);
}
@keyframes heroEnter{
  from{opacity:0; transform:translateY(28px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-enter-art{
  opacity:0;
  transform:translateY(20px) scale(0.94);
  animation:heroEnterArt 1s var(--bounce) both;
  animation-delay:.25s;
}
@keyframes heroEnterArt{
  from{opacity:0; transform:translateY(24px) scale(0.92);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

/* ─── Cards ─── */
.card{
  background:var(--card);
  border:2.5px solid var(--ink);
  border-radius:var(--radius);
  padding:28px 30px;
  box-shadow:var(--shadow);
  transition:
    transform .28s var(--bounce),
    box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color .5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color .4s cubic-bezier(0.4, 0, 0.2, 1),
    color .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover{
  box-shadow:var(--shadow-hover);
  transform:translateY(-4px);
}
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:820px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
}

.focus-card{border-color:var(--indigo);}
.focus-card h3{font-size:20px;margin-bottom:8px;}
.focus-card p{margin-bottom:0;font-size:15.5px;}

/* ─── Chips / pills ─── */
.chip{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:999px;
  background:var(--ink);
  color:var(--bg);
  display:inline-block;
}
.meta{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--sub);
}
.pill{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  padding:5px 12px;
  border:1.5px solid var(--line);
  border-radius:999px;
  display:inline-block;
  margin:3px 5px 3px 0;
  color:var(--sub);
  transition:border-color .2s var(--bounce), color .2s var(--bounce);
}
.pill:hover{border-color:var(--indigo);color:var(--indigo);}
.pillrow{margin-top:12px;}

/* ─── Writing / projects (details) ─── */
.entry{
  margin-bottom:20px;cursor:pointer;
  transition:transform .28s var(--bounce), box-shadow .28s var(--bounce), border-color .25s var(--bounce);
}
.entry:hover:not([open]){
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}
.entry[open]{
  border-color:var(--indigo);
  box-shadow:6px 6px 0 rgba(55,48,224,0.12);
}
.entry summary{list-style:none;}
.entry summary::-webkit-details-marker{display:none;}
.entry-top{
  display:flex;align-items:center;gap:12px;
  margin-bottom:12px;flex-wrap:wrap;
}
.entry h3{font-size:clamp(22px,2.7vw,28px);margin-bottom:8px;}
.impact-row{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:12px 0 4px;
}
.impact{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:600;
  letter-spacing:.02em;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(46,207,143,0.15);
  color:var(--green);
  border:1.5px solid rgba(46,207,143,0.35);
}
[data-theme="light"] .impact{
  background:rgba(13,138,95,0.1);
  color:var(--green);
  border-color:rgba(13,138,95,0.25);
}
.btn-ghost{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;
  padding:9px 16px;border-radius:999px;
  background:transparent;
  color:var(--ink);
  border:2px solid var(--ink);
  display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;
  box-shadow:3px 3px 0 rgba(0,0,0,0.15);
  transition:transform .22s var(--bounce), background .2s var(--bounce), color .2s var(--bounce);
}
.btn-ghost:hover{
  background:var(--ink);color:var(--bg);
  transform:translateY(-2px);
}
.open-to{
  display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;
}
.open-to .chip{font-size:12px;}
.entry-links{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:16px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
}
.entry-links a{
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--indigo);
}
.entry .dek{font-size:16.5px;line-height:1.5;}
.expand-hint{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--indigo);
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  margin-top:4px;
  transition:gap .25s var(--bounce), color .2s var(--bounce);
}
.entry summary:hover .expand-hint{gap:10px;color:var(--coral);}
.arrow{
  display:inline-block;
  transition:transform .3s var(--bounce);
}
.entry[open] .arrow{transform:rotate(90deg);}
.entry[open]{cursor:default;}
.entry-body{
  margin-top:22px;
  padding-top:22px;
  border-top:2.5px dashed var(--line);
  animation:bodyIn .55s var(--bounce) both;
}
@keyframes bodyIn{
  0%{opacity:0;transform:translateY(16px) scale(0.98);}
  60%{opacity:1;transform:translateY(-4px) scale(1.01);}
  80%{transform:translateY(2px) scale(0.995);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
.entry-body h4{font-size:18px;margin-top:24px;margin-bottom:8px;}
.entry-body blockquote{
  font-family:'Space Grotesk',sans-serif;
  font-size:20px;font-weight:600;
  border-left:5px solid var(--coral);
  padding-left:20px;
  margin:22px 0;
  color:var(--ink);
  line-height:1.35;
}
.entry-body pre{
  background:#1C1B1A;
  color:#F3F0E8;
  padding:18px 20px;
  border-radius:14px;
  overflow-x:auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  line-height:1.55;
}
.proj-sec{margin-top:20px;}
.proj-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--coral);
  font-weight:700;
  display:block;
  margin-bottom:4px;
}

/* ─── Notes ─── */
.note h4{font-size:18px;margin-bottom:8px;}
.note p{font-size:15px;margin-bottom:0;line-height:1.55;}
.note:hover{transform:translateY(-4px) rotate(-0.6deg);}
.notes-extra[hidden]{display:none !important;}
.notes-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.notes-more-btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;
  padding:12px 22px;
  border-radius:999px;
  border:2px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .25s var(--bounce), background .2s var(--bounce), color .2s var(--bounce), border-color .2s var(--bounce);
}
.notes-more-btn:hover{
  background:var(--ink);
  color:var(--bg);
  transform:translateY(-2px);
}
.notes-more-btn .arrow{display:inline-block;transition:transform .3s var(--bounce);}
.notes-more-btn[aria-expanded="true"] .arrow{transform:rotate(180deg);}
[data-theme="light"] .notes-more-btn{
  border-color:var(--card-ink);
  color:var(--card-ink);
}
[data-theme="light"] .notes-more-btn:hover{
  background:var(--card-ink);
  color:var(--card);
}

/* ─── Hobbies ─── */
.hobby{
  position:relative;overflow:hidden;
  transition:transform .28s var(--bounce), box-shadow .28s var(--bounce);
}
.hobby:hover{
  transform:translateY(-7px) rotate(-1.8deg) scale(1.02);
  box-shadow:9px 9px 0 rgba(28,27,26,0.16);
}
.hobby:hover .hobby-blob{transform:scale(1.4) rotate(12deg);}
.hobby:hover .hobby-emoji{transform:scale(1.2) rotate(-10deg);}
.hobby-blob{
  position:absolute;top:-45px;right:-45px;
  width:130px;height:130px;
  border-radius:50%;
  opacity:0.55;
  filter:blur(2px);
  transition:transform .45s var(--bounce);
  pointer-events:none;
  animation:blobIdle 7s var(--bounce-soft) infinite alternate;
}
@keyframes blobIdle{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.08) translate(-6px,4px);}
}
.hobby-green .hobby-blob{background:#B5E5D0;}
.hobby-indigo .hobby-blob{background:#C8C4F5;}
.hobby-coral .hobby-blob{background:#FFCDBF;}
.hobby-yellow .hobby-blob{background:#FFE29A;}
.hobby-emoji{
  font-size:32px;margin-bottom:8px;position:relative;
  display:inline-block;
  transition:transform .3s var(--bounce);
}
.hobby h3{font-size:22px;margin-top:10px;position:relative;}
.hobby p,.hobby .chip,.hobby-cta{position:relative;}
.hobby-green{border-color:var(--green);}
.hobby-indigo{border-color:var(--indigo);}
.hobby-coral{border-color:var(--coral);}
.hobby-yellow{border-color:#C99A12;}
.hobby-cta{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:700;
  color:var(--indigo);
  display:inline-flex;align-items:center;gap:5px;
  margin-top:10px;
  transition:gap .2s var(--bounce), color .2s var(--bounce);
}
.hobby-cta:hover{gap:11px;color:var(--coral);text-decoration:underline;}

/* ─── About ─── */
.principles{list-style:none;padding:0;margin:0;}
.principles li{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:19px;
  padding:14px 0;
  border-bottom:2px solid var(--line);
  display:flex;align-items:flex-start;gap:12px;
  transition:padding-left .25s var(--bounce), color .2s var(--bounce);
}
.principles li:hover{padding-left:10px;color:var(--indigo);}
.principles li::before{
  content:'→';
  color:var(--coral);
  font-weight:700;
  flex-shrink:0;
  transition:transform .25s var(--bounce);
  display:inline-block;
}
.principles li:hover::before{transform:translateX(4px) scale(1.15);}
.about-list{padding-left:20px;color:var(--sub);}
.about-list li{margin-bottom:9px;}

/* ─── Now ─── */
.now-item{
  background:var(--card);
  border:2.5px solid var(--ink);
  border-radius:16px;
  padding:18px 20px;
  box-shadow:4px 4px 0 rgba(28,27,26,0.1);
  transition:transform .25s var(--bounce), box-shadow .25s var(--bounce);
}
.now-item:hover{
  transform:translateY(-4px) rotate(-0.8deg);
  box-shadow:6px 6px 0 rgba(28,27,26,0.14);
}
.now-item p{margin:10px 0 0;font-size:15px;color:var(--ink);line-height:1.5;}

/* ─── Footer ─── */
footer{
  background:var(--footer-bg);
  color:var(--footer-ink);
  padding:clamp(48px,7vw,80px) 0 36px;
  margin-top:0;
  border-top:1px solid var(--footer-border);
  transition:background-color .35s ease, color .25s ease;
}
footer .wrap{
  display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:36px;
}
footer .logo{color:var(--footer-ink);}
footer p{color:var(--footer-muted);}
.social-grid{display:flex;flex-wrap:wrap;gap:10px;}
.social{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--social-border);
  border-radius:999px;
  padding:10px 16px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--footer-ink);
  background:transparent;
  transition:background .2s var(--bounce), transform .25s var(--bounce), border-color .2s var(--bounce), color .2s var(--bounce);
}
.social svg{stroke:var(--footer-ink); flex-shrink:0; color:var(--footer-ink);}
.social:hover{
  background:var(--footer-ink);
  color:var(--footer-bg);
  border-color:var(--footer-ink);
  transform:translateY(-4px) scale(1.04) rotate(-1deg);
}
.social:hover svg{stroke:var(--footer-bg); color:var(--footer-bg);}
.social:hover svg [fill="currentColor"]{fill:var(--footer-bg);}
.copyright{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--footer-muted);
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid var(--footer-border);
}

/* section headings */
.sec-title{
  font-size:clamp(30px,4.2vw,44px);
  margin-bottom:12px;
}
.sec-sub{
  font-size:18px;
  max-width:52ch;
  margin-bottom:32px;
  color:var(--sub);
}

/* focus visibility for keyboard users */
:focus{outline:none;}
:focus-visible{
  outline:3px solid var(--coral);
  outline-offset:3px;
  border-radius:8px;
}
nav.links a:focus-visible{
  background:var(--ink);color:var(--bg);
  outline-offset:2px;
}
.menu-toggle:focus-visible{outline-offset:3px;}
.social:focus-visible{outline-color:var(--yellow);}
.entry summary:focus-visible{
  outline:3px solid var(--indigo);
  outline-offset:4px;
  border-radius:12px;
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .reveal,.reveal-left,.reveal-right,.reveal-scale,.reveal.out,.hero-enter,.hero-enter-art{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }
  .sticker,.hero-art,.hero-glow,.hero,.grad-text,.hobby-blob,.logo-mark,.eyebrow::before{
    animation:none !important;
    transform:none !important;
  }
  html.theme-animating body::after{display:none;}
}

/* ─── Instagram mosaic ─── */
.ig-mosaic{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(max-width:640px){
  .ig-mosaic{grid-template-columns:repeat(2,1fr);}
}
.ig-tile{
  position:relative;
  display:block;
  aspect-ratio:1;
  border-radius:16px;
  overflow:hidden;
  border:2.5px solid transparent;
  box-shadow:var(--shadow);
  transition:transform .28s var(--bounce), box-shadow .28s var(--bounce);
}
[data-theme="light"] .ig-tile{border-color:var(--card-ink);}
.ig-tile:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow-hover);
}
.ig-media{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.ig-badge{
  position:absolute;top:10px;right:10px;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,0.55);
  color:#fff;
  font-size:11px;
  display:flex;align-items:center;justify-content:center;
}
.prose h2{font-size:1.25rem;margin:1.4em 0 .5em;color:inherit;}
.prose p{margin:0 0 1em;color:inherit;line-height:1.65;}
.prose p:last-child{margin-bottom:0;}
.page-detail .chip{background:var(--coral);color:#fff;}