:root{--bg:#f5f5f3;--ink:#17160f;--sub:#7b7566;--accent:#bc2a1f;--line:#c9c2ab;--body:#2c2b23;--body-mono:#4a4738}.dark{--bg:#121110;--ink:#e9e7e2;--sub:#9a9384;--accent:#e2793f;--line:#2e2b24;--body:#d8d2c4;--body-mono:#b8b0a0}html{scroll-behavior:smooth}.portfolio{background:var(--bg);color:var(--ink);font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.portfolio .mono{font-family:ui-monospace,SF Mono,JetBrains Mono,Menlo,Consolas,monospace}.portfolio a{color:inherit}.portfolio a,.portfolio button{z-index:2;position:relative}.portfolio .sheet{border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--bg);max-width:1280px;margin:0 auto}.portfolio nav{letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--ink);justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,2.5rem);font-size:.68rem;display:flex}.portfolio nav .right{align-items:center;gap:.85rem;display:flex}.portfolio nav .id{flex-direction:column;line-height:1.15;display:flex}.portfolio nav .id-name{font-family:var(--font-serif), serif;letter-spacing:0;text-transform:none;color:var(--ink);font-size:1.15rem;font-style:italic;font-weight:600}.portfolio nav .id-role{letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-top:.05rem;font-family:ui-monospace,monospace;font-size:.58rem}.portfolio nav .status{color:var(--accent)}.portfolio nav .status:before{content:"◆ ";animation:2.4s ease-in-out infinite pulse;display:inline-block}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.portfolio .hero{background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);border-bottom:1.5px solid var(--ink);background-size:24px 24px;flex-direction:column;justify-content:flex-end;min-height:92vh;display:flex;position:relative;overflow:hidden}.portfolio .corner{z-index:2;width:18px;height:18px;position:absolute}.portfolio .corner:before,.portfolio .corner:after{content:"";background:#e9e7e2;position:absolute}.portfolio .corner:before{width:100%;height:1.5px;top:0}.portfolio .corner:after{width:1.5px;height:100%;left:0}.portfolio .c-tl{top:14px;left:clamp(1rem,4vw,2.5rem)}.portfolio .c-tr{top:14px;right:clamp(1rem,4vw,2.5rem);transform:scaleX(-1)}.portfolio .hero .tag{z-index:2;color:#d8d2c4;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 1px 2px #000000d9,0 1px 6px #00000080;font-size:.64rem;position:absolute}.portfolio .hero .tl-label{top:14px;left:calc(clamp(1rem,4vw,2.5rem) + 28px)}.portfolio .hero .tr-label{text-align:right;top:14px;right:calc(clamp(1rem,4vw,2.5rem) + 28px)}.portfolio .hero-bg{z-index:0;background-position:55% 40%;background-repeat:no-repeat;background-size:cover;position:absolute;inset:0}.portfolio .hero-scrim{z-index:1;background:linear-gradient(#17160f59 0%,#17160f14 55%,#17160f8c 100%);position:absolute;inset:0}.portfolio .hero-copy{background:linear-gradient(0deg, var(--bg) 40%, color-mix(in srgb, var(--bg) 60%, transparent) 75%, transparent 100%);padding:3rem clamp(1rem,4vw,2.5rem) 2.25rem;position:relative}.portfolio h1{letter-spacing:-.02em;max-width:17ch;margin:0 0 1.5rem;font-size:clamp(2.8rem,10.5vw,10rem);font-weight:800;line-height:.94}.portfolio h1 u{border-bottom:4px solid var(--accent);text-decoration:none}.portfolio .hero-bottom{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;display:flex}.portfolio .hero-eyebrow{max-width:46ch;color:var(--body);font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.55}.portfolio .hero-cta{flex-wrap:wrap;gap:.6rem;display:flex}.portfolio .btn{letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;background:0 0;padding:.8rem 1.15rem;font-family:inherit;font-size:.72rem;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .15s;display:inline-block}.portfolio .btn.solid{background:var(--ink);color:var(--bg)}.portfolio .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);box-shadow:0 6px 20px -6px color-mix(in srgb, var(--accent) 55%, transparent);transform:translateY(-2px)}.portfolio .btn:active{transform:translateY(0)}.portfolio .strip{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);letter-spacing:.08em;text-transform:uppercase;color:var(--sub);white-space:nowrap;background-image:radial-gradient(#17160f1f 1px,#0000 1.3px);background-size:7px 7px;gap:1.75rem;padding:.55rem clamp(1rem,4vw,2.5rem);font-size:.68rem;display:flex;overflow-x:auto}.dark .portfolio .strip{background-image:radial-gradient(#f2efe61a 1px,#0000 1.3px)}.portfolio .strip span{color:var(--ink);font-weight:700}.portfolio section{border-bottom:1px solid var(--line);padding:clamp(2.75rem,5.5vw,4.5rem) clamp(1rem,4vw,2.5rem);position:relative}.portfolio .margin-num{-webkit-text-stroke:1.5px var(--sub);color:#0000;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;font-size:clamp(7rem,11vw,12rem);font-weight:800;line-height:1;display:none;position:absolute;top:50%;right:clamp(1rem,4vw,2.5rem);transform:translateY(-50%)}@media (min-width:1024px){.portfolio .margin-num{display:block}}.portfolio .section-meta{grid-template-columns:1fr auto;grid-template-areas:"tag num""head head";align-items:baseline;column-gap:.75rem;margin-bottom:2.25rem;display:grid}.portfolio .section-meta .section-tag{grid-area:tag;margin-bottom:0}.portfolio .section-meta h2{grid-area:head}.portfolio .section-meta .num{color:var(--accent);grid-area:num;font-size:.68rem;font-weight:700}@media (min-width:640px){.portfolio .section-meta{grid-template-areas:"tag tag""head num"}}.portfolio .section-tag{letter-spacing:.06em;text-transform:uppercase;color:var(--sub);margin-bottom:.6rem;font-family:ui-monospace,monospace;font-size:.66rem}.portfolio h2{letter-spacing:-.01em;text-transform:uppercase;margin:0;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800}.portfolio .about{z-index:1;max-width:64ch;position:relative}.portfolio .about p{color:var(--body);margin:0 0 1.2rem;font-size:clamp(1rem,1.7vw,1.3rem);line-height:1.7}.portfolio .about p:first-child{font-weight:600}.portfolio .about .accent{color:var(--accent);font-weight:700}.portfolio .philosophy{z-index:1;max-width:64ch;position:relative}.portfolio .philosophy p{margin:0 0 1.2rem;font-size:clamp(1rem,1.6vw,1.25rem);line-height:1.65}.portfolio .philosophy .accent{color:var(--accent);font-weight:400}.portfolio .bento{border:1px dashed var(--line);grid-template-columns:repeat(6,1fr);display:grid;position:relative}.portfolio .bento-mark{pointer-events:none;z-index:3;background:linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 100% no-repeat;width:9px;height:9px;position:absolute;transform:translate(-50%,-50%)}.portfolio .bento-mark.mid{display:none}@media (min-width:720px){.portfolio .bento-mark.mid{display:block}}.portfolio .bento-card{border-right:1px dashed var(--line);border-bottom:1px dashed var(--line);color:inherit;grid-column:span 6;padding:1.5rem;text-decoration:none;transition:background .2s,border-color .2s,opacity .25s;display:block;position:relative}.portfolio .bento-card:hover{background:var(--bg);border-color:var(--accent);z-index:2}.portfolio .bento:hover .bento-card:not(:hover){opacity:.58}@media (min-width:720px){.portfolio .bento-card.big{grid-column:span 4}.portfolio .bento-card.small{grid-column:span 2}.portfolio .bento-card.half{grid-column:span 3}}.portfolio .work-id{color:var(--sub);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem;font-size:.64rem}.portfolio .work-name{margin:0 0 .5rem;font-size:1.3rem;font-weight:800}.portfolio .work-desc{color:var(--body-mono);margin:0 0 .85rem;font-family:ui-monospace,monospace;font-size:.8rem;line-height:1.6}.portfolio .work-tags{flex-wrap:wrap;gap:.4rem;display:flex}.portfolio .work-tags span{border:1px solid var(--ink);text-transform:uppercase;padding:.2rem .4rem;font-family:ui-monospace,monospace;font-size:.6rem}.portfolio .work-status{color:var(--sub);text-transform:uppercase;font-family:ui-monospace,monospace;font-size:.6rem;position:absolute;top:1.25rem;right:1.25rem}.portfolio .work-more{color:var(--accent);text-transform:uppercase;letter-spacing:.05em;opacity:0;margin-top:.85rem;font-family:ui-monospace,monospace;font-size:.62rem;transition:opacity .18s,transform .18s;transform:translate(-4px)}.portfolio .bento-card:hover .work-more{opacity:1;transform:translate(0)}.portfolio .cloud{flex-wrap:wrap;gap:.5rem;display:flex}.portfolio .cloud span{border:1.5px solid var(--ink);padding:.55rem .85rem;font-family:ui-monospace,monospace;font-size:.82rem;transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s;display:inline-block}.portfolio .cloud span.hi{background:var(--ink);color:var(--bg)}.portfolio .cloud span:hover{background:var(--accent);border-color:var(--accent);color:var(--bg);box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);transform:translateY(-2px)}.portfolio .contact-banner{background-image:radial-gradient(#17160f24 1.4px,#0000 1.6px);background-size:9px 9px;padding:clamp(3rem,7vw,6rem) clamp(1rem,4vw,2.5rem)}.dark .portfolio .contact-banner{background-image:radial-gradient(#f2efe61f 1.4px,#0000 1.6px)}.portfolio .contact-banner h2{text-transform:uppercase;margin:0 0 1.5rem;font-size:clamp(2rem,6.5vw,4.5rem)}.portfolio .contact-banner p{max-width:48ch;color:var(--body);background:var(--bg);margin:0 0 1.75rem;font-family:ui-monospace,monospace;font-size:.85rem;line-height:1.6;display:inline-block}.portfolio .contact-cta{flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem;display:flex}.portfolio .contact-links{text-transform:uppercase;flex-wrap:wrap;align-items:center;gap:1.5rem;font-family:ui-monospace,monospace;font-size:.78rem;display:flex}.portfolio .contact-links a{color:var(--sub);background:var(--bg);align-items:center;gap:.4rem;text-decoration:none;transition:color .15s;display:inline-flex}.portfolio .contact-links a:hover{color:var(--accent)}.portfolio .contact-links svg{width:14px;height:14px}.portfolio footer{border-top:1.5px solid var(--ink);letter-spacing:.05em;color:var(--sub);text-transform:uppercase;justify-content:space-between;padding:1rem clamp(1rem,4vw,2.5rem);font-family:ui-monospace,monospace;font-size:.62rem;display:flex}.portfolio .work-back{color:var(--sub);font-size:.68rem;text-decoration:none}.portfolio .work-back:hover{color:var(--accent)}.portfolio .work-head{border-bottom:1.5px solid var(--ink);background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size:24px 24px;padding:3.5rem clamp(1rem,4vw,2.5rem) 2.5rem;position:relative}.portfolio .work-head .tag{color:var(--sub);text-transform:uppercase;letter-spacing:.05em;font-size:.64rem;position:absolute}.portfolio .work-head .tl-label{top:1rem;left:clamp(1rem,4vw,2.5rem)}.portfolio .work-head .tr-label{text-align:right;top:1rem;right:clamp(1rem,4vw,2.5rem)}.portfolio .work-head h1{letter-spacing:-.02em;max-width:32ch;margin:2.5rem 0 1rem;font-size:clamp(2rem,6vw,4.2rem);font-weight:800;line-height:1.02}.portfolio .work-head p{max-width:60ch;color:var(--body);background:var(--bg);margin:0;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.7;display:inline-block}.portfolio .work-head-meta{flex-wrap:wrap;gap:.4rem;margin-top:1.5rem;display:flex}.portfolio .work-head-meta span{border:1px solid var(--ink);text-transform:uppercase;padding:.2rem .4rem;font-family:ui-monospace,monospace;font-size:.6rem}.portfolio .case-section{float:none;max-width:74ch;margin:0 auto}.portfolio .case-copy{z-index:1;max-width:68ch;position:relative}.portfolio .case-copy h3{color:var(--ink);margin:1.85rem 0 .85rem;font-size:1.05rem;font-weight:700}.portfolio .case-copy p{color:var(--body);margin:0 0 1.2rem;font-size:1.05rem;line-height:1.75}.portfolio .case-copy code{background:var(--line);color:var(--ink);padding:.1rem .35rem;font-family:ui-monospace,monospace;font-size:.85em}.portfolio .case-list{margin:0;padding:0;list-style:none}.portfolio .case-list li{color:var(--body);gap:.6rem;margin-bottom:.55rem;font-size:1rem;line-height:1.7;display:flex}.portfolio .case-list li:before{content:"—";color:var(--accent);flex-shrink:0}.portfolio .case-list.mono li{color:var(--body-mono);font-family:ui-monospace,monospace;font-size:.88rem}.portfolio .oss-card{border:1px dashed var(--line);grid-template-columns:1.1fr 1fr;gap:1.75rem;padding:1.75rem;display:grid;position:relative}@media (max-width:720px){.portfolio .oss-card{grid-template-columns:1fr}}.portfolio .oss-card p{color:var(--body);margin:0 0 1rem;font-size:.95rem;line-height:1.65}.portfolio .oss-code{background:var(--ink);color:var(--bg);align-self:start;padding:1.1rem;font-family:ui-monospace,monospace;font-size:.8rem;line-height:1.7}.portfolio .oss-code .c1{color:var(--sub)}.portfolio .oss-code .c2{color:var(--accent)}.portfolio .notes-list{border-top:1px dashed var(--line)}.portfolio .notes-row{border-bottom:1px dashed var(--line);align-items:baseline;gap:1rem;padding:1.1rem 0;display:flex}.portfolio .notes-row .type{color:var(--accent);border:1px solid var(--accent);white-space:nowrap;padding:.15rem .4rem;font-family:ui-monospace,monospace;font-size:.6rem}.portfolio .notes-row .name{flex:1;font-size:1rem;font-weight:700}.portfolio .notes-row .status{color:var(--sub);text-transform:uppercase;white-space:nowrap;font-family:ui-monospace,monospace;font-size:.62rem}.portfolio .work-footer-nav{border-bottom:1.5px solid var(--ink);justify-content:space-between;align-items:center;padding:2.5rem clamp(1rem,4vw,2.5rem);font-family:ui-monospace,monospace;font-size:.8rem;display:flex}.portfolio .work-footer-nav a{color:var(--ink);font-weight:700;text-decoration:none}.portfolio .work-footer-nav a:hover{color:var(--accent)}.toc-backdrop{z-index:40;background:color-mix(in srgb, var(--bg) 55%, transparent);cursor:pointer;position:fixed;inset:0;transform:translateZ(0)}.toc-pill-wrap{z-index:50;pointer-events:none;justify-content:center;display:flex;position:fixed;bottom:1.5rem;left:0;right:0;transform:translateZ(0)}.toc-pill-wrap>*{pointer-events:auto}@media (min-width:640px){.toc-pill-wrap{justify-content:flex-start;padding-left:1.5rem}}.toc-pill{background:var(--ink);color:var(--bg);flex-direction:column;justify-content:flex-end;max-width:min(320px,100vw - 3rem);font-family:ui-monospace,monospace;font-size:.72rem;display:flex;overflow:hidden;box-shadow:0 14px 34px -12px #00000073}.toc-list-inner{pointer-events:none}.toc-pill.expanded .toc-list-inner{pointer-events:auto}.toc-list{opacity:0;margin:0;padding:.5rem 0;list-style:none;transition:opacity .16s}.toc-pill.expanded .toc-list{opacity:1;transition-delay:.1s}.toc-list li button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;color:color-mix(in srgb, var(--bg) 62%, var(--ink));white-space:nowrap;align-items:center;gap:.55rem;padding:.55rem 1.1rem;display:flex}.toc-list li button:before{content:"";background:color-mix(in srgb, var(--bg) 30%, var(--ink));border-radius:50%;flex-shrink:0;width:5px;height:5px}.toc-list li button.active{color:var(--bg);font-weight:700}.toc-list li button.active:before{background:var(--accent)}.toc-current{all:unset;box-sizing:border-box;cursor:pointer;border-top:1px solid #0000;align-items:center;gap:.7rem;width:100%;padding:.7rem .8rem .7rem 1.1rem;transition:border-color .16s;display:flex}.toc-pill.expanded .toc-current{border-top-color:color-mix(in srgb, var(--bg) 12%, var(--ink));transition-delay:.1s}.toc-dot{background:var(--accent);border-radius:50%;flex-shrink:0;width:7px;height:7px}.toc-label{text-overflow:ellipsis;text-transform:uppercase;letter-spacing:.04em;flex:1;font-size:.68rem;overflow:hidden}.toc-ring-track{fill:none;stroke:color-mix(in srgb, var(--bg) 28%, var(--ink));stroke-width:1.5px}.toc-ring-fill{fill:none;stroke:var(--bg);stroke-width:1.5px;stroke-linecap:round}@media (max-width:640px){.toc-pill{font-size:.64rem}.toc-list li button{gap:.45rem;padding:.45rem .9rem}.toc-current{gap:.55rem;padding:.55rem .65rem .55rem .9rem}.toc-label{font-size:.6rem}.toc-dot{width:6px;height:6px}.toc-ring{width:15px;height:15px}}@media (prefers-reduced-motion:reduce){.portfolio *{animation:none!important}}