/* Quiet ambient gradients and responsive, rippling display type. */
.contact-stage,.contact-ending{--contact-ink:#21143e;position:relative;isolation:isolate;overflow:hidden;color:var(--contact-ink);background:#d3b6ee;background-image:radial-gradient(ellipse at 10% 20%,#d6abf0,transparent 60%),radial-gradient(ellipse at 90% 70%,#a2c2e5,transparent 60%),linear-gradient(120deg,#f3b0bd,#e8d8ba 48%,#9675d7)}
.contact-colour{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;opacity:1}
.contact-stage:after,.contact-ending:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,#f6eaff60,transparent 72%)}
.contact-stage{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:132px 5% 36px;touch-action:pan-y}
.contact-overline{display:flex;justify-content:space-between;align-items:center;gap:20px;font:11px/1.6 var(--type-body,Arial,sans-serif);letter-spacing:.1em}
.contact-overline p{margin:0}.contact-motion-toggle{border:1px solid #241c4838;border-radius:50%;width:40px;height:40px;padding:0;background:#ffffff26;color:inherit;font-size:16px;cursor:pointer}
.contact-stage .opening-copy.contact-message{position:relative;inset:auto;transform:none;width:100%;max-width:none;text-align:center;padding:36px 0 32px;pointer-events:auto;color:inherit}
.contact-message .contact-statement{font-family:var(--type-display,Georgia,serif);font-weight:400;font-size:clamp(70px,9.9vw,174px);line-height:.96;letter-spacing:-.055em;margin:0 auto 28px;max-width:1300px;text-wrap:balance}
.contact-statement>span{display:block}.contact-statement em{font-family:var(--type-accent,Georgia,serif);font-weight:400;color:inherit}
.contact-message .contact-belief{font-size:clamp(14px,1.15vw,18px);line-height:1.65;max-width:510px;margin:0 auto;text-wrap:balance;color:inherit}
.contact-details{border-top:1px solid #241c483b;padding-top:22px;display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end;font-size:13px;line-height:1.6}
.contact-details p{margin:0}.contact-details .contact-email{font-size:clamp(20px,2.1vw,32px);letter-spacing:-.025em;text-decoration:none;border-bottom:1px solid currentColor;width:fit-content;margin-bottom:9px}
.contact-details a{display:inline-block;text-underline-offset:5px}.contact-place{opacity:.75}.contact-detail-links{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-self:center}.contact-gesture{justify-self:end;text-align:right;max-width:200px;font-size:11px;opacity:.75}
.contact-stage a:focus-visible,.contact-ending a:focus-visible,.contact-motion-toggle:focus-visible{outline:2px solid currentColor;outline-offset:7px}
.contact-ending{padding:100px 6% 38px;min-height:570px;display:flex;flex-direction:column;justify-content:space-between;margin-top:0}
.contact-ending .contact-ending-top{display:flex;justify-content:space-between;gap:24px;align-items:center;font-size:11px;letter-spacing:.07em}.contact-ending-top p{margin:0}
.contact-ending h2{font:400 clamp(52px,7vw,110px)/1.02 var(--type-display,Georgia,serif);letter-spacing:-.045em;text-align:center;max-width:1100px;margin:50px auto 55px;text-wrap:balance}
.contact-ending h2 em{font-family:var(--type-accent,Georgia,serif);font-weight:400;color:inherit}
.contact-ending .contact-details{grid-template-columns:1fr auto}.contact-ending .contact-detail-links{justify-content:flex-end}
.contact-page .end{background:#d6c4e9;padding:24px 5%;min-height:0;gap:24px;border:0;align-items:center}.contact-page .end .small-index{display:none}.contact-page .end a{font-size:13px;line-height:1.6;margin:0}.contact-page header.nav,.contact-page header.nav:before{background:transparent;color:#21143e}.contact-page .light-water{opacity:.25}
.contact-stage[data-paused=true] .contact-gesture{visibility:hidden}
@media(min-width:761px){.contact-stage{min-height:780px;min-height:max(780px,100svh)}}
@media(max-width:760px){.contact-stage{padding:112px 7% 28px;min-height:100svh;gap:22px}.contact-overline{font-size:9px;letter-spacing:.07em}.contact-stage .opening-copy.contact-message{padding:15px 0}.contact-message .contact-statement{font-size:clamp(62px,13vw,98px);line-height:1.02;letter-spacing:-.05em;margin-bottom:26px}.contact-message .contact-belief{max-width:330px;font-size:13px}.contact-details{grid-template-columns:1fr;gap:18px;padding-top:20px}.contact-detail-links{justify-content:flex-start;align-self:auto;font-size:12px;gap:24px}.contact-gesture{display:none}.contact-details .contact-email{font-size:24px}.contact-place{font-size:11px}.contact-ending{padding:60px 7% 30px;min-height:480px}.contact-ending h2{font-size:clamp(48px,10.5vw,76px);margin:40px auto}.contact-ending .contact-details{grid-template-columns:1fr}.contact-ending .contact-detail-links{justify-content:flex-start}.contact-ending-top{font-size:9px!important}.contact-page .end{padding:24px 7%;flex-wrap:wrap}.contact-page .end a{font-size:12px}}
@media(prefers-reduced-motion:reduce){.contact-motion-toggle,.contact-gesture{display:none}}
/* The contact composition is also the page ending, without a second footer band. */
.contact-stage .contact-message{user-select:none;-webkit-user-select:none}
.contact-ending+.end,.contact-page footer.end{display:none}

.contact-stage,.contact-ending{background:#ede7f2;background-image:radial-gradient(ellipse at 10% 20%,#ead1df,transparent 85%),radial-gradient(ellipse at 90% 70%,#c5cfea,transparent 85%)}
.contact-statement,.contact-ending h2{overflow:visible}

/* Continue the timeline's paper into the animated contact colour field.
   The veil sits above the opaque WebGL canvas but below all text/controls. */
.projects-page .contact-ending::after{
 background:linear-gradient(to bottom,
   #fbf7f5 0%,#fbf7f5f5 12%,#fbf7f5d6 30%,
   #fbf7f58c 53%,#fbf7f538 76%,#fbf7f500 100%) top/100% clamp(160px,24svh,260px) no-repeat,
   radial-gradient(ellipse at 50% 44%,#f6eaff60,transparent 72%);
}

/* A complete final viewport, with a coloured transition rather than white. */
.projects-page #about-invitation.contact-ending{box-sizing:border-box;min-height:100svh;min-height:100dvh;padding-top:max(100px,12svh);padding-bottom:5svh}
.projects-page .contact-ending::after{background:linear-gradient(to bottom,#e9e1ed, #e9e1ed80 35%,transparent) top/100% 16svh no-repeat}
/* Editorial invitation: a statement, a possibility, then a clear way in. */
.contact-ending .invitation-composition{width:100%;margin:auto 0;padding:4vh 0}
.invitation-notes{display:flex;justify-content:space-between;gap:24px;font-size:clamp(10px,.75vw,14px);letter-spacing:.08em}
.invitation-hint{letter-spacing:0;opacity:.7;text-align:right}
.contact-ending .invitation-composition h2{max-width:none;width:100%;font-size:clamp(64px,10.5vw,200px);line-height:.91;text-align:left;margin:4vh 0 3vh;letter-spacing:-.05em}
.invitation-composition h2>span{display:block}.invitation-composition h2>span+span{text-align:right}
.invitation-bottom{display:flex;justify-content:space-between;align-items:center;padding-left:10%;gap:24px}
.invitation-bottom p{font-size:clamp(14px,1.05vw,20px);line-height:1.6;margin:0}
.invitation-orbit{display:flex;align-items:center;justify-content:center;gap:16px;width:clamp(110px,10vw,168px);aspect-ratio:1;border:1px solid #39244b65;border-radius:50%;text-decoration:none;color:inherit;background:#ffffff15;transition:transform .4s,background .4s,box-shadow .4s}
.invitation-orbit b{font-size:32px;font-weight:400}.invitation-orbit:hover,.invitation-orbit:focus-visible{transform:rotate(-8deg) scale(1.06);background:#ffffff65;box-shadow:0 10px 50px #493a7d25}
.contact-ending .contact-details{padding-top:18px}.contact-ending .contact-email{transition:letter-spacing .3s}.contact-ending .contact-email:hover{letter-spacing:.015em}
@media(max-width:760px){.contact-ending .invitation-composition{padding:32px 0}.invitation-notes{font-size:9px}.invitation-hint{max-width:120px}.contact-ending .invitation-composition h2{font-size:clamp(52px,12vw,90px);margin:40px 0 30px}.invitation-bottom{padding-left:0}.invitation-bottom p{font-size:13px}.invitation-orbit{width:96px;flex-shrink:0;font-size:12px;gap:8px}.invitation-orbit b{font-size:24px}}
@media(prefers-reduced-motion:reduce){.invitation-orbit{transition:none}.invitation-orbit:hover{transform:none}}