/* Allonia — contact page. Same set pieces as pertimm.com/contact (direct-channel bar closing the
   hero, guided prompts beside a bevelled form panel), without the API: the form opens the
   visitor's email app with the message already written (data-mode="mailto"). */

/* Hero */
.contact-hero { padding-bottom: 0; }
.contact-hero .page-hero__inner { padding-bottom: var(--space-xl); }
.contact-hero .page-hero__title { max-width: 14ch; }

/* Direct channels: a hairline bar closing the hero */
.channels { position: relative; display: grid; border-top: 1px solid var(--line-2); }
.channel { position: relative; display: grid; gap: .55rem; align-content: start; padding-block: var(--space-l) var(--space-xl); }
.channel::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--spectrum); box-shadow: 0 0 12px var(--glow);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-4) var(--ease-out);
}
.channel:hover::before, .channel:focus-within::before { transform: scaleX(1); }
.channel__label { display: flex; align-items: center; gap: .55rem; font-size: var(--step--1); font-weight: 540; color: var(--fg-3); line-height: 1.3; }
.channel__icon { width: 1rem; height: 1rem; flex: none; color: var(--accent-text); }
.channel__line { gap: .5rem .9rem; min-height: 2.5rem; }
.channel__value { font-size: clamp(1.25rem, 1.08rem + .62vw, 1.625rem); }
.channel__value--link { display: inline-flex; align-items: center; gap: .45rem; }
.channel__value--link svg { width: .72em; height: .72em; flex: none; transition: transform var(--dur-2) var(--ease-out); }
.channel__value--link:hover svg { transform: translate(2px, -2px); }
.channel__note { font-size: var(--step--1); line-height: 1.5; color: var(--fg-2); max-width: 40ch; }
@media (min-width: 1080px) {
  .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .channel { padding-inline: var(--space-l); }
  .channel:first-child { padding-left: 0; }
  .channel:last-child { padding-right: 0; }
  .channel + .channel { border-left: 1px solid var(--line); }
}
@media (min-width: 1080px) and (max-width: 1599px) {
  .channel__value { font-size: clamp(1.3125rem, .6rem + 1.05vw, 1.5rem); }
  .channel .copy { position: relative; width: 2.5rem; padding: 0; justify-content: center; }
  .channel .copy > span:not(.visually-hidden) {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .channel { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); column-gap: var(--space-l); padding-block: var(--space-m); }
  .channel__label { grid-row: 1 / span 2; align-self: start; padding-top: .5rem; }
  .channel + .channel { border-top: 1px solid var(--line); }
  .channels .channel:last-child { padding-bottom: var(--space-xl); }
}
@media (max-width: 639px) {
  .channel { padding-block: var(--space-m); }
  .channel + .channel { border-top: 1px solid var(--line); }
  .channels .channel:last-child { padding-bottom: var(--space-xl); }
}

/* Write to us: three prompts beside the form */
.contact-write__grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1080px) {
  .contact-write__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); }
  .guide { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.guide { display: grid; gap: .75rem; }
.guide__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(.9rem, .6rem + 1vw, 1.5rem);
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem);
}
.guide__num {
  display: block; min-width: 2.2ch; padding-top: .1rem;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 3rem); font-weight: 250; font-stretch: 118%; line-height: .85; letter-spacing: -.05em;
  background: var(--text-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.guide__body { display: grid; gap: .4rem; justify-items: start; }
.guide__title { font-size: var(--step-1); letter-spacing: -.015em; line-height: 1.2; }
.guide__text { color: var(--fg-2); font-size: var(--step-0); line-height: 1.55; max-width: 44ch; }
@media (max-width: 1079px) {
  .guide__item { align-items: center; align-content: start; row-gap: .5rem; }
  .guide__body { display: contents; }
  .guide__num { font-size: 2.1rem; padding-top: 0; }
  .guide__text { grid-column: 1 / -1; }
}

/* The form panel: bevelled surface, hairline frame, a short beam on the top edge */
.contact-panel {
  --cut: 24px;
  position: relative; isolation: isolate;
  padding: clamp(1.25rem, .6rem + 2.4vw, 2.75rem);
  background: var(--line-2); clip-path: var(--bevel);
  transition: background-color var(--dur-3) var(--ease-out);
}
.contact-panel::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; clip-path: var(--bevel);
  background: radial-gradient(90% 55% at 100% 0%, rgb(18 30 78 / .5), transparent 70%), var(--surface);
}
.contact-panel::after {
  content: ""; position: absolute; left: 0; top: 0; width: min(46%, 22rem); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgb(166 244 234 / .9), rgb(166 140 255 / .7) 45%, transparent);
}
.contact-panel:focus-within { background: var(--line-3); }

.contact-form { gap: var(--space-m); }
.contact-form .form__fields { gap: 1.25rem; }
.contact-form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.contact-form__title { font-size: var(--step-2); letter-spacing: -.02em; line-height: 1.15; }
.contact-form__head .field__req { margin-right: .12em; }
.contact-form__message { min-height: 11rem; }
.contact-form .form__foot { padding-top: .35rem; }
.contact-form__alt { font-size: var(--step--1); color: var(--fg-3); }
.contact-form__alt .text-link { color: var(--fg-2); }
.contact-form__alt .text-link:hover { color: var(--fg); }
.contact-form__note { font-size: var(--step--1); color: var(--fg-3); max-width: 60ch; }
@media (max-width: 479px) {
  .contact-form__submit { width: 100%; }
}