/* say.css — the /say public word page.
 *
 * PALETTE PROVENANCE
 *   marketing shell  -> output/site/assets/css/learn.css (the /learn hub, already live)
 *   the word card    -> output/site/assets/css/_word_breakdown.css (the owner-approved
 *                       navy/satin-gold word card). Literal hex ONLY inside the card —
 *                       it is theme-invariant by design (the wb theme-bleed law).
 *   tone colors     -> the app's dark-theme --tone-* tokens, frozen.
 *   Thai display face-> HTSThaiDisplay (Sarabun Bold), the app's card face (owner 2026-08-01).
 *                       UI Thai -> HTSThai (Leelawadee). Noto never appears.
 *
 * CONTAINER IS GOD: every wide element (syllable rail, mechanics table, related grid)
 * scrolls inside its OWN overflow-x container. The page body never scrolls sideways.
 */

/* ── faces (self-hosted, same files the app ships) ───────────────────────────────── */
@font-face { font-family:"Inter"; src:url("/assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Inter"; src:url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2"); font-weight:800; font-display:swap; }
@font-face { font-family:"HTSThai"; src:url("/assets/fonts/LeelawadeeUI.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"HTSThai"; src:url("/assets/fonts/LeelawadeeUI-Bold.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"HTSThaiDisplay"; src:url("/assets/fonts/Sarabun-Bold-Thai.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family:"HTSThaiDisplay"; src:url("/assets/fonts/Sarabun-Bold-Latin.woff2") format("woff2"); font-weight:700; font-display:swap; unicode-range:U+0000-00FF, U+2000-206F; }

:root{
  --b:#1f70df; --b2:#155ec2; --ink:#14263c; --ink2:#2b3d4f; --mut:#5f7183; --mut2:#8494a4;
  --bg:#ffffff; --cream:#faf6ef; --line:#e7ebf1; --line2:#f0f3f7;
  --rad:18px; --max:760px;
  /* the word card — theme-invariant literals (never tokens) */
  --navy:#0c1b33; --navy2:#132a4d; --gold:#FFCE1F; --gold-hi:#FFE9A8; --gold-lo:#D99A16;
  --paper:#E9F1FB; --paper-mut:rgba(233,241,251,.66); --paper-dim:rgba(233,241,251,.42);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.say{
  margin:0; background:var(--bg); color:var(--ink2);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;                       /* CONTAINER IS GOD — the page never pans */
}
a{color:var(--b); text-decoration:none}
a:hover{text-decoration:underline}
.thai{font-family:"HTSThai","HTSThaiDisplay",sans-serif}
.thai-d{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700}

/* ── header ──────────────────────────────────────────────────────────────────────── */
.top{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:16px;
  padding:11px clamp(14px,4vw,32px); background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.top__brand{font-weight:800; color:var(--ink); font-size:16.5px; letter-spacing:-.01em; white-space:nowrap}
.top__brand b{color:var(--b)}
.top__nav{margin-left:auto; display:flex; gap:18px}
.top__nav a{color:var(--ink2); font-weight:600; font-size:14.5px}
.top__cta{
  background:linear-gradient(135deg,#1f70df,#4a90ff); color:#fff!important; font-weight:700;
  font-size:14px; padding:9px 16px; border-radius:99px; text-decoration:none!important; white-space:nowrap;
  box-shadow:0 2px 10px rgba(31,112,223,.28);
}
@media(max-width:640px){ .top__nav{display:none} .top__brand{margin-right:auto} }

/* ── layout ──────────────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--max); margin:0 auto; padding:clamp(16px,3.5vw,26px) clamp(14px,4vw,22px) 8px}

/* ── the search bar — the conversion gate ────────────────────────────────────────── */
.sbar{position:relative; margin:2px 0 18px}
.sbar__box{
  display:flex; align-items:center; gap:10px; height:56px; padding:0 8px 0 14px;
  background:#fff; border:1.5px solid var(--line); border-radius:16px;
  box-shadow:0 2px 14px rgba(16,32,64,.05); transition:border-color .16s, box-shadow .16s;
}
.sbar__box:focus-within{border-color:var(--b); box-shadow:0 3px 20px rgba(31,112,223,.16)}
.sbar__ico{color:var(--mut2); flex:0 0 auto}
.sbar__in{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; font-size:16px; color:var(--ink);          /* 16px = no iOS zoom-on-focus */
}
.sbar__in::placeholder{color:var(--mut2)}
.sbar__count{
  flex:0 0 auto; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--mut);
  background:var(--cream); border-radius:99px; padding:6px 11px; white-space:nowrap;
}
@media(max-width:520px){ .sbar__count{display:none} }

/* suggestions — PROOF we have their word. Tapping one goes to signup, never the word. */
.sug{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40;
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 14px 40px rgba(12,27,51,.16);
}
.sug[hidden]{display:none}
.sug__i{
  display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px;
  border:0; border-bottom:1px solid var(--line2); background:#fff; cursor:pointer;
  text-align:left; font:inherit;
}
.sug__i:last-child{border-bottom:0}
.sug__i:hover,.sug__i[aria-selected="true"]{background:#f5f9ff}
.sug__th{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:20px; color:var(--ink); flex:0 0 auto}
.sug__en{color:var(--ink2); font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sug__go{margin-left:auto; flex:0 0 auto; font-size:12px; font-weight:800; color:var(--b); letter-spacing:.02em; white-space:nowrap}
.sug__note{padding:10px 14px; font-size:12.5px; color:var(--mut); background:var(--cream); border-top:1px solid var(--line2)}
.sug__none{padding:14px; font-size:14px; color:var(--mut)}

/* ── crumb + heading ─────────────────────────────────────────────────────────────── */
.crumb{display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:12.5px; color:var(--mut); margin:0 0 12px}
.crumb a{color:var(--mut)}
.crumb span[aria-hidden]{opacity:.5}
.h1{
  font-size:clamp(26px,5.2vw,40px); line-height:1.1; letter-spacing:-.022em; color:var(--ink);
  margin:0 0 12px; font-weight:800;
}
.h1__k{color:var(--b)}
/* THE ANSWER — first line, literal, for SEO + AI overviews */
.answer{
  font-size:clamp(17px,2.4vw,20.5px); line-height:1.5; color:var(--ink); margin:0 0 22px;
  font-weight:600; padding-left:14px; border-left:4px solid var(--gold);
}

/* ── the word card (navy · satin gold · theme-invariant) ─────────────────────────── */
.card{
  position:relative; overflow:hidden; border-radius:22px; padding:clamp(20px,4vw,32px) clamp(14px,3.4vw,28px);
  background:linear-gradient(168deg,#0c1b33 0%,#132a4d 58%,#0e2340 100%);
  box-shadow:0 18px 50px rgba(12,27,51,.30), inset 0 1px 0 rgba(255,255,255,.06);
}
/* the glow stays INSIDE the card's own box — a decorative element that sticks out past
   the viewport (even when clipped) makes every honest overflow audit unreadable */
.card__glow{
  position:absolute; inset:0 0 auto 0; height:70%; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -12%, rgba(255,206,31,.18), rgba(255,206,31,0) 70%);
}
.card__hero{position:relative; text-align:center}

/* THE WORD IS CENTERED (owner 2026-08-16) — alone on its line, nothing beside it that
   could shift it off-axis. The play button is centered underneath. */
.card__word{
  display:block; margin:0 auto; max-width:100%;
  font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700;
  line-height:1.42;                       /* tall-stack envelope: no clipped upper marks */
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 46%,var(--gold-lo) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding:0 .04em;
  overflow-wrap:anywhere; word-break:normal;  /* a monstrous word wraps, never clips */
}
@supports not (background-clip:text){ .card__word{color:var(--gold); background:none} }

/* SIZE RAMPS by visual length (page.js sizeTier). The corpus reaches 34 glyphs, so one
   clamp cannot serve every word — a short word must stay big, a long one must fit. */
.card__word[data-len="s"]  { font-size:clamp(46px, 15vw,  86px) }
.card__word[data-len="m"]  { font-size:clamp(38px, 11vw,  74px) }
.card__word[data-len="l"]  { font-size:clamp(28px, 7.6vw, 58px) }
.card__word[data-len="xl"] { font-size:clamp(21px, 5.4vw, 42px) }
.card__word[data-len="xxl"]{ font-size:clamp(17px, 4.1vw, 32px); line-height:1.5 }

.card__rom{
  margin:6px auto 0; max-width:100%; font-weight:700; letter-spacing:.03em;
  color:var(--paper); font-variant-ligatures:none; overflow-wrap:anywhere;
}
.card__rom[data-len="s"] { font-size:clamp(15px, 4.4vw, 21px) }
.card__rom[data-len="m"] { font-size:clamp(14px, 3.6vw, 19px) }
.card__rom[data-len="l"] { font-size:clamp(12.5px, 3vw, 17px) }
.card__rom[data-len="xl"]{ font-size:clamp(11.5px, 2.6vw, 15px); letter-spacing:.01em }

.play--hero{margin:clamp(12px,2.6vw,18px) auto 0}
.card__gloss{margin:12px auto 0; max-width:36ch; font-size:clamp(14px,2.2vw,16.5px); color:var(--paper-mut); overflow-wrap:anywhere}
.card__rule{height:1px; margin:clamp(16px,3vw,24px) 0; background:linear-gradient(90deg,transparent,rgba(255,206,31,.42),transparent)}

/* play buttons */
.play{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  color:#2a1d02; box-shadow:0 6px 20px rgba(255,206,31,.30); transition:transform .12s;
}
.play:hover{transform:scale(1.05)}
.play:active{transform:scale(.97)}
.play svg{margin-left:3px}
.play.is-loading{opacity:.6; cursor:progress}
.play.is-playing .play__wave{opacity:1}
.play__wave{position:absolute; inset:0; border-radius:50%; opacity:0; transition:opacity .2s; box-shadow:0 0 0 0 rgba(255,206,31,.55); animation:sayPulse 1.1s ease-out infinite}
@keyframes sayPulse{ to{ box-shadow:0 0 0 16px rgba(255,206,31,0) } }
@media (prefers-reduced-motion:reduce){ .play__wave{animation:none} }

/* Syllable rail. On a phone a 6-syllable word will not fit on one line, so it WRAPS —
   a horizontal scroller inside a card hides syllables behind a gesture nobody discovers.
   The wrapper keeps overflow-x:auto purely as a backstop for an extreme word at an
   extreme width; in normal use nothing ever overflows because the rail wraps first. */
.card__sylwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px 4px; scrollbar-width:thin}
.card__syl{display:flex; flex-wrap:wrap; gap:clamp(8px,2.2vw,14px); justify-content:center}
.sy{
  flex:0 1 auto; min-width:76px; max-width:100%; text-align:center; padding:12px 10px 10px;
  border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07);
}
@media(max-width:420px){
  .sy{min-width:68px; padding:10px 7px 8px}
  .sy-tone{width:60px}
}
.sy__thai{font-size:clamp(20px,4.4vw,27px); line-height:1.5; color:var(--gold); margin-bottom:2px}
.sy__rom{font-size:12.5px; font-weight:700; color:var(--paper-mut); margin-bottom:6px; letter-spacing:.02em}
.sy-tone{display:block; margin:0 auto 4px; width:74px; height:auto}
.sy__tone{font-size:11.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase}

.hint{font-size:13.5px; color:var(--mut); margin:14px 2px 0; text-align:center}

/* ── content sections ────────────────────────────────────────────────────────────── */
.sec{margin:clamp(34px,6vw,52px) 0 0}
.sec h2{font-size:clamp(20px,3.4vw,27px); line-height:1.22; letter-spacing:-.016em; color:var(--ink); margin:0 0 10px; font-weight:800}
.sec h2 .thai-d,.sec h2{overflow-wrap:anywhere}
.sec__lead{font-size:16px; color:var(--ink2); margin:0 0 16px}
.sec p{margin:0 0 14px; font-size:16.5px}

/* mechanics table — its own scroller */
.mx__wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px}
.mx{width:100%; min-width:520px; border-collapse:collapse; font-size:14.5px}
.mx th{
  text-align:left; padding:11px 12px; background:var(--cream); color:var(--ink);
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
.mx td{padding:11px 12px; border-top:1px solid var(--line2); vertical-align:middle; white-space:nowrap}
.mx__th{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:21px; color:var(--ink); line-height:1.5}
.mx__mark{font-size:20px; color:var(--ink); line-height:1.5; white-space:nowrap}
.mx__mn{display:inline-block; margin-left:7px; font-size:11.5px; font-style:normal; color:var(--mut); letter-spacing:.02em}
.chip{
  display:inline-block; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:800;
  letter-spacing:.06em; color:#fff; background:var(--c);
}

/* NARROW: the table becomes one labelled block per syllable. A 6-column table on a
   390px phone pushes TONE — the answer the section exists to give — off-screen behind a
   horizontal scroll, so below 620px it stops being a table. */
@media(max-width:620px){
  .mx__wrap{border:0; overflow-x:visible}
  .mx{min-width:0; display:block}
  .mx thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .mx tbody,.mx tr{display:block}
  .mx tr{
    display:block; border:1px solid var(--line); border-radius:14px;
    padding:10px 13px 11px; margin:0 0 10px;
  }
  /* each cell carries its OWN label column. `display:contents` was tried and rejected:
     it promotes the cell's children to grid items, which stretched the class chip to the
     full row width and dropped the bare "—" text node of an unmarked syllable. */
  .mx td{
    display:grid; grid-template-columns:70px 1fr; gap:10px; align-items:center;
    justify-items:start; border:0; padding:3px 0; white-space:normal;
  }
  .mx td::before{
    content:attr(data-l); font-size:10.5px; font-weight:800; letter-spacing:.09em;
    text-transform:uppercase; color:var(--mut);
  }
  /* the syllable is the row's heading */
  .mx td.mx__th{display:block; font-size:27px; line-height:1.5; margin:0 0 4px; padding:0}
  .mx td.mx__th::before{content:none}
  .mx td.mx__mark{font-size:18px}
  .mx td.mx__mark .thai{line-height:1.5}
}

/* example sentence */
.sent{background:var(--cream); border:1px solid #efe6d6; border-radius:16px; padding:clamp(14px,3vw,20px)}
.sent__row{display:flex; align-items:center; gap:14px}
.sent__th{
  flex:1 1 auto; min-width:0; margin:0; font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700;
  font-size:clamp(19px,3.6vw,26px); line-height:1.62; color:var(--ink); overflow-wrap:anywhere;
}
.play--sent{width:44px; height:44px; box-shadow:0 4px 14px rgba(255,206,31,.32)}
.sent__en{margin:10px 0 0; font-size:15.5px; color:var(--ink2); font-style:italic}

/* related words */
.rels{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.rel{
  display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line);
  border-radius:14px; background:#fff; transition:border-color .14s, transform .14s, box-shadow .14s;
  text-decoration:none!important; min-width:0;
}
.rel:hover{border-color:var(--b); transform:translateY(-1px); box-shadow:0 6px 18px rgba(31,112,223,.10)}
.rel__th{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:21px; color:var(--ink); line-height:1.5; flex:0 0 auto}
.rel__meta{display:flex; flex-direction:column; min-width:0}
.rel__en{font-size:13.5px; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rel__rom{font-size:12px; color:var(--mut2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* faq + takeaways */
.q{padding:16px 0; border-top:1px solid var(--line2)}
.q:first-of-type{border-top:0}
.q h3{margin:0 0 6px; font-size:17.5px; font-weight:700; color:var(--ink)}
.q p{margin:0; font-size:16px}
.take{margin:0; padding:0 0 0 20px}
.take li{margin:0 0 10px; font-size:16.5px}
.take b{color:var(--ink)}
.sec--take .take b{font-family:inherit}

/* ── the door ────────────────────────────────────────────────────────────────────── */
.door{
  position:relative; overflow:hidden; margin:clamp(38px,6vw,58px) 0 8px; border-radius:24px;
  padding:clamp(28px,5.2vw,48px) clamp(18px,4vw,40px); text-align:center; color:#fff;
  background:linear-gradient(160deg,#0c1b33 0%,#16365f 62%,#0d2444 100%);
  box-shadow:0 18px 50px rgba(12,27,51,.28);
}
.door__stars{
  position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 78% 16%, rgba(255,206,31,.75), transparent),
    radial-gradient(1.2px 1.2px at 34% 72%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 64%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 58% 40%, rgba(255,206,31,.5), transparent),
    radial-gradient(1.3px 1.3px at 22% 54%, rgba(255,255,255,.5), transparent);
}
.door__in{position:relative}
.door__kicker{margin:0 0 6px; font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.door__h{margin:0 0 12px; font-size:clamp(23px,4.6vw,34px); line-height:1.18; letter-spacing:-.02em; font-weight:800; color:#fff}
.door__p{margin:0 auto 22px; max-width:44ch; font-size:16.5px; color:rgba(255,255,255,.84)}
.door__cta{
  display:inline-block; padding:15px 30px; border-radius:99px; font-size:16.5px; font-weight:800;
  color:#2a1d02!important; text-decoration:none!important;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
  box-shadow:0 8px 26px rgba(255,206,31,.32);
}
.door__cta:hover{transform:translateY(-1px)}
.door__fine{margin:12px 0 0; font-size:12.5px; color:rgba(255,255,255,.56)}

/* ── footer ──────────────────────────────────────────────────────────────────────── */
.foot{
  margin-top:clamp(34px,6vw,56px); padding:26px clamp(14px,4vw,32px) 34px;
  border-top:1px solid var(--line); text-align:center;
}
.foot__brand{font-weight:800; color:var(--ink); font-size:15px}
.foot__brand b{color:var(--b)}
.foot__nav{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:12px 0}
.foot__nav a{font-size:13.5px; color:var(--mut)}
.foot__c{margin:0; font-size:12.5px; color:var(--mut2)}

/* ── the signup gate sheet (search tap -> create account) ────────────────────────── */
.gate{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:18px}
.gate[hidden]{display:none}
.gate__bd{position:absolute; inset:0; background:rgba(8,17,32,.62); backdrop-filter:blur(3px)}
.gate__sheet{
  position:relative; width:100%; max-width:420px; border-radius:22px; padding:28px 24px 24px; text-align:center;
  background:linear-gradient(160deg,#0c1b33,#16365f); color:#fff;
  box-shadow:0 26px 70px rgba(6,14,28,.5); animation:sayIn .22s ease-out;
}
@keyframes sayIn{ from{ transform:translateY(14px); opacity:0 } }
@media (prefers-reduced-motion:reduce){ .gate__sheet{animation:none} }
.gate__x{position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.10); color:#fff; font-size:19px; line-height:1}
.gate__th{margin:0 0 4px; font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:40px; line-height:1.42; color:var(--gold)}
.gate__en{margin:0 0 14px; font-size:14.5px; color:rgba(255,255,255,.72)}
.gate__h{margin:0 0 8px; font-size:21px; font-weight:800; letter-spacing:-.01em}
.gate__p{margin:0 auto 20px; max-width:34ch; font-size:15px; color:rgba(255,255,255,.80)}
.gate__cta{
  display:block; padding:14px 22px; border-radius:99px; font-size:16px; font-weight:800;
  color:#2a1d02!important; text-decoration:none!important;
  background:linear-gradient(140deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));
}
.gate__fine{margin:12px 0 0; font-size:12px; color:rgba(255,255,255,.52)}

/* preview-only ribbon so the owner always knows this is the local build */
.pvw{position:fixed; left:0; bottom:0; z-index:200; font-size:10px; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase; background:rgba(12,27,51,.80); color:var(--gold); padding:5px 10px;
  border-radius:0 10px 0 0; pointer-events:none}

/* ── /say/ hub ───────────────────────────────────────────────────────────────────── */
.hub__g{margin:clamp(28px,5vw,42px) 0 0}
.hub__g h2{font-size:clamp(18px,3vw,23px); letter-spacing:-.014em; color:var(--ink); margin:0 0 12px; font-weight:800}
.hub__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
/* learn.css — the sampler's article + index layout.
 * Loads AFTER say.css and reuses its tokens, fonts and shell (.top/.wrap/.foot/.play).
 * Preview-only: the shipped /say pages never load this. */

/* ── article ─────────────────────────────────────────────────────────────────── */
.art__eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; font-weight:800;
  color:var(--b); margin:0 0 10px;
}
.art h2{
  font-size:clamp(19px,3.2vw,25px); line-height:1.24; letter-spacing:-.015em; color:var(--ink);
  margin:34px 0 10px; font-weight:800;
}
.art h3{font-size:17.5px; color:var(--ink); margin:24px 0 8px; font-weight:700}
.art p{margin:0 0 15px; font-size:16.5px; line-height:1.68}
.art code{
  font-family:"Inter",ui-monospace,monospace; font-size:.94em; font-weight:700; color:#0f4c96;
  background:#eef4fd; border-radius:6px; padding:1px 6px; white-space:nowrap;
}
.art .thai-b{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:1.14em; color:var(--ink)}
.art .take li{margin:0 0 9px; font-size:16.5px}

/* ── the word table on a learn page ──────────────────────────────────────────── */
.lws{margin:26px 0 6px; padding:clamp(16px,3vw,22px); background:var(--cream); border:1px solid #efe6d6; border-radius:18px}
.lws h2{margin:0 0 14px; font-size:17px; letter-spacing:.01em}
.lws__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:9px}
.lw{display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); border-radius:13px; padding:9px 12px; min-width:0}
.play--lw{width:34px; height:34px; box-shadow:0 3px 10px rgba(255,206,31,.30)}
.play--lw svg{margin-left:2px}
/* A word with no clip gets NO button and no button-shaped placeholder — a dashed
   circle reads as a disabled control and invites a tap that does nothing. It keeps
   only an invisible spacer so the rows stay aligned (expert rule: label or drop,
   never a dead button). */
.lw__noaudio{width:34px; height:34px; flex:0 0 auto; visibility:hidden}
.lw--noaudio .lw__ph{color:var(--mut)}
.lw__th{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:22px; line-height:1.5; color:var(--ink); flex:0 0 auto}
.lw__meta{display:flex; flex-direction:column; min-width:0}
.lw__ph{font-size:13px; font-weight:700; color:#0f4c96; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lw__gl{font-size:12.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lws__note{margin:12px 0 0; font-size:12.5px; color:var(--mut)}

/* ── the sampler index ───────────────────────────────────────────────────────── */
.sxg{margin:clamp(30px,5vw,46px) 0 0}
.sxg h2{font-size:clamp(19px,3.2vw,25px); letter-spacing:-.015em; color:var(--ink); margin:0 0 8px; font-weight:800}
.sxs{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:11px; margin-top:14px}
.sx{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line);
  border-radius:16px; background:#fff; text-decoration:none!important; min-width:0;
  transition:border-color .14s, transform .14s, box-shadow .14s;
}
.sx:hover{border-color:var(--b); transform:translateY(-1px); box-shadow:0 8px 22px rgba(31,112,223,.12)}
.sx__th{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:30px; line-height:1.5; color:var(--ink); flex:0 0 auto}
.sx__no{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#0c1b33; color:var(--gold); font-weight:900; font-size:17px; letter-spacing:.02em;
}
.sx__body{display:flex; flex-direction:column; min-width:0; gap:2px}
.sx__lab{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--b)}
.sx__sub{font-size:15px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis}
.sx__note{font-size:12.5px; color:var(--mut)}
.sx--learn .sx__sub{font-weight:600; font-size:14px; line-height:1.35}

/* back-link chip (preview only) */
.pvw--back{
  left:auto; right:0; border-radius:10px 0 0 0; text-decoration:none!important;
  pointer-events:auto; letter-spacing:.04em;
}
/* ── /learn article additions ────────────────────────────────────────────────────── */
.artbody h2{font-size:clamp(19px,3.2vw,25px); line-height:1.24; letter-spacing:-.015em; color:var(--ink); margin:32px 0 10px; font-weight:800}
.artbody p{margin:0 0 15px; font-size:16.5px; line-height:1.68}
/* nowrap was right for a single phonetic and WRONG for a list: "nèung, sǎwng, sǎam, …"
   held rigid at 387px and pushed a 320px page sideways. Wrap only when it has to. */
.artbody code{font-family:"Inter",ui-monospace,monospace; font-size:.94em; font-weight:700;
  color:#0f4c96; background:#eef4fd; border-radius:6px; padding:1px 6px;
  white-space:normal; overflow-wrap:break-word; hyphens:none; max-width:100%}
.artbody .th{font-family:"HTSThaiDisplay","HTSThai",sans-serif; font-weight:700; font-size:1.14em; color:var(--ink)}
.artbody .take li{margin:0 0 9px; font-size:16.5px}
a.lw__th{text-decoration:none!important; border-bottom:1px dashed rgba(31,112,223,.45)}
a.lw__th:hover{border-bottom-color:var(--b)}
.cardimg{margin:30px 0 0; text-align:center}
.cardimg img{max-width:min(340px,74vw); height:auto; border-radius:16px; box-shadow:0 12px 34px rgba(12,27,51,.18)}
.reel{margin:26px 0 0; text-align:center}
.reel video{max-width:min(340px,74vw); height:auto; border-radius:16px; background:#0c1b33; box-shadow:0 12px 34px rgba(12,27,51,.18)}
.reel figcaption{margin:8px 0 0; font-size:12.5px; color:var(--mut)}
.rels a.rel{justify-content:center; text-transform:capitalize; font-size:14px; font-weight:600; color:var(--ink)}