/* ==========================================================================
   Linh Hua: Contact ("the Intake Ledger").
   Contact-only. Everything is scoped under body.contact with contact-*
   classes, so the shared kit (styles.css: header, footer, buttons, tokens,
   focus rings, the legacy .contact-layout/.contact-card/.contact-form and
   the shared .form-message) stays as is. Studio surfaces, rule and mark ink
   and the ease-out mirror the approved homepage, Courses and About.
   ========================================================================== */

body.contact {
  --k-ease: cubic-bezier(0.23, 1, 0.32, 1);           /* home.css --ease-out */
  --k-field: #f8f8fd;                                 /* home.css --home-hero-field-1 */
  --k-paper: #f6f7fb;                                 /* --paper */
  --k-panel: #fbfbfe;                                 /* home.css --hh-panel */
  --k-edge: rgba(74, 56, 176, 0.13);                  /* the plate's hairline edge */
  --k-rule: rgba(74, 56, 176, 0.14);                  /* row rules */
  --k-grid: rgba(74, 56, 176, 0.07);
  --k-mark: rgba(74, 56, 176, 0.42);                  /* registration ticks */
  --k-shaft: rgba(124, 111, 255, 0.14);
  --k-label: rgba(20, 22, 31, 0.72);
  --k-text-muted: #565c70;                            /* home.css --home-hero-text-muted */
  --k-input-bg: #ffffff;
  --k-input-border: #8a84c2;                         /* >= 3:1 against panel and field (WCAG 1.4.11) */
  --k-input-border-hover: #6d66b3;
  --k-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23565c70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  --k-step: 97px;
  background: var(--k-paper);
}

:root[data-theme="dark"] body.contact {
  --k-field: #131833;
  --k-paper: #0d111d;
  --k-panel: #10152a;                                 /* home.css dark --hh-panel */
  --k-edge: rgba(160, 148, 255, 0.16);
  --k-rule: rgba(176, 164, 255, 0.16);
  --k-grid: rgba(160, 148, 255, 0.07);
  --k-mark: rgba(186, 176, 255, 0.58);
  --k-shaft: rgba(124, 111, 255, 0.2);
  --k-label: rgba(255, 255, 255, 0.78);
  --k-text-muted: var(--muted);
  --k-input-bg: #0d111d;
  --k-input-border: #6a66a6;                         /* >= 3:1 against the navy panel and field */
  --k-input-border-hover: #8580c4;
  --k-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%239096ab' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

/* The shared ambient layers (styles.css: the fixed film grain on html and the
   glow + pattern behind the first 900px of body) sit under transparent
   sections but not under the opaque opening, so they would draw a seam where
   it ends. Contact draws its own studio surface instead (as About does). */
html:has(> body.contact)::before,
body.contact::before,
body.contact::after { display: none; }

body.contact ::selection { background: rgba(91, 77, 251, 0.22); }
:root[data-theme="dark"] body.contact ::selection { background: rgba(160, 148, 255, 0.32); }

/* The shared .reveal is not used on Contact: the form is visible at once. */

/* ==========================================================================
   Opening: the question, at a functional scale.
   ========================================================================== */
.contact-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px 0 40px;
  background:
    radial-gradient(900px 560px at 8% -20%, var(--k-shaft), transparent 62%),
    linear-gradient(180deg, var(--k-field), var(--k-paper));
}
/* The drafting grid, quiet, fading out before the ledger. */
.contact-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--k-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--k-grid) 1px, transparent 1px);
  background-size: var(--k-step) var(--k-step);
  background-position: 0 calc(var(--k-step) / 2), max(24px, calc(50% - 556px)) 0;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}

.contact-label {
  margin: 0 0 18px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--k-label);
}

.contact-title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(2.2rem, 3.9vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}
/* The title's two lines are set by hand (they are the lines it takes at rest
   from 366px up), so the fallback font and the web font break it the same way
   and the ledger below does not shift when the font arrives. */
.contact-title-line { display: block; white-space: nowrap; }

.contact-sub {
  margin: 18px 0 0;
  max-width: 40ch;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--k-text-muted);
}

/* ==========================================================================
   The ledger: one plate of ruled rows, label column against field column.
   ========================================================================== */
.contact-desk { padding: 8px 0 104px; }

.contact-ledger {
  --label-w: 200px;
  --pad: 40px;
  position: relative;
  max-width: 800px;
  padding: 8px var(--pad) 36px;
  background: var(--k-panel);
  border: 1px solid var(--k-edge);
  border-radius: 16px;
}
:root[data-theme="dark"] .contact-ledger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }

/* Registration ticks just outside the plate's corners (the Courses plate's marks). */
.contact-ticks {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  --m: var(--k-mark);
  background:
    linear-gradient(var(--m), var(--m)) left top / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left top / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 1px 12px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 12px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 1px 12px no-repeat;
}

/* Caption row: the ledger's heading, on the same two columns as the rows. */
.contact-ledger-head {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  align-items: baseline;
  padding: 24px 0 22px;
}
.contact-ledger-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.contact-ledger-head p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--k-text-muted);
}

.contact-ledger-form { margin: 0; }

.contact-row {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--k-rule);
}
.contact-row > label {
  padding-top: 13px;                                  /* centres the label on the field's first line */
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;                                    /* 16px: no zoom on focus in iOS */
  line-height: 1.5;
  color: var(--text);
  background: var(--k-input-bg);
  border: 1px solid var(--k-input-border);
  border-radius: 10px;
  transition: border-color 150ms ease;
}
.contact-field textarea {
  min-height: 168px;
  resize: vertical;
}
.contact-field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background: var(--k-chevron) no-repeat right 16px center / 12px 8px, var(--k-input-bg);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .contact-field input:hover,
  .contact-field select:hover,
  .contact-field textarea:hover { border-color: var(--k-input-border-hover); }
}
/* Focus uses the shared focus-ring system (outline from styles.css); the border firms up too. */
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus { border-color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Submit row: the button on the field column, the status line beside it. */
.contact-row--submit { padding: 22px 0 0; }
.contact-submit {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}
/* <button> takes the system face by default; set the page's Plus Jakarta Sans. */
body.contact .contact-submit .btn {
  font-family: inherit;
}

/* The shared .form-message, restyled for the ledger: a quiet status line next to
   the button (contact.js sets the class; text carries the meaning, colour only
   reinforces it). */
body.contact .form-message {
  flex: 1 1 16rem;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}
body.contact .form-message.error { color: #b3261e; background: none; }
body.contact .form-message.success { color: #146c43; background: none; }
:root[data-theme="dark"] body.contact .form-message.error { color: #ff8a80; background: none; }
:root[data-theme="dark"] body.contact .form-message.success { color: #6fe3a8; background: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .contact-ledger { --label-w: 170px; --pad: 36px; }
}

/* Tablet down: labels above their fields; the rules stay. */
@media (max-width: 1023px) {
  .contact-intro { padding: 56px 0 36px; }
  .contact-ledger { max-width: none; }
  .contact-ledger-head,
  .contact-row { grid-template-columns: minmax(0, 1fr); }
  .contact-ledger-head { row-gap: 6px; }
  .contact-row > label { padding: 0 0 8px; }
  .contact-submit { grid-column: 1; }
}

/* Phones: the plate runs edge to edge on the 24px gutter; no ticks; the
   button spans the width (a thumb target). */
@media (max-width: 599px) {
  .contact-intro { padding: 40px 0 28px; }
  .contact-title { font-size: clamp(1.9rem, 8.2vw, 2.3rem); }
  .contact-sub { font-size: 1.0625rem; }
  .contact-desk { padding: 0 0 72px; }
  .contact-desk > .container { padding: 0; }
  .contact-ledger {
    --pad: 24px;
    padding: 4px var(--pad) 28px;
    border-width: 1px 0;
    border-radius: 0;
  }
  .contact-ticks { display: none; }
  .contact-ledger-head { padding: 20px 0 18px; }
  .contact-row { padding: 16px 0; }
  .contact-submit .btn { width: 100%; }
}

/* Below 366px the title already wraps to three lines at rest: let it wrap. */
@media (max-width: 365px) {
  .contact-title-line { display: inline; white-space: normal; }
}

/* ==========================================================================
   States (step 2): sending, error, the submitted record.
   ========================================================================== */
.contact-submit .btn:disabled { cursor: progress; }

/* The submitted record: the top of the ledger becomes a record of what was
   sent (reason and email only), on the ledger's own two columns. */
.contact-record[hidden] { display: none; }
.contact-record {
  padding: 20px 0 22px;
  border-top: 1px solid var(--k-rule);
}
.contact-record:focus { outline: none; }
.contact-record:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; border-radius: 4px; }

.contact-record-note {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: #146c43;
}
/* A small static mark before the note; the words carry the meaning. */
.contact-record-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  transform: translateY(-1px);
}
:root[data-theme="dark"] .contact-record-note { color: #6fe3a8; }

.contact-record-rows { margin: 0; }
.contact-record-row {
  display: grid;
  grid-template-columns: var(--label-w) minmax(0, 1fr);
  align-items: baseline;
  padding: 6px 0;
}
.contact-record-row dt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--k-text-muted);
}
.contact-record-row dd {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  color: var(--text);
  overflow-wrap: anywhere;                            /* long emails wrap inside the column */
}

/* The record fades in once; reduced motion shows it at once. */
@keyframes contact-record-in { from { opacity: 0; } to { opacity: 1; } }
html.motion-ok .contact-record:not([hidden]) { animation: contact-record-in 200ms var(--k-ease) both; }

@media (max-width: 1023px) {
  .contact-record-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 8px 0; }
}