/* The portfolio keeps its typography and lets the work supply the colour. */
.page-intro.portfolio-intro{border-bottom:0}
.portfolio-intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,240px);align-items:center;gap:clamp(30px,5vw,80px)}
.portfolio-intro h1{font-size:clamp(64px,9vw,144px);line-height:1.12;font-weight:300;letter-spacing:-.03em}
.portfolio-intro h1 span{display:block;margin-top:.22em}
.portfolio-portrait{min-width:0}
.portfolio-portrait img{display:block;width:100%;height:auto;margin:0;aspect-ratio:1024/683;object-fit:cover}
.portfolio-social{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px;font-size:17px}
.portfolio-social a{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.portfolio-social a:hover{color:var(--text)}
.portfolio-content .portfolio-kulisse{padding-bottom:55px}
.portfolio-content .portfolio-project-label{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.6}
.portfolio-content .portfolio-kulisse h2{margin:0 0 22px}
.portfolio-content .portfolio-project-intro{max-width:60ch;margin:0;color:var(--muted);font-size:18px;line-height:1.75}
.kulisse-mockup{margin:35px 0 30px;min-width:0}
.kulisse-mockup-stage{position:relative;width:100%;aspect-ratio:1.45;display:flex;align-items:flex-start;padding:5% 6% 7%;background:var(--watermark);isolation:isolate;overflow:hidden}
.kulisse-desktop-device{position:relative;width:92%;margin:0 auto 0 0;filter:drop-shadow(0 20px 20px rgba(0,0,0,.23))}
.kulisse-desktop-bezel{position:relative;padding:2.1% 1.5% 1.6%;border:1px solid #656569;border-radius:12px 12px 3px 3px;background:linear-gradient(135deg,#363638,#101012 60%,#29292c)}
.kulisse-desktop-camera{position:absolute;left:calc(50% - 2px);top:1.2%;width:4px;height:4px;border-radius:50%;background:#101013;box-shadow:inset 0 0 0 1px #44444a}
.kulisse-desktop-screen{aspect-ratio:1.5;overflow:hidden;background:#142038}
.portfolio-content .kulisse-mockup img{display:block;width:100%;max-width:100%;height:100%;max-height:none;margin:0;object-fit:cover;object-position:top}
.kulisse-desktop-base{height:13px;margin:0 -4%;border:1px solid #55555b;border-top:0;border-radius:0 0 45% 45% / 0 0 90% 90%;background:linear-gradient(#b1b1b5,#737379 40%,#37373d)}
.kulisse-desktop-base>span{display:block;width:17%;height:5px;margin:0 auto;border-radius:0 0 8px 8px;background:#5b5b60}
.kulisse-mobile-device{position:absolute;right:3.5%;bottom:5%;width:23%;padding:.7%;border:1px solid #757579;border-radius:clamp(12px,2.5vw,30px);background:#111114;box-shadow:0 16px 28px rgba(0,0,0,.35);z-index:1}
.kulisse-mobile-screen{aspect-ratio:390/844;overflow:hidden;border-radius:clamp(9px,1.9vw,23px);background:#142038}
.kulisse-mobile-speaker{position:absolute;width:28%;height:2.1%;top:1.8%;left:36%;border-radius:20px;background:#121215}
.portfolio-content .kulisse-mockup figcaption{margin-top:15px;color:var(--muted);font-size:13px;line-height:1.7}
.portfolio-content .portfolio-project-link{display:inline-flex;align-items:center;gap:32px;min-height:44px;margin:0;color:var(--accent);font-size:18px;text-decoration:underline;text-underline-offset:5px}
.portfolio-project-link:hover{color:var(--text)}
@media(max-width:800px){.portfolio-intro-grid{grid-template-columns:minmax(0,1fr) minmax(145px,190px);gap:30px}.portfolio-social{margin-top:24px;font-size:16px}.kulisse-desktop-base{height:10px}}
@media(max-width:600px){
  .page-intro.portfolio-intro{width:100%;max-width:none;padding:24px 0 0}
  .portfolio-intro-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .portfolio-intro-grid>div:first-child{width:var(--content-width);max-width:var(--content-max);min-width:0;margin-inline:auto}
  .portfolio-intro h1{font-size:clamp(48px,14.4vw,64px)}
  .portfolio-portrait{width:100%;max-width:none}
  .page-content.portfolio-content{padding-top:20px}
  .portfolio-social{margin-top:24px}.portfolio-content .portfolio-project-intro{font-size:17px}.kulisse-mockup-stage{aspect-ratio:1.25;padding:7% 4% 11%}.kulisse-desktop-device{width:94%}.kulisse-mobile-device{right:3%;bottom:6%;width:28%;padding:1%}.kulisse-desktop-bezel{border-radius:7px 7px 2px 2px}.kulisse-desktop-base{height:7px}.kulisse-desktop-base>span{height:3px}.kulisse-desktop-camera{width:2px;height:2px;left:calc(50% - 1px)}.kulisse-mockup{margin-top:28px}
}

/* Project navigation is typographic; the red rule identifies the current tab. */
.portfolio-tabs,.portfolio-tab-panel,.portfolio-shared{min-width:0}
.portfolio-tablist{display:flex;align-items:stretch;gap:clamp(24px,4vw,48px);margin:0 0 clamp(36px,5vw,60px);padding:0;border-bottom:1px solid var(--rule)}
.portfolio-tablist[hidden],.portfolio-tab-panel[hidden]{display:none!important}
.portfolio-tablist .portfolio-tab{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:52px;margin:0 0 -1px;padding:12px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:var(--muted);font:300 clamp(16px,1.6vw,18px)/1.5 SuisseIntl,Arial,sans-serif;text-align:center;text-wrap:balance;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color 160ms ease-out,border-color 160ms ease-out}
.portfolio-tablist .portfolio-tab[aria-selected=true]{border-bottom-color:var(--accent);color:var(--text);font-weight:500}
.portfolio-tablist .portfolio-tab:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.portfolio-tablist .portfolio-tab:active{border-bottom-color:var(--accent);color:var(--accent);transition-duration:0s}
.portfolio-tab-panel>.content-section:first-child{border-top:0;padding-top:0}
.portfolio-tab-panel>.content-section:first-child h2:first-child{margin-top:0}
.portfolio-content .portfolio-shared{margin-top:48px}
@media(hover:hover){.portfolio-tablist .portfolio-tab:hover{color:var(--text)}.portfolio-tablist .portfolio-tab:active{color:var(--accent)}}
@media(max-width:600px){.portfolio-tablist{gap:20px;margin-bottom:24px}.portfolio-tablist .portfolio-tab{flex:1 1 0;min-height:48px;font-size:16px}.portfolio-content .portfolio-shared{margin-top:36px}}
@media(prefers-reduced-motion:reduce){.portfolio-tablist .portfolio-tab{transition:none}}