.contact.portfolio-closing{--paper:#171919;--ink:#f5f1e8;--muted:#c1bbb0;--line:#f5f1e82b;position:relative;isolation:isolate;background:var(--paper);color:var(--ink);padding:0 20px;overflow:clip}
.closing-texture{position:absolute;inset:0;z-index:-1;opacity:.22;mix-blend-mode:multiply}
.contact.portfolio-closing .closing-texture{opacity:.16;mix-blend-mode:soft-light}
.portfolio-closing a:focus-visible,.portfolio-closing button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.closing-grid{position:absolute;inset:0 20px;z-index:-1}
.closing-cta{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:end;padding:90px 0 80px;border-bottom:1px solid var(--line)}
.closing-label{font-family:'Ballet',cursive;font-size:clamp(40px,4.5vw,72px);font-weight:400;line-height:1.2;margin:0 0 30px;padding-left:8px}
.contact .closing-title{font-family:Helvetica,Arial,sans-serif;font-size:clamp(64px,7.8vw,144px);line-height:.96;font-weight:700;letter-spacing:-.065em;margin:0;max-width:none}
.closing-title span{display:block}
.closing-invitation{max-width:380px;justify-self:end;padding-bottom:6px}
.closing-invitation p{font-size:16px;line-height:1.6;margin:0 0 28px;max-width:34ch}
.contact .contact-action{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:54px;border:1px solid var(--accent);border-radius:999px;padding:16px 24px;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:700}
.contact .contact-action:is(:hover,:focus-visible){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.contact-action-icon{width:18px;height:18px;flex:none}
.closing-footer{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:64px 0 56px}
.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:40px 32px;align-self:start;padding-top:16px}
.footer-links h3,.vinyl-kicker{font-size:10px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;font-weight:400;margin:0 0 20px;color:var(--muted)}
.footer-link-list{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-resource{display:flex;align-items:center;gap:12px;max-width:100%;font-size:16px;line-height:1.3;padding:5px 0;border-bottom:1px solid transparent;transition:border-color .25s}
.footer-resource:is(:hover,:focus-visible){border-color:var(--ink)}
.footer-resource[aria-disabled=true]{cursor:default}
.footer-resource[aria-disabled=true]:hover{border-color:transparent}
.footer-link-label{min-width:0}
.footer-link-status{font-size:9px;line-height:1.3;color:var(--muted);white-space:nowrap}
.footer-link-arrow{font-size:16px}
.vinyl-corner{width:100%;max-width:420px;justify-self:end;min-width:0}
.vinyl-kicker{margin-bottom:14px}
.vinyl-scene{--player-box:color-mix(in srgb,var(--paper) 90%,var(--ink));position:relative;width:100%;aspect-ratio:1;background:var(--player-box);border:1px solid var(--line);border-radius:6px;isolation:isolate}
.vinyl-disc{position:absolute;inset:7%;border-radius:50%;background:color-mix(in srgb,var(--accent) 72%,#b7b0a4);animation:vinyl-spin 24s linear infinite;box-shadow:0 3px 12px #0003;overflow:hidden}
.vinyl-disc:before{content:'';position:absolute;inset:0;background:#30342f;opacity:.72;mask:url(footer-disc-art.webp) center/contain no-repeat;-webkit-mask:url(footer-disc-art.webp) center/contain no-repeat}
.vinyl-spotify-link{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:14%;aspect-ratio:1;border-radius:50%;background:var(--player-box);color:var(--accent);border:0;box-shadow:none;padding:0;transition:background .2s,color .2s}
.vinyl-spotify-link svg{display:block;width:50%;height:50%;fill:currentColor;overflow:visible}
.vinyl-spotify-link:is(:hover,:focus-visible){background:var(--player-box);color:var(--ink)}
.vinyl-corner.is-offscreen .vinyl-disc,.vinyl-corner.is-reduced-motion .vinyl-disc{animation-play-state:paused}
.vinyl-playback{position:absolute;width:0;height:0}
.vinyl-play-button{position:absolute;right:8px;bottom:8px;display:grid;place-items:center;width:44px;height:44px;flex:none;padding:10px;border:0;border-radius:50%;background:transparent;color:var(--accent);cursor:pointer}
.vinyl-play-button svg{width:22px;height:22px}
.vinyl-mic-slash{display:none}
.vinyl-corner.is-paused .vinyl-mic-slash{display:block}
.vinyl-play-button:is(:hover,:focus-visible){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.vinyl-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.vinyl-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.vinyl-caption-copy{font-size:12px;line-height:1.4;max-width:24ch;color:var(--muted)}
.vinyl-caption .footer-resource{font-size:13px;flex-shrink:0}
:is(.contact,.closing-footer-shell) .foot{margin:0;padding:22px 0;border-top:1px solid var(--line);font-size:11px;line-height:1.5;color:var(--muted);opacity:1;align-items:center;gap:20px;flex-wrap:wrap}
.footer-signature{color:var(--ink);font-weight:700;letter-spacing:-.03em}
@keyframes vinyl-spin{to{transform:rotate(360deg)}}
@media(max-width:1000px){.closing-cta{grid-template-columns:1.35fr 1fr;gap:32px}.closing-footer{gap:40px}.footer-resource{font-size:14px}.footer-links{gap:32px 20px}.vinyl-caption{align-items:flex-start;flex-direction:column}}
@media(max-width:650px){.contact.portfolio-closing{padding-inline:12px}.closing-grid{inset-inline:12px}.closing-cta{grid-template-columns:1fr;gap:30px;padding:56px 0 48px}.closing-label{font-size:42px;margin-bottom:26px}.contact .closing-title{font-size:clamp(52px,11.6vw,76px)}.closing-invitation{justify-self:start;max-width:100%;padding:0}.closing-invitation p{font-size:15px;max-width:34ch;margin-bottom:24px}.closing-footer{grid-template-columns:1fr;gap:40px;padding:40px 0}.footer-links{gap:28px 16px;padding-top:0}.footer-resource{font-size:15px;gap:8px}.footer-link-status{font-size:8px}.vinyl-corner{max-width:460px;justify-self:center}.vinyl-caption{flex-direction:row;align-items:center}.vinyl-caption-copy{font-size:11px}:is(.contact,.closing-footer-shell) .foot{gap:16px;font-size:10px}.footer-location{display:none}}
@media(max-width:360px){.footer-links{grid-template-columns:1fr}.vinyl-caption{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.vinyl-disc{animation:none}.vinyl-spotify-link,.footer-resource,.contact-action{transition:none}}

/* Theme-colored invitation followed by a separate dark footer. */
.contact.portfolio-closing{--paper:var(--accent);--ink:var(--on-accent);--muted:var(--on-accent);--line:color-mix(in srgb,var(--on-accent) 22%,transparent);padding:0;background:var(--accent);color:var(--on-accent)}
.portfolio-closing>.contact-inner{padding-inline:20px}
.closing-cta{border-bottom:0}
.contact .contact-action{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
.contact .contact-action:is(:hover,:focus-visible){background:transparent;color:var(--on-accent);border-color:var(--on-accent)}
.closing-footer-shell{position:relative;--paper:#171919;--ink:#f5f1e8;--muted:#c1bbb0;--line:#f5f1e82b;background:var(--paper);color:var(--ink);padding-inline:20px}
.closing-footer-shell .closing-footer{grid-template-columns:1fr;padding:48px 0}
.closing-footer-shell .footer-links{width:100%;max-width:640px;padding:0}
@media(max-width:650px){.portfolio-closing>.contact-inner,.closing-footer-shell{padding-inline:12px}}
/* Project mockups keep their own palette across themes. */
.project .art{--paper:#f5f1e8;--ink:#20251f;--muted:#72736b;--accent:#9aaf91;--on-accent:#20251f;--sculpture:#b6c2ad}

.project .project-image{position:relative;background:#062b25;aspect-ratio:1600/1131;height:auto;color:#fff}
.project-image>img{display:block;width:100%;height:100%;object-fit:contain}
.project-image .num,.project-image .project-arrow{z-index:1;color:#fff}

/* Scroll-bent work images may extend into the page margins. */
#work,#work .projects,#work .project,#work .project-image{overflow:visible}
#work .project-image{background:transparent}

/* Let the shared image bend extend beyond section margins. */
#hero-canvas.hero.art-direction-hero{contain:layout;overflow:visible}
#work .art{overflow:visible}

/* Consistent project frames across every row and screen size. */
#work .project .art{aspect-ratio:1600/1131;height:auto;width:100%}
#work .project-image>img{object-fit:cover}

/* Keep intrinsic image sizes from widening Safari's project grid. */
#work .projects{grid-template-columns:repeat(2,minmax(0,1fr))}
#work .project{min-width:0}
#work .project-image{display:block}
#work .project-image>img{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:520px){#work .projects{grid-template-columns:minmax(0,1fr)}}
/* Effects can cross section gutters, but cannot expand the page viewport. */
html,body{overflow-x:clip}

/* Uniform, high-contrast project captions. */
#work .project-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;padding:16px 0 0;margin:0;flex-wrap:wrap;background:transparent;color:#fff}
#work .project-title h3{margin:0;font-size:14px;font-weight:500;line-height:1.4;letter-spacing:-.02em;color:#fff;opacity:1}
#work .project-title>span{font-size:14px;line-height:1.5;color:#fff;opacity:.8}
#work .project-image .num{font-size:13px;line-height:1.4}
@media(max-width:800px){#work .project-title{flex-direction:column;align-items:flex-start;gap:6px}}

/* Rounded project corners without clipping the scroll bend. */
#work .project-image{border-radius:4px}
#work .project-image>img{border-radius:4px}

/* Keep title glyphs and their scroll displacement inside open paint bounds. */
.contact.portfolio-closing,.closing-cta,.closing-title,.closing-title span{overflow:visible}

/* Pale theme tint keeps the invitation light in every palette. */
.contact.portfolio-closing{--paper:color-mix(in srgb,var(--accent) 22%,#fff 78%);--ink:#20251f;--muted:#454a43;--line:#20251f26;background:var(--paper);color:var(--ink)}
.contact.portfolio-closing .contact-action{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.contact.portfolio-closing .contact-action:is(:hover,:focus-visible){background:transparent;color:var(--ink);border-color:var(--ink)}