/* CONTACT — isolated page styling. Existing Home / WHO AM I / WORKS behavior remains locked. */
html, body { margin:0; width:100%; height:100%; overflow:hidden; }
body.contact-page {
  position: relative;
  min-height: 100svh;
  background: #0d0c0c;
  color: rgba(240,238,234,.90);
  font-family: 'Avant Garde', 'AvantGarde', 'Century Gothic', 'Avenir Next', Avenir, Arial, Helvetica, sans-serif;
  font-weight: 400;
  overflow: hidden;
}

/* Deep cloudy atmosphere, intentionally abstract and image-free. */
.contact-page::before,
.contact-page::after {
  content: "";
  position: fixed;
  inset: -12%;
  pointer-events: none;
}

.contact-page::before {
  z-index: 0;
  background:
    radial-gradient(ellipse at 14% 62%, rgba(116,112,107,.20) 0%, rgba(54,51,49,.13) 18%, rgba(13,12,12,0) 42%),
    radial-gradient(ellipse at 87% 57%, rgba(102,98,94,.18) 0%, rgba(42,40,39,.12) 19%, rgba(13,12,12,0) 43%),
    radial-gradient(ellipse at 50% 105%, rgba(132,127,119,.12) 0%, rgba(13,12,12,0) 39%),
    radial-gradient(ellipse at 51% 24%, rgba(70,68,65,.08) 0%, rgba(13,12,12,0) 35%);
  filter: blur(26px);
  animation: contact-cloud-drift 18s ease-in-out infinite alternate;
}

.contact-page::after {
  z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 25%, rgba(0,0,0,.28) 100%),
    repeating-radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.012) 0 1px, transparent 1px 7px);
  opacity: .55;
}

@keyframes contact-cloud-drift {
  0% { transform: translate3d(-1.5%, 0, 0) scale(1.02); }
  100% { transform: translate3d(1.5%, -1%, 0) scale(1.06); }
}

.contact-page .site-header { position:fixed; z-index:20; top:calc(4.15% + 5px); left:0; width:100%; display:flex; justify-content:center; }
.contact-page .site-header nav { display:flex; align-items:center; justify-content:center; gap:34px; white-space:nowrap; font-size:14px; font-weight:400; letter-spacing:.22em; }
.contact-page .site-header a { color:#f0eeea; text-decoration:none; transition:color .25s ease, opacity .25s ease, letter-spacing 1200ms cubic-bezier(.2,.75,.25,1); }
.contact-page .site-header a:hover,.contact-page .site-header a:focus-visible { opacity:.48; letter-spacing:.28em; }
.contact-page .site-header a.active,.contact-page .site-header a[aria-current="page"] { color:#777674; opacity:1; pointer-events:none; cursor:default; }
.contact-page .site-header span { color:#f0eeea; opacity:.58; font-size:16px; letter-spacing:0; }

.contact-home-logo { position:fixed; z-index:20; top:calc(4.15% + 43px); left:50%; transform:translateX(-50%); width:34px; height:auto; line-height:0; display:block; }
.contact-home-logo img { display:block; width:100%; height:auto; filter:invert(1); opacity:.9; transition:opacity .25s ease; }
.contact-home-logo:hover img,.contact-home-logo:focus-visible img { opacity:.58; }

#contactParticles {
  position: fixed;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.contact-stage { position:relative; z-index:8; width:100%; height:100svh; display:flex; align-items:center; justify-content:center; }
.contact-panel { width:min(450px,76vw); transform:translateY(2%); text-align:center; }
.contact-panel h1 { margin:0; color:#f0eeea; font-size:36px; line-height:1; font-weight:400; letter-spacing:.34em; text-indent:.34em; }
.contact-line { display:block; width:124px; height:1px; margin:22px auto 30px; background:rgba(240,238,234,.55); }
.contact-intro { margin:0; color:rgba(240,238,234,.68); font-size:13px; line-height:1.9; letter-spacing:.18em; }
.contact-form { width:100%; margin:62px auto 0; text-align:left; }
.contact-form label { display:block; margin:0 0 28px; }
.contact-form label > span { display:block; margin-bottom:12px; color:rgba(240,238,234,.62); font-size:11px; letter-spacing:.22em; }
.contact-form input,.contact-form textarea { width:100%; border:0; border-bottom:1px solid rgba(240,238,234,.32); border-radius:0; outline:0; padding:0 0 10px; background:transparent; color:#f0eeea; font:inherit; font-size:15px; resize:none; transition:border-color .25s ease; }
.contact-form input { height:28px; }
.contact-form textarea { min-height:82px; line-height:1.5; }
.contact-form input:focus,.contact-form textarea:focus { border-bottom-color:rgba(240,238,234,.72); }
.contact-form .message-field { margin-bottom:34px; }
.contact-send { display:flex; align-items:center; justify-content:center; gap:18px; margin:0 auto; padding:0 0 7px; border:0; border-bottom:1px solid rgba(240,238,234,.55); background:transparent; color:#f0eeea; font:inherit; font-size:11px; letter-spacing:.26em; cursor:pointer; transition:gap .35s ease, border-color .25s ease, opacity .25s ease; }
.contact-send:hover,.contact-send:focus-visible { gap:26px; border-bottom-color:#f0eeea; outline:0; }
.send-arrow { font-size:22px; line-height:.6; letter-spacing:0; }

.contact-page .language-globe { color:#f0eeea; opacity:.82; }
.contact-page .language-globe:hover,.contact-page .language-globe:focus-visible { opacity:1; }
.contact-page .language-panel { background:rgba(17,16,15,.94); border-color:transparent; }
.contact-page .language-option { color:#f0eeea; }
.contact-page .language-option.active,.contact-page .language-option:hover,.contact-page .language-option:focus-visible { color:#fff; }
.contact-page .language-switcher.is-open .language-panel { border-color:rgba(240,238,234,.16); }

html.grav-incoming-contact body.contact-page > *:not(.page-transition) { opacity:0; animation:gravContactDestinationReveal 1000ms cubic-bezier(.22,.72,.22,1) forwards; }
html.grav-incoming-contact body.contact-page .page-transition { opacity:1; visibility:visible; background:#000; }
@keyframes gravContactDestinationReveal { from{opacity:0} to{opacity:1} }

@media (max-width:1000px) {
  .contact-page .site-header { top:33px; }
  .contact-page .site-header nav { gap:24px; font-size:12px; letter-spacing:.19em; }
  .contact-page .site-header a:hover,.contact-page .site-header a:focus-visible { letter-spacing:.24em; }
  .contact-home-logo { top:63px; width:30px; }
  .contact-panel { width:min(430px,82vw); }
  .contact-panel h1 { font-size:30px; }
}
@media (max-width:600px) {
  .contact-page .site-header { top:27px; }
  .contact-page .site-header nav { gap:13px; font-size:9px; letter-spacing:.13em; }
  .contact-page .site-header a:hover,.contact-page .site-header a:focus-visible { letter-spacing:.17em; }
  .contact-home-logo { top:52px; width:26px; }
  .contact-panel { width:min(390px,82vw); transform:translateY(1%); }
  .contact-panel h1 { font-size:25px; letter-spacing:.27em; text-indent:.27em; }
  .contact-line { width:105px; margin:17px auto 24px; }
  .contact-intro { font-size:11px; line-height:1.8; letter-spacing:.12em; }
  .contact-form { margin-top:45px; }
}


/* V159 — the wordmark replaces the centered feather mark on standard internal pages. */
body:has(.internal-wordmark) .contact-home-logo { display:none; }

/* V201 — CONTACT on phones / short screens.
   The panel always starts below the header, the page scrolls when the form
   is taller than the screen (also when the keyboard is open), and a dark
   band with a soft fade keeps scrolled text out from under the header. */
.contact-topfade { display:none; }
@media (max-width:700px), (max-height:560px) and (max-width:1000px) {
  html:has(body.contact-page) { overflow:hidden; height:100%; }
  body.contact-page { height:100%; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; }
  .contact-stage { box-sizing:border-box; height:auto; min-height:100svh; padding:clamp(84px,14svh,120px) 0 calc(36px + env(safe-area-inset-bottom,0px)); align-items:center; }
  .contact-panel { transform:none; }
  .contact-form { margin-top:clamp(26px,6svh,45px); }
  .contact-form label { margin-bottom:clamp(18px,4svh,28px); }
  .contact-form textarea { min-height:clamp(60px,12svh,82px); }
  .contact-topfade {
    display:block; position:fixed; z-index:9; top:0; left:0; right:0; height:86px; pointer-events:none;
    background:linear-gradient(180deg, rgba(13,12,12,.97) 0%, rgba(13,12,12,.97) 64%, rgba(13,12,12,.65) 80%, rgba(13,12,12,0) 100%);
  }
}

/* Contact form: spam trap and send status */
.contact-trap { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.contact-status { min-height:1.6em; margin:22px 0 0; text-align:center; color:rgba(240,238,234,.72); font-size:12px; letter-spacing:.06em; line-height:1.6; }
.contact-status.is-error { color:#e3a59b; }
.contact-send[disabled] { opacity:.5; cursor:default; }