/**
 * Deep Perfume — contact page (template-contact.php).
 * Dark brand aesthetic to match the homepage. Depends on tokens.css.
 * #main-content already carries the site gradient (body.deep-tpl), so the
 * section itself is transparent and panels are translucent with gold hairlines.
 */

.deep-contact{ background:transparent; color:var(--c-cream); }
.deep-contact__inner{
  max-width:var(--container); margin-inline:auto; padding:var(--s-9) var(--gutter);
}
.deep-contact__head{ text-align:center; margin-bottom:var(--s-8); }
.deep-contact__title{
  font-family:var(--f-display); font-weight:500; color:var(--c-cream);
  font-size:clamp(2.1rem, 1.4rem+3.2vw, 3.4rem); line-height:var(--lh-ar-head);
  margin:0 0 var(--s-3); text-wrap:balance;
}
.deep-contact__lead{
  font-family:var(--f-ar); color:#E4D9C6; line-height:var(--lh-ar-body);
  font-size:clamp(1.02rem,1rem+.4vw,1.25rem); max-width:60ch; margin-inline:auto;
}
[lang="en"] .deep-contact__title{ font-family:var(--f-en); }
[lang="en"] .deep-contact__lead{ font-family:var(--f-en); line-height:var(--lh-en-body); }

.deep-contact__grid{
  display:grid; grid-template-columns:1fr 1.6fr; gap:var(--s-7); align-items:start;
}

/* ---- info column ---- */
.deep-contact__info{
  background:rgb(255 255 255 / .04); color:var(--c-cream);
  border:1px solid rgb(227 203 150 / .20); border-radius:var(--r-lg);
  padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-5);
}
.deep-contact__item{
  display:flex; flex-direction:column; gap:2px; text-decoration:none; color:inherit;
}
.deep-contact__label{ font-family:var(--f-ar); font-size:var(--fs-label); color:var(--c-brass-light); }
.deep-contact__value{ font-family:var(--f-ar); font-size:var(--fs-body); color:var(--c-cream); }
a.deep-contact__item:hover .deep-contact__value{ color:var(--c-brass-light); }
.deep-contact__social{ margin-block-start:var(--s-2); display:flex; gap:var(--s-4); list-style:none; padding:0; }
.deep-contact__social a{ color:#CDBF9E; text-decoration:none; }
.deep-contact__social a:hover{ color:var(--c-brass-light); }

/* ---- form column ---- */
.deep-contact__form-wrap{
  background:rgb(255 255 255 / .04); border:1px solid rgb(227 203 150 / .20);
  border-radius:var(--r-lg); padding:var(--s-6);
}
.deep-field{ display:flex; flex-direction:column; gap:var(--s-2); margin:0 0 var(--s-4); }
.deep-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.deep-field label{ font-family:var(--f-ar); font-size:var(--fs-small); color:var(--c-brass-light); }
.deep-field input,
.deep-field textarea{
  font-family:var(--f-ar); font-size:var(--fs-body); color:var(--c-cream);
  border:1px solid rgb(227 203 150 / .22); border-radius:14px; padding:var(--s-3) var(--s-4);
  background:rgb(0 0 0 / .22); min-height:46px; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.deep-field input::placeholder,
.deep-field textarea::placeholder{ color:#9C9184; }
.deep-field input:focus,
.deep-field textarea:focus{
  outline:none; border-color:var(--c-brass-light);
  background:rgb(0 0 0 / .32);
}
.deep-field textarea{ resize:vertical; border-radius:16px; }

.deep-contact__notice{
  font-family:var(--f-ar); color:var(--c-cream); border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4); margin:0 0 var(--s-4);
  border-inline-start:4px solid var(--c-brass-light); background:rgb(255 255 255 / .05);
}
.deep-contact__notice.is-error{ border-inline-start-color:#D98A82; background:rgb(166 54 47 / .18); }

/* honeypot — visually hidden but present for bots */
.deep-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

@media (max-width:768px){
  .deep-contact__grid{ grid-template-columns:1fr; gap:var(--s-5); }
  .deep-field-row{ grid-template-columns:1fr; }
  .deep-contact__inner{ padding-block:var(--s-7); }
}