@charset "utf-8";
/* Contact page (/contact.asp) only | 2026-10-07
   Version: 1.0.0 (2026-10-07: moved verbatim out of contact.asp's inline style block,
   site-layout page content. Page-specific styling layered on /css/site.css: linked by
   contact.asp alone, after site.css, because several names are generic (.field,
   .form-error, .form-note, .hp, .branch) and would reach other pages from site.css.) */
.contact{ padding-block: clamp(2rem, 5vw, 3.5rem); }

.contact-head{ max-width: 640px; margin: 0 auto 1.75rem; text-align: center; }
.contact-head h1{ margin: 0 0 .5rem; color: var(--color-gold); font-size: clamp(2rem, 4vw, 2.75rem); }
.contact-sub{ margin: 0; color: var(--color-muted); font-size: 1.05rem; line-height: 1.6; }

.contact-card{
  max-width: 720px; margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.form-note{ margin: 0 0 1.1rem; color: var(--color-muted); font-size: 1rem; }

/* Sent acknowledgement */
.contact-sent{ max-width: 560px; text-align: center; }
.contact-sent__icon{
  width: 56px; height: 56px; margin: 0 auto .9rem;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--color-gold);
  background: rgba(203,161,53,.12);
  border: 1px solid rgba(203,161,53,.4);
}
.contact-sent__title{ margin: 0 0 .5rem; color: var(--color-gold); font-size: clamp(1.5rem, 3vw, 2rem); }
.contact-sent__lead{ margin: 0 auto .55rem; max-width: 44ch; color: var(--color-text); font-size: 1.05rem; line-height: 1.6; }
.contact-sent__note{ margin: 0 auto 1.35rem; max-width: 44ch; color: var(--color-muted); font-size: .9rem; }
.contact-sent__actions{ justify-content: center; }

.form-error{
  max-width: 720px; margin: 0 auto 1.1rem;
  padding: .8rem 1rem;
  border: 1px solid rgba(185,28,28,.5);
  background: rgba(185,28,28,.14);
  color: var(--color-error); border-radius: var(--radius-sm);
  font-size: .95rem;
}

.contact-grid{ display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px){
  .contact-grid{ grid-template-columns: 1fr 1fr; }
  .field--full{ grid-column: 1 / -1; }
}

.field label{ display: block; margin: 0 0 .4rem; color: var(--color-text); font-size: .95rem; }
.field input,
.field select,
.field textarea{
  width: 100%;
  min-height: 48px;                 /* comfortable touch target */
  padding: .75rem .9rem;
  background: var(--color-field);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 16px;                  /* prevents iOS zoom */
  line-height: 1.4;
  appearance: none; -webkit-appearance: none;
  touch-action: manipulation;
}
.field textarea{ min-height: 150px; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder{ color: var(--color-subtle); }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(203,161,53,.22);
}
.field input:invalid,
.field select:invalid,
.field textarea:invalid{ border-color: #b8865a; }

.contact-actions{ display: flex; align-items: center; flex-wrap: wrap; gap: .85rem; margin-top: 1.25rem; }
.form-hint{ color: var(--color-muted); font-size: .9rem; }

/* Spam honeypot - visually hidden, off-screen */
.hp{ position: absolute; left: -9999px; height: 0; overflow: hidden; }

@media (max-width: 599px){
  .contact-actions .button{ width: 100%; }
  .form-hint{ width: 100%; text-align: center; }
}

/* Branch reveal. Hiding is scoped to .js-branch, which the inline
   head script in contact.asp sets. With JavaScript off the class never lands and
   all six branches render - cluttered, but fully usable. */
.branch{ border: 0; padding: 0; margin: 0; min-width: 0; }
.js-branch .branch{ display: none; }
.js-branch .branch.is-active{ display: block; }
.branch-intro{
  margin: 0 0 1rem; color: var(--color-muted);
  font-size: .98rem; line-height: 1.6;
}