/* Full-bleed editorial cards, based on the supplied typographic motion reference. */
.personal{padding-top:45px;padding-bottom:100px}
.personal .section-heading{margin-bottom:48px}
.personal-gallery{width:100%;position:relative;color:var(--text)}
.personal-poster-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--ui-radius);isolation:isolate;container-type:inline-size;background:var(--bg)}
.personal-poster{position:absolute;inset:0;background:transparent;color:var(--text);overflow:hidden}
.personal-poster[hidden]{display:none}
.personal-poster-type{color:var(--poster-color);position:absolute;margin:0;font-family:'Portfolio Jeko',Arial,sans-serif;font-weight:650;font-size:7.8cqw;line-height:.83;letter-spacing:-.065em;white-space:nowrap;z-index:1;pointer-events:none;will-change:transform}
.personal-poster-type--top{left:4.5%;top:3%;text-align:left}
.personal-poster-type--bottom{right:4.5%;bottom:3%;text-align:right}
.personal-poster.is-reversed .personal-poster-type--top{left:auto;right:4.5%;text-align:right}
.personal-poster.is-reversed .personal-poster-type--bottom{right:auto;left:4.5%;text-align:left}
.personal-poster.has-long-type .personal-poster-type{font-size:6.8cqw}
.personal-poster-art{position:absolute;left:50%;top:50%;width:36%;height:64%;padding:0;border:0;border-radius:var(--ui-radius);background:transparent;color:#fff;z-index:2;transform:translate(-50%,-50%);will-change:transform;cursor:pointer;touch-action:pan-y}
.personal-poster-crop{display:block;position:absolute;inset:0;overflow:hidden;border-radius:var(--ui-radius);background:transparent}
.personal-poster-slide{position:absolute;inset:0;display:block;will-change:transform}
.personal-poster-art img{position:absolute;max-width:none;display:block;pointer-events:none;user-select:none}
.personal-poster-open{position:absolute;left:0;right:0;bottom:0;padding:12px 8px;background:#0009;color:#fff;font-size:11px;text-align:center;opacity:0;transition:opacity .18s}
.personal-poster-art:hover .personal-poster-open,.personal-poster-art:focus-visible .personal-poster-open{opacity:1}
.personal-poster-art:focus-visible{outline:3px solid #fff;outline-offset:7px}
.personal-poster-art.has-error .personal-poster-open{opacity:1}
.personal-poster-meta{position:absolute;right:4.5%;top:6%;text-align:right;font-size:10px;line-height:1.5;z-index:3;pointer-events:none}
.personal-poster-meta h3{font-size:12px;font-weight:500;margin:3px 0 0}
.personal-poster.is-reversed .personal-poster-meta{right:auto;left:4.5%;text-align:left}
.personal-reel-hint{margin-top:14px;font-size:11px;line-height:1.6;color:var(--muted)}
.personal-footer{display:none}
.personal-reel-controls{position:relative;display:flex;justify-content:center;gap:16px;margin:8px auto 0;width:max-content;z-index:5}
.personal-reel-arrow{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:50%;background:transparent;color:var(--text);cursor:pointer;touch-action:manipulation;transition:color .15s}
.personal-reel-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.personal-reel-arrow:hover,.personal-reel-arrow:active{color:#6666ff;background:transparent}
.personal-reel-arrow:disabled{opacity:.25;cursor:default}
.personal-reel-arrow:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:900px){.personal-poster-meta{font-size:9px}.personal-poster-meta h3{font-size:10px}}
@media(max-width:680px){
 .personal{padding-top:25px;padding-bottom:65px}.personal .section-heading{margin-bottom:32px}
 .personal-poster-stage{aspect-ratio:4/5}
 .personal-poster-type{font-size:13.5cqw;line-height:.88;letter-spacing:-.065em}
 .personal-poster-type--top{top:13%;left:6%}.personal-poster-type--bottom{bottom:13%;right:6%}
 .personal-poster.is-reversed .personal-poster-type--top{right:6%;top:13%}.personal-poster.is-reversed .personal-poster-type--bottom{left:6%;bottom:13%}
 .personal-poster.has-long-type .personal-poster-type{font-size:11.8cqw}
 .personal-poster-art{width:54%;height:43.2%}
 .personal-poster-meta{top:4%;right:6%;display:flex;align-items:center;gap:10px;text-align:left}.personal-poster-meta h3{margin:0;font-size:10px}
 .personal-poster.is-reversed .personal-poster-meta{left:6%}
}
@media(prefers-reduced-motion:reduce){.personal-poster-type,.personal-poster-art,.personal-poster-slide{will-change:auto}.personal-poster-open{transition:none}}

/* Project names come directly from the library, including longer bilingual titles. */
.personal-poster-meta{max-width:43%}
.personal-poster-meta h3{overflow-wrap:anywhere}
@media(max-width:680px){.personal-poster-meta{max-width:88%;align-items:flex-start}.personal-poster-meta>span{flex:none}}

/* Keep the composition in normal page flow; horizontal gestures change the artwork. */
.personal-scroll-track{position:relative;overflow-anchor:none}
.personal-scroll-reel{position:relative;top:auto;max-width:min(100%,calc((100svh - 230px)*16/9));margin-inline:auto}
.personal-scroll-reel .personal-poster-stage{overflow:clip;touch-action:pan-y;user-select:none}
.personal-scroll-reel .personal-poster,.personal-scroll-reel .personal-poster-crop{overflow:clip}
.personal-scroll-reel .personal-reel-hint{margin:12px 0 0;max-width:none;min-height:18px;font-size:10px}
@media(max-width:680px){
 .personal-scroll-reel{top:auto;max-width:min(100%,calc((100svh - 220px)*.8))}
 .personal-scroll-reel .personal-reel-hint{font-size:9px}
}
html[data-theme="light"] .personal-poster-type{color:color-mix(in srgb,var(--poster-color) 78%,#111)}

.personal-poster-type{color:var(--type-dark)}
.personal-poster-type--bottom{color:var(--type-dark)}
html[data-theme="light"] .personal-poster-type{color:var(--type-light)}
html[data-theme="light"] .personal-poster-type--bottom{color:var(--type-light)}