@charset "UTF-8";
/* WPK Notary — ติดต่อเรา, ALTERNATIVE ART DIRECTION (v3).

   Loaded at ?page=contact&v3=1, after assets/css/v2/styles.css and assets/css/v3/app.css
   and WITHOUT assets/css/v2/contact.css - see $v3_reuses_v2_css in index.php. That file
   is the split hero, the three channel cards and the tips panel, all of them replaced
   here, plus its own field styles, which this file restates because they are the one
   thing on the page with no shared equivalent: the contact form is the only form on
   this site, so a form field is not yet a role.

   The rail, the schedule row, the gold-wash panel and the text link all come from
   app.css.

   NO max-width IN ch. `ch` is the width of the "0" glyph and stops Thai text short of
   its own box.

   No colour, no radius, no shadow and no type size of its own. Two thresholds. */

/* The rail carries a three-point brief rather than a two-word eyebrow, so it takes the
   width the FAQ and the article list take for the same kind of content. Overridden for
   this page only - the token still means 152px everywhere else. */
.v3-ctlayout {
  --v3-rail-col: 236px;
}

/* ------------------------------------------------------------------- hero */

.v3-cthero {
  background-image: url("../../v2/photos/bg-hero.jpg");
  padding: clamp(40px, 5.5vw, 68px) clamp(18px, 4vw, 48px) clamp(44px, 5.5vw, 72px);
}

.v3-cthero__inner {
  max-width: var(--container-narrow);
}

/* --type-display-page, the declared role for a short page title, and since
   --v3-type-hero was retired on 2 September 2026 it is the size all six v3 pages
   share - including the home page, which used to run 84px. */
.v3-cthero__title {
  margin: 12px 0 0;
  font-size: var(--type-display-page);
  line-height: var(--lh-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark);
}

.v3-cthero__lead {
  margin: 16px 0 0;
  max-width: var(--measure-read);
  color: var(--text-on-dark-soft);
}

.v3-promises {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 3vw, 32px);
  margin: clamp(18px, 2.2vw, 24px) 0 0;
  padding: 0;
}

.v3-promise {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--type-base);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark);
}

.v3-promise__tick {
  display: flex;
  flex: none;
  /* On the reading line rather than the box's top edge, so the tick reads as attached
     to the sentence it marks. */
  padding-top: 2px;
  color: var(--accent-gold-on-dark);
}

/* ---- the LINE panel ----
 * It steps UP to the elevated navy surface rather than being a white card punched into
 * the band - the same step .v3-search takes on the FAQ and the article list. The QR is
 * the one image on this site a reader is meant to point a phone at, so it keeps a white
 * plate of its own: a QR reversed onto navy does not scan. */
.v3-ctline {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 24px);
  max-width: var(--measure-lead);
  margin: clamp(24px, 3vw, 32px) 0 0;
  padding: clamp(16px, 2vw, 20px);
  border: var(--border-on-dark);
  border-radius: var(--radius-card);
  background: var(--surface-dark-elevated);
}

.v3-ctline__qr {
  flex: none;
  width: 116px;
  height: 116px;
  border-radius: var(--radius-md);
  background: var(--canvas);
  padding: 6px;
}

.v3-ctline__body {
  min-width: 0;
}

.v3-ctline__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--type-subtitle);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark);
}

.v3-ctline__head img {
  display: block;
  flex: none;
}

.v3-ctline__note {
  margin: 8px 0 0;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark-soft);
  text-wrap: pretty;
}

/* Mono, and safe: the handle is Latin. Mono is never applied to a Thai string. */
.v3-ctline__id {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--type-subtitle);
  color: var(--accent-gold-on-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.v3-ctline__id:hover {
  color: var(--accent-gold-on-dark);
}

/* --------------------------------------------------------- the three channels */

.v3-ctchannels {
  padding-top: var(--v3-pad-tight);
  padding-bottom: var(--v3-pad-tight);
}

.v3-ctlayout {
  max-width: calc(var(--v3-rail-col) + var(--v3-rail-gap) + var(--container-narrow));
}

/* .v3-schedrow's mark column is a mono numeral on every other page. Here it is a brand
   glyph, so the column becomes a plate the size the design system already defines for
   one - the icon plate - rather than a diagram-only dimension. */
.v3-ctrow__plate {
  display: grid;
  place-items: center;
  width: var(--v3-plate);
  height: var(--v3-plate);
  border-radius: var(--radius-full);
  background: var(--surface-strong);
  color: var(--color-primary);
}

.v3-ctrow__plate img {
  display: block;
}

.v3-ctrow {
  align-items: center;
}

.v3-ctrow__name {
  display: block;
  margin-bottom: 2px;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

/* The handle is the row's title. --type-title rather than --type-subhead for the same
   reason the article index steps down: three of them at section weight would outshout
   the form they sit above. */
.v3-ctrow .v3-schedrow__title {
  font-size: var(--type-title);
  line-height: var(--lh-title);
}

.v3-ctrow__handle--mono {
  font-family: var(--font-mono);
}

/* ------------------------------------------------------------ the brief, in the rail */

.v3-ctband {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: var(--v3-pad-airy);
}

.v3-ctbrief__head {
  margin-top: 12px;
  margin-bottom: 18px;
}

.v3-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: var(--border-hairline);
}

.v3-tip__num {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  font-variant-numeric: tabular-nums;
  color: var(--accent-gold);
}

.v3-tip__label {
  font-size: var(--type-base);
  line-height: var(--lh-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
  text-wrap: pretty;
}

.v3-tip__detail {
  margin: 6px 0 0;
  font-size: var(--type-meta);
  line-height: var(--lh-read);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
  text-wrap: pretty;
}

.v3-ctbrief__after {
  margin-top: clamp(18px, 2.2vw, 24px);
  padding-top: clamp(16px, 2vw, 20px);
  border-top: var(--rule-gold);
}

/* ----------------------------------------------------------------- the form */

.v3-ctform__title {
  margin: 0;
}

.v3-ctform__lead {
  margin: 12px 0 0;
  max-width: var(--measure-lead);
}

.v3-ctform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 20px) clamp(16px, 2.5vw, 24px);
  margin-top: clamp(24px, 3vw, 32px);
}

.v3-field--wide {
  grid-column: 1 / -1;
}

.v3-field__label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
}

.v3-field__input {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--input-height);
  padding: 0 14px;
  border: var(--border-hairline);
  border-radius: var(--radius-input);
  background: var(--canvas);
  font-family: var(--font-body);
  /* 16px, not smaller: iOS Safari zooms the whole page on focus below 16px. */
  font-size: var(--type-base);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
  transition: border-color var(--motion-base) var(--motion-ease);
}

.v3-field__input--area {
  height: auto;
  padding: 12px 14px;
  line-height: var(--lh-read);
  resize: vertical;
}

.v3-field__input::placeholder {
  color: var(--text-muted);
}

.v3-field__input:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* The invalid state is a border AND a message, never colour alone: a reader who does
   not see red gets the same information from the sentence under the field. */
.v3-field__input--bad {
  border-color: var(--semantic-alert);
}

/* :not([hidden]) IS LOAD-BEARING. The span carries the `hidden` attribute until the
   script un-hides it, and a bare `display: block` here would override that attribute
   outright - every field would show its error message from the moment the page loaded.
   assets/css/v2/contact.css writes it the same way, for the same reason. */
.v3-field__error:not([hidden]) {
  display: block;
  margin-top: 6px;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--semantic-alert);
}

.v3-ctform__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 4px;
}

.v3-ctform__privacy {
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The endpoint's own message, printed verbatim. Three states, and each says which it is
   in words as well as in colour. */
.v3-ctform__status {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: var(--border-hairline);
  font-size: var(--type-meta);
  line-height: var(--lh-read);
  letter-spacing: var(--thai-tracking);
  color: var(--text-body);
  text-wrap: pretty;
}

.v3-ctform__status--bad {
  border-color: var(--semantic-alert);
  color: var(--semantic-alert);
}

.v3-ctform__status--busy {
  color: var(--text-muted);
}

/* The accepted panel reuses .v3-empty from app.css; only the address inside it is
   this page's. Mono because it is a Latin address, and it is the one thing in that
   sentence the reader needs to check character by character. */
.v3-ctsent {
  margin-top: 0;
  text-align: left;
}

.v3-ctsent .v3-empty__body {
  margin-left: 0;
  margin-right: 0;
}

.v3-ctsent .v3-empty__actions {
  justify-content: flex-start;
}

.v3-ctsent__email {
  font-family: var(--font-mono);
  color: var(--text-ink);
  overflow-wrap: anywhere;
}

/* ================================================================ 1024px */

@media (max-width: 1023px) {
  /* .v3-rail folds in app.css, so the brief becomes a block above the form. It is not
     a scrolling row of pills like the filter rails are - three labelled paragraphs are
     the thing a reader should read BEFORE writing the message, which is exactly the
     order the fold produces. */
  .v3-ctbrief {
    max-width: var(--measure-read);
  }
}

/* ================================================================= 768px */

@media (max-width: 767px) {
  /* One column. Two 150px fields side by side is narrower than the placeholder text
     they carry. */
  .v3-ctform {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The QR stacks above the words rather than shrinking below a scannable size. */
  .v3-ctline {
    flex-direction: column;
    align-items: flex-start;
  }

  /* .v3-schedrow drops the third column here and the arrow wraps under the plate. On a
     channel row the plate IS the affordance and the whole row is one link, so the arrow
     goes back beside the words rather than sitting alone in the mark column. */
  .v3-ctrow .v3-schedrow__go {
    grid-column: 2;
    justify-self: start;
    padding-top: 10px;
  }
}