@charset "UTF-8";
/* WPK Notary — the article page, ALTERNATIVE ART DIRECTION (v3).

   Loaded at ?page=article-view&id=<n>&v3=1, AFTER assets/css/v2/article.css, which
   index.php also serves at this address because the key it looks the stylesheet up by
   is the real route name either way.

   THIS FILE IS THE FRAME ONLY. Section 4 of assets/css/v2/article.css - 200 lines of
   tag selectors for the CKEditor body, written from a count of what the 113 real
   articles actually contain - is reused unchanged. None of it is art direction; it is
   what <p>, <h2>, <li>, <table> and <blockquote> have to look like on this site, and
   restating it here to change the furniture around it is the Role-Before-Component
   failure this project spent a pass removing.

   Nothing v2's article page renders is touched: this file defines no .v2-article*
   selector, so every rule in v2/article.css sections 1 to 3 simply never matches.

   NO max-width IN ch. `ch` is the width of the "0" glyph and stops Thai text short of
   its own box - it truncated a Thai paragraph by 387px on this site once already.

   Like the other v3 files: no colour, no radius, no shadow and no type size of its
   own. Everything resolves to a v2 token. Two thresholds, 1024px and 768px. */

/* ------------------------------------------------------------------ *
 * 1. The layout
 *
 * The rail runs the LENGTH of the article rather than heading one band, which is
 * the page's whole idea: an article is the longest scroll on this site, and the v2
 * page put its only LINE button below all of it.
 *
 * The container is computed, not chosen. 820px is the reading column v2/article.css
 * argues for at length (Thai has no hyphenation and no inter-word spaces to absorb a
 * long line), and the rail adds its column and its gutter to the left of that. Both
 * are tokens, so moving either moves this.
 * ------------------------------------------------------------------ */
.v3-art {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 80px);
  /* The article is a bare <article>, not a .v2-band, so it carries no side padding of
     its own - and .v2-container has none either. Without this the reading column ran
     edge to edge below 1024px. See the note on --gutter in tokens/spacing.css. */
  padding-inline: var(--gutter);
}

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

/* ------------------------------------------------------------------ *
 * 2. The margin
 *
 * .v3-rail sets `align-items: start`, which sizes a grid item to its content - and a
 * sticky child of a content-height box has nowhere to travel, so it never moves.
 * The aside stretches to the row's full height and the sticky sits on the inner box.
 * ------------------------------------------------------------------ */
.v3-artaside {
  align-self: stretch;
}

.v3-artaside__inner {
  position: sticky;
  /* The site header is 64px and sticky, so anything pinned under it has to clear it
     or it parks behind the navigation. */
  top: calc(var(--nav-height) + 24px);
}

.v3-artaside__topic {
  /* Topic names come from the database and are Thai. .v2-eyebrow is a Latin label
     role and tracks at 0.04em; --thai-tracking is 0 and is mandatory for any string
     that can contain Thai. */
  letter-spacing: var(--thai-tracking);
  text-wrap: pretty;
}

/* ---- the record ----
 * The label stays in the Thai interface face, the numerals are mono. Same device as
 * the registration number on the home page, the spine on the services page and the
 * 01-17 numbering on the FAQ. Mono is NEVER applied to the Thai label: IBM Plex Mono
 * has no Thai coverage and would fall back mid-string. */
.v3-artrec {
  margin: 22px 0 0;
}

.v3-artrec__k {
  margin-top: 14px;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

.v3-artrec__k:first-child {
  margin-top: 0;
}

.v3-artrec__v {
  /* <dd> carries a 40px inline start margin by default. */
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  font-variant-numeric: tabular-nums;
  color: var(--text-ink);
}

.v3-artaside__foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: var(--border-hairline);
}

.v3-artaside__foot .v2-note {
  margin: 0 0 6px;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
 * 3. The reading column
 * ------------------------------------------------------------------ */
.v3-artcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

.v3-artcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}

.v3-artcrumbs a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --type-display-page, not --type-display-article. The v2 page sets its title at the
   smaller of the two because a navy slab is doing half the work of announcing the top
   of the page; here the title carries that alone on a white ground. */
.v3-arttitle {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--type-display-page);
  line-height: var(--lh-subhead);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
  margin: 14px 0 0;
  text-wrap: pretty;
}

.v3-artby {
  margin: 16px 0 0;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

.v3-artfig {
  margin: clamp(28px, 4vw, 40px) 0 clamp(28px, 4vw, 40px);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--border-hairline);
  background: var(--surface-strong);
}

/* aspect-ratio on the frame, so the column does not jump as the picture arrives.
   16/9 matches the 1200x675 the admin uploads at. */
.v3-artfig img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* An article with no lead image starts on its own first paragraph, so the body needs
   the gap the figure would have supplied. */
.v3-artby + .v2-articlebody {
  margin-top: clamp(28px, 4vw, 40px);
}

.v3-artfoot {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 22px;
  border-top: var(--border-hairline);
}

.v3-artfoot .v2-note {
  margin: 0 0 10px;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
 * 4. Related — three columns, picture above title, NO BOX
 *
 * The item is a bare <a> laid out as a stack. There is deliberately no border, no
 * background, no radius and no shadow on it: v2's three teasers carry a gold border
 * and two shadows, and that is what made them read as a bought template rather than
 * an editorial footer. Only the picture has a frame, and the frame is the shared
 * .v3-thumb the article index uses.
 *
 * The block still sits on .v3-rail, so its left edge lands on the article's own
 * reading column rather than 192px to the left of it.
 * ------------------------------------------------------------------ */
.v3-artrel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.v3-artrel__title {
  margin: 0;
}

.v3-relgrid {
  display: grid;
  /* minmax(0, 1fr), never a bare 1fr: a bare 1fr floors at min-content, so one long
     unbreakable string in a title would widen its column and squeeze the other two. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* --gap-card-grid, NOT --gap-grid. Six v2 call sites write var(--gap-grid) and that
     property has never been declared, so all six render gap: 0 - see the check that
     _docs/check-tokens.py now runs, and the note on --gutter in tokens/spacing.css.
     --gap-card-grid is the declared token for exactly this role. */
  gap: var(--gap-card-grid);
  margin-top: clamp(20px, 2.5vw, 28px);
}

.v3-relcard {
  display: grid;
  /* No hover ground either. On a card with no box there is nothing for a fill to sit
     inside, so the hover lives on the title, where the reader is already looking. */
  text-decoration: none;
  color: inherit;
}

/* The frame stretches to the column. .v3-thumb's own width is the 96-160px mark the
   index row wants; here the picture IS the item, at ~290px in a 924px band, which is
   about three and a half times the area. That is the whole reason this is a change of
   shape and not a reflow. */
.v3-relcard__fig {
  width: 100%;
  /* .v3-thumb sets align-self: start for a baseline-aligned row. In this stack the
     figure is the first row of the grid and must fill the column. */
  align-self: stretch;
}

.v3-relcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 14px;
}

/* Mono and tabular, the same record device the article dateline and the index use.
   Never applied to the Thai topic beside it: IBM Plex Mono has no Thai coverage. */
.v3-relcard__date {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.v3-relcard__topic {
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  /* Topic names come from the database and are Thai. --thai-tracking is 0 and is
     mandatory for any string that can contain Thai; the label role's 0.04em is restored
     under lang="en", where the string is Latin. */
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

html[lang="en"] .v3-relcard__topic {
  letter-spacing: 0.04em;
}

/* --type-title, not --type-subhead. Three teasers at section weight came out as loud as
   the article's own h2s and competed with the closing ask; --type-title is what v2's
   .v2-artcard__title used for these same three.
   
   CLAMPED TO THREE LINES so the three columns end on one edge. A ragged bottom on a
   three-up block reads as an accident, and at ~290px a long Thai title runs to four or
   five lines - the trade is a rare ellipsis against a straight edge on every article. */
.v3-relcard__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin-top: 6px;
  font-size: var(--type-title);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
  text-wrap: pretty;
  transition: color var(--motion-base) var(--motion-ease);
}

.v3-relcard:hover .v3-relcard__title {
  color: var(--color-primary);
}

/* ------------------------------------------------------------------ *
 * 5. The closing ask, and the missing article
 * ------------------------------------------------------------------ */
.v3-artcta {
  background-image: url("../../v2/photos/bg-cta.jpg");
  padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 48px);
}

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

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

.v3-artcta__lead {
  margin: 14px 0 0;
  max-width: var(--measure-read);
}

.v3-artcta__actions {
  margin-top: clamp(24px, 3vw, 32px);
}

.v3-artmissing__inner {
  max-width: var(--measure-lead);
}

.v3-artmissing__code {
  margin: 12px 0 8px;
  color: var(--accent-gold);
}

.v3-artmissing__body {
  margin: 14px 0 0;
}

.v3-artmissing__actions {
  margin-top: clamp(24px, 3vw, 32px);
  align-items: center;
}

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

@media (max-width: 1023px) {
  /* Two columns, not three. The rail folds here so the band gains its width back, but a
     768-1023px viewport still leaves each of three columns near 230px, where a Thai
     title hits the three-line clamp on almost every article. Two columns keep the
     picture large enough to be worth showing. */
  .v3-relgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* .v3-rail folds to one column in app.css, so the margin becomes a row above the
     article. Sticky is dropped with it: a pinned block on a narrow screen eats the
     reading area it exists to support. */
  .v3-artaside__inner {
    position: static;
  }

  /* The record goes horizontal - two labelled dates and the LINE link on one line
     rather than a five-row stack that pushes the title off the screen. */
  .v3-artrec {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-top: 14px;
  }

  .v3-artrec__k,
  .v3-artrec__k:first-child,
  .v3-artrec__v {
    margin: 0;
  }

  /* The gap between one pair and the next, without a separator glyph a screen reader
     would read aloud. */
  .v3-artrec__v + .v3-artrec__k {
    margin-left: 14px;
  }

  /* THE WHOLE FOOT GOES, prompt and link together.

     The rail folds to a row ABOVE the article, so on a phone this block renders
     between the dates and the breadcrumb - before the reader has seen the title, let
     alone read a paragraph. Rendered and looked at rather than reasoned about: the
     order came out rule, topic, dates, "ทักไลน์มาสอบถามได้", back link, crumbs, H1,
     which asks for the sale above the headline.

     Nothing is lost. The closing band carries the full ask with a real LINE button,
     and the site header carries a ทักไลน์ pill that is sticky at every width. What the
     desktop rail adds is PERSISTENCE beside a long column, and a folded row cannot be
     persistent - the phone equivalent would be a pinned bottom bar, which is a
     different device and not one this direction has. */
  .v3-artaside__foot {
    display: none;
  }
}

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

@media (max-width: 767px) {
  .v3-artrel__head {
    gap: 10px;
  }

  /* BACK TO A ROW. Three full-width 16:9 pictures stacked is about 700px of screen for
     three links, which is the v2 card grid's mistake pointing downwards. The item keeps
     its own grid and just rearranges: picture in column one at 96-132px, meta and title
     beside it. */
  .v3-relgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .v3-relcard {
    grid-template-columns: clamp(96px, 26vw, 132px) minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 16px 0;
    border-bottom: var(--border-hairline);
  }

  .v3-relcard:first-child {
    border-top: var(--border-hairline);
  }

  .v3-relcard__fig {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .v3-relcard__meta {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .v3-relcard__title {
    grid-column: 2;
    grid-row: 2;
    /* Two lines beside a 96px picture rather than three under a 290px one. */
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}