:root{--ink:#242424;--muted:#6b6b6b;--paper:#fff;--line:#e8e8e8;--surface:#f7f7f7;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}main{width:720px;margin:100px auto 80px;position:relative}h1,h2,h3,p{margin:0;font-weight:400}h1{font-size:18px;line-height:26px;font-weight:500}header p{font-size:16px;line-height:26px;color:var(--muted);margin-top:16px}section{margin-top:48px;width:480px}h2{font-size:14px;line-height:22px;color:var(--muted)}.experience h2{margin-bottom:16px}.projects h2{margin-bottom:24px}.item{position:relative}.experience .item+.item{margin-top:16px}.projects .item+.item{margin-top:24px}summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:2px;width:360px;font-size:16px;line-height:24px;outline-offset:6px}summary::-webkit-details-marker{display:none}summary::marker{content:''}small{font-size:14px;line-height:22px;color:var(--muted)}.role summary{flex-direction:row;align-items:baseline;gap:0;width:480px;line-height:26px}.role summary span{width:180px;flex-shrink:0}.role small{line-height:26px}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:4px}:focus-visible{outline:2px solid #6b6b6b;border-radius:2px}.preview{display:flex;flex-direction:column;gap:16px;position:absolute;left:460px;bottom:-40px;width:380px;z-index:2;opacity:0;transform:translateY(5px);transition:opacity 150ms ease,transform 180ms ease;background:var(--paper);pointer-events:none;visibility:hidden}.item[data-active] .preview{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible}.preview::before{content:'';position:absolute;right:100%;top:0;bottom:0;width:105px}.copy{display:flex;flex-direction:column;gap:8px;background:var(--paper)}.copy h3{font-size:16px;line-height:24px}.copy p,.copy a{font-size:14px;line-height:22px;color:var(--muted)}.copy a{color:var(--ink)}.cover{display:block;width:380px;height:240px;object-fit:cover;border-radius:10px}.app-image{width:380px;height:280px;padding-top:28px;display:flex;justify-content:center;align-items:center;background:var(--surface);border-radius:10px;overflow:hidden}.app-image img{width:300px;height:256px;object-fit:contain;border-radius:6px;box-shadow:0 12px 28px #00000012}footer{display:flex;gap:24px;margin-top:48px;color:var(--muted);font-size:14px;line-height:22px}
@media(max-width:1199px){main{margin-left:12vw;margin-right:0;width:76vw}.preview{left:370px;width:320px}.cover,.app-image{width:320px}.role summary,section{width:360px}.role summary span{width:150px}.preview::before{width:15px}}
@media(max-width:850px){main{width:auto;margin:64px 28px}header p{max-width:480px}section,.role summary,summary{width:100%}.role summary span{width:46%}.preview{position:relative;left:auto;bottom:auto;width:100%;display:none;transform:none;padding-top:20px;padding-bottom:8px}.item[data-active] .preview{display:flex}.preview::before{display:none}.cover,.app-image{width:100%;max-width:420px}.copy{max-width:420px}footer{flex-wrap:wrap;gap:24px}}
@media(prefers-reduced-motion:reduce){.preview{transition:none;transform:none}}

.project-tabs{position:relative;display:flex;gap:24px;margin-bottom:24px;width:max-content;max-width:100%}
.project-tabs button{appearance:none;border:0;background:none;padding:0 0 8px;color:var(--muted);cursor:pointer;font-family:var(--type-labels-font);font-size:var(--type-labels-size);font-weight:var(--type-labels-weight);line-height:var(--type-labels-line);letter-spacing:var(--type-labels-tracking);transition:color 160ms ease}
.project-tabs button[aria-selected="true"],.project-tabs button:hover{color:var(--ink)}
.tab-underline{position:absolute;left:0;bottom:0;height:1px;background:var(--ink);width:var(--tab-width,100px);transform:translateX(var(--tab-left,0px));transition:transform 220ms ease,width 220ms ease;pointer-events:none}
[role="tabpanel"][hidden]{display:none}
/* Explorations break out of the text column and run edge to edge. */
#explorations-panel{--g:6px;width:var(--page-width,100%);margin-left:calc(-1 * var(--page-left,0px));padding:0 var(--g);container-type:inline-size}
.bento-grid{--u:calc((100cqw - 5 * var(--g)) / 6);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:calc(((2 * var(--u) + var(--g)) * .625 - var(--g)) / 2);grid-auto-flow:row dense;gap:var(--g)}
.bento-card{position:relative;margin:0;overflow:hidden;background:var(--surface)}
.t-xl{grid-column:span 4;grid-row:span 4}
.t-l{grid-column:span 2;grid-row:span 2}
.t-phone{grid-column:span 1;grid-row:span 3}
.t-xl.flip{grid-column:3/span 4}
.t-l.flip-side{grid-column:1/span 2}
.bento-card :is(img,video){display:block;width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(.22,1,.36,1)}
.t-phone img{object-position:top}
.bento-app{background:#eeedf2;padding:8%}
.bento-app img{object-fit:contain}
.bento-start video{object-position:12% center}
@media(max-width:850px){.bento-grid{--u:calc((100cqw - var(--g)) / 2);grid-template-columns:repeat(2,1fr);grid-auto-rows:calc(var(--u) * .625)}.t-xl,.t-xl.flip{grid-column:span 2;grid-row:span 2}.t-l,.t-l.flip-side{grid-column:span 1;grid-row:span 1}}

@media(prefers-reduced-motion:reduce){.tab-underline,.bento-card :is(img,video){transition:none}}

/* Keep each hit area still while its content gently follows the hover. */
.item summary > span,.item summary > small{transition:transform 300ms cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine){
  .item:has(summary:hover) summary > span,.item:has(summary:hover) summary > small,
  .item:focus-within summary > span,.item:focus-within summary > small{transform:translateX(4px)}
  .bento-card:hover :is(img,video){transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
  .item summary > span,.item summary > small,.bento-card :is(img,video){transition:none!important;transform:none!important}
}

/* Keep the heading hover target tight to its text. */
.item summary > span{align-self:flex-start}

/* Headings signal hover with the nudge alone, no underline. */
.item summary a:hover{text-decoration:none}

/* Only the text opens a row; once open, the row widens again so the pointer can travel to its preview. */
@media(hover:hover) and (min-width:851px){
  .item,.item>summary{width:fit-content}
  .item[data-active]{width:auto}
}