/* Figma 167:187. Content is measured in normal flow so CMS text can grow. */
.about-page #about-content{margin:7.8125vw 10.416667vw 0}
.about-profile,.experience{display:grid;grid-template-columns:minmax(0,900fr) minmax(0,541fr);column-gap:4.114583vw;align-items:start}
.about-profile{margin-bottom:120px;min-height:420px}
.about-portrait{width:min(360px,100%);aspect-ratio:1;object-fit:cover;border-radius:12px}
.about-bio{font-size:clamp(22px,1.770833vw,34px);font-weight:600;line-height:1.765;margin:0}
.experience{margin-bottom:100px;scroll-margin-top:50px}
.experience-meta{grid-column:2;grid-row:1;position:relative;padding-right:100px;min-height:80px}
.experience-date{font-size:clamp(18px,1.25vw,24px);line-height:1.4;font-weight:400;margin:5px 0 14px;font-variant-numeric:tabular-nums}
.experience-position{font-size:18px;line-height:1.6;font-weight:600}
.company-logo{position:absolute;right:0;top:0;width:80px;height:80px;object-fit:contain;border-radius:10px}
#suplay .company-logo{background:#ed1d45;padding:3px}
.experience-body{grid-column:1;grid-row:1;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.experience-block+.experience-block{margin-top:30px}
.experience-block h3{font-size:18px;font-weight:600;line-height:24px;margin:0 0 10px}
.experience-block p+p{margin-top:10px}
.protected-experience{position:relative;display:grid;width:100%;gap:10px;padding:0;border:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.protected-experience:focus-visible{outline:2px solid currentColor;outline-offset:8px;border-radius:2px}
.protected-fake-title,.protected-fake-line{display:block;height:17px;border-radius:5px;background:currentColor;opacity:.16;filter:blur(5px)}.protected-fake-title{width:46%;height:20px}.protected-fake-line{width:100%}.protected-fake-line.is-short{width:68%}
.protected-label{display:inline-flex;align-items:center;gap:6px;width:max-content;margin-top:2px;color:var(--muted,#777);font-size:12px}.protected-label svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.protected-dialog{width:min(440px,calc(100vw - 32px));padding:0;border:0;border-radius:20px;background:transparent;color:#171717}.protected-dialog::backdrop{background:#10131b99;backdrop-filter:blur(8px)}
.protected-dialog-card{position:relative;display:grid;gap:14px;padding:32px 28px 24px;border-radius:20px;background:#f7f7f5;box-shadow:0 24px 80px #0004}.protected-dialog-card p{margin:0;padding-right:30px;font-size:14px;line-height:1.6;color:#666}.protected-dialog-card label{display:grid}.protected-dialog-card input{width:100%;padding:12px 14px;border:1px solid #ccc;border-radius:10px;background:#fff;font:inherit}.protected-dialog-card small{display:block;min-height:18px;margin-top:-7px;color:#d42a20;font-size:12px;line-height:18px}.protected-dialog-card>div{display:flex;justify-content:flex-end}.protected-dialog-card button{min-height:40px;padding:0 16px;border:0;border-radius:10px;font:inherit;cursor:pointer}.protected-submit{background:#111;color:#fff}.protected-dialog-close{position:absolute;right:12px;top:10px;width:40px;padding:0!important;background:transparent;font-size:22px!important}
.experience-nav{position:fixed;right:var(--gutter);top:50%;transform:translateY(-50%);width:120px;z-index:5;display:flex;flex-direction:column;align-items:stretch}
.experience-nav a{font-size:10px;text-align:right;padding:18px 0;border-bottom:1px solid #8882;color:#888}
.experience-nav a[aria-current]{color:var(--ink)}
.experience-nav a[aria-current]:before{content:'← ';}
.about-page .footer{margin-top:150px}
@media(max-width:1600px){.experience-nav{display:none}.experience-meta{padding-right:76px}.company-logo{width:60px;height:60px}.experience-position{font-size:16px}.about-profile{min-height:0}}
@media(max-width:1000px){.about-page #about-content{margin:80px var(--gutter) 0}.about-profile,.experience{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px}.about-bio{font-size:22px}.experience-meta{padding-right:0;padding-top:80px}.company-logo{left:0;right:auto}.experience-date{font-size:18px}.experience-body{line-height:1.75}}
@media(max-width:700px){.about-page #about-content{margin:50px 24px 0}.about-profile,.experience{display:flex;flex-direction:column;gap:32px}.about-profile{margin-bottom:72px}.about-portrait{width:220px}.about-bio{font-size:22px;line-height:1.8}.experience{margin-bottom:64px;scroll-margin-top:24px}.experience-meta{width:100%;padding:0 76px 0 0;min-height:60px}.company-logo{left:auto;right:0}.experience-date{margin-top:0;font-size:19px}.experience-position{font-size:16px}.experience-body{font-size:15px;line-height:1.8}.experience-block h3{font-size:17px;line-height:1.6}.about-page .footer{margin-top:80px}}
@media(min-width:701px){.about-portrait{width:clamp(220px,18.75vw,360px)}}
.about-portrait{height:auto}
@font-face{font-family:'LogoSC Unbounded Sans';src:url('/fonts/LogoSCUnboundedSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.about-page .experience-date{font-family:'LogoSC Unbounded Sans',sans-serif;font-size:24px;line-height:1.4;font-weight:400;font-variant-numeric:normal}
#brainhouse .company-logo{background:#000}
@media(min-width:701px){.experience-meta{padding-right:0}.experience-meta:has(.company-logo){padding-right:76px}.experience-date{max-width:100%}}
@media(min-width:1601px){.experience-meta:has(.company-logo){padding-right:100px}}
/* Logos share the metadata top edge; reserve their width instead of shifting them down. */
@media(max-width:700px){
 .experience-meta:has(.company-logo){padding-right:76px}
}

/* The metadata stays in its own column and yields to the next experience. */
@media(min-width:701px){
 .experience-meta{position:sticky;top:32px;align-self:start}
}