styles.css

:root {
  --bg: #ffffff; --fg: #000000; --muted: #696969; --soft: #f4f4f2; --line: #dededb;
  --surface: #000000; --surface-fg: #ffffff; --shadow: rgba(0,0,0,.12);
  --heat-0:#eeeeeb; --heat-1:#cececa; --heat-2:#9c9c98; --heat-3:#5f5f5c; --heat-4:#000000;
  --page-x: clamp(24px, 5vw, 80px); --header-h: 88px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="dark"] {
  --bg:#000000; --fg:#ffffff; --muted:#9a9a96; --soft:#0d0d0d; --line:#242424;
  --surface:#ffffff; --surface-fg:#000000; --shadow:rgba(255,255,255,.08);
  --heat-0:#161616; --heat-1:#333333; --heat-2:#666666; --heat-3:#a9a9a5; --heat-4:#ffffff;
}
*{box-sizing:border-box} html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--fg);background:var(--bg);transition:color .25s ease,background .25s ease} a{color:inherit;text-decoration:none} button{font:inherit} ::selection{background:var(--fg);color:var(--bg)} .svg-defs{position:absolute;pointer-events:none}
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--header-h);padding:0 var(--page-x);display:grid;grid-template-columns:1fr auto auto;gap:32px;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--line),transparent 25%);background:color-mix(in srgb,var(--bg),transparent 10%);backdrop-filter:blur(16px)}
.brand{display:flex;gap:16px;align-items:baseline;letter-spacing:.08em;font-size:13px;font-weight:700}.brand small{color:var(--muted);font-size:9px;font-weight:500;letter-spacing:.18em}.top-nav{display:flex;gap:28px;font-size:11px;letter-spacing:.08em}.top-nav a{color:var(--muted);position:relative}.top-nav a:hover,.top-nav a.active{color:var(--fg)}.top-nav a.active::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--fg);left:-12px;top:5px}
.theme-toggle{border:1px solid var(--line);background:transparent;color:var(--fg);height:34px;padding:0 12px;border-radius:999px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:10px;letter-spacing:.08em}.theme-toggle__dot{width:8px;height:8px;border-radius:50%;background:var(--fg)}
.section{min-height:100svh;padding:calc(var(--header-h) + 72px) var(--page-x) 84px;border-bottom:1px solid var(--line)}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);align-items:center;gap:48px;overflow:hidden}.identity-row{display:flex;align-items:baseline;gap:22px}.identity-row h1{font-size:clamp(42px,5vw,76px);line-height:1;margin:0;letter-spacing:-.055em}.identity-row span{color:var(--muted);font-size:13px;letter-spacing:.16em}.hero__headline{font-size:clamp(56px,7.6vw,118px);line-height:.93;letter-spacing:-.068em;max-width:930px;margin:52px 0 34px;font-weight:750}.hero__bio{color:var(--muted);font-size:14px}.scroll-cue{display:inline-flex;gap:12px;margin-top:92px;color:var(--muted);font-size:10px;letter-spacing:.16em}.scroll-cue span{color:var(--fg)}
.goo-nav{position:relative;height:min(640px,70vh);min-height:500px}.goo-nav__surface{position:absolute;inset:0;filter:url(#goo)}.goo-shape{position:absolute;display:block;border-radius:50%;background:var(--surface);transition:transform .45s cubic-bezier(.2,.8,.2,1)}.goo-shape--core{width:330px;height:330px;left:50%;top:50%;transform:translate(-46%,-48%)}.goo-shape--github{width:104px;height:104px;left:21%;top:18%}.goo-shape--works{width:112px;height:112px;right:3%;top:29%}.goo-shape--blog{width:100px;height:100px;left:7%;bottom:18%}.goo-shape--about{width:106px;height:106px;right:12%;bottom:7%}.goo-nav:has(.goo-link--github:hover) .goo-shape--github{transform:translate(34px,28px) scale(1.08)}.goo-nav:has(.goo-link--works:hover) .goo-shape--works{transform:translate(-38px,20px) scale(1.08)}.goo-nav:has(.goo-link--blog:hover) .goo-shape--blog{transform:translate(40px,-22px) scale(1.08)}.goo-nav:has(.goo-link--about:hover) .goo-shape--about{transform:translate(-34px,-30px) scale(1.08)}.goo-nav__links{position:absolute;inset:0}.goo-link{position:absolute;width:104px;height:104px;display:grid;place-items:center;text-align:center;color:var(--surface-fg);font-size:12px;z-index:2;transition:transform .35s ease}.goo-link:hover{transform:scale(1.06)}.goo-link--github{left:21%;top:18%}.goo-link--works{right:4%;top:30%}.goo-link--blog{left:7%;bottom:18%}.goo-link--about{right:12%;bottom:7%}.goo-link::before{content:"↗";display:block;position:absolute;top:25px;font-size:10px;opacity:.7}
.section-heading>div{display:flex;gap:24px;color:var(--muted);font-size:10px;letter-spacing:.14em}.section-heading>div span:last-child{color:var(--fg)}.section-heading h2{margin:40px 0 14px;font-size:clamp(48px,6vw,88px);letter-spacing:-.055em;line-height:.95}.section-heading p{margin:0;color:var(--muted);font-size:15px}
.pulse-tabs{display:flex;gap:10px;margin-top:56px}.pulse-tab{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:10px 16px;cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.pulse-tab.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}.pulse-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:48px}.stat{border-top:1px solid var(--line);padding-top:18px;min-height:105px}.stat strong{display:block;font-size:clamp(30px,3vw,48px);letter-spacing:-.045em}.stat span{color:var(--muted);font-size:11px}
.heatmap-shell{position:relative;margin-top:52px}.heatmap-toolbar{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.1em;margin-bottom:18px}.heatmap-legend{display:flex;gap:5px;align-items:center}.heatmap-legend i{display:block;width:10px;height:10px;border-radius:3px}.heatmap-legend i:nth-child(1){background:var(--heat-0)}.heatmap-legend i:nth-child(2){background:var(--heat-1)}.heatmap-legend i:nth-child(3){background:var(--heat-2)}.heatmap-legend i:nth-child(4){background:var(--heat-3)}.heatmap-legend i:nth-child(5){background:var(--heat-4)}.heatmap{display:grid;grid-template-rows:repeat(7,14px);grid-auto-flow:column;grid-auto-columns:14px;gap:6px;overflow-x:auto;padding:8px 0 18px;scrollbar-width:thin}.heat-day{width:14px;height:14px;border:0;border-radius:4px;padding:0;cursor:pointer;background:var(--heat-0);transition:transform .15s ease,border-radius .15s ease}.heat-day:hover,.heat-day:focus-visible{transform:scale(1.45);border-radius:50%;outline:none;z-index:2}.heat-day[data-level="1"]{background:var(--heat-1)}.heat-day[data-level="2"]{background:var(--heat-2)}.heat-day[data-level="3"]{background:var(--heat-3)}.heat-day[data-level="4"]{background:var(--heat-4)}.activity-tooltip{position:fixed;z-index:70;width:min(320px,calc(100vw - 32px));padding:18px;border-radius:22px;background:var(--fg);color:var(--bg);box-shadow:0 18px 60px var(--shadow);pointer-events:none;font-size:12px}.activity-tooltip strong{display:block;font-size:26px;margin:6px 0 10px}.activity-tooltip dl{display:grid;grid-template-columns:1fr auto;gap:6px 18px;margin:0}.activity-tooltip dt{opacity:.65}.activity-tooltip dd{margin:0}
.work-list,.writing-list{margin-top:72px}.work-row,.writing-row{display:grid;align-items:center;border-top:1px solid var(--line);transition:padding .25s ease,background .25s ease}.work-row{grid-template-columns:70px minmax(240px,.9fr) minmax(260px,1.3fr) 80px 28px;min-height:124px}.work-row:hover{padding-left:12px;background:var(--soft)}.work-row__index,.work-row__year,.work-row__arrow{color:var(--muted);font-size:11px}.work-row__title{font-size:clamp(24px,2.5vw,38px);letter-spacing:-.035em}.work-row__description{color:var(--muted);font-size:13px}.work-row__tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.work-row__tags span{border:1px solid var(--line);padding:4px 8px;border-radius:999px;font-size:9px}.writing-row{grid-template-columns:70px minmax(300px,1.4fr) minmax(220px,.7fr) 90px 28px;min-height:108px}.writing-row:hover{padding-left:12px;background:var(--soft)}.writing-row__title{font-size:clamp(21px,2vw,30px)}.writing-row__meta,.writing-row__date,.writing-row__index{color:var(--muted);font-size:11px}
.about-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr);gap:100px;margin-top:84px;align-items:start}.eyebrow{color:var(--muted);font-size:10px;letter-spacing:.14em}.about-copy{font-size:clamp(26px,3vw,44px);line-height:1.18;letter-spacing:-.035em;max-width:900px}.about-now-label{margin-top:72px}.about-now{font-size:18px}.about-links{min-height:360px;position:relative;filter:url(#goo)}.about-link{position:absolute;width:112px;height:112px;border-radius:50%;background:var(--surface);color:var(--surface-fg);display:grid;place-items:center;font-size:12px;transition:transform .35s ease}.about-link:nth-child(1){left:35%;top:15%;width:150px;height:150px}.about-link:nth-child(2){left:8%;top:5%}.about-link:nth-child(3){right:4%;top:18%}.about-link:nth-child(4){left:12%;bottom:5%}.about-link:nth-child(5){right:12%;bottom:0}.about-link:hover{transform:scale(1.12)}
.site-footer{min-height:120px;padding:36px var(--page-x);display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.12em}.site-footer a{color:var(--fg)}.empty-note{grid-column:1/-1;color:var(--muted);border:1px dashed var(--line);padding:24px;border-radius:18px;font-size:12px}
@media(max-width:980px){.top-nav{display:none}.site-header{grid-template-columns:1fr auto}.brand small{display:none}.hero{grid-template-columns:1fr;padding-top:calc(var(--header-h) + 54px)}.hero__headline{margin-top:38px}.scroll-cue{margin-top:54px}.goo-nav{min-height:430px;height:52vh}.pulse-stats{grid-template-columns:repeat(2,1fr)}.about-grid{grid-template-columns:1fr;gap:48px}.about-links{min-height:420px}}
@media(max-width:680px){:root{--page-x:22px;--header-h:72px}.theme-toggle__label{display:none}.section{min-height:auto;padding-top:calc(var(--header-h) + 52px);padding-bottom:70px}.hero{min-height:100svh}.identity-row{display:block}.identity-row span{display:block;margin-top:12px}.hero__headline{font-size:clamp(52px,15vw,78px)}.goo-nav{margin-top:16px;min-height:390px}.goo-shape--core{width:240px;height:240px}.goo-shape--github,.goo-link--github{left:7%;top:10%}.goo-shape--works,.goo-link--works{right:2%;top:17%}.goo-shape--blog,.goo-link--blog{left:2%;bottom:8%}.goo-shape--about,.goo-link--about{right:4%;bottom:4%}.pulse-stats{grid-template-columns:1fr 1fr;gap:16px}.work-row{grid-template-columns:42px 1fr 54px 18px;padding:24px 0}.work-row__description{grid-column:2/-1;margin-top:8px}.writing-row{grid-template-columns:42px 1fr 48px 18px;padding:24px 0}.writing-row__meta{grid-column:2/-1;margin-top:8px}.site-footer{align-items:flex-start;gap:20px;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}