:root{font-family:Arial,Helvetica,sans-serif;color:#272727;background:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;font-size:14px;line-height:1.45}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#777}
.sidebar{position:fixed;inset:22px auto 22px 22px;width:250px;border:1px solid #e4e4e4;background:#fff}
.identity{display:flex;min-height:92px;align-items:flex-start;padding:20px 24px;font-size:30px;font-weight:700;line-height:1;text-decoration:none}
.menu{display:flex;flex-direction:column;gap:7px;padding:12px 24px;font-size:14px}
.menu.secondary{margin-top:25px;color:#858585}
.menu a{text-decoration:none}
.side-note{position:absolute;right:-1px;bottom:-1px;left:-1px;min-height:116px;padding:19px 17px;border:1px solid #e4e4e4;background:#fff;color:#777;font-size:14px}
.side-note p{margin:0 0 8px}.side-note p:last-child{margin:0}
.content{width:min(650px,calc(100vw - 350px));margin-left:305px;padding:56px 0 44px}
.content.project{width:min(880px,calc(100vw - 350px));padding-bottom:60px}
header{margin-bottom:72px}
h1,h2{margin:0;font-size:14px;line-height:1.45;font-weight:700}
h1.project-title{font-size:30px;line-height:1.1;margin-bottom:12px}
.bio,.lead{margin:14px 0 0;max-width:650px}
.lead{font-size:16px;color:#555}
.eyebrow{margin:0 0 10px;color:#777;font-size:14px}
section{margin-bottom:64px;scroll-margin-top:30px}
section h2{margin-bottom:17px}
.work-list{border-top:1px solid #dedede}
.work-item{display:grid;grid-template-columns:145px 1fr;gap:22px;padding:9px 0;border-bottom:1px solid #dedede}
.work-item span{color:#777}
.work-preview{position:fixed;top:124px;left:989px;width:min(360px,calc(100vw - 1023px));margin:0;opacity:0;pointer-events:none;transition:opacity .16s ease}
.work-preview.is-visible{opacity:1}
.work-preview img{display:block;width:100%;max-height:360px;object-fit:contain;object-position:left top;border:1px solid #dedede;background:#f5f5f5}
.work-preview figcaption{padding-top:8px;color:#777}
.section-note{max-width:620px;margin:0 0 18px;color:#777}
.about{max-width:590px;color:#555}
.project-hero{margin-bottom:48px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gallery.single{grid-template-columns:1fr}
figure{margin:0}
.product-shot{display:block;width:100%;height:auto;border:1px solid #dedede;background:#f5f5f5}
figcaption{padding-top:8px;color:#777;font-size:14px}
.summary{border-top:1px solid #dedede}
.summary-row{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:10px 0;border-bottom:1px solid #dedede}
.summary-row span{color:#666}
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #dedede;border-left:1px solid #dedede}
.result{min-height:104px;padding:16px;border-right:1px solid #dedede;border-bottom:1px solid #dedede}
.result strong{display:block;margin-bottom:4px;font-size:24px;line-height:1.15}
.result span{color:#777;font-size:14px}
.technical{max-width:680px;color:#555}
.technical p{margin:0 0 16px}
.architecture{overflow:auto;margin:0;padding:18px;border:1px solid #dedede;background:#fafafa;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.links{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px}
footer{padding-top:18px;border-top:1px solid #ededed;color:#777;text-align:center;font-size:14px}
@media(max-width:760px){
  .sidebar{position:static;width:auto;margin:16px}.identity{min-height:72px}.menu{flex-direction:row;flex-wrap:wrap;gap:8px 18px}.menu.secondary{margin-top:4px}.side-note{position:static;min-height:0;margin:12px -1px -1px}
  .content,.content.project{width:auto;margin:0 16px;padding:34px 0}header{margin-bottom:58px}section{margin-bottom:54px}
  .work-item,.summary-row{grid-template-columns:1fr;gap:2px}.gallery{grid-template-columns:1fr}.result-grid{grid-template-columns:1fr}.result{min-height:0}
  h1.project-title{font-size:30px}.lead{font-size:16px}
}
@media(max-width:1179px){.work-preview{display:none}}
@media(prefers-reduced-motion:reduce){.work-preview{transition:none}}