/* Contact page — extracted for the Next migration */
.head{
  padding:clamp(64px,10vw,132px) var(--gutter) clamp(34px,5vw,58px);
  max-width:1180px;margin:0 auto;
}
.head .eyebrow{color:var(--blue);margin-bottom:22px;animation:hh-fade 1.4s ease both}
.head h1{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,9vw,132px);line-height:.9;letter-spacing:-.02em;
  animation:hh-rise 1.1s cubic-bezier(.16,1,.3,1) both;
}
.head h1 em{font-style:italic;margin-left:.08em}
.head__lede{
  margin:32px 0 0;max-width:56ch;
  font-size:15px;line-height:1.7;font-weight:300;opacity:.82;text-wrap:pretty;
  border-top:1px solid rgba(var(--cream-rgb),.22);padding-top:24px;
}

/* the studio's own card */
.studio-card{
  background:var(--cream);color:var(--slate);
  padding:clamp(40px,6vw,72px) var(--gutter);
}
.studio-card__in{
  max-width:1180px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-end;justify-content:space-between;
}
.studio-card .eyebrow{opacity:.65;margin-bottom:14px}
.studio-card h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.6vw,60px);line-height:1.02;
}
.studio-card p{margin:14px 0 0;max-width:44ch;font-size:14px;line-height:1.7;font-weight:300;opacity:.7}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.btn{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  padding:15px 26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid rgba(var(--slate-rgb),.3);
  transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.btn i{font-style:normal;font-size:12px;opacity:.65}
.btn:hover{background:rgba(var(--slate-rgb),.07);color:var(--slate)}
.btn--solid{background:var(--slate);color:var(--cream);border-color:var(--slate)}
.btn--solid:hover{background:var(--select);border-color:var(--select);color:var(--cream)}

/* one row per person */
.people{padding:clamp(56px,8vw,104px) var(--gutter);max-width:1180px;margin:0 auto}
.people .section-head{margin-bottom:8px}
.person{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:18px 26px;padding:22px 0;
  border-bottom:1px solid rgba(var(--cream-rgb),.16);
}
.person__thumb{
  width:clamp(56px,7vw,78px);aspect-ratio:1/1;overflow:hidden;
  background:var(--ink-2);display:block;
}
.person__thumb img,.person__thumb video{width:100%;height:100%;object-fit:cover}
.person__id{min-width:0}
.person__role{margin:0 0 7px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}
.person__name{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.6vw,32px);line-height:1.1;overflow-wrap:anywhere;
}
.person__name a{border-bottom:1px solid rgba(var(--cream-rgb),.2);transition:border-color .4s ease}
.person__name a:hover{border-bottom-color:var(--blue-hi)}
.person__acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.person__acts .btn{
  border-color:rgba(var(--cream-rgb),.32);padding:12px 18px;font-size:10px;letter-spacing:.2em;
}
.person__acts .btn:hover{background:var(--cream);color:var(--slate);border-color:var(--cream)}

.note-block{
  margin:44px 0 0;padding:22px 24px;
  border:1px solid rgba(var(--cream-rgb),.18);
  font-size:13px;line-height:1.75;font-weight:300;opacity:.72;max-width:70ch;text-wrap:pretty;
}
.note-block a{border-bottom:1px solid rgba(var(--cream-rgb),.3)}

@media (max-width:860px){
  .person{grid-template-columns:auto 1fr;}
  .person__acts{grid-column:1 / -1;justify-content:flex-start}
}

/* ── message form (→ Telegram) ───────────────────────── */
.msgform{padding:clamp(10px,2vw,24px) var(--gutter) clamp(48px,7vw,90px);max-width:1180px;margin:0 auto}
.msgform__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(26px,4vw,60px);align-items:start}
.msgform__intro .eyebrow{color:var(--blue);margin-bottom:14px}
.msgform__intro h2{margin:0 0 16px;font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.4vw,52px);line-height:1.02;letter-spacing:-.01em}
.msgform__intro h2 em{font-style:italic}
.msgform__intro p{margin:0;font-size:15px;line-height:1.7;font-weight:300;opacity:.78;max-width:40ch;text-wrap:pretty}
.msgform__form{display:flex;flex-direction:column;gap:14px}
.mf__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.mf__row{grid-template-columns:1fr}}
/* A `1fr` track floors at its content's min-width, and an <input> carries an
   intrinsic one (~212px with this padding). Two of them in a column narrower
   than ~440px therefore pushed the page wider instead of shrinking — visible
   between 561px and ~900px, where the outer grid is still two columns. The
   min-width:0 pair lets the tracks actually shrink; width:100% keeps the input
   filling whatever track it gets. */
.mf__field{display:flex;flex-direction:column;gap:7px;min-width:0}
.mf__field input,.mf__field textarea{min-width:0;width:100%}
.mf__field>span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.mf__field input,.mf__field textarea{
  background:var(--ink-2);border:1px solid rgba(var(--cream-rgb),.18);color:var(--cream);
  padding:13px 15px;font-family:var(--sans);font-size:15px;border-radius:4px;
}
.mf__field textarea{resize:vertical;line-height:1.6}
.mf__field input::placeholder,.mf__field textarea::placeholder{color:rgba(var(--cream-rgb),.4)}
.mf__field input:focus,.mf__field textarea:focus{outline:none;border-color:var(--gold)}
/* the booking variant: a date (the picker drawn for a dark ground, and as tall
   as a text field even while empty, which Safari would otherwise collapse) and
   a "dates are flexible" box, set level with the date field it qualifies */
.mf__field input[type=date]{color-scheme:dark;min-height:50px}
.mf__check{display:flex;align-items:center;gap:11px;align-self:end;min-height:50px;font-size:14px;line-height:1.4;cursor:pointer}
.mf__check input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--gold);cursor:pointer}
.mf__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px}
.msgform .btn--solid{background:var(--gold);border-color:var(--gold);color:var(--slate);cursor:pointer}
.msgform .btn--solid:hover{background:var(--gold-hi);border-color:var(--gold-hi);color:var(--slate)}
.msgform .btn--solid[disabled]{opacity:.55;cursor:default}
.mf__status{font-size:13px;opacity:.9}
.mf__status.is-ok{color:var(--gold-hi)}
.mf__status.is-err{color:#e8a0a0}