.portfolio-cover{position:relative;overflow:hidden;background:var(--gallery-blue);border:1px solid var(--border);border-radius:6px;height:100%;min-height:250px;padding:7% 9% 0}.cover-desktop{width:86%;height:100%;overflow:hidden;border:1px solid #d9e2e8;border-radius:7px 7px 0 0;box-shadow:0 16px 35px #0002;background:#fff}.cover-desktop img{width:100%;height:auto}.cover-phone{position:absolute;right:6%;top:21%;width:20%;height:75%;overflow:hidden;border:5px solid #17232c;border-radius:20px;background:#000;box-shadow:0 12px 24px #0003}.cover-phone img{width:100%;height:auto}.cover-label{position:absolute;left:3%;bottom:4%;font:10px 'IBM Plex Mono',monospace;letter-spacing:1px;text-transform:uppercase;background:var(--bg);padding:8px 10px;border-radius:3px;color:var(--blue)}.tile>.portfolio-cover{height:340px;flex-shrink:0}.home-grid .tile>.portfolio-cover{height:356px}.case-hero>.portfolio-cover{height:clamp(320px,46vw,650px)}.case-hero figcaption,figcaption,.embed-note{font-size:14px;line-height:22px;color:var(--muted);margin-top:14px}.case-jumps{display:flex;flex-wrap:wrap;gap:12px 28px;border-block:1px solid var(--border);padding:16px 0;font-size:14px}.case-video video{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:8px;background:#000}.case-process .screen-figure{min-width:0}.screen-scroll{display:block;height:480px;overflow-y:auto;border:1px solid var(--border);border-radius:8px;background:#fff;scrollbar-width:thin;overscroll-behavior:contain}.screen-scroll img{width:100%;height:auto;max-width:none}.screen-scroll:focus-visible{outline-offset:3px}.screen-figure figcaption a{white-space:nowrap}.responsive-screens{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start}.responsive-screens>.screen-figure .screen-scroll{height:540px}.mobile-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.phone-screen{height:540px;border:5px solid #26343b;border-radius:18px}.comparison-stage{position:relative;height:clamp(260px,46vw,620px);overflow:hidden;border:1px solid var(--border);border-radius:8px;background:#fff;--split:50%}.comparison-stage>img,.comparison-overlay img{display:block;width:100%;height:auto}.comparison-overlay{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))}.comparison-line{position:absolute;top:0;bottom:0;left:var(--split);width:2px;background:#90afcb}.compare-label{position:absolute;top:16px;padding:5px 10px;border-radius:4px;font:12px 'IBM Plex Mono',monospace}.light-label{left:16px;background:#fff;color:#101318}.dark-label{right:16px;background:#000;color:#fff}.theme-comparison figcaption{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.theme-comparison input{accent-color:var(--blue);flex:1;min-width:140px;min-height:44px}.design-specimens{display:grid;grid-template-columns:1fr 1fr;gap:40px}.type-specimen{padding:32px;background:var(--section-blue);border-top:2px solid var(--blue)}.specimen-heading{font:600 clamp(32px,4vw,56px)/1.05 'Bricolage Grotesque',sans-serif;margin:24px 0;letter-spacing:-1.5px}.specimen-body{font-size:24px;line-height:1.6;margin-block:24px}.specimen-mono{margin-top:36px}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.palette span{display:block;height:90px;border-radius:4px;border:1px solid var(--border)}.palette p{font-size:14px;margin-top:8px}.palette code{display:block;font:12px 'IBM Plex Mono',monospace;color:var(--muted)}.decision-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:16px}.decision-grid h3{margin-bottom:12px}.embed-shell{border:1px solid var(--border);border-radius:8px;overflow:hidden}.figma-embed{display:block;width:100%;height:650px;border:0;background:var(--gallery-blue)}.demo-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px;border:1px solid var(--border);border-radius:8px 8px 0 0;background:var(--section-blue)}.demo-controls{display:flex;gap:8px}.demo-controls button{padding:10px 14px;min-height:44px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:14px}.demo-controls button[aria-pressed=true]{background:var(--action);border-color:var(--blue)}.demo-stage{padding:24px;background:var(--gallery-blue);border:1px solid var(--border);border-top:0;display:flex;justify-content:center;overflow:hidden}.site-demo{display:block;width:100%;max-width:100%;height:660px;border:1px solid var(--border);background:var(--bg);border-radius:6px}.site-demo.mobile-preview{width:390px}#design-tour,#screen-system,#figma-file,#live-demo{scroll-margin-top:24px}
@media(max-width:700px){.tile>.portfolio-cover,.home-grid .tile>.portfolio-cover{height:230px}.case-hero>.portfolio-cover{height:320px}.cover-phone{border-width:3px;border-radius:12px}.cover-label{font-size:8px}.responsive-screens,.design-specimens,.decision-grid{grid-template-columns:1fr;gap:24px}.palette{grid-template-columns:1fr 1fr}.responsive-screens>.screen-figure .screen-scroll,.screen-scroll{height:360px}.mobile-pair{gap:16px}.phone-screen{height:380px}.type-specimen{padding:24px}.figma-embed{height:480px}.demo-toolbar{align-items:start;flex-direction:column;gap:12px}.demo-stage{padding:8px}.site-demo{height:570px}.theme-comparison figcaption{gap:8px 16px}.theme-comparison figcaption>span{width:100%}}
/* Case-study clarity: compact headers followed by balanced text rows. */
.portfolio-story .case-section{display:block}
.portfolio-story .case-section>div:first-child{margin-bottom:28px}
.portfolio-story .case-section>div:first-child h2 br{display:none}
.portfolio-story .case-section>div:first-child h2{max-width:none}
.portfolio-story .case-copy:has(>.story-point),.portfolio-story .case-section>.stack:has(>.story-point){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.portfolio-story .story-point{min-width:0;border-top:1px solid var(--border);padding-top:20px}
.portfolio-story .story-point h3{margin:0 0 12px;font-size:24px;line-height:1.3}
.portfolio-story .story-point p{margin:0;max-width:none;font-size:16px;line-height:1.65}
.portfolio-story .case-copy:has(>.story-point)>p,.portfolio-story .case-copy:has(>.story-point)>.actions,.portfolio-story .case-copy:has(>.story-point)>a{grid-column:1/-1;max-width:none}
.portfolio-story .case-section .case-copy:not(:has(>.story-point)){display:grid;grid-template-columns:1fr 1fr;gap:32px}
.portfolio-story .case-section .case-copy:not(:has(>.story-point))>.actions{grid-column:1/-1}
.stage-key{display:grid;grid-template-columns:1fr 1fr;gap:32px;border-block:1px solid var(--border);padding:24px 0}
.stage-key p{font-size:15px;line-height:1.65;color:var(--muted);margin-top:10px}
.media-source{display:block;font:11px/18px 'IBM Plex Mono',monospace;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);padding:10px 12px;background:var(--section-blue);border-left:2px solid var(--blue)}
.live-source{background:var(--gallery-blue);font-weight:600}
.screen-figure>.media-source{margin-bottom:10px}
.portfolio-story .case-jumps{border-top:0}
.figma-controls{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;align-items:end}
.figma-controls label{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.figma-controls select{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font:14px Manrope,sans-serif}
.figma-controls select:disabled{opacity:.5}
.figma-controls>a{grid-column:1/-1;font-size:14px}
.figma-controls select:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.portfolio-story .figma-embed{height:720px}
.portfolio-story .demo-toolbar{border-top:3px solid var(--blue)}
@media(max-width:1000px){.portfolio-story .case-copy:has(>.story-point),.portfolio-story .case-section>.stack:has(>.story-point){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.portfolio-story .case-copy:has(>.story-point),.portfolio-story .case-section>.stack:has(>.story-point),.portfolio-story .case-section .case-copy:not(:has(>.story-point)),.stage-key{grid-template-columns:1fr;gap:24px}.figma-controls{grid-template-columns:1fr 1fr}.figma-controls>label:first-child{grid-column:1/-1}.portfolio-story .figma-embed{height:500px}.portfolio-story .case-section>div:first-child{margin-bottom:24px}}
/* Project thumbnails keep device proportions at every card width. */
.tile>.portfolio-cover,.home-grid .tile>.portfolio-cover{width:100%;height:auto;min-height:0;aspect-ratio:480/356;padding:0;flex-shrink:0}
.tile>.portfolio-cover .cover-desktop{position:absolute;left:8%;top:13%;width:80%;height:auto;aspect-ratio:16/10;border-radius:7px;overflow:hidden}
.tile>.portfolio-cover .cover-phone{top:auto;bottom:11%;right:6%;width:23%;height:auto;aspect-ratio:9/19.5;border-width:4px;border-radius:16px;overflow:hidden}
.tile>.portfolio-cover .cover-desktop img,.tile>.portfolio-cover .cover-phone img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:top}
.tile>.portfolio-cover .cover-label{bottom:5%;left:5%;font-size:9px;padding:6px 8px}
@media(max-width:700px){.tile>.portfolio-cover .cover-phone{border-width:3px;border-radius:12px}}