/* ════════════════════════════════════════════════════════════════
   PAGE-BLOG — The Floor (blog.html) + the 13 article pages.
   Tarang at reading scale.

   Linked LAST on all 15 pages, after chain.css and tarang.css, so it wins
   ties on equal specificity. tarang.css and chain.css are SHARED and are
   NOT touched from here.

   Two jobs:
     A · blog.html becomes a printed contents page. No cards, no shadows,
         no rounded corners. Ruled entries, a mono date on every line, the
         title set as display type, the cover as a .tg-plate.
     B · the 13 articles get one editorial treatment. These are long reads,
         so the work is typography: a masthead that opens on a 3px rule, a
         measured column, h2s on a 2px ink rule, ruled spec tables, ruled
         pull-quotes with a 3px ink edge, and a CTA that is a rule, not a
         slab.

   SCRIPT SAFETY runs through the whole file. Thai tone marks and upper
   vowels clip at Latin display settings, and Chinese at negative tracking
   collides. Body text never goes below 1.7; Thai and Chinese body text is
   lifted again on top of that. Every colour comes from a token, so nothing
   here can go light-on-light in either theme.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   A · THE FLOOR — blog.html
   ════════════════════════════════════════════════════════════════ */

.floor{
  padding-top:clamp(104px,14vw,150px);
  padding-bottom:clamp(52px,7vw,84px);
}

/* ── A1 · the masthead ─────────────────────────────────────────
      3px rule, the rubric line under it, then the name set as the
      largest type on the site. The same opener the homepage uses. ── */
.fl-mast{ margin-bottom:clamp(40px,5.5vw,72px); }
.fl-mast__rubric{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:11px;
  border-top:3px solid var(--rule);
}
.fl-mast__name{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(54px,11.5vw,150px);
  line-height:.92;
  letter-spacing:-.05em;
  color:var(--tx);
  margin:clamp(22px,3.4vw,44px) 0 0;
}
.fl-mast__name em{ font-style:normal; color:var(--teal); }
.fl-mast__tag{
  font-size:clamp(17px,2vw,22px);
  line-height:1.7;
  color:var(--tx-2);
  max-width:48ch;
  margin:clamp(18px,2.4vw,28px) 0 0;
  text-wrap:pretty;
}
body[data-lang="th"] .fl-mast__tag,
body[data-lang="zh"] .fl-mast__tag{ line-height:1.86; }
.fl-mast__colophon{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.6vw,18px);
  flex-wrap:wrap;
  margin:clamp(20px,2.6vw,30px) 0 0;
  padding-top:13px;
  border-top:1px solid var(--hair);
}

/* ── A2 · an edition ───────────────────────────────────────────
      Opens on a 2px ink rule (.tg-sec, from tarang.css), then the
      edition title beside its plate, then the ruled contents list. ── */
.edition{ margin-top:clamp(54px,7.5vw,104px); }

/* THE MOTION LIVES ON THE RULE, NEVER ON THE WORD.
   tarang.css fades a .tg-sec's rubric in behind the drawn rule, and .tg-tele
   clips a mono label to zero width until its IntersectionObserver fires. Both
   are right at the top of a page. Three screens down a contents page they are
   a way to strand TEXT: a fast scroll outruns the observer and the label is
   still at opacity 0 or width 0 when the reader arrives. chain.js says the
   same thing out loud in its own 4s safety net. So here the rule still draws
   itself left to right, and the label under it is simply present. The
   typewriter is kept for the masthead only, where it is always in the first
   viewport and cannot miss. */
html.js .floor .tg-sec .tg-kicker,
html.js .floor .tg-sec .tg-met{ opacity:1; }

.fl-open{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(24px,3.6vw,52px);
  align-items:start;
  margin-bottom:clamp(28px,3.6vw,46px);
}
.fl-open__h{ margin:0 0 clamp(12px,1.6vw,18px); }
.fl-open__note{
  font-size:clamp(15.5px,1.7vw,18px);
  line-height:1.75;
  color:var(--tx-2);
  margin:0;
  max-width:42ch;
  text-wrap:pretty;
}
body[data-lang="th"] .fl-open__note,
body[data-lang="zh"] .fl-open__note{ line-height:1.9; }
.fl-open__plate img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }

/* the entry keeps real document semantics: the rubric and the standfirst are
   paragraphs and the title is an h3, so the index is still an outline for a
   reader on a screen reader and for a crawler. They are block elements now,
   so their margins are stated rather than inherited. */
.fl-entry__rub,
.fl-entry__h,
.fl-entry__ex{ margin:0; }

/* ── A3 · the contents list — one shape, thirteen times ───────
      Number, mono rubric with the publication date, the title as
      display type, one line of standfirst, the read time on the
      right. Hairlines carry every division. No card anywhere. ── */
.fl-list{
  list-style:none;
  margin:0;
  padding:0;
  border-top:2px solid var(--rule);
}
.fl-list > li{ margin:0; }

.fl-entry{
  display:grid;
  grid-template-columns:clamp(32px,4vw,54px) minmax(0,1fr) auto;
  gap:clamp(12px,2vw,26px);
  align-items:start;
  padding:clamp(18px,2.4vw,27px) 0;
  border-bottom:1px solid var(--hair);
  text-decoration:none;
  color:inherit;
  transition:background .3s var(--ease);
}
.fl-entry:hover{ background:rgba(15,17,21,.022); }

.fl-entry__no{
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--tx-4);
  font-variant-numeric:tabular-nums;
  padding-top:5px;
}
.fl-entry__rub{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx-3);
  margin:0 0 10px;
}
.fl-entry__date{
  color:var(--tx-4);
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
  font-weight:400;
}
.fl-entry__h{
  display:block;
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(19px,2.1vw,26px);
  line-height:1.18;
  letter-spacing:-.025em;
  color:var(--tx);
  text-wrap:balance;
  transition:color .2s;
}
body[data-lang="th"] .fl-entry__h,
body[data-lang="zh"] .fl-entry__h{ line-height:1.38; letter-spacing:-.008em; }
.fl-entry:hover .fl-entry__h{ color:var(--teal-deep); }
.fl-entry__ex{
  display:block;
  font-size:15px;
  line-height:1.75;
  color:var(--tx-2);
  margin:10px 0 0;
  max-width:64ch;
  text-wrap:pretty;
}
body[data-lang="th"] .fl-entry__ex,
body[data-lang="zh"] .fl-entry__ex{ line-height:1.9; }
.fl-entry__read{
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.5;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tx-4);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  padding-top:5px;
}

/* the first entry of an edition is the lead: same anatomy, more weight */
.fl-entry--lead .fl-entry__h{
  font-size:clamp(23px,3.2vw,38px);
  line-height:1.08;
  letter-spacing:-.035em;
}
body[data-lang="th"] .fl-entry--lead .fl-entry__h,
body[data-lang="zh"] .fl-entry--lead .fl-entry__h{ line-height:1.3; letter-spacing:-.012em; }
.fl-entry--lead .fl-entry__ex{ font-size:16.5px; }

/* ── A4 · the closing rule ── */
.fl-end{
  margin-top:clamp(58px,8vw,104px);
  padding-top:clamp(24px,3.2vw,36px);
  border-top:3px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(22px,3.4vw,48px);
  align-items:end;
}
.fl-end__h{ margin:0 0 12px; }
.fl-end__p{
  font-size:16.5px;
  line-height:1.75;
  color:var(--tx-2);
  margin:0;
  max-width:48ch;
}
body[data-lang="th"] .fl-end__p,
body[data-lang="zh"] .fl-end__p{ line-height:1.9; }

@media(max-width:860px){
  .fl-open{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  .fl-entry{ grid-template-columns:28px minmax(0,1fr); }
  .fl-entry__read{ grid-column:2; padding-top:0; margin-top:11px; }
  .fl-end{ grid-template-columns:1fr; align-items:start; }
}

/* ════════════════════════════════════════════════════════════════
   B · THE ARTICLES — blog/*.html + blog-tw/*.html
   ════════════════════════════════════════════════════════════════ */

.art{ padding:clamp(104px,14vw,150px) 0 clamp(56px,7vw,88px); }

/* ── B1 · the masthead ─────────────────────────────────────────
      Crumb, then a 3px ink rule carrying the rubric line: the mono
      kicker on the left, the date and read time on the right. Then
      the headline, then the standfirst over a hairline. ── */
.art__mast{ margin-bottom:clamp(30px,4vw,48px); }
.art__crumb{ margin:0 0 clamp(16px,2.2vw,26px); }
.art__crumb a{ color:var(--tx-3); text-decoration:none; }
.art__crumb a:hover{ color:var(--teal); text-decoration:none; }

.art__rubric{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-top:11px;
  border-top:3px solid var(--rule);
}
.art__rubric .art__kick{
  margin:0;
  font-size:10.5px;
  line-height:1.5;
  letter-spacing:.14em;
  color:var(--tx-3);
}
.art__rubric .art__meta{
  margin:0;
  padding:0;
  border:0;
  font-size:10.5px;
  line-height:1.5;
  letter-spacing:.06em;
  color:var(--tx-4);
  font-variant-numeric:tabular-nums;
  white-space:normal;
}

.art__h1{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(35px,5.4vw,70px);
  line-height:1.0;
  letter-spacing:-.045em;
  color:var(--tx);
  margin:clamp(22px,3.4vw,42px) 0 0;
  max-width:24ch;
  text-wrap:balance;
}
body[data-lang="th"] .art__h1,
body[data-lang="zh"] .art__h1{ line-height:1.24; letter-spacing:-.018em; }

.art__lead{
  font-size:clamp(18px,2vw,23px);
  line-height:1.72;
  font-weight:500;
  color:var(--tx);
  max-width:60ch;
  margin:clamp(24px,3.2vw,38px) 0 0;
  padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--hair);
  text-wrap:pretty;
}
body[data-lang="th"] .art__lead,
body[data-lang="zh"] .art__lead{ line-height:1.9; }

/* ── B2 · the reading column ───────────────────────────────────
      A measured measure and generous leading. 1.7 is the floor for
      Latin; Thai and Chinese are lifted again above it, because the
      tone marks and the upper vowels sit above the cap line. ── */
.art__body{ max-width:66ch; }
.art__body p,
.art__body li{
  font-size:17px;
  line-height:1.85;
  color:var(--tx-2);
  text-wrap:pretty;
}
body[data-lang="th"] .art__body p,
body[data-lang="zh"] .art__body p,
body[data-lang="th"] .art__body li,
body[data-lang="zh"] .art__body li{ line-height:1.98; }
.art__body p{ margin:0 0 19px; }
.art__body ul,
.art__body ol{ margin:0 0 22px; padding-left:22px; }
.art__body li{ margin-bottom:10px; }
.art__body li::marker{ color:var(--tx-4); }
.art__body strong{ color:var(--tx); font-weight:700; }
.art__body a:not(.btn):not(.tg-btn){
  color:var(--teal);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.art__body a:not(.btn):not(.tg-btn):hover{ color:var(--teal-deep); }

/* ── B3 · the section rules ────────────────────────────────────
      Every h2 opens on a 2px ink rule, every h3 on a hairline. This
      is the same opener the app draws above a screen's section, and
      it is what carries a 5,000-word page without a single box. ── */
.art__body h2{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(24px,3vw,35px);
  line-height:1.16;
  letter-spacing:-.032em;
  color:var(--tx);
  margin:clamp(46px,6vw,74px) 0 18px;
  padding-top:15px;
  border-top:2px solid var(--rule);
  scroll-margin-top:100px;
}
body[data-lang="th"] .art__body h2,
body[data-lang="zh"] .art__body h2{ line-height:1.34; letter-spacing:-.012em; }
.art__body > h2:first-child{ margin-top:0; }

.art__body h3{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(17.5px,1.9vw,20.5px);
  line-height:1.3;
  letter-spacing:-.014em;
  color:var(--tx);
  margin:clamp(30px,3.6vw,40px) 0 11px;
  padding-top:12px;
  border-top:1px solid var(--hair);
}
body[data-lang="th"] .art__body h3,
body[data-lang="zh"] .art__body h3{ line-height:1.5; letter-spacing:0; }

/* ── B4 · the pull-quote — a ruled block with a 3px ink edge.
      Never a tinted card. Set as display type, not italic serif. ── */
.art__body blockquote{
  margin:clamp(30px,3.8vw,44px) 0;
  padding:2px 0 2px clamp(18px,2.2vw,28px);
  border:0;
  border-left:3px solid var(--rule);
  border-radius:0;
  background:none;
  font-family:var(--font);
  font-style:normal;
  font-weight:600;
  font-size:clamp(19px,2.2vw,26px);
  line-height:1.32;
  letter-spacing:-.022em;
  color:var(--tx);
  max-width:52ch;
  text-wrap:pretty;
}
body[data-lang="th"] .art__body blockquote,
body[data-lang="zh"] .art__body blockquote{ line-height:1.55; letter-spacing:-.004em; }

/* ── B5 · the spec table — ruled, mono head, tabular figures ── */
.art__tablewrap{
  margin:clamp(28px,3.6vw,42px) 0;
  border:0;
  border-top:2px solid var(--rule);
  border-bottom:1px solid var(--hair);
  border-radius:0;
  overflow-x:auto;
}
.art__table{
  width:100%;
  border-collapse:collapse;
  font-size:14.5px;
  min-width:560px;
}
.art__table thead th{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--tx-3);
  text-align:left;
  vertical-align:bottom;
  padding:13px 16px;
  border-bottom:1.5px solid var(--rule);
}
.art__table td,
.art__table tbody th{
  padding:13px 16px;
  border-bottom:1px solid var(--hair);
  vertical-align:top;
  line-height:1.62;
  color:var(--tx-2);
  text-align:left;
}
body[data-lang="th"] .art__table td,
body[data-lang="zh"] .art__table td,
body[data-lang="th"] .art__table tbody th,
body[data-lang="zh"] .art__table tbody th{ line-height:1.78; }
.art__table tbody th{
  font-weight:700;
  color:var(--tx);
  font-variant-numeric:tabular-nums;
}
.art__table tbody tr:last-child td,
.art__table tbody tr:last-child th{ border-bottom:0; }
.art__table strong{ color:var(--tx); font-variant-numeric:tabular-nums; }
/* the WorkCo row is marked with a teal ink edge, not a wash */
.art__table tr.is-workco{ background:none; }
.art__table tr.is-workco > *:first-child{
  box-shadow:inset 3px 0 0 var(--teal);
  padding-left:19px;
}
.art__table tr.is-workco th{ color:var(--teal-deep); }

/* ── B6 · the footnote under a table or a figure ────────────────
      chain.css gives .art__note a paper-2 ground and a 3px rule, which
      reads as a tinted card sitting in the middle of the prose. A source
      note is not a callout: it is the smallest voice on the page. Ruled
      on one edge, mono, and nothing else. The .art__body p selector also
      out-specifies a bare .art__note, so the size is set from inside it. */
.art__body .art__note{
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.7;
  letter-spacing:.03em;
  font-style:normal;
  color:var(--tx-3);
  margin:0 0 clamp(26px,3.4vw,38px);
  padding:0 0 0 14px;
  background:none;
  border:0;
  border-left:1px solid var(--hair);
  border-radius:0;
  max-width:62ch;
}
body[data-lang="th"] .art__body .art__note,
body[data-lang="zh"] .art__body .art__note{ line-height:1.9; }

/* ── B7 · the app plate — a real screen, printed ────────────────
      Never an illustration and never AI art: these are captures of
      the shipped Tarang app, swapped per language by chain.js. The
      legend beside it says what the reader is looking at. ── */
.art__shot{
  display:grid;
  grid-template-columns:minmax(0,258px) minmax(0,1fr);
  gap:clamp(18px,2.6vw,34px);
  /* the legend is a caption, not a heading: it sits on the plate's optical
     centre. Top-aligning it against a 480px-tall phone capture left a column
     of dead paper the width of the measure. */
  align-items:center;
  margin:clamp(34px,4.4vw,52px) 0;
  padding-top:clamp(15px,2vw,20px);
  border-top:2px solid var(--rule);
}
.art__shot .tg-plate{ background:var(--paper); }
.art__shot .tg-plate img{ display:block; width:100%; height:auto; }
.art__shot__legend{ padding-top:2px; }
/* the legend's rubric is a rubric, not body copy: .art__shot__legend p would
   otherwise out-specify .tg-kicker and blow it up to reading size */
.art__body .art__shot__legend p.tg-kicker{
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.5;
  letter-spacing:.14em;
  color:var(--tx-3);
  margin:0 0 11px;
}
.art__shot__legend p:not(.tg-kicker){
  font-size:15px;
  line-height:1.78;
  color:var(--tx-2);
  margin:0;
  max-width:44ch;
}
body[data-lang="th"] .art__shot__legend p:not(.tg-kicker),
body[data-lang="zh"] .art__shot__legend p:not(.tg-kicker){ line-height:1.94; }
@media(max-width:640px){
  .art__shot{ grid-template-columns:1fr; gap:18px; }
  .art__shot .tg-plate{ max-width:300px; }
}

/* ── B8 · the article FAQ — ruled rows, an ink edge when open ── */
.art__faq{
  margin-top:16px;
  border-top:2px solid var(--rule);
}
.art__faq details{
  border:0;
  border-bottom:1px solid var(--hair);
  border-radius:0;
  padding:0;
  background:none;
  transition:box-shadow .2s;
}
.art__faq details[open]{ box-shadow:inset 3px 0 0 var(--ink); }
.art__faq summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  list-style:none;
  cursor:pointer;
  font-weight:600;
  font-size:16.5px;
  line-height:1.45;
  color:var(--tx);
  padding:18px 2px;
}
body[data-lang="th"] .art__faq summary,
body[data-lang="zh"] .art__faq summary{ line-height:1.62; }
.art__faq summary::-webkit-details-marker{ display:none; }
.art__faq summary:hover{ color:var(--teal-deep); }
.art__faq summary svg{
  flex:none;
  margin-top:3px;
  color:var(--tx-4);
  transition:transform .25s var(--ease);
}
.art__faq details[open] summary{ padding-left:16px; }
.art__faq details[open] summary svg{ transform:rotate(180deg); color:var(--teal); }
.art__faq details > p{
  font-size:15.5px;
  line-height:1.82;
  color:var(--tx-2);
  margin:0 2px 20px;
  max-width:62ch;
}
body[data-lang="th"] .art__faq details > p,
body[data-lang="zh"] .art__faq details > p{ line-height:1.98; }
.art__faq details[open] > p{ padding-left:16px; }

/* ── B9 · the closing CTA — a ruled block, never a slab ─────────
      It was a dark card with #fff type. On paper that is either a
      black hole in a printed page or invisible text. It is now the
      last rule on the page with the offer set under it. ── */
.art__cta{
  max-width:66ch;
  margin-top:clamp(50px,7vw,88px);
  padding:clamp(22px,3vw,32px) 0 0;
  background:none;
  border:0;
  border-top:3px solid var(--rule);
  border-radius:0;
  color:var(--tx);
}
.art__cta h2{
  font-family:var(--font);
  font-weight:700;
  font-size:clamp(23px,2.9vw,34px);
  line-height:1.12;
  letter-spacing:-.032em;
  color:var(--tx);
  margin:0 0 13px;
  padding:0;
  border:0;
  max-width:22ch;
}
body[data-lang="th"] .art__cta h2,
body[data-lang="zh"] .art__cta h2{ line-height:1.32; letter-spacing:-.012em; }
.art__cta p{
  color:var(--tx-2);
  font-size:16.5px;
  line-height:1.75;
  margin:0 0 24px;
  max-width:58ch;
}
body[data-lang="th"] .art__cta p,
body[data-lang="zh"] .art__cta p{ line-height:1.9; }
.art__cta .art__cta-btns{ display:flex; flex-wrap:wrap; gap:12px; }
@media(max-width:520px){
  .art__cta .art__cta-btns{ flex-direction:column; align-items:stretch; }
  .art__cta .art__cta-btns .btn,
  .art__cta .art__cta-btns .tg-btn{ width:100%; }
}

/* ── B10 · reduced motion — the printed page, already set ── */
@media (prefers-reduced-motion:reduce){
  .fl-entry,
  .art__faq details,
  .art__faq summary svg{ transition:none !important; }
}

/* ── phones: article tables must FIT, not slide ──
   .art__table carried min-width:560px. Same fault as the pricing comparison and
   the security matrix: the page looks fine until a thumb lands on a table and
   drags it. These tables are two or three columns of short text, so they fit
   once the min-width comes off and words are allowed to break. */
@media (max-width: 700px){
  .art__table{ min-width:0; table-layout:fixed; font-size:13px; }
  /* chain.css sets white-space:nowrap on the row header. Same trap as the
     security matrix: nowrap beats overflow-wrap, so it had to be undone. */
  .art__table th,.art__table td{ padding:11px 9px; overflow-wrap:anywhere; white-space:normal; }
  .art__table thead th{ font-size:9.5px; letter-spacing:.08em; }
  /* And the spans INSIDE the cells, which carry their own nowrap. A label like
     "MANAGER OPPORTUNITY COST" is not a figure and has no business refusing to
     wrap on a 320px screen. */
  .art__table th *,.art__table td *{ white-space:normal; }
}