/* N+Z: black, cream, gold, Bodoni Moda and Manrope. Real work leads the page. */
.portfolio-width{width:min(100%,1440px);margin-inline:auto;padding-inline:var(--content-gutter)}
.portfolio-opening{display:grid;grid-template-columns:1.18fr 1fr;align-items:end;gap:clamp(32px,6vw,85px);padding-block:clamp(48px,6vw,84px) 40px}
.portfolio-opening h1{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(52px,6.5vw,90px);font-weight:400;letter-spacing:-.045em;line-height:1.02;max-width:12ch}
.portfolio-opening-copy{padding-bottom:4px}.portfolio-opening-copy>p{max-width:49ch;font-size:15px;line-height:1.85;color:var(--content-muted)}
.portfolio-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:26px}
.portfolio-actions a{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;font-size:12px;line-height:1.5}
.portfolio-actions svg,.portfolio-experience-link svg,.portfolio-studio-contact svg{width:19px;height:19px;flex-shrink:0}
.portfolio-primary-link{background:var(--content-paper);color:#000;padding:11px 18px}.portfolio-cv-link{border-bottom:1px solid var(--content-gold)}
.portfolio-featured{padding-bottom:48px}.portfolio-featured>h2{font-size:12px;font-weight:400;color:var(--content-muted);margin-bottom:17px}
.portfolio-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.portfolio-preview{display:block;min-width:0;border-bottom:1px solid var(--content-line);padding-bottom:15px}
.portfolio-preview>img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 47%}
.portfolio-preview[href="#gitaarcursus"]>img{object-fit:contain;background:#171914}
.portfolio-preview h3{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:16px;font-weight:500;line-height:1.4;padding-top:14px}
.portfolio-preview h3 svg{width:17px;height:17px;flex-shrink:0;align-self:center;color:var(--content-gold)}
.portfolio-preview p{font-size:12px;color:var(--content-muted);line-height:1.6;margin-top:5px;max-width:42ch}
.portfolio-project{position:relative;scroll-margin-top:0;padding-top:46px;border-top:1px solid var(--content-line)}
.portfolio-project+.portfolio-project{margin-top:72px}.portfolio-anchor{position:absolute;top:0;scroll-margin-top:0}
.portfolio-case-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:clamp(28px,5vw,70px);margin-bottom:28px}
.portfolio-label{font-size:12px;line-height:1.5;color:var(--content-muted);margin-bottom:12px}
.portfolio-case-heading h2{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(36px,4.2vw,58px);font-weight:400;line-height:1.08;letter-spacing:-.035em;max-width:20ch}
.portfolio-case-heading>p{font-size:14px;line-height:1.8;color:var(--content-muted);max-width:54ch}
.portfolio-case-body{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.portfolio-case-media{min-width:0}.portfolio-screen{position:relative;display:block;isolation:isolate;overflow:hidden;background:#171914;aspect-ratio:16/9}
.portfolio-screen>img{width:100%;height:100%;object-fit:cover;object-position:50% 54%;transition:transform .7s cubic-bezier(.2,.6,.3,1)}
.portfolio-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff;text-shadow:0 1px 8px #000;font-size:12px}
.portfolio-play-circle{width:70px;height:70px;display:grid;place-items:center;border:1px solid #ffffffc9;border-radius:50%;background:#0004;backdrop-filter:blur(5px);transition:background .25s,transform .25s}
.portfolio-play-circle svg{width:28px;height:28px;margin-right:3px}
.portfolio-time{position:absolute;right:16px;bottom:16px;color:#fff;font-size:11px;letter-spacing:.03em;background:#0009;padding:6px 9px;font-variant-numeric:tabular-nums}
.portfolio-case-proof dl{margin:0}.portfolio-case-proof dl>div+div{margin-top:18px}.portfolio-case-proof dt{font-size:12px;font-weight:500;color:var(--content-paper);margin-bottom:5px}.portfolio-case-proof dd{font-size:13px;line-height:1.8;color:var(--content-muted);margin:0;max-width:52ch}
.portfolio-disciplines{display:flex;flex-wrap:wrap;gap:7px 20px;padding:0;margin:21px 0 0;list-style:none;font-size:11px;line-height:1.5;color:var(--content-gold)}
.portfolio-experience-link{display:inline-flex;align-items:center;gap:24px;min-height:48px;margin-top:16px;border-bottom:1px solid var(--content-gold);font-size:13px}
.portfolio-project--portrait .portfolio-case-body{grid-template-columns:minmax(260px,.8fr) minmax(0,1fr);max-width:1040px;margin-inline:auto}
.portfolio-project--portrait .portfolio-screen{aspect-ratio:9/16;width:min(100%,281.25px);margin-inline:auto}.portfolio-project--portrait .portfolio-screen>img{object-position:center}
.portfolio-project--portrait .portfolio-play>span:last-child{display:none}
/* Retain the approved guitar framing and centred play button without covering the face. */
#gitaarcursus .portfolio-screen>img{object-position:center}
#gitaarcursus .portfolio-play{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto 1fr;justify-items:center;align-items:initial;gap:0}
#gitaarcursus .portfolio-play-circle{grid-row:2;width:clamp(38px,13%,76px);height:auto;aspect-ratio:1}
#gitaarcursus .portfolio-play-circle svg{width:40%;height:40%}
#gitaarcursus .portfolio-play>span:last-child{grid-row:3;align-self:start;margin-top:12px}
.portfolio-companion{display:grid;grid-template-columns:156px minmax(0,1fr);align-items:center;gap:24px;max-width:680px;border-top:1px solid var(--content-line);padding-top:22px;margin-top:28px}
.portfolio-companion-screen{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#171914}.portfolio-companion-screen img{width:100%;height:100%;object-fit:cover}
.portfolio-companion-play{position:absolute;bottom:8px;left:8px;width:34px;height:34px;display:grid;place-items:center;border:1px solid #ffffffc9;border-radius:50%;background:#0009;color:#fff}.portfolio-companion-play svg{width:18px;height:18px;margin-right:2px}
.portfolio-companion-time{position:absolute;right:8px;bottom:8px;background:#000b;color:#fff;padding:4px 6px;font-size:10px;font-variant-numeric:tabular-nums}
.portfolio-companion .portfolio-label{font-size:11px;margin-bottom:5px}.portfolio-companion h3{font-family:'Bodoni Moda',Georgia,serif;font-size:25px;font-weight:400;line-height:1.15;letter-spacing:-.025em;margin-bottom:7px}.portfolio-companion div>p:last-child{max-width:53ch;font-size:12px;line-height:1.75;color:var(--content-muted)}
.portfolio-process{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:clamp(28px,5vw,70px);margin-top:38px;padding-top:30px;border-top:1px solid var(--content-line)}
.portfolio-process h3,.portfolio-section-intro h3{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(26px,2.8vw,36px);font-weight:400;line-height:1.15;letter-spacing:-.025em;max-width:24ch}
.portfolio-process p,.portfolio-section-intro p{font-size:13px;line-height:1.8;color:var(--content-muted);max-width:48ch;margin-top:12px}
.portfolio-process img{width:100%;aspect-ratio:1944/809;object-fit:contain;background:#e4dfd3}.portfolio-process figcaption{font-size:11px;color:var(--content-muted);line-height:1.6;margin-top:9px}
.portfolio-campaigns{margin-top:34px;padding-top:30px;border-top:1px solid var(--content-line)}
.portfolio-section-intro{display:grid;grid-template-columns:1fr 1.2fr;align-items:start;gap:clamp(28px,5vw,70px);margin-bottom:25px}.portfolio-section-intro p{margin-top:0}
.portfolio-campaign-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.portfolio-campaign{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:start;gap:20px;min-width:0;scroll-margin-top:0}
.portfolio-screen--campaign{aspect-ratio:9/16}.portfolio-screen--campaign>img{object-position:center}.portfolio-screen--campaign .portfolio-play-circle{width:44px;height:44px}.portfolio-screen--campaign .portfolio-play-circle svg{width:20px;height:20px}.portfolio-screen--campaign .portfolio-play>span:last-child{display:none}.portfolio-screen--campaign .portfolio-time{font-size:10px;bottom:9px;right:9px;padding:4px 6px}
.portfolio-campaign-copy{padding-top:3px;min-width:0}.portfolio-campaign h4{font-family:'Bodoni Moda',Georgia,serif;font-size:29px;font-weight:400;line-height:1.15;letter-spacing:-.025em;margin-bottom:10px}.portfolio-campaign-copy>p{font-size:12px;line-height:1.8;color:var(--content-muted);max-width:37ch}
.portfolio-versions{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:12px}.portfolio-versions>a{display:inline-flex;align-items:center;gap:7px;min-height:44px;border-bottom:1px solid var(--content-line);font-size:11px;color:var(--content-paper)}.portfolio-versions svg{width:12px;height:12px;color:var(--content-gold)}
.portfolio-hiring{display:grid;grid-template-columns:1fr 1.2fr;gap:32px clamp(28px,5vw,70px);padding-block:58px 42px;margin-top:80px;border-top:1px solid var(--content-line)}
.portfolio-hiring h2{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(38px,4.3vw,58px);font-weight:400;line-height:1.1;letter-spacing:-.035em;max-width:19ch}.portfolio-hiring .portfolio-label{color:var(--content-gold)}
.portfolio-hiring-copy>p{font-size:14px;line-height:1.85;color:var(--content-muted);max-width:55ch}.portfolio-hiring-copy .portfolio-location{font-size:12px;margin-top:14px}.portfolio-hiring-copy .portfolio-actions{margin-top:19px}
.portfolio-direct-email{display:inline-flex;align-items:center;min-height:44px;font-size:12px;margin-top:8px;color:var(--content-muted)}
.portfolio-studio-contact{grid-column:1/-1;display:inline-flex;justify-self:start;align-items:center;gap:20px;min-height:44px;font-size:12px;color:var(--content-muted);border-bottom:1px solid var(--content-line)}
/* The native player remains shared by all films, campaign versions and companion clips. */
.portfolio-player-open{overflow:hidden}.portfolio-player{width:min(1280px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);padding:20px;background:#000;color:var(--content-paper);border:1px solid #ffffff30;overflow:auto}.portfolio-player::backdrop{background:#000e;backdrop-filter:blur(8px)}
.portfolio-player-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:12px}.portfolio-player-heading h2{font-size:15px;font-weight:500;line-height:1.5}.portfolio-player-heading button{display:flex;align-items:center;gap:18px;min-height:44px;flex-shrink:0;border:0;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer}.portfolio-player-heading button span{font-size:28px;font-weight:300}
.portfolio-player video{display:block;width:100%;max-height:calc(100dvh - 180px);aspect-ratio:16/9;background:#000;object-fit:contain}.portfolio-player video[hidden],.portfolio-embed[hidden],.portfolio-youtube-fallback[hidden]{display:none}
.portfolio-embed{aspect-ratio:16/9;width:100%;max-height:calc(100dvh - 180px)}.portfolio-embed iframe{display:block;width:100%;height:100%;border:0}.portfolio-youtube-fallback{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:12px;color:var(--content-muted);text-decoration:underline;text-underline-offset:4px}
.portfolio-player-status{font-size:13px;line-height:1.7;color:var(--content-muted);margin-top:12px}.portfolio-player-status:empty{display:none}.portfolio-player-recovery{display:flex;gap:24px;flex-wrap:wrap}.portfolio-player-recovery[hidden]{display:none}.portfolio-player-recovery :is(a,button){min-height:44px;display:inline-flex;align-items:center;border:0;background:none;color:inherit;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.portfolio-player.portfolio-player--portrait{width:min(490px,calc(100vw - 40px),calc(56.25dvh - 48px))}.portfolio-player--portrait video{width:100%;height:auto;max-width:100%;max-height:calc(100dvh - 160px);aspect-ratio:9/16;margin-inline:auto}
@media(hover:hover){.portfolio-screen:hover>img{transform:scale(1.02)}.portfolio-screen:hover .portfolio-play-circle{transform:scale(1.06);background:#0008}.portfolio-preview:hover h3,.portfolio-cv-link:hover,.portfolio-experience-link:hover,.portfolio-versions>a:hover,.portfolio-studio-contact:hover{color:var(--content-gold)}.portfolio-primary-link:hover{background:var(--content-gold)}.portfolio-companion-screen:hover .portfolio-companion-play{background:#000d}}
@media(max-width:1050px){.portfolio-opening h1{font-size:clamp(52px,6.5vw,72px)}.portfolio-featured-grid{gap:20px}.portfolio-case-body,.portfolio-case-heading{grid-template-columns:1.1fr 1fr;gap:28px}.portfolio-campaign-grid{gap:28px}.portfolio-campaign{grid-template-columns:110px minmax(0,1fr);gap:16px}.portfolio-versions{gap:0 14px}.portfolio-case-proof dd{font-size:12px}}
@media(max-width:760px){.portfolio-opening{grid-template-columns:1fr;gap:26px;padding-top:42px;padding-bottom:32px}.portfolio-opening h1{font-size:clamp(48px,8.5vw,68px);max-width:17ch}.portfolio-opening-copy>p{max-width:58ch;font-size:14px}.portfolio-actions{margin-top:20px}.portfolio-case-body,.portfolio-case-heading,.portfolio-project--portrait .portfolio-case-body{grid-template-columns:1fr;gap:24px}.portfolio-case-heading{margin-bottom:24px}.portfolio-case-heading>p{max-width:60ch}.portfolio-case-proof dd{font-size:13px;max-width:62ch}.portfolio-project--portrait .portfolio-screen{width:min(100%,236.25px)}.portfolio-project--portrait .portfolio-case-body{max-width:620px}.portfolio-process,.portfolio-section-intro,.portfolio-hiring{grid-template-columns:1fr;gap:22px}.portfolio-process>div{max-width:55ch}.portfolio-process figure{max-width:620px}.portfolio-campaign-grid{grid-template-columns:1fr;gap:28px}.portfolio-campaign{grid-template-columns:128px minmax(0,1fr);gap:22px;max-width:620px}.portfolio-campaign-copy>p{max-width:48ch}.portfolio-hiring{margin-top:64px;padding-top:42px}.portfolio-hiring h2{max-width:22ch}.portfolio-studio-contact{margin-top:4px}.portfolio-project,.portfolio-anchor,.portfolio-campaign{scroll-margin-top:0}}
@media(max-width:600px){.portfolio-featured{padding-bottom:34px}.portfolio-featured-grid{grid-template-columns:1fr;gap:15px}.portfolio-featured>h2{margin-bottom:15px}.portfolio-preview{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:17px;padding-bottom:15px}.portfolio-preview>img{aspect-ratio:4/3}.portfolio-preview h3{padding-top:0;font-size:15px;gap:10px}.portfolio-preview p{font-size:11px;line-height:1.6;margin-top:4px}.portfolio-preview h3 svg{width:15px;height:15px}.portfolio-project{padding-top:32px}.portfolio-project+.portfolio-project{margin-top:48px}.portfolio-case-heading h2{font-size:36px}.portfolio-label{font-size:11px;margin-bottom:10px}.portfolio-case-heading>p{font-size:13px;line-height:1.8}.portfolio-play-circle{width:56px;height:56px}.portfolio-play-circle svg{width:24px;height:24px}.portfolio-play{font-size:11px;gap:10px}.portfolio-time{right:12px;bottom:12px;font-size:10px}.portfolio-disciplines{gap:7px 18px;margin-top:18px}.portfolio-companion{grid-template-columns:126px minmax(0,1fr);gap:18px;align-items:start}.portfolio-companion-screen{margin-top:3px}.portfolio-companion h3{font-size:23px}.portfolio-companion .portfolio-label{line-height:1.5}.portfolio-process{margin-top:28px;padding-top:25px}.portfolio-process h3,.portfolio-section-intro h3{font-size:28px}.portfolio-process p,.portfolio-section-intro p{font-size:12px}.portfolio-campaigns{margin-top:28px;padding-top:25px}.portfolio-campaign{grid-template-columns:110px minmax(0,1fr);gap:18px}.portfolio-campaign h4{font-size:27px}.portfolio-campaign-copy>p{font-size:12px}.portfolio-versions{gap:0 14px}.portfolio-hiring h2{font-size:38px}.portfolio-hiring-copy>p{font-size:13px}.portfolio-player{width:calc(100vw - 16px);padding:12px;max-height:calc(100dvh - 24px)}.portfolio-player-heading{gap:12px}.portfolio-player-heading h2{font-size:13px}.portfolio-player-heading button{font-size:12px;gap:10px}.portfolio-player.portfolio-player--portrait{width:calc(100vw - 16px)}.portfolio-player--portrait video{height:auto;width:100%;max-height:calc(100dvh - 150px)}}
@media(max-width:390px){.portfolio-opening h1{font-size:45px}.portfolio-preview{grid-template-columns:82px minmax(0,1fr);gap:14px}.portfolio-preview h3{font-size:14px}.portfolio-actions{gap:8px 18px}.portfolio-actions a{font-size:11px}.portfolio-primary-link{padding-inline:14px}.portfolio-companion{grid-template-columns:110px minmax(0,1fr);gap:14px}.portfolio-companion h3{font-size:21px}.portfolio-companion div>p:last-child{font-size:11px}.portfolio-companion-play{width:30px;height:30px;left:7px;bottom:7px}.portfolio-companion-time{right:7px;bottom:7px;font-size:9px}.portfolio-campaign{grid-template-columns:96px minmax(0,1fr);gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portfolio-screen>img,.portfolio-play-circle{transition:none}}