@font-face{font-family:Runde;src:url('./fonts/OpenRunde-Regular.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Runde;src:url('./fonts/OpenRunde-Medium.woff2') format('woff2');font-weight:500;font-display:swap}@font-face{font-family:Runde;src:url('./fonts/OpenRunde-Semibold.woff2') format('woff2');font-weight:600;font-display:swap}
:root{--paper:#fff;--ink:#252723;--body-ink:#4e4e4e;--quiet:#767973;--line:#e9ebe7;--wash:#f2eefb;--accent:#9d533e;--scene-ink:#555c53;--scene-water:#8a9894;--width:600px;color-scheme:light}
:root[data-theme=dark]{--paper:#18161e;--ink:#ebe9f1;--body-ink:#c2bfcb;--quiet:#9893a5;--line:#35313f;--wash:#29243a;--accent:#d6a086;--scene-ink:#b3aec0;--scene-water:#8e88a6;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body.notebook{margin:0;background:var(--paper);color:var(--body-ink);font-family:Runde,Arial,sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}body.notebook::before,body.notebook::after{display:none}::selection{background:#ddd2f6;color:#252723}:root[data-theme=dark] ::selection{background:#463a6b;color:#ebe9f1}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:5px}a:hover{color:var(--ink)}p{margin:0 0 20px}h1,h2,h3{color:var(--ink);font-weight:500;margin:0}strong{font-weight:500}img,video{max-width:100%;display:block}.skip-link{position:absolute;top:-60px;left:20px;padding:8px 16px;background:var(--ink);color:var(--paper);z-index:50}.skip-link:focus{top:12px}.notebook-header,.notebook-main,.notebook-footer{width:calc(100% - 48px);max-width:var(--width);margin-inline:auto}.notebook-header{padding-top:40px;margin-bottom:28px}.notebook-header .site-name{display:inline-block;font-family:"Pacifico",cursive;font-weight:400;color:var(--ink);font-size:18px;letter-spacing:-.25px}.name-dot{color:var(--accent)}.notebook-header nav{display:flex;gap:20px;margin-top:3px;flex-wrap:wrap;line-height:1.9}.notebook-header nav a{font-size:16px;color:var(--body-ink);transition:color .18s}.notebook-header nav a:hover,.notebook-header nav a[aria-current]{color:var(--ink)}.notebook-header nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px}
.city-scene{margin:0 0 29px;position:relative}.city-scene canvas{display:block;width:100%;height:auto;aspect-ratio:60/23;background-image:radial-gradient(circle,#808b741f 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(180deg,#000 90%,transparent)}.city-scene figcaption{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--quiet);margin-top:5px}.city-scene button{border:0;background:none;padding:0;color:var(--quiet);font-size:14px}.city-scene button:hover{color:var(--accent)}.city-scene button span{padding-left:4px}.intro h1{font-size:25px;line-height:1.4;letter-spacing:-.75px;margin-bottom:18px}.intro p{line-height:1.7;margin-bottom:20px;max-width:620px}.intro a,.about-section a,.page-signoff a,.inline-link{text-decoration:underline;text-decoration-color:#b4b9ae;text-underline-offset:3px;text-decoration-thickness:1px;color:var(--ink)}.intro p:last-child{margin-top:25px;margin-bottom:0}
.currently{position:relative;display:grid;grid-template-columns:1fr 200px;margin-top:44px;background:var(--wash);padding:24px 25px 0;border-radius:9px;gap:16px 8px}.currently h2{font-size:16px;margin-bottom:14px}.currently dl{margin:0;font-size:14px}.currently dl div{display:flex;gap:6px;margin:5px 0}.currently dt{color:var(--quiet)}.currently dt::after{content:' —'}.currently dd{margin:0}.quiet-status{font-size:14px;color:var(--quiet);display:flex;gap:6px;align-items:center;margin:20px 0 12px}.quiet-status>span{width:5px;height:5px;border-radius:50%;background:#7e9971;box-shadow:0 0 0 3px #7e997113}.desk-stack{position:relative;min-height:164px;align-self:center}.desk-card{position:absolute;width:114px;height:141px;top:9px;border:3px solid #fff;border-radius:6px;box-shadow:0 5px 14px #202a2014;text-align:left;overflow:hidden;padding:9px;color:#444c40;transition:transform .3s,box-shadow .3s,top .3s}.desk-card:hover{top:0;box-shadow:0 9px 18px #202a2020}.desk-card.is-front{z-index:3;transform:rotate(6deg) translateY(0)}.desk-card-code{left:0;transform:rotate(-13deg);background:#e2daf4}.desk-card-food{left:44px;transform:rotate(-3deg);padding:0;background:#e9e1d3}.desk-card-design{left:84px;transform:rotate(9deg);background:#f7f0da}.card-label{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.9px;white-space:nowrap}.card-foot{position:absolute;bottom:7px;left:9px;font-size:14px;white-space:nowrap}.design-note{font-size:19px;line-height:1.3;letter-spacing:-1px;display:block;margin-top:13px}.design-note em{font-style:normal;font-size:14px;letter-spacing:-.2px;color:#9d533e}.desk-card-food img{width:100%;height:100%;object-fit:cover}.desk-card-food .card-foot{background:#faf7f0;border-radius:3px;padding:2px 4px;left:5px}.code-art{display:flex;align-items:center;justify-content:center;gap:6px;font-size:48px;height:100px;line-height:1;font-weight:400;color:#65755d}.code-art i{font-style:normal;font-size:33px;color:#a37b55}.desk-caption{grid-column:1/-1;display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:11px 0 13px;font-size:14px;color:var(--quiet)}.desk-caption a{color:var(--body-ink);white-space:nowrap}
.home-section{margin-top:52px}.section-title{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:19px}.section-title h2{font-size:16px}.section-title>a{font-size:14px;color:var(--quiet)}.section-title>a:hover{color:var(--ink)}.work-row{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}.work-row:first-of-type{border-top:1px solid var(--line)}.work-thumb{width:54px;height:54px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.media-thumb{background:#e6dff7;color:#5a3da8;font-size:34px;font-weight:600;letter-spacing:-4px;padding-right:4px}.media-pixel{color:#a08ad6}.karma-thumb{background:#eee6f2;color:#8f6ca2;font-size:38px}.work-row-copy{display:grid;gap:3px}.work-row-copy strong{font-size:16px;color:var(--ink)}.work-row-copy>span{color:var(--quiet);font-size:14px}.row-arrow{margin-left:auto;color:var(--quiet);transition:transform .2s}.work-row:hover .row-arrow{transform:translate(2px,-2px)}.note-row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-block:1px solid var(--line);font-size:14px;color:var(--ink)}.note-meta{font-size:14px;color:var(--quiet);white-space:nowrap}.curiosity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.curiosity-art{aspect-ratio: .91;overflow:hidden;border-radius:7px;position:relative;transition:transform .25s}.curiosity:hover .curiosity-art{transform:translateY(-4px)}.curiosity h3{font-size:14px;margin-top:10px}.curiosity p{font-size:14px;color:var(--quiet);line-height:1.6;margin-top:4px}.closing-note{display:flex;align-items:center;justify-content:center;gap:12px;margin:60px 0 12px;color:var(--quiet)}.closing-note>span{font-size:30px;color:#a08ad6}.closing-note p{font-size:14px;margin:0;line-height:1.7}.notebook-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:30px 0 45px;margin-top:47px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--quiet)}.notebook-footer p{margin:0 0 3px}.notebook-footer p:last-child{margin-bottom:0}.notebook-footer nav{display:flex;gap:16px;align-items:center;flex-shrink:0}.notebook-theme{padding:0;line-height:1;border:0;color:var(--quiet);background:transparent;font-size:17px}.footer-dot{padding:0 3px}
.page-intro{margin:66px 0 48px}.page-intro h1{font-size:27px;line-height:1.4;letter-spacing:-.7px;margin-bottom:18px}.eyebrow{font-size:14px;font-weight:400;letter-spacing:.3px;color:var(--quiet);margin-bottom:10px}.project-entry{border-top:1px solid var(--line);padding-top:23px;margin-bottom:48px}.project-meta{font-size:14px;color:var(--quiet);margin:0 0 9px}.project-meta span{margin:0 5px}.project-meta strong{color:var(--ink)}.project-entry h2{font-size:17px;line-height:1.5;margin-bottom:8px}.project-entry>p:not(.project-meta){font-size:14px}.project-visual{border-radius:8px;overflow:hidden;background:var(--wash);margin:20px 0 13px;max-height:420px}.project-visual video{width:100%}.project-visual img{width:100%;height:340px;object-fit:cover;object-position:top}.inline-link{font-size:14px}.page-signoff{font-size:16px;margin:50px 0}.about-section{margin:45px 0}.about-section>h2{font-size:16px;margin-bottom:20px}.chapter{display:grid;grid-template-columns:115px 1fr;gap:18px;padding:20px 0;border-top:1px solid var(--line)}.chapter>span{color:var(--quiet);font-size:14px;padding-top:2px}.chapter h3{font-size:16px;margin-bottom:8px}.chapter p{font-size:14px;margin:0}
/* Existing long-form pages share the notebook shell without changing their content. */
body.notebook-legacy{--bg:var(--paper);--text:var(--ink);--muted:var(--quiet);--border:var(--line);--surface:var(--wash);--surface-solid:var(--wash);--primary:var(--ink);--on-primary:var(--paper);--font:Runde,Arial,sans-serif}body.notebook-legacy .column{width:calc(100% - 48px);max-width:var(--width);margin:64px auto 0;padding:0;min-height:0}body.notebook-legacy .layout{display:block;padding:0;margin:0}body.notebook-legacy .rail,body.notebook-legacy .progress{display:none}body.notebook-legacy .content{width:100%;max-width:none;min-width:0;margin:0;padding:0}body.notebook-legacy .display{font-size:27px;line-height:1.35;font-weight:500;letter-spacing:-.7px;margin-bottom:18px}body.notebook-legacy p{font-size:16px;line-height:1.7}body.notebook-legacy h2{font-size:17px;font-weight:500;letter-spacing:-.2px}body.notebook-legacy h3{font-size:15px;font-weight:500}body.notebook-legacy .section{margin-top:45px;padding:0;border:0}body.notebook-legacy .eyebrow{font-size:14px;letter-spacing:.3px;font-weight:400;color:var(--quiet)}body.notebook-legacy [data-reveal]{opacity:1;transform:none;filter:none}body.notebook-legacy .notebook-footer{width:100%;margin-top:64px}body.notebook-legacy .notebook-footer p{font-size:14px;line-height:1.6}body.notebook-legacy .btn{border-radius:6px;background:var(--wash);color:var(--ink);border:1px solid var(--line);box-shadow:none;font-size:14px;min-height:36px;padding:8px 13px;font-weight:400}body.notebook-legacy .btn-primary{background:var(--ink);color:var(--paper)}body.notebook-legacy .card,body.notebook-legacy .vibe-panel,body.notebook-legacy .cs-aside-card{border-radius:8px;background:var(--wash);border:1px solid var(--line);box-shadow:none}body.notebook-legacy .cs-pullquote{font-size:21px;line-height:1.5;color:var(--ink);font-weight:400}body.notebook-legacy .cs-stat strong{font-size:28px;font-weight:500}body.notebook-legacy .cs-mobile-nav{display:flex;position:static;flex-wrap:wrap;border-radius:6px;background:var(--wash);box-shadow:none;margin:24px 0;font-size:14px}body.notebook-legacy .cs-lede{font-size:16px}body.notebook-legacy .cs-media,body.notebook-legacy .cs-hero-media{border-radius:8px;box-shadow:none}body.notebook-legacy .cs-hero-media video{max-height:380px}body.notebook-legacy .form-field input,body.notebook-legacy .form-field textarea{border:1px solid var(--line);border-radius:6px;background:var(--wash);font-size:16px}body.notebook-legacy .social-row a{font-size:14px}body.notebook-legacy .log-entry{padding:22px;margin-bottom:12px}body.notebook-legacy .copy-row{flex-wrap:wrap}body.notebook-legacy .pager{gap:12px;flex-wrap:wrap}body.notebook-legacy .ghost-num{display:none}body.notebook-legacy .vibe-bar{font-size:14px}body.notebook-legacy .vibe-line{font-size:14px}body.notebook-legacy .cook-filter{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}body.notebook-legacy .cook-filter button{border:1px solid var(--line);background:var(--paper);color:var(--quiet);padding:5px 12px;border-radius:5px;font-size:14px}body.notebook-legacy .cook-filter button[aria-pressed=true]{background:var(--wash);color:var(--ink)}[hidden]{display:none!important}
@keyframes orb-drift{0%,100%{transform:translateY(3px) rotate(-12deg)}50%{transform:translateY(-4px) rotate(10deg)}}
@media(min-width:1200px){.notebook-header{padding-top:40px}}
@media(max-width:600px){.notebook-header{padding-top:24px;margin-bottom:25px}.notebook-header nav{gap:19px}.city-scene{margin-bottom:25px}.city-scene canvas{aspect-ratio:2.35}.intro h1{font-size:23px;letter-spacing:-.65px}.desktop-break{display:none}.currently{grid-template-columns:1fr;padding:21px 20px 0;margin-top:34px}.currently dl{font-size:14px}.desk-stack{width:215px;min-height:155px;justify-self:center;margin:3px 0}.desk-card{height:145px;width:119px}.desk-card-design{left:94px}.desk-caption{flex-direction:column;gap:3px;font-size:14px;padding-block:13px}.quiet-status{font-size:14px;margin-bottom:0}.home-section{margin-top:40px}.curiosity-grid{gap:11px}.curiosity h3{font-size:14px}.curiosity p{font-size:14px}.note-row{flex-direction:column;gap:5px}.notebook-footer{align-items:flex-start;flex-direction:column;gap:15px;margin-top:38px;padding-bottom:32px}.notebook-footer nav{gap:20px}.closing-note{margin-top:43px}.page-intro{margin:45px 0 35px}.chapter{grid-template-columns:1fr;gap:6px}.project-visual img{height:250px}body.notebook-legacy .column{margin-top:44px}body.notebook-legacy .cs-meta{grid-template-columns:1fr}body.notebook-legacy .cs-impact{gap:12px}body.notebook-legacy .cs-stat strong{font-size:24px}body.notebook-legacy .cs-stat span{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body.notebook-legacy .cs-mobile-nav{height:auto;max-height:none;overflow:visible;padding:6px}body.notebook-legacy .cs-mobile-nav a{font-size:14px;padding:6px 10px}body.notebook-legacy .cs-stat{border-radius:7px;box-shadow:none}body.notebook-legacy .orb-card{border:1px solid var(--line);border-radius:8px;box-shadow:none}body.notebook-legacy .orb-card__info{padding:15px 17px 20px}body.notebook-legacy .orb-card__info p{font-size:14px}body.notebook-legacy .hero{padding:0;min-height:0;margin:0}body.notebook-legacy .hero-sub{margin:14px 0}body.notebook-legacy .orbx--rose{background:radial-gradient(ellipse at 25% 20%,#fff7fd,#edb8df 24%,#a190d7 52%,#729bc7 75%,#bbcfe3);box-shadow:inset -7px -9px 12px #6f7baf55,0 6px 20px #a9a2ce44}body.notebook-legacy .orbx--rose .orbx__shine{display:block;position:absolute;inset:0;border-radius:50%;background:linear-gradient(145deg,transparent 35%,#fffc 46%,#fff5 50%,transparent 56%)}body.notebook-legacy .orbx--vortex .orbx__shader{background:conic-gradient(from 60deg,#151c20,#929a9e,#1a2027,#48525c,#c7c9c9,#12171b);filter:blur(3px)}body.notebook-legacy .orbx.is-paused,body.notebook-legacy .orbx.is-paused *{animation-play-state:paused!important}.currently-simple{display:block;padding:23px 25px;margin-top:40px}.currently-simple dl{font-size:14px}.currently-simple dl div{margin:8px 0}.currently-simple a:hover{color:var(--accent)}.currently-about{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;margin-top:18px;color:var(--quiet);font-size:14px}.personal-workbench{margin:48px 0 0}.bench-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px}.bench-heading h2{font-size:14px}.bench-heading>span{font-size:14px;color:var(--quiet)}.bench-objects{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:16px -6px 22px;padding:0 0 18px;border-bottom:1px solid var(--line);background:radial-gradient(circle,#808b7417 1px,transparent 1px) 0 0/20px 20px}.bench-object{border:0;background:none;color:var(--scene-ink);padding:0 4px 9px;min-width:0;position:relative;border-radius:6px}.bench-art{display:block;width:100%;height:auto;transition:transform .25s,color .25s;transform-origin:50% 80%}.bench-object:nth-child(1) .bench-art{rotate:-9deg}.bench-object:nth-child(2) .bench-art{rotate:5deg}.bench-object:nth-child(4) .bench-art{rotate:-5deg}.bench-object>span{display:block;font-size:14px;color:var(--quiet);margin-top:3px;transition:color .2s}.bench-object[aria-pressed=true] .bench-art,.bench-object:hover .bench-art{transform:translateY(-6px);color:var(--accent)}.bench-object[aria-pressed=true]>span{color:var(--ink)}.bench-object[aria-pressed=true]::after{content:'';width:4px;height:4px;background:var(--accent);border-radius:50%;position:absolute;bottom:-5px;left:calc(50% - 2px)}.object-story{display:grid;grid-template-columns:28px 1fr;gap:12px;min-height:135px;padding:18px 20px;background:var(--wash);border-radius:7px}.object-number{font-size:14px;color:var(--accent);padding-top:2px}.object-story h3{font-size:16px;margin:0 0 6px}.object-story p{font-size:14px;line-height:1.65;margin:0 0 9px;max-width:490px}.object-story a{font-size:14px;color:var(--quiet);text-underline-offset:3px}.object-story a:hover{text-decoration:underline;color:var(--ink)}.about-intro{margin-top:46px}

@media(max-width:600px){.currently-simple{padding:21px 20px}.currently-simple dl div{display:grid;grid-template-columns:72px 1fr;gap:3px}.currently-simple dl{font-size:14px}.personal-workbench{margin-top:35px}.bench-heading{display:block}.bench-heading h2{font-size:16px}.bench-heading>span{display:block;margin-top:4px}.bench-objects{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 6px;margin-top:16px}.bench-object{grid-column:span 2}.bench-object:nth-child(4){grid-column:2/span 2}.bench-object:nth-child(5){grid-column:4/span 2}.bench-art{max-height:133px}.object-story{padding:16px;gap:7px;grid-template-columns:22px 1fr;min-height:175px}.object-story h3{font-size:14px}.object-story p{font-size:14px}.about-intro{margin-top:36px}}
@media(max-width:350px){.notebook-header nav{gap:12px}.notebook-header nav a{font-size:14px}}
@media(prefers-reduced-motion:reduce){.bench-art{animation:none!important;transition:none!important}.bench-object:hover .bench-art,.bench-object[aria-pressed=true] .bench-art{transform:none}}
/* small emoji-sized icons in front of inline links */
.inline-icon{display:inline-block;width:1.1em;height:1.1em;margin:0 .3em 0 .05em;vertical-align:-.2em;border-radius:50%;object-fit:cover}
/* Experience on the homepage, using the About page's timeline */
.experience .chapter{padding:16px 0}
.experience .chapter:last-child{border-bottom:1px solid var(--line)}
.experience .chapter h3{margin-bottom:4px}
.experience .chapter h3 a{color:inherit;text-decoration:underline;text-decoration-color:#b4b9ae;text-underline-offset:3px;text-decoration-thickness:1px}
.experience .chapter p{font-size:14px;color:var(--body-ink)}
/* Selected work as a feed of posts */
.feed{border-top:1px solid var(--line)}
.feed-post{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.feed-body{min-width:0}
.feed-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.feed-letter{display:grid;place-items:center;background:var(--tint);color:var(--mark);font-size:15px;font-weight:600;line-height:1}
.feed-head{margin:0 0 3px;font-size:14px;color:var(--quiet);line-height:1.5}
.feed-head strong{color:var(--ink);font-weight:500}
.feed-text{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--body-ink)}
.feed-action{display:inline-block;margin-top:10px;font-size:14px;color:var(--quiet);transition:color .18s}
.feed-action:hover{color:var(--ink)}
@media(max-width:600px){.feed-post{grid-template-columns:32px 1fr;gap:10px}.feed-avatar{width:32px;height:32px}.feed-text{font-size:14px}}
/* 9:16 image carousel inside each post, 300px tall at most */
.feed-carousel{position:relative;margin-right:-24px}
.feed-track{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding-right:24px;outline:none}
.feed-track::-webkit-scrollbar{display:none}
.feed-track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
.feed-track.is-dragging{scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.feed-slide{flex:0 0 auto;height:300px;aspect-ratio:9/16;margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--wash);scroll-snap-align:start}
.feed-slide img,.feed-slide video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
.feed-nav{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:18px;line-height:1;display:grid;place-items:center;box-shadow:0 6px 16px -8px #25272340;opacity:0;transition:opacity .2s;z-index:2}
.feed-prev{left:8px}.feed-next{right:32px}
.feed-carousel:hover .feed-nav:not([disabled]),.feed-nav:focus-visible{opacity:1}
.feed-nav[disabled]{opacity:0!important;pointer-events:none}
@media(max-width:600px){.feed-slide{height:260px}.feed-nav{display:none}}
@media(hover:none){.feed-nav{display:none}}
.intro-name{font-weight:600;color:var(--ink)}

[data-case-study]{cursor:pointer}
[data-case-study]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
/* Carousel rhythm: tall 9:16, then square 1:1, alternating */
.feed-slide:nth-child(even){aspect-ratio:1/1}
.feed-slide.feed-slide--tall{aspect-ratio:9/16}
.feed-slide.feed-slide--square{aspect-ratio:1/1}

/* ---------- Stack: numbered rows of tools (homepage) ---------- */
.stack{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stack-row{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center;padding:14px 18px}
.stack-row+.stack-row{border-top:1px solid var(--line)}
.stack-label{font-size:14px;color:var(--quiet)}
.stack-label b{font-weight:500;color:var(--plane);margin-right:10px;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{font-size:14px;line-height:1;padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--paper);transition:background-color .18s,border-color .18s}
.chips li:hover{background:var(--wash);border-color:color-mix(in srgb,var(--plane) 28%,var(--line))}
/* ---------- Socials: a two-column bordered list ---------- */
.list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:14px;overflow:hidden}
.list-cell{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-top:1px solid var(--line);color:var(--ink);transition:background-color .18s}
.list-cell:nth-child(-n+2){border-top:0}
.list-cell:nth-child(odd){border-right:1px solid var(--line)}
.list-cell strong{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.list-sub{display:block;font-size:13px;color:var(--quiet)}
.list-arrow{display:grid;place-items:center;color:var(--quiet);transition:color .18s,transform .18s}
.list-cell:hover{background:var(--wash)}
.list-cell:hover .list-arrow{color:var(--plane);transform:translate(2px,-2px)}
.list-cell[data-copied] .list-sub{color:var(--plane)}
@media(max-width:600px){
  .stack-row{grid-template-columns:1fr;gap:10px;padding:14px 16px}
  .list-grid{grid-template-columns:1fr}
  .list-cell:nth-child(odd){border-right:0}
  .list-cell:nth-child(2){border-top:1px solid var(--line)}
}
/* ---------- Outro + footer sky (homepage) ---------- */
.outro{margin:76px 0 0;text-align:center}
.outro-quote{margin:0 0 14px;font-size:18px;font-style:italic;letter-spacing:-.2px;color:var(--ink)}
.outro-status{display:inline-flex;align-items:center;gap:10px;margin:0;font-size:13px;color:var(--quiet)}
.outro-status strong{font-weight:500;color:var(--ink)}
.sky-strip{position:relative;height:220px;overflow:hidden}
.sky-strip canvas{position:absolute;inset:0;display:block}
.say-hi{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border:1px solid transparent;border-radius:999px;font-size:13px;letter-spacing:.02em;color:var(--ink);white-space:nowrap;transition:transform .2s}
.say-hi:hover{transform:translate(-50%,calc(-50% - 2px))}
.say-hi[data-copied] [data-copy-label]{color:var(--plane)}
@media(max-width:600px){.outro{margin-top:56px}.outro-quote{font-size:17px}.sky-strip{height:180px}}
/* Socials: a small grey app-style logo beside each name */
.list-main{display:flex;align-items:center;gap:14px;min-width:0}
.list-icon{display:grid;place-items:center;flex:none;width:24px;color:var(--quiet);transition:color .18s}
.list-cell:hover .list-icon{color:var(--ink)}
.list-icon svg{width:22px;height:22px}
/* Keep reading: the Socials grid, with project logos and an Ask card */
.list-logo{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--paper)}
.list-cell .rc-face.list-face{width:32px;height:32px}
.list-cell .rc-face.list-face i{top:40%;width:2.8px;height:4.2px}
button.list-cell{width:100%;margin:0;border:0;border-top:1px solid var(--line);background:transparent;font:inherit;text-align:left;cursor:pointer}
.cs-next .list-grid{margin-top:4px}
/* Awesome: the photo is a tall portrait; centre the frame on the cup so the logo shows */
.project-visual--awesome img{object-position:center 46%}
/* My thoughts: one article per row (titles are long) */
.list-grid--rows{grid-template-columns:1fr}
.list-grid--rows .list-cell{border-right:0}
.list-grid--rows .list-cell:nth-child(2){border-top:1px solid var(--line)}
.list-grid--rows .list-cell strong{font-size:15px;line-height:1.4}
/* Work page: each project gets its round logo on the left, like the homepage feed */
.project-entry{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px}
.project-entry>*{grid-column:2}
.project-entry>.project-avatar{grid-column:1;grid-row:1 / span 2;margin-top:-6px}
@media(max-width:600px){.project-entry{grid-template-columns:32px minmax(0,1fr);column-gap:10px}.project-entry>.project-avatar{width:32px;height:32px}}
.project-visual img[src*="flekh-cover"]{object-position:left top}
/* Contact: room between each section heading and what follows */
body.notebook-legacy .section>h2{margin-bottom:20px}
/* Contact form (Netlify Forms) */
.cf-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-status{margin:12px 0 0;font-size:14px;color:var(--quiet)}
.cf-status:empty{display:none}
.cf-thanks{padding:22px 24px;border:1px solid var(--line);border-radius:14px;background:var(--wash)}
.cf-thanks strong{display:block;font-weight:500;color:var(--ink);margin-bottom:4px}
.cf-thanks p{margin:0;color:var(--quiet);font-size:14px}
/* Away from the desk: Neera Food Lab card */
.side-card{padding:20px 22px;border:1px solid var(--line);border-radius:14px}
.side-head{display:flex;align-items:center;gap:12px}
.side-head strong{display:block;font-size:15px;font-weight:500;color:var(--ink)}
.side-head span{display:block;font-size:13px;color:var(--quiet)}
.side-text{margin:14px 0 6px;font-size:15px;line-height:1.6}
.side-stats{margin:0;font-size:14px;color:var(--ink)}
.side-stats span{margin:0 6px;color:var(--quiet)}
.side-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.side-links a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink);transition:background-color .18s,border-color .18s}
.side-links a svg{color:var(--quiet)}
.side-links a:hover{background:var(--wash);border-color:color-mix(in srgb,var(--plane) 28%,var(--line))}
.side-links a:hover svg{color:var(--plane)}
/* Feed "Read the case study": body size, medium weight; an underline draws in from the left on hover */
body.notebook :is(.feed-post .feed-action,.project-entry .inline-link){text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;line-height:1.5;color:var(--ink);padding-bottom:2px;background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat;transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .18s}
body.notebook :is(.feed-post .feed-action,.project-entry .inline-link):is(:hover,:focus-visible){background-size:100% 1px}
body.notebook :is(.feed-post .feed-action,.project-entry .inline-link) span{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
body.notebook :is(.feed-post .feed-action,.project-entry .inline-link):hover span{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){body.notebook :is(.feed-post .feed-action,.project-entry .inline-link),body.notebook :is(.feed-post .feed-action,.project-entry .inline-link) span{transition:none}}
/* ---------- Links, site-wide: the underline draws in from the left on hover ----------
   Links inside text keep a faint line at rest so they still read as links; standalone links
   ("See all", "Read the case study", footer, jump-to) start bare. Buttons, pills, cards keep their own. */
body.notebook :is(main :is(p,li,h3,dd) a:not([class]), .section-title>a, .feed-post .feed-action, .project-entry .inline-link, .notebook-footer nav a, .page-signoff a, .cs-contents a, .intro a){
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-position:left 100%;background-repeat:no-repeat;background-size:0 1px;
  padding-bottom:1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .35s cubic-bezier(.2,.7,.2,1),color .18s;
}
body.notebook:not(#_) :is(main :is(p,li,h3,dd) a:not([class]), .intro a, .page-signoff a){
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--ink) 14%,transparent));
  background-size:0 1px,100% 1px;
}
body.notebook :is(main :is(p,li,h3,dd) a:not([class]), .section-title>a, .feed-post .feed-action, .project-entry .inline-link, .notebook-footer nav a, .page-signoff a, .cs-contents a, .intro a):is(:hover,:focus-visible){background-size:100% 1px}
body.notebook:not(#_) :is(main :is(p,li,h3,dd) a:not([class]), .intro a, .page-signoff a):is(:hover,:focus-visible){background-size:100% 1px,100% 1px}
body.notebook .cs-contents a:hover{text-decoration:none}
/* pills and grids that happen to be plain links keep their own look */
body.notebook :is(.social-row, .chips, .side-links, .rahul-chat, .cmdk) a{background-image:none}
@media(prefers-reduced-motion:reduce){body.notebook a{transition:color .18s}}
/* links that start with a small icon: the line sits under the words only */
body.notebook:not(#_) .intro a:has(.inline-icon){background-position:1.45em 100%;background-size:0 1px,calc(100% - 1.45em) 1px}
body.notebook:not(#_) .intro a:has(.inline-icon):is(:hover,:focus-visible){background-size:calc(100% - 1.45em) 1px,calc(100% - 1.45em) 1px}
/* Outro: one clear next step under the quote */
.outro-cta{display:inline-flex;align-items:center;gap:8px;margin:2px 0 18px;padding:11px 20px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;line-height:1;transition:background-color .2s,color .2s,transform .2s}
body.notebook a.outro-cta:hover{background:var(--plane);border-color:var(--plane);color:#fff;transform:translateY(-1px)}
.outro-cta span{transition:transform .25s}
.outro-cta:hover span{transform:translateX(3px)}
.outro .outro-status{display:flex;justify-content:center}
@media(prefers-reduced-motion:reduce){.outro-cta,.outro-cta span{transition:none}}
/* Neera links: icons centred on the text, one optical size */
.side-links a{line-height:1.2;padding:8px 14px 8px 12px}
.side-links a svg{display:block;flex:none;width:16px;height:16px}
.say-hi span{transition:transform .25s}
.say-hi:hover span{transform:translateY(-2px)}
/* Case-study "In short" items: no resting lines; the hovered item underlines along its own text lines */
body.notebook:not(#_):not(#__) .cs-checks a{background-image:none;padding-bottom:0}
/* the name uses Pacifico, which has one weight; never let a browser fake a bold */
.notebook-header .site-name{font-weight:400;font-synthesis:none}
/* Stack chips: tap for a thumbs-up */
.chips li{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.chips li.is-tapped{animation:chip-tap .22s ease}
@keyframes chip-tap{50%{transform:scale(.94)}}
.chip-cheer{position:fixed;z-index:120;pointer-events:none;font-size:20px;line-height:1;transform:translate(-50%,-50%);animation:chip-cheer .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes chip-cheer{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  15%{opacity:1;transform:translate(-50%,calc(-50% - 8px)) scale(1.1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - var(--rise))) rotate(var(--rot)) scale(1)}
}
.chip-cheer.is-still{animation:chip-cheer-still .6s ease forwards}
@keyframes chip-cheer-still{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.chips li.is-tapped{animation:none}}
/* Theme switch: let the circle reveal do the work, without the page's own colour fades */
html.theme-wipe::view-transition-old(root),html.theme-wipe::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theme-wipe *,html.theme-wipe *::before,html.theme-wipe *::after{transition:none!important}
/* Work page: the same line as the homepage feed (logo, then Name · kind of work) */
.project-entry .project-meta{font-size:14px;line-height:1.5;color:var(--quiet);margin:0 0 6px}
.project-entry .project-meta strong{font-weight:500;color:var(--ink)}
.project-entry .project-meta span{margin:0 4px}
.project-entry>.project-avatar{margin-top:0;align-self:start}
/* Work page images: a 16:9 frame that scales with the column (no fixed height cropping the sides on
   phones), with a thin outline like the case-study images */
.project-visual{max-height:none;border:1px solid var(--line);border-radius:12px}
.project-visual img,.project-visual img[src]{height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.project-visual img[src*="flekh-cover"]{object-fit:contain;object-position:center}
/* the link is a grid item, which would stretch it (and its underline) across the column */
.project-entry .inline-link{justify-self:start;width:fit-content}
/* Things I build: an index of rows. A halftone dot avatar in the project's colours, the name with a small
   code line, two lines of description, and GitHub on the right; the whole row is the link */
.build-list{border-top:1px solid var(--line)}
.build-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 6px;border-bottom:1px solid var(--line);color:var(--body-ink);transition:background-color .2s}
body.notebook a.build-row{background-image:none;text-decoration:none}
.build-row:focus-visible{outline:2px solid var(--plane);outline-offset:2px}
.dot-avatar{display:block;width:44px;height:44px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.build-row:hover .dot-avatar{transform:rotate(-14deg) scale(1.06)}
.build-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.build-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.build-top strong{font-size:16px;font-weight:500;color:var(--ink)}
.build-top code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--quiet);letter-spacing:.01em}
.build-text{font-size:14px;line-height:1.55;color:var(--body-ink);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.build-go{font-size:13px;font-weight:500;color:var(--quiet);white-space:nowrap;padding-bottom:2px;background:linear-gradient(currentColor,currentColor) left bottom / 0 1px no-repeat;transition:color .2s,background-size .35s cubic-bezier(.2,.7,.2,1)}
/* hovering a row only draws the underline under its GitHub link, like the site's other links */
.build-row:is(:hover,:focus-visible) .build-go{background-size:100% 1px}
.build-go span{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.build-row:hover .build-go{color:var(--plane)}
.build-row:hover .build-go span{transform:translate(2px,-2px)}
@media(max-width:600px){.build-row{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 2px}.dot-avatar{width:40px;height:40px}.build-go{grid-column:2;justify-self:start}}
@media(prefers-reduced-motion:reduce){.dot-avatar,.build-go span{transition:none}.build-row:hover .dot-avatar{transform:none}}
/* the kicker sits tight under the heading as its subheading; the list then starts 22px below, like every section */
.builds-kicker{margin:-16px 0 22px;font-size:15px;line-height:1.5;color:var(--quiet)}
@media(max-width:600px){.builds-kicker{font-size:14px}}
.build-text,.builds-kicker{text-wrap:pretty}
.list-cell:hover .list-arrow--down{transform:translateY(2px)}