/* Editorial spreads: original artwork beside its notes, never behind them. */
.portfolio-viewer{--folio-blue:#2d66ff;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0 clamp(24px,5vw,88px);background:var(--ink);color:var(--white);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-color:var(--ink) var(--paper);outline:none;font-family:Montserrat,Arial,sans-serif}
.portfolio-viewer::backdrop{background:transparent}
.portfolio-viewer[open]{display:block}
.portfolio-viewer[data-moving]{will-change:transform}
.portfolio-viewer[data-kind=design]{background:var(--paper);color:var(--ink);padding-inline:clamp(16px,3.2vw,58px)}
.portfolio-viewer::-webkit-scrollbar-track{background:var(--paper)}
.portfolio-viewer::-webkit-scrollbar-thumb{background:var(--ink)}
.portfolio-viewer::-webkit-scrollbar-thumb:hover{background:var(--orange)}
.portfolio-document{position:relative;width:min(1480px,100%);margin:0 auto;min-height:100%;padding-bottom:24px}
.portfolio-icon{display:grid;place-items:center;width:40px;height:40px;padding:10px;border:0;border-radius:0;background:none;color:inherit;cursor:pointer}
.portfolio-icon svg{display:block;width:20px;height:20px;pointer-events:none}
.portfolio-close{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;width:100%;min-height:96px;padding:12px 0;border:0;border-radius:0;background:none;color:inherit;cursor:pointer}
.portfolio-close svg{display:block;width:100%;height:auto;pointer-events:none}
.portfolio-control-label{font:500 clamp(11px,1vw,14px)/1.3 Montserrat,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.portfolio-viewer button:focus-visible,.portfolio-viewer input:focus-visible,.reel-playback-controls button:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.portfolio-close:hover,.portfolio-text-button:hover,.portfolio-icon:hover{color:var(--folio-blue,#2d66ff)}
.portfolio-close:hover svg{transform:translateX(-6px)}
.portfolio-close svg,.portfolio-text-button svg{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.portfolio-intro{display:grid;grid-template-columns:clamp(80px,9vw,132px) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,84px);padding:clamp(32px,6vh,80px) 0 clamp(36px,6vh,72px)}
.portfolio-intro h2{font-family:'Bebas Neue',Arial,sans-serif;font-weight:400;font-size:clamp(96px,16vw,240px);line-height:.88;letter-spacing:-.025em;margin:0;overflow-wrap:anywhere}
.portfolio-series{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.3vw,20px);margin:0 auto clamp(16px,2vw,30px);align-items:stretch}
.portfolio-edit-note{grid-column:8/13;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,6vh,90px);min-width:0;background:var(--folio-blue);color:var(--white);padding:clamp(24px,3.5vw,60px)}
.portfolio-edit-note h3{margin:0;font:400 clamp(42px,5.3vw,88px)/.93 'Bebas Neue',Arial,sans-serif;letter-spacing:-.02em;text-wrap:balance}
.portfolio-edit-note p{margin:0;max-width:31ch;font:400 clamp(11px,.95vw,13px)/1.8 Montserrat,Arial,sans-serif;color:inherit}
.portfolio-series>.portfolio-artwork-grid,.portfolio-series>.portfolio-sequence{grid-column:1/8;grid-row:1;min-width:0}
.portfolio-series[data-spread=reverse]>.portfolio-edit-note{grid-column:1/6;background:var(--orange);color:var(--ink)}
.portfolio-series[data-spread=reverse]>.portfolio-artwork-grid,.portfolio-series[data-spread=reverse]>.portfolio-sequence{grid-column:6/13}
.portfolio-series>.portfolio-page-navigation{grid-column:1/8;grid-row:2}
.portfolio-series[data-spread=reverse]>.portfolio-page-navigation{grid-column:6/13}
.portfolio-artwork-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.3vw,20px);align-items:start}
.portfolio-artwork,.portfolio-page{position:relative;min-width:0;margin:0;overflow:visible}
.portfolio-artwork img{display:block;width:100%;height:auto;object-fit:contain}
.portfolio-artwork:last-child:nth-child(odd){grid-column:1/-1;width:100%}
.portfolio-artwork:only-child{width:100%}
.portfolio-sequence{width:100%;min-width:0;align-self:start}
.portfolio-page{display:block;min-height:0;height:auto}
.portfolio-page img{display:block;width:100%;height:auto;max-width:100%;max-height:none;object-fit:contain}
.portfolio-page-navigation{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(12px,2vw,30px);min-height:82px;padding:6px 0 18px}
.portfolio-text-button{display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);min-height:54px;padding:8px 0;border:0;border-radius:0;background:none;color:inherit;cursor:pointer;font:500 13px/1.3 Montserrat,Arial,sans-serif}
.portfolio-text-button svg{display:block;width:clamp(36px,4vw,64px);height:auto;flex-shrink:0;pointer-events:none}
.portfolio-previous{justify-self:start}
.portfolio-next{justify-self:end}
.portfolio-previous:hover svg{transform:translateX(-5px)}
.portfolio-next:hover svg{transform:translateX(5px)}
.portfolio-text-button:disabled{visibility:hidden;cursor:default;pointer-events:none}
.portfolio-page-number{display:flex;align-items:baseline;gap:6px;color:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.portfolio-page-current{font:400 clamp(36px,3.8vw,64px)/1 'Bebas Neue',Arial,sans-serif;letter-spacing:-.025em}
.portfolio-page-total{font:500 clamp(11px,1vw,14px)/1.3 Montserrat,Arial,sans-serif}
.portfolio-page-scrubber{display:block;grid-column:1/-1;width:100%;margin:12px 0 0;height:2px;accent-color:var(--folio-blue);cursor:ew-resize}
.portfolio-media-error{display:grid;place-content:center;gap:12px;min-height:240px;padding:28px;font-size:12px;color:inherit;text-align:center}
.portfolio-media-error p{margin:0}
.portfolio-video-reader{max-width:580px;margin:0 auto 70px}
.portfolio-video-frame{display:grid;place-items:center;min-height:250px}
.portfolio-video-frame video{display:block;width:100%;max-height:70svh;object-fit:contain;cursor:pointer}
.portfolio-playback{display:flex;align-items:center;gap:12px;margin-top:18px}
.portfolio-video-seek{flex:1;min-width:0;height:2px;accent-color:var(--white);cursor:pointer}
.portfolio-time{font-size:10px;color:inherit;font-variant-numeric:tabular-nums}
.reel-playback-controls{position:absolute;left:calc(50% + min(18svh,157px) + 18px);top:50%;translate:0 -50%;z-index:4;color:var(--white)}
@media(max-width:760px){.portfolio-viewer{padding-inline:20px}.portfolio-intro{grid-template-columns:clamp(56px,10vw,80px) minmax(0,1fr);gap:clamp(18px,4vw,32px);padding:30px 0 36px}.portfolio-intro h2{font-size:clamp(64px,16vw,120px)}.portfolio-close{min-height:76px;gap:9px}.portfolio-close .portfolio-control-label{font-size:10px}.portfolio-series{grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:20px}.portfolio-series>.portfolio-edit-note,.portfolio-series[data-spread=reverse]>.portfolio-edit-note{grid-column:1;grid-row:2;gap:28px;padding:28px}.portfolio-series>.portfolio-artwork-grid,.portfolio-series>.portfolio-sequence,.portfolio-series[data-spread=reverse]>.portfolio-artwork-grid,.portfolio-series[data-spread=reverse]>.portfolio-sequence{grid-column:1;grid-row:1}.portfolio-series>.portfolio-page-navigation,.portfolio-series[data-spread=reverse]>.portfolio-page-navigation{grid-column:1;grid-row:3}.portfolio-edit-note h3{font-size:48px}.portfolio-edit-note p{max-width:42ch;font-size:12px}.portfolio-artwork-grid{gap:12px}.portfolio-page-navigation{min-height:80px;padding:14px 0}.portfolio-page-navigation .portfolio-control-label{font-size:10px}.portfolio-page-navigation svg{width:30px}.portfolio-text-button{gap:8px}.reel-playback-controls{left:auto;right:0;top:43%}}
@media(prefers-reduced-motion:reduce){.portfolio-viewer *{scroll-behavior:auto!important;transition:none!important}}