/* One typographic composition, one blue-to-paper transition, native scrolling. */
.page-home { overflow-x: clip; }
.contact-finale {
    --contact-header: 70px;
    --contact-progress: 1;
    --contact-title-y: -4vh;
    --contact-title-scale: .88;
    --contact-email-y: -2vh;
    --contact-rule: 1;
    --contact-cut-left: -12%;
    --contact-cut-right: -4%;
    --contact-travel: clamp(360px, 66svh, 760px);
    --contact-gutter: max(var(--page-pad), calc((100% - 1536px) / 2));
    --contact-plane: polygon(0 var(--contact-cut-left), 100% var(--contact-cut-right), 100% 120%, 0 120%);
    position: relative;
    background: #edf6fc;
    scroll-margin-top: var(--contact-header);
}
.contact-finale.is-scroll-ready { height: calc(100svh - var(--contact-header) + var(--contact-travel)); }
.contact-scene {
    position: relative;
    height: max(620px, calc(100svh - var(--contact-header)));
    overflow: clip;
    isolation: isolate;
    background: #0649dc;
}
.is-scroll-ready .contact-scene { position: sticky; top: var(--contact-header); height: calc(100svh - var(--contact-header)); }
.contact-scene__paper { position: absolute; inset: 0; background: #edf6fc; clip-path: var(--contact-plane); }
.contact-scene__content { position: absolute; inset: 0; z-index: 1; color: #0743bc; padding-inline: var(--contact-gutter); }
.is-scroll-ready .contact-scene__content { color: #edf6fc; }
.contact-scene__content--light { color: #0743bc !important; clip-path: var(--contact-plane); pointer-events: none; }
.contact-finale:not(.is-scroll-ready) .contact-scene__content--light { display: none; }
.contact-scene__top {
    position: absolute; inset: 2.4rem var(--contact-gutter) auto;
    display: flex; justify-content: space-between; gap: 1rem;
    font: 500 .65rem/1.4 var(--sans); letter-spacing: .1em;
}
.contact-scene__title {
    position: absolute; top: 21%; margin: 0;
    font: 500 clamp(7rem, min(30vw, 42svh), 31rem)/.86 var(--p3-display);
    letter-spacing: -.065em; white-space: nowrap;
    transform: translateY(var(--contact-title-y)) scale(var(--contact-title-scale));
    transform-origin: left top;
}
.contact-scene__period { color: inherit; }
.contact-scene__invitation {
    position: absolute; top: 63%; margin: 0;
    font: 400 .9rem/1.5 var(--sans);
    transform: translateY(var(--contact-email-y));
}
.contact-scene__email {
    position: absolute; top: 70%; display: block;
    max-width: calc(100% - 2 * var(--contact-gutter));
    transform: translateY(var(--contact-email-y)); color: inherit;
}
.contact-scene__email-label { display: block; font: 500 .55rem/1.4 var(--sans); letter-spacing: .13em; margin-bottom: .55rem; }
.contact-scene__email strong { display: block; font: 400 clamp(2rem, 4.8vw, 5.4rem)/1.15 var(--sans); letter-spacing: -.045em; }
.contact-scene__email-rule { display: block; height: 1px; background: currentColor; margin-top: .85rem; opacity: .45; transform: scaleX(var(--contact-rule)); transform-origin: left; }
.contact-scene__bottom {
    position: absolute; inset: auto var(--contact-gutter) 1.8rem;
    display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.contact-scene__socials { display: flex; gap: 2rem; }
.contact-scene__socials a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .85rem/1.4 var(--sans); color: inherit; text-underline-offset: 6px; }
.contact-scene__signature { font: 500 .55rem/1.5 var(--sans); letter-spacing: .12em; text-align: right; }
.contact-scene a:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }
.contact-finale:has(.contact-scene__email:hover) .contact-scene__email strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
.contact-finale.is-scroll-ready.is-contact-near .contact-scene__title,
.contact-finale.is-scroll-ready.is-contact-near .contact-scene__email { will-change: transform; }
@media (max-width: 760px) {
    .contact-finale { --contact-header: 56px; --contact-travel: clamp(260px, 45svh, 420px); --contact-title-scale: .94; }
    .contact-scene { height: max(600px, calc(100svh - var(--contact-header))); }
    .contact-scene__top { top: 1.7rem; font-size: .55rem; }
    .contact-scene__title { top: 30%; font-size: 29vw; }
    .contact-scene__invitation { top: 58%; font-size: .85rem; }
    .contact-scene__email { top: 65%; }
    .contact-scene__email strong { font-size: clamp(1.55rem, 7.2vw, 3.3rem); }
    .contact-scene__email-label { margin-bottom: .8rem; }
    .contact-scene__bottom { bottom: 1.4rem; gap: 1rem; }
    .contact-scene__signature { font-size: .45rem; }
    .contact-scene__socials { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .contact-finale, .contact-finale * { scroll-behavior: auto; }
    .contact-finale { --contact-travel: 0px; }
}
/* Visual copy mirrors real focus/hover, but remains inert and hidden from AT. */
.contact-finale:has(.contact-scene__email:focus-visible) .contact-scene__email,
.contact-finale:has(a[href*="github.com"]:focus-visible) a[href*="github.com"],
.contact-finale:has(a[href*="bilibili.com"]:focus-visible) a[href*="bilibili.com"] { outline: 2px solid currentColor; outline-offset: 8px; }
.contact-finale:has(a[href*="github.com"]:hover) a[href*="github.com"],
.contact-finale:has(a[href*="bilibili.com"]:hover) a[href*="bilibili.com"] { text-decoration: underline; }