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

   Loaded at ?page=articles&v3=1, after assets/css/v2/styles.css and assets/css/v3/app.css
   and WITHOUT assets/css/v2/articles.css - see $v3_reuses_v2_css in index.php. That
   file is 537 lines of card grid, sticky chip bar and pagination, and this page uses
   none of it; the article page reuses its v2 stylesheet because the CKEditor body rules
   in it are not art direction, and nothing on this page is in that position.

   Three of the four things this page needs are already shared. The filter rail, the
   navy search field and the gold-wash empty state were all promoted out of faq.css into
   app.css when this page became their second user - the FAQ filters seventeen questions
   by category, this one filters 113 articles by topic, and it is one component each
   time. What is left here is the hero, the index row's own marks, and the pagination.

   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 topic rows with counts, not a two-word eyebrow, so it needs the
   width the FAQ's rail took for the same job. Overridden for this page only - the token
   still means 152px everywhere else. */
.v3-lislayout {
  --v3-rail-col: 236px;
}

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

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

.v3-lishero__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-lishero__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-lishero__lead {
  margin: 16px 0 0;
  max-width: var(--measure-read);
  color: var(--text-on-dark-soft);
}

/* ---- the archive's record ----
 * Thai label in the interface face, numerals in mono. Same device as the registration
 * number on the home page and the dateline on the article page. Mono is never applied
 * to the Thai label: IBM Plex Mono has no Thai coverage and falls back mid-string. */
.v3-lisrec {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(24px, 4vw, 48px);
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  padding-top: clamp(18px, 2.2vw, 22px);
  border-top: var(--border-on-dark);
}

.v3-lisrec__pair {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.v3-lisrec__k {
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark-soft);
}

.v3-lisrec__v {
  /* <dd> carries a 40px inline start margin by default. */
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-subtitle);
  line-height: var(--lh-title);
  font-variant-numeric: tabular-nums;
  color: var(--accent-gold-on-dark);
}

/* -------------------------------------------------------------- the index */

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

.v3-lisbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-bottom: 14px;
}

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

/* .v3-sched__list carries a 32-48px top margin for a band that opens on a lead
   paragraph. Here it follows the count bar, which already has its own padding. */
.v3-lislist {
  margin-top: 0;
}

/* ---- the index row ----
 * .v3-schedrow does the layout and .v3-thumb in app.css does the picture; what
 * is left here is the meta line the date and the topic share.
 *
 * THE PICTURE TOOK THE MARK COLUMN, so the date is no longer a column of its own. It
 * stays mono and tabular - the record device the registration number, the services
 * spine and the article dateline all use - and it now sits inline above the title with
 * the topic beside it. */
.v3-idxrow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-bottom: 4px;
}

/* NOT GOLD. .v3-schedrow__idx is --type-subhead in gold because on the home and
   services pages there are three or four of them and each marks a section. Twelve gold
   dates on one screen would make gold the loudest thing on a page whose whole job is to
   let a title be read, so the date is the label size in muted ink and gold stays on the
   rules, the active filter and the empty state. */
.v3-idxrow__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-idxrow__topic {
  font-size: var(--type-meta);
  /* 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. */
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

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

/* The title is an <h2> here rather than a <span>, and it steps down from --type-subhead
   for the same reason the related list on the article page does: twelve article titles
   at section weight is a wall, and --type-title is what v2's card titles used. */
.v3-idxrow .v3-schedrow__title {
  font-size: var(--type-title);
  line-height: var(--lh-title);
}

/* ---------------------------------------------------------------- paging */

.v3-paging {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: var(--border-hairline);
}

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

.v3-paging__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-ink);
}

.v3-paging__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Hairline and mono, not pills. A row of filled pills under a hairline list is the one
   loud element on a quiet page, and the current page is marked the same way the current
   filter is: weight plus a gold rule. --control-height is the 44px touch target. */
.v3-paging__page {
  display: grid;
  place-items: center;
  min-width: var(--control-height);
  min-height: var(--control-height);
  padding: 0 6px;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease);
}

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

.v3-paging__page--on {
  border-bottom: var(--rule-gold);
  font-weight: var(--weight-semibold);
  color: var(--text-ink);
}

.v3-paging__gap {
  padding: 0 2px;
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  color: var(--text-muted);
}

.v3-paging__next {
  gap: 6px;
  margin-left: 8px;
}

/* ----------------------------------------------------------- closing CTA */

.v3-liscta {
  background-image: url("../../v2/photos/bg-cta.jpg");
  padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 48px);
}

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

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

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

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

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

@media (max-width: 1023px) {
  /* .v3-rail folds in app.css and .v3-filterrail becomes a horizontal scroller of
     pills there, so nothing about the rail is handled here. The count bar is what
     needs the gap, because at this width it sits directly on the pills. */
  .v3-lisbar {
    padding-top: clamp(16px, 2.5vw, 22px);
  }
}

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

@media (max-width: 767px) {
  /* The meta line drops to the micro size so the date and the topic still fit on one
     line beside a 96px thumbnail. */
  .v3-idxrow__date,
  .v3-idxrow__topic {
    font-size: var(--type-micro);
  }

  /* TWO LINES OF EXCERPT, not five.

     At 390px a 150-character Thai excerpt runs five lines, which put the second row's
     title 400px below the first and undid the density this page exists for - measured
     against the v2 grid the index was only saving height because the thumbnails were
     gone, not because it was tighter to read. Clamped, twelve rows fit the way they do
     on a desktop.

     The clamp is progressive: a browser that does not support it shows the whole
     excerpt, which is what happened before. */
  .v3-idxrow .v3-schedrow__detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }

  /* THE ARROW GOES, AND THE PICTURE IS WHY.

     app.css forbids hiding .v3-schedrow__go, and it is right to: an earlier pass deleted
     it here and left three tappable service rows with no affordance at all. That
     reasoning is about a row whose mark column holds a numeral - nothing to look at, and
     nothing to say the row does anything.

     A row with a 96px thumbnail is not that row. The picture is the affordance, and it is
     the first thing on every one of the twelve.

     The alternative was measured and is worse both ways. Keeping the third column costs
     36px of a 242px text column, so a Thai title that wrapped to three lines wraps to
     four; placing the arrow under the excerpt instead leaves a 20px glyph alone on its
     own line, a full excerpt below the title it belongs to - which is what it did, and
     it read as debris rather than as a control.

     Scoped to .v3-idxrow. The service and channel rows, which have no picture, keep
     their arrow. */
  .v3-idxrow .v3-schedrow__go {
    display: none;
  }

  .v3-paging {
    justify-content: flex-start;
  }
}