/* ------------------------------------------------------------------
   TEEARCH - contact page

   Hand-written, loaded AFTER styles.css and only by contact.html. It is
   not generated by Tailwind and Tailwind never needs to run for it.

   The palette, the type and the voice are the home page's. The FORM is
   its own: this page is a DOCKET. Every other page is something to read;
   this one is something to fill in, so it is built like the enquiry
   sheet a practice actually keeps - ruled fields with no boxes around
   them, labels stamped in mono above the line, and the studio's details
   set beside it like a letterhead. There are no cards, no panels and no
   photographs. The only thing on the page with any weight is the send
   button.

   Every value below reads a brand token that styles.css already
   publishes on :root, so the pages cannot drift apart.
------------------------------------------------------------------ */

/* ------------------------------------------------------------- type */

/* The masthead h1 uses the home page's own `text-display` size from
   styles.css, so all seven heroes set at the same scale. */
.head-md {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--color-ink);
}

/* The serif italic accent, same role as on the other six pages. */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-brass);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.mono .l { color: var(--color-brass); }

/* ---------------------------------------------------------- masthead */

.mast { padding-block: 8.5rem 2.5rem; }

@media (min-width: 768px) {
  .mast { padding-block: 11rem 3.5rem; }
}

.sec { padding-block: 3.5rem 5rem; }

@media (min-width: 768px) {
  .sec { padding-block: 4rem 7rem; }
}

.sec-alt { background: var(--color-paper-2); padding-block: 4.5rem; }

@media (min-width: 768px) {
  .sec-alt { padding-block: 6rem; }
}

/* ----------------------------------------------------------- docket */

/* The sheet on the left, the letterhead on the right. */
.docket { display: grid; gap: 3.5rem; }

@media (min-width: 900px) {
  .docket {
    grid-template-columns: 7fr 5fr;
    gap: 5rem;
    align-items: start;
  }
  .letterhead { position: sticky; top: 7.5rem; }
}

/* ------------------------------------------------------------ fields */

/* Ruled fields, not boxes. The label is stamped in mono above the line
   and the input is the line - which is the one form treatment that
   belongs on a site built out of hairlines. Boxes with rounded corners
   would import a different design language on the last page. */
.fields {
  display: grid;
  gap: 2rem 2.5rem;
  border-top: 1px solid var(--color-ink);
  padding-top: 2.25rem;
}

@media (min-width: 640px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: 1 / -1; }
}

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
  transition: color 0.3s var(--ease-out-soft);
}
.field .opt { color: var(--color-line); }

.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.55rem 0 0.7rem;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.0625rem;
  color: var(--color-ink);
  transition: border-color 0.3s var(--ease-out-soft);
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }

/* The native arrow is a different design language again, so the select
   draws its own in the brand's ink. */
.field select {
  appearance: none;
  padding-right: 1.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-ink) 50%),
    linear-gradient(135deg, var(--color-ink) 50%, transparent 50%);
  background-position: right 0.6rem top 1.5rem, right 0.25rem top 1.5rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.field input::placeholder,
.field textarea::placeholder { color: var(--color-line); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-brass);
  border-bottom-width: 2px;
  padding-bottom: calc(0.7rem - 1px);
}
.field:focus-within label { color: var(--color-brass); }

/* Keyboard focus still has to be visible for anyone tabbing through,
   and a colour change on one hairline is not enough on its own. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 4px;
}

/* Marked invalid only after the browser has actually validated, so the
   page does not shout at a field nobody has filled in yet. */
.field input:user-invalid,
.field textarea:user-invalid { border-bottom-color: var(--color-brass); }

.send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.send-note {
  margin: 0;
  max-width: 22rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-muted-2);
}

/* ------------------------------------------------------- letterhead */

/* The studio's own details, ruled like a letterhead rather than boxed
   like a card. */
.lh { border-top: 1px solid var(--color-ink); }
.lh > div {
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--color-line);
}
.lh dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.lh dd {
  margin: 0.55rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 600;
  color: var(--color-ink);
}
.lh dd .sub {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-muted);
}
.lh a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--color-line);
  transition: color 0.3s var(--ease-out-soft), border-color 0.3s var(--ease-out-soft);
}
.lh a:hover { color: var(--color-brass); border-bottom-color: var(--color-brass); }

/* What happens after you press send. Three short lines, numbered in
   mono, sitting under the letterhead where the question comes up. */
.next {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.next li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 1rem;
  padding: 0.7rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.next .n {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--color-brass);
  padding-top: 0.25em;
}

/* --------------------------------------------------------- feedback */

/* The message that replaces the form's silence. Hidden until the
   script has something to say. */
.status {
  margin-top: 1.75rem;
  border-left: 2px solid var(--color-brass);
  padding: 0.9rem 0 0.9rem 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.status strong { color: var(--color-ink); }

/* ----------------------------------------------------------- studio */

/* The address set at size, because it is the one thing on the page a
   visitor may need to copy or read aloud to a driver. */
.studio { display: grid; gap: 2.5rem; }

@media (min-width: 900px) {
  .studio { grid-template-columns: 1.35fr 1fr; gap: 5rem; align-items: start; }
}

.studio address {
  font-style: normal;
  margin: 1.5rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--color-ink);
}
.studio .hint {
  margin: 1.25rem 0 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-muted);
}

/* Margin set here, not with an mt- class in the markup: Tailwind's
   utilities live in @layer utilities and unlayered CSS beats a layer,
   so a `margin: 0` here would silently drop it. */
.hours { margin: 1.25rem 0 0; border-top: 1px solid var(--color-line); }
.hours > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-line);
}
.hours dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.hours dd {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
}
.hours .shut { color: var(--color-muted-2); font-weight: 400; }

/* Reveals reuse the home page's .reveal contract - app.js adds .is-in. */