.comparison { position:relative; aspect-ratio:3/2; max-width:1100px; margin:auto; background:#11110f; overflow:hidden; }
.comparison > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.comparison-after { clip-path:inset(0 calc(100% - var(--split)) 0 0); }
.comparison-label { position:absolute; bottom:20px; padding:9px 12px; background:var(--yellow); color:var(--black); font-weight:700; font-size:12px; pointer-events:none; }
.comparison-label.before { right:20px; }.comparison-label.after { left:20px; }
.comparison-handle { position:absolute; left:var(--split); top:0; height:100%; border-left:2px solid white; pointer-events:none; color:transparent; }
.comparison-handle::after { content:'↔'; color:var(--black); display:grid; place-items:center; position:absolute; top:50%; left:-23px; width:44px; height:44px; background:var(--yellow); border:2px solid white; border-radius:50%; }
.comparison input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.comparison:focus-within { outline:3px solid var(--black); outline-offset:5px; }
.project-section { padding:0 var(--gutter) 100px; }
.project-heading h2 { font:700 clamp(38px,5vw,76px)/1 var(--display); letter-spacing:-.055em; max-width:850px; margin:30px 0; }
.category-buttons { display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 45px; }
.category-buttons button { min-height:44px; border:1px solid #aaa79d; background:transparent; padding:10px 14px; font-size:12px; cursor:pointer; }
.category-buttons button[aria-pressed=true] { background:var(--black); color:var(--yellow); border-color:var(--black); }
.project-toolbar { position:sticky; top:0; z-index:5; display:grid; grid-template-columns:2fr 1fr auto; align-items:end; gap:20px; padding:20px 0; background:var(--paper); border-top:1px solid #aaa79d; border-bottom:1px solid #aaa79d; }
.project-toolbar label { display:grid; gap:8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; min-width:0; }
.project-toolbar input,.project-toolbar select { width:100%; min-height:46px; border:1px solid #8d8a82; border-radius:0; padding:10px 12px; background:white; color:var(--black); font-size:16px; }
.project-toolbar p { margin:0 0 15px; white-space:nowrap; font-size:12px; }
.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 20px; margin-top:25px; }
.project-card[hidden],.project-empty[hidden] { display:none; }
.project-open { display:block; position:relative; overflow:hidden; background:#e7e3d8; }
.project-open img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .2s; }
.project-open:hover img { transform:scale(1.03); }
.project-badge { position:absolute; left:10px; top:10px; background:var(--yellow); padding:7px 9px; font-size:11px; font-weight:700; max-width:calc(100% - 20px); }
.project-expand { position:absolute; right:10px; bottom:10px; width:34px; height:34px; display:grid; place-items:center; background:var(--black); color:var(--yellow); }
.project-card h3 { font:600 15px/1.4 var(--display); margin:12px 0 0; }
.project-empty { padding:45px 0; }
.project-section :focus-visible { outline:3px solid #806700; outline-offset:4px; }
.project-viewer { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; padding:24px; border:0; background:#11110f; color:white; }
.project-viewer[open] { display:grid; grid-template-rows:48px minmax(0,1fr) auto; gap:18px; }
.project-viewer::backdrop { background:rgba(0,0,0,.9); }
.viewer-top { position:relative; display:flex; align-items:center; justify-content:center; }
.viewer-counter { font:700 14px/1 var(--display); margin:0; letter-spacing:.12em; }
.project-viewer button { width:48px; height:48px; border:1px solid #666; color:var(--yellow); background:var(--black); cursor:pointer; font-size:24px; }
.project-viewer button:disabled { opacity:.3; cursor:default; }
.project-viewer :focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.viewer-close { position:absolute; right:0; top:0; }
.viewer-stage { min-height:0; display:grid; grid-template-columns:48px minmax(0,1fr) 48px; align-items:center; gap:20px; }
.viewer-image { width:100%; height:100%; min-height:0; object-fit:contain; touch-action:pan-y pinch-zoom; }
.viewer-caption { text-align:center; }.viewer-caption h2 { font:600 18px/1.4 var(--display); margin:0 0 8px; }.viewer-caption p { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:0; color:#bbb; font-size:12px; }.viewer-category { color:var(--yellow); }
@media(max-width:980px) { .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .project-toolbar { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; padding:12px 0; }.project-toolbar #project-count { grid-column:1/-1; margin:0; }.project-grid { gap:24px 12px; }.project-badge { font-size:9px; padding:5px; left:5px; top:5px; }.project-card h3 { font-size:12px; }.project-viewer { padding:14px; }.viewer-stage { grid-template-columns:1fr; position:relative; }.viewer-prev,.viewer-next { position:absolute; bottom:0; z-index:1; }.viewer-prev { left:0; }.viewer-next { right:0; }.comparison-label { bottom:10px; }.comparison-label.before { right:10px; }.comparison-label.after { left:10px; } }
@media(prefers-reduced-motion:reduce) { .project-open img { transition:none; } }