/*! SONIC SNOWFLAKE RECORDS — Contact View Styles */

.contact-header { padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: .5rem; }
.contact-header__title { font-size: var(--fs-hero); line-height: .9; margin: .6rem 0 1.2rem; }
.contact-header__sub { max-width: 58ch; color: var(--mist); font-size: var(--fs-lead); }

.contact-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-form { padding: 34px; display: flex; flex-direction: column; gap: 18px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form input, .contact-form select, .contact-form textarea {
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; color: var(--pearl); font-family: var(--font-body); font-size: .95rem; text-transform: none;
  letter-spacing: normal; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(181,131,255,.18);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form__note { font-family: var(--font-mono); font-size: .72rem; color: var(--mist-dim); text-transform: none; letter-spacing: normal; }

.contact-side { display: flex; flex-direction: column; gap: 18px; }
.contact-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; }
.contact-card h3 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); margin-bottom: 14px; }
.contact-card__email { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--neon-bright); word-break: break-word; }
.contact-socials { display: flex; flex-direction: column; gap: 10px; }
.contact-socials a { font-size: .92rem; color: var(--pearl); transition: color var(--dur-fast) ease; }
.contact-socials a:hover { color: var(--neon-bright); }
.contact-list { display: flex; flex-direction: column; gap: 10px; }
.contact-list li { font-size: .88rem; color: var(--mist); line-height: 1.5; padding-left: 16px; position: relative; }
.contact-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--neon); }