/* Variant 4: original source artwork in a crop window.
   Source gate: exact V0 in the isolated study → raster UI fails mobile/locale/keyboard
   use → semantic text + original terrain crop (source y364..797), level 3 adaptation. */
:is(body.portfolio-home,body.portfolio-case){--contact-ground:linear-gradient(90deg,#becb79 0%,#d4dcb0 38%,#b2c56f 100%)}
.contact-section{width:100%;background:#fbf8f4;color:#111;overflow:clip;scroll-margin-top:24px}
.contact-copy{text-align:center;padding:clamp(80px,8.512vw,151px) var(--gutter) 0;position:relative;z-index:1}
.contact-copy h2{font:500 clamp(44px,4.722vw,68px)/1.15 Manrope,Arial,sans-serif;letter-spacing:-.025em;text-wrap:balance}
.contact-primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:clamp(20px,1.353vw,24px);min-height:44px;font-size:clamp(24px,2.029vw,36px);font-weight:500;line-height:1.4;text-decoration:none;text-underline-offset:6px;text-decoration-thickness:2px}
.contact-primary:is(:hover,:focus-visible){text-decoration-line:underline;text-decoration-thickness:2px}
.contact-arrow{width:25px;height:15px;transform:rotate(-45deg);object-fit:contain}
.contact-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:clamp(18px,1.353vw,24px);font-size:clamp(16px,1.353vw,24px);line-height:1.4;color:#777}
.contact-meta a,.contact-email{min-height:44px;display:inline-flex;align-items:center}
.contact-email{border:0;padding:0;background:none;color:#777;cursor:default;opacity:1;font:inherit}
.contact-landscape{position:relative;width:100%;margin-top:clamp(10px,.789vw,14px);overflow:hidden;pointer-events:none;--contact-edge-blur:clamp(4px,1vw,24px)}
.contact-terrain{position:relative;width:100%;aspect-ratio:1774 / 433;overflow:hidden}
.contact-landscape img{position:absolute;width:100%;height:auto;max-width:none;top:-84.064665%;left:0}
.contact-landscape-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.contact-landscape-canvas.is-ready{opacity:1}
/* Keep the source colours in the blurred foreground. Its reflected strip
   dissolves into the same green field that continues beneath the footer. */
.contact-landscape::after{content:'';position:absolute;inset:0;top:14.64487vw;backdrop-filter:blur(var(--contact-edge-blur));-webkit-backdrop-filter:blur(var(--contact-edge-blur));mask-image:linear-gradient(transparent,#000 38%);pointer-events:none}
.contact-soft-tail{height:clamp(40px,6.7655vw,180px);overflow:hidden;background:var(--contact-ground)}
.contact-soft-tail svg{display:block;width:100%;height:100%;mask-image:linear-gradient(#000,transparent 45%)}
.contact-reveal-pending .contact-word{position:relative;opacity:0;top:.5em;filter:blur(7px)}
.contact-revealing .contact-word{animation:contact-word-reveal var(--word-duration,850ms) cubic-bezier(.22,.68,.24,1) var(--word-delay,0ms) both}
[data-motion-paused="true"] .contact-word{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.contact-reveal-pending .contact-word{animation:none;opacity:1;top:0;filter:none}}
:is(body.portfolio-home,body.portfolio-case) .contact-footer{max-width:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px clamp(24px,3.9vw,70px);min-height:90px;text-align:left;background:linear-gradient(transparent,#fbf8f4 95%),var(--contact-ground);color:#414a32;font:400 clamp(15px,1.127vw,20px)/1.4 Manrope,Arial,sans-serif}
.contact-top{display:inline-flex;align-items:center;gap:12px;min-height:44px;white-space:nowrap}
.contact-top-arrow{width:18px;height:11px;object-fit:contain;transform:rotate(-90deg);opacity:.55}
@media(max-width:760px){
  .contact-copy{padding-top:72px}
  .contact-copy h2{max-width:560px;margin:auto;line-height:1.2}
  .contact-primary{margin-top:24px;font-size:24px}
  .contact-meta{margin-top:18px;font-size:16px}
  .contact-landscape{margin-top:24px}
  :is(body.portfolio-home,body.portfolio-case) .contact-footer{font-size:14px;gap:16px;padding:20px 24px;min-height:88px}
}
@media(max-width:480px){
  .contact-copy{padding:64px 24px 0}
  .contact-copy h2{line-height:1.18}
  .contact-primary{font-size:22px;gap:10px}
  .contact-meta{gap:8px}
  .contact-landscape{margin-top:28px}
  :is(body.portfolio-home,body.portfolio-case) .contact-footer{flex-direction:column;align-items:flex-start;gap:8px;padding:20px 24px}
}
/* Copy the hero's responsive size ladder, including its RU-specific scale.
   Contact keeps its existing weight, line height, alignment and reveal. */
html[lang=ru] .contact-copy h2{font-size:clamp(40px,4.02778vw,58px)}
@media(max-width:1100px){.contact-copy h2{font-size:clamp(35px,4.7vw,52px)}html[lang=ru] .contact-copy h2{font-size:44px}}
@media(max-width:600px){.contact-copy h2{font-size:36px}html[lang=ru] .contact-copy h2{font-size:32px}}
@media(max-width:360px){.contact-copy h2{font-size:32px}html[lang=ru] .contact-copy h2{font-size:clamp(26px,calc(10vw - 4px),32px)}}

@keyframes contact-word-reveal{from{opacity:0;top:.5em;filter:blur(7px)}to{opacity:1;top:0;filter:blur(0)}}
.contact-meta{column-gap:24px;row-gap:0;color:#686868;font-weight:500}
.contact-meta>a,.contact-email{position:relative;color:inherit}
.contact-email{cursor:pointer}
.contact-email:hover{text-decoration:underline;text-underline-offset:4px}
.contact-meta>*+*::before{content:'·';position:absolute;left:-14px;pointer-events:none}
.contact-meta>.line-start::before{visibility:hidden}
.contact-meta :focus-visible{outline:2px solid #6766d8;outline-offset:4px;border-radius:4px}
.contact-status{font-size:14px;line-height:1.5;color:#686868;min-height:21px;margin:0;overflow-wrap:anywhere}

.contact-footer small{color:inherit}

@media(prefers-reduced-motion:reduce){.contact-landscape-canvas{opacity:0!important}}

/* Night variant requested on 2026-10-09. The day source remains unchanged. */
.contact-section{position:relative;isolation:isolate}
.contact-night-light{display:none;pointer-events:none}
:root[data-theme="dark"] :is(body.portfolio-home,body.portfolio-case){--contact-ground:linear-gradient(90deg,#17231b 0%,#1a2920 38%,#152319 100%)}
:root[data-theme="dark"] .contact-section{background:var(--color-bg-page);color:var(--color-text-primary)}
:root[data-theme="dark"] .contact-copy{z-index:2}
:root[data-theme="dark"] .contact-terrain{mask-image:linear-gradient(transparent,#000 clamp(4px,.65vw,16px))}
:root[data-theme="dark"] .contact-meta,
:root[data-theme="dark"] .contact-status{color:var(--color-text-secondary)}
:root[data-theme="dark"] .contact-arrow,
:root[data-theme="dark"] .contact-top-arrow{filter:invert(1)}
:root[data-theme="dark"] :is(body.portfolio-home,body.portfolio-case) .contact-footer{
  background:linear-gradient(transparent,var(--color-bg-page) 95%),var(--contact-ground);
  color:var(--color-text-secondary);
}
/* Exact hero ellipse parameters, adapted only in placement and container
   intensity/mask: the control exposed a hard edge against the night sky. */
:root[data-theme="dark"] .contact-night-light{
  display:block;position:absolute;inset:0;z-index:1;opacity:.3;
  mask-image:linear-gradient(transparent,#000 96px,#000 70%,transparent);
}
.contact-night-light::before{
  content:'';position:absolute;top:48px;left:max(0px,calc(50% - 640px));
  width:min(1281px,100%);height:557px;background:#b7a7af;
  border-radius:50%;filter:blur(187.5px);
}