/* Additions for the art portfolio. The original forest, pixel UI and effects are preserved. */
:root { --admin-atmosphere:1; --admin-reveal-distance:35px; --admin-cta-intensity:1; }
html[data-admin-preview="true"] .godrays { opacity:var(--admin-atmosphere); }
html[data-admin-preview="true"] .reveal { transform:translateY(var(--admin-reveal-distance)); }
html[data-admin-preview="true"] .reveal-l { transform:translateX(calc(-1 * var(--admin-reveal-distance))); }
html[data-admin-preview="true"] .reveal-r { transform:translateX(var(--admin-reveal-distance)); }
html[data-admin-preview="true"] .reveal.vis,
html[data-admin-preview="true"] .reveal-l.vis,
html[data-admin-preview="true"] .reveal-r.vis { transform:translate(0); }
html[data-admin-preview="true"] .hero_cta_glow { opacity:calc(.42 * var(--admin-cta-intensity)); }
.showreel-poster { display:block; width:100%; height:100%; object-fit:cover; }
.hero_badge { padding:0; border:0; background:transparent; }
.hero_cta { position:relative; top:clamp(10px,2.2vh,24px); }

/* Product's exact skyline slots, with each rectangle redrawn as the original stepped fir. */
.hero_trees--far {
    height:58vh;
    bottom:-6vh;
    opacity:.32;
    filter:blur(1px);
    clip-path:polygon(0% 100%,0% 72%,5% 72%,5% 72%,5% 64.667%,5.833% 64.667%,5.833% 57.333%,6.667% 57.333%,6.667% 50%,8.333% 50%,8.333% 57.333%,9.167% 57.333%,9.167% 64.667%,10% 64.667%,10% 72%,10% 72%,10% 69.333%,10.833% 69.333%,10.833% 66.667%,11.667% 66.667%,11.667% 64%,13.333% 64%,13.333% 66.667%,14.167% 66.667%,14.167% 69.333%,15% 69.333%,15% 72%,15% 72%,15% 60.667%,15.667% 60.667%,15.667% 49.333%,16.333% 49.333%,16.333% 38%,17.667% 38%,17.667% 49.333%,18.333% 49.333%,18.333% 60.667%,19% 60.667%,19% 72%,19% 72%,19% 67.333%,20% 67.333%,20% 62.667%,21% 62.667%,21% 58%,23% 58%,23% 62.667%,24% 62.667%,24% 67.333%,25% 67.333%,25% 72%,25% 72%,25% 62.667%,25.833% 62.667%,25.833% 53.333%,26.667% 53.333%,26.667% 44%,28.333% 44%,28.333% 53.333%,29.167% 53.333%,29.167% 62.667%,30% 62.667%,30% 72%,30% 72%,30% 70.667%,31% 70.667%,31% 69.333%,32% 69.333%,32% 68%,34% 68%,34% 69.333%,35% 69.333%,35% 70.667%,36% 70.667%,36% 72%,36% 72%,36% 58%,36.667% 58%,36.667% 44%,37.333% 44%,37.333% 30%,38.667% 30%,38.667% 44%,39.333% 44%,39.333% 58%,40% 58%,40% 72%,40% 72%,40% 66.333%,41.167% 66.333%,41.167% 60.667%,42.333% 60.667%,42.333% 55%,44.667% 55%,44.667% 60.667%,45.833% 60.667%,45.833% 66.333%,47% 66.333%,47% 72%,47% 72%,47% 62%,47.833% 62%,47.833% 52%,48.667% 52%,48.667% 42%,50.333% 42%,50.333% 52%,51.167% 52%,51.167% 62%,52% 62%,52% 72%,52% 72%,52% 70.333%,53% 70.333%,53% 68.667%,54% 68.667%,54% 67%,56% 67%,56% 68.667%,57% 68.667%,57% 70.333%,58% 70.333%,58% 72%,58% 72%,58% 59.667%,58.833% 59.667%,58.833% 47.333%,59.667% 47.333%,59.667% 35%,61.333% 35%,61.333% 47.333%,62.167% 47.333%,62.167% 59.667%,63% 59.667%,63% 72%,63% 72%,63% 66.333%,64.167% 66.333%,64.167% 60.667%,65.333% 60.667%,65.333% 55%,67.667% 55%,67.667% 60.667%,68.833% 60.667%,68.833% 66.333%,70% 66.333%,70% 72%,70% 72%,70% 63.333%,71% 63.333%,71% 54.667%,72% 54.667%,72% 46%,74% 46%,74% 54.667%,75% 54.667%,75% 63.333%,76% 63.333%,76% 72%,76% 72%,76% 70%,77% 70%,77% 68%,78% 68%,78% 66%,80% 66%,80% 68%,81% 68%,81% 70%,82% 70%,82% 72%,82% 72%,82% 58.667%,82.833% 58.667%,82.833% 45.333%,83.667% 45.333%,83.667% 32%,85.333% 32%,85.333% 45.333%,86.167% 45.333%,86.167% 58.667%,87% 58.667%,87% 72%,87% 72%,87% 66%,88% 66%,88% 60%,89% 60%,89% 54%,91% 54%,91% 60%,92% 60%,92% 66%,93% 66%,93% 72%,93% 72%,93% 62.333%,93.667% 62.333%,93.667% 52.667%,94.333% 52.667%,94.333% 43%,95.667% 43%,95.667% 52.667%,96.333% 52.667%,96.333% 62.333%,97% 62.333%,97% 72%,97% 72%,97% 71.333%,97.5% 71.333%,97.5% 70.667%,98% 70.667%,98% 70%,99% 70%,99% 70.667%,99.5% 70.667%,99.5% 71.333%,100% 71.333%,100% 72%,100% 100%);
}

.hero_trees--mid {
    height:47vh;
    bottom:-3vh;
    opacity:.58;
    filter:none;
    clip-path:polygon(0% 100%,0% 77%,7% 77%,7% 77%,7% 68.667%,7.833% 68.667%,7.833% 60.333%,8.667% 60.333%,8.667% 52%,10.333% 52%,10.333% 60.333%,11.167% 60.333%,11.167% 68.667%,12% 68.667%,12% 77%,12% 77%,12% 74%,13% 74%,13% 71%,14% 71%,14% 68%,16% 68%,16% 71%,17% 71%,17% 74%,18% 74%,18% 77%,18% 77%,18% 62.667%,19% 62.667%,19% 48.333%,20% 48.333%,20% 34%,22% 34%,22% 48.333%,23% 48.333%,23% 62.667%,24% 62.667%,24% 77%,24% 77%,24% 70.667%,25.167% 70.667%,25.167% 64.333%,26.333% 64.333%,26.333% 58%,28.667% 58%,28.667% 64.333%,29.833% 64.333%,29.833% 70.667%,31% 70.667%,31% 77%,31% 77%,31% 76%,32.333% 76%,32.333% 75%,33.667% 75%,33.667% 74%,36.333% 74%,36.333% 75%,37.667% 75%,37.667% 76%,39% 76%,39% 77%,39% 77%,39% 66.667%,40% 66.667%,40% 56.333%,41% 56.333%,41% 46%,43% 46%,43% 56.333%,44% 56.333%,44% 66.667%,45% 66.667%,45% 77%,45% 77%,45% 72%,46.333% 72%,46.333% 67%,47.667% 67%,47.667% 62%,50.333% 62%,50.333% 67%,51.667% 67%,51.667% 72%,53% 72%,53% 77%,53% 77%,53% 60.667%,54% 60.667%,54% 44.333%,55% 44.333%,55% 28%,57% 28%,57% 44.333%,58% 44.333%,58% 60.667%,59% 60.667%,59% 77%,59% 77%,59% 69%,60.167% 69%,60.167% 61%,61.333% 61%,61.333% 53%,63.667% 53%,63.667% 61%,64.833% 61%,64.833% 69%,66% 69%,66% 77%,66% 77%,66% 75.333%,67.167% 75.333%,67.167% 73.667%,68.333% 73.667%,68.333% 72%,70.667% 72%,70.667% 73.667%,71.833% 73.667%,71.833% 75.333%,73% 75.333%,73% 77%,73% 77%,73% 65.333%,74% 65.333%,74% 53.667%,75% 53.667%,75% 42%,77% 42%,77% 53.667%,78% 53.667%,78% 65.333%,79% 65.333%,79% 77%,79% 77%,79% 71.333%,80.167% 71.333%,80.167% 65.667%,81.333% 65.667%,81.333% 60%,83.667% 60%,83.667% 65.667%,84.833% 65.667%,84.833% 71.333%,86% 71.333%,86% 77%,86% 77%,86% 61.667%,87% 61.667%,87% 46.333%,88% 46.333%,88% 31%,90% 31%,90% 46.333%,91% 46.333%,91% 61.667%,92% 61.667%,92% 77%,92% 77%,92% 73.333%,93.333% 73.333%,93.333% 69.667%,94.667% 69.667%,94.667% 66%,97.333% 66%,97.333% 69.667%,98.667% 69.667%,98.667% 73.333%,100% 73.333%,100% 77%,100% 100%);
}

.hero_trees--near {
    height:36vh;
    bottom:-2vh;
    opacity:1;
    filter:none;
    clip-path:polygon(0% 100%,0% 82%,8% 82%,8% 82%,8% 75.667%,9.167% 75.667%,9.167% 69.333%,10.333% 69.333%,10.333% 63%,12.667% 63%,12.667% 69.333%,13.833% 69.333%,13.833% 75.667%,15% 75.667%,15% 82%,15% 82%,15% 80%,16.333% 80%,16.333% 78%,17.667% 78%,17.667% 76%,20.333% 76%,20.333% 78%,21.667% 78%,21.667% 80%,23% 80%,23% 82%,23% 82%,23% 70.667%,24.167% 70.667%,24.167% 59.333%,25.333% 59.333%,25.333% 48%,27.667% 48%,27.667% 59.333%,28.833% 59.333%,28.833% 70.667%,30% 70.667%,30% 82%,30% 82%,30% 78%,31.5% 78%,31.5% 74%,33% 74%,33% 70%,36% 70%,36% 74%,37.5% 74%,37.5% 78%,39% 78%,39% 82%,39% 82%,39% 74%,40.333% 74%,40.333% 66%,41.667% 66%,41.667% 58%,44.333% 58%,44.333% 66%,45.667% 66%,45.667% 74%,47% 74%,47% 82%,47% 82%,47% 81.333%,48.5% 81.333%,48.5% 80.667%,50% 80.667%,50% 80%,53% 80%,53% 80.667%,54.5% 80.667%,54.5% 81.333%,56% 81.333%,56% 82%,56% 82%,56% 68.667%,57.333% 68.667%,57.333% 55.333%,58.667% 55.333%,58.667% 42%,61.333% 42%,61.333% 55.333%,62.667% 55.333%,62.667% 68.667%,64% 68.667%,64% 82%,64% 82%,64% 77.333%,65.667% 77.333%,65.667% 72.667%,67.333% 72.667%,67.333% 68%,70.667% 68%,70.667% 72.667%,72.333% 72.667%,72.333% 77.333%,74% 77.333%,74% 82%,74% 82%,74% 72.667%,75.333% 72.667%,75.333% 63.333%,76.667% 63.333%,76.667% 54%,79.333% 54%,79.333% 63.333%,80.667% 63.333%,80.667% 72.667%,82% 72.667%,82% 82%,82% 82%,82% 80.667%,83.5% 80.667%,83.5% 79.333%,85% 79.333%,85% 78%,88% 78%,88% 79.333%,89.5% 79.333%,89.5% 80.667%,91% 80.667%,91% 82%,91% 82%,91% 74.667%,91.833% 74.667%,91.833% 67.333%,92.667% 67.333%,92.667% 60%,94.333% 60%,94.333% 67.333%,95.167% 67.333%,95.167% 74.667%,96% 74.667%,96% 82%,100% 82%,100% 100%);
}
.gallery-item--featured { aspect-ratio:16/9; }
.gallery-item_overlay .project-traits { color:var(--text2); margin-left:.5em; white-space:nowrap; }
.case-copy { color:var(--text2); font-size:1rem; line-height:1.75; }
.case-copy h4 { font-family:var(--font-pix); font-size:1.55rem; color:var(--accent); margin:0 0 .8rem; }
.case-copy p + p { margin-top:.8rem; }
.case-copy ul { padding-left:1.3rem; }
.case-copy li + li { margin-top:.7rem; }
.case-copy strong { color:var(--text); font-weight:600; }
.project-collage figure { margin:0; }
.project-collage video { height:auto; background:#050a07; }
.project-collage img { height:auto; display:block; }
.project-collage .collage-item { gap:.5rem; }
.project-collage .collage-item > span { display:flex; align-items:center; min-height:3.25rem; line-height:1.4; padding:.65rem 1rem; }
.case-media-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; align-items:stretch; }
.case-media-pair > .collage-item { min-width:0; display:grid; grid-template-rows:auto 1fr; }
.lightbox_content .lb-project-container :is(.case-media-pair, .project-collage > .collage-item:first-child:has(video)) { margin-inline:calc(-1 * var(--case-inset)); max-width:none; }
.case-video { position:relative; min-width:0; }
.case-video video { display:block; }
.case-video-cover { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; padding:0; border:1px solid var(--border); background:var(--bg); cursor:pointer; }
.case-video-cover[hidden] { display:none; }
.case-video-cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border:0; }
.case-video-cover::after { content:'▶'; position:relative; display:grid; place-items:center; width:3.5rem; height:3.5rem; padding-left:.15rem; background:rgba(14,28,19,.9); border:1px solid var(--accent); color:var(--accent); font-size:1.4rem; }
.case-video-cover:hover::after { background:var(--bg3); color:var(--gold); border-color:var(--gold); }
.case-video-cover:focus-visible { outline-offset:-5px; }
.case-image-link { display:block; cursor:zoom-in; }
.case-image-detail { position:relative; overflow:hidden; aspect-ratio:var(--detail-ratio); border:1px solid var(--border); }
.lightbox_content .lb-project-container .case-image-detail > img { position:absolute; width:var(--detail-width); max-width:none; height:auto; left:var(--detail-left); top:var(--detail-top); border:0; }
.case-color-grid { row-gap:1.25rem; }
.case-comparison { align-items:center; }
.case-comparison .case-video { width:min(100%,calc(max(120px,var(--case-height) - 160px) * .888889)); }
.case-comparison > span { align-self:stretch; }
.case-source { color:var(--accent); text-underline-offset:4px; text-decoration:underline; }
.case-source:hover { color:var(--gold); }
.project-header p + p { margin-top:.5rem; }
.lightbox {
    --case-height:calc(var(--app-height) - var(--safe-top) - var(--safe-bottom) - 104px);
    padding-top:calc(48px + var(--safe-top));
    padding-bottom:calc(56px + var(--safe-bottom));
}
.lightbox_content { height:var(--case-height); max-height:var(--case-height); }
.lb-project-container { --case-inset:2rem; padding:var(--case-inset); height:100%; max-height:100%; overscroll-behavior:contain; }
.lightbox_close { top:-40px; min-width:32px; min-height:32px; }
.lightbox_nav { transition:color .2s,border-color .2s,background-color .2s; }
.lightbox_nav[hidden] { display:none; }
.project-collage > figure:first-child video { max-height:none; object-fit:contain; }
.gallery-item:focus-visible .gallery-item_inner { outline:2px solid var(--gold); outline-offset:5px; }
a:focus-visible,button:focus-visible,select:focus-visible,.lb-project-container:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
@media(min-width:769px) {
    .gallery-grid { grid-template-columns:repeat(12,minmax(0,1fr)); }
    .gallery-item { grid-column:span 4; }
    .gallery-item--featured { grid-column:span 6; }
    .hero_title { font-size:clamp(3.2rem,5.25vw,4.5rem); line-height:1.2; }
}
@media(max-width:768px) {
    .gallery-item, .gallery-item--featured { grid-column:1 / -1; }
    .lb-project-container { --case-inset:1.25rem; }
    .case-media-pair { grid-template-columns:minmax(0,1fr); gap:1.8rem; }
    .lightbox_nav { top:auto; bottom:-44px; transform:none; width:42px; height:36px; }
    .lightbox_prev { left:0; }
    .lightbox_next { right:0; }
    .lightbox_counter { bottom:-34px; }
}
@media(max-width:560px) {
    .project-header h3 { font-size:2rem; line-height:1.15; }
    .project-header { margin-bottom:1.3rem; }
    .project-collage { gap:1.8rem; }
    .collage-item span { font-size:.95rem; padding:.5rem .65rem; }
}

@font-face{font-family:VT323;src:url("fonts/vt323/VT323-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}

/* Delivery: finished work and optional production material. */
.case-process { border-top:1px solid var(--border-l); padding-top:1rem; }
.case-process > summary { color:var(--accent); font-family:var(--font-pix); font-size:1.4rem; cursor:pointer; padding:.45rem 0; min-height:44px; }
.case-process > summary:hover { color:var(--gold); }
.case-process > summary:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }
.case-process-content { display:flex; flex-direction:column; gap:2.5rem; padding-top:1.5rem; }
.lightbox:not(.open) { pointer-events:none; }
.nav_links a { white-space:nowrap; }
.nav { display:block; }
.nav_main { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:1rem; min-height:32px; }
.nav_main .nav_logo { display:inline-block; justify-self:start; line-height:1; }
.nav_main .nav_actions { justify-self:end; }
.nav_portal { display:inline-flex; align-items:center; min-height:28px; margin-top:.28rem; padding:0; color:var(--accent); font-family:var(--font-pix); font-size:1.08rem; letter-spacing:1.2px; line-height:1; transition:color .2s; }
.nav_portal:hover,.nav_portal:focus-visible { color:var(--gold); text-decoration:underline; text-underline-offset:4px; }
.contact_resume { display:flex; flex-direction:column; align-items:center; gap:.4rem; margin-top:2rem; color:var(--text2); }
.contact_resume > span { font-size:.9rem; letter-spacing:.02em; }
.contact_resume > a { color:var(--accent); font-family:var(--font-body); font-size:1.55rem; line-height:1.1; text-decoration:underline; text-underline-offset:5px; transition:color .2s; }
.contact_resume > a:hover,.contact_resume > a:focus-visible { color:var(--gold); }
@media(min-width:769px) and (max-width:1100px) {
    .nav_links { gap:.8rem; }
    .nav_links a { letter-spacing:.4px; }
    .nav_main { gap:1rem; }
}
@media(max-width:768px) {
    .case-process-content { gap:1.8rem; }
    .nav_main { grid-template-columns:minmax(0,1fr) auto; }
    .nav_links a { display:block; min-height:44px; padding:.45rem 0; }
    .nav_links { gap:.55rem; }
}


/* Only diploma media fills the existing modal's inner edges. Text remains readable. */
.lightbox.is-rifted .lb-project-container :is(.project-header,.case-copy) { max-width:760px; margin-inline:auto; }
.lightbox.is-rifted .lb-project-container .project-collage > .collage-item { margin-inline:calc(-1 * var(--case-inset)); max-width:none; }
.lightbox.is-rifted .lb-project-container .collage-item > .case-image-link { width:100%; max-width:none; }
.lightbox.is-rifted .lb-project-container .collage-item > span { max-width:760px; width:100%; margin-inline:auto; padding-inline:var(--case-inset); }