/* Review ledger: cool grey ground, white sheets, hairline rules, monospace figures. */
:root {
  --bg: #eceff3;
  --surface: #ffffff;
  --text: #121826;
  --muted: #4b5565;
  --border: #c7cfda;
  --rule: #dfe4eb;
  --accent: #1b4fd8;
  --accent-soft: #e4ebfc;
  --agree: #0f6b4f;
  --agree-soft: #e3f3ec;
  --differ: #9a3a0b;
  --differ-soft: #fbece3;
  --focus: #c2410c;
  --container: 1180px;
  --reading: 720px;
  --gutter: clamp(16px, 4vw, 32px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --radius: 4px;
  --font: "Bai Jamjuree", "Noto Sans Thai", "Leelawadee UI", Tahoma, system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  --fs-body: 1.0625rem;
  --lh-body: 1.8;
  --h1: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
  --h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --h3: 1.125rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s5); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/var(--lh-body) var(--font);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { line-height: 1.35; margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--h1); letter-spacing: 0; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0; padding: 0; }
.n, time { font-variant-numeric: tabular-nums; }
.n { font-family: var(--mono); font-size: .94em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.skip { position: absolute; left: var(--s4); top: -100px; background: var(--text); color: #fff; padding: var(--s3) var(--s4); z-index: 10; border-radius: var(--radius); }
.skip:focus { top: var(--s2); }

/* header */
.top { background: var(--surface); border-bottom: 1px solid var(--border); }
.top__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5); padding-top: var(--s2); padding-bottom: var(--s2); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; font-weight: 600; font-size: 1.125rem; color: var(--text); text-decoration: none; }
.brand__mark { width: 14px; height: 14px; background: var(--accent); border-radius: 2px; box-shadow: 5px 5px 0 -1px var(--text); margin-right: 4px; }
.menu { display: flex; flex-wrap: wrap; gap: 0 var(--s2); }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3); color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; font-size: .975rem; }
.menu a:hover { border-bottom-color: var(--border); }
.menu a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }

main { padding-bottom: var(--s8); }
.crumbs { padding: var(--s4) 0 0; font-size: .9rem; color: var(--muted); }
.crumbs ol { list-style: none; }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "/"; margin: 0 var(--s2); color: var(--muted); }
.crumbs a, .crumbs [aria-current] { display: inline-block; padding: 12px 0; line-height: 1.5; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--text); }

.label, .tag { margin: 0 0 var(--s3); font-size: .9rem; font-weight: 600; color: var(--accent); }
.tag { color: var(--muted); }
.note { font-size: .925rem; color: var(--muted); margin-bottom: var(--s4); }
.meta { display: block; font-size: .875rem; color: var(--muted); }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s5); background: var(--accent); color: #fff; text-decoration: none; border-radius: var(--radius); font-weight: 600; }
.btn:hover { background: #163fb0; }
.more { margin-top: var(--s5); }
.chip { display: inline-block; margin-left: var(--s2); padding: 0 var(--s2); border: 1px solid var(--differ); color: var(--differ); border-radius: var(--radius); font-size: .8rem; line-height: 1.6; }

.block { margin-top: var(--s8); }
.block > h2 { margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 2px solid var(--text); }
.block--narrow { max-width: var(--reading); }

/* hub lead */
.lead { display: grid; gap: var(--s6); padding: var(--s6) 0 0; }
.lead__text { max-width: var(--reading); }
.lead h1 { margin-bottom: var(--s3); }
.tagline { font-size: 1.1875rem; color: var(--muted); }
.jump { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s5); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); color: var(--text); text-decoration: none; font-size: .95rem; }
.jump a:hover { border-color: var(--accent); color: var(--accent); }
.spec { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: var(--s5); align-self: start; }
.spec h2 { font-size: 1.125rem; margin-bottom: var(--s3); }
.spec dl { margin: 0; }
.spec dl > div { padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.spec dt { font-size: .875rem; color: var(--muted); }
.spec dd { margin: 0; font-weight: 600; }
.spec .refs { font-weight: 400; margin: var(--s1) 0 0; }
.refs { font-size: .85rem; color: var(--muted); margin: var(--s2) 0 0; }
.refs a { color: var(--muted); }

/* agree / differ */
.duo { display: grid; gap: var(--s5); }
.duo__col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s5); border-top: 4px solid var(--agree); }
.duo__col--differ { border-top-color: var(--differ); }
.duo__col h3 { margin-bottom: var(--s3); color: var(--agree); }
.duo__col--differ h3 { color: var(--differ); }
.ledger { list-style: none; counter-reset: l; }
.ledger li { counter-increment: l; position: relative; padding: var(--s3) 0 var(--s3) 2.25rem; border-top: 1px solid var(--rule); }
.ledger li::before { content: counter(l); position: absolute; left: 0; top: var(--s3); font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--agree); }
.duo__col--differ .ledger li::before { color: var(--differ); }
.ledger p { margin: 0; }

/* start here */
.start { list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.start li { display: grid; gap: var(--s1); padding: var(--s4) var(--s5); border-top: 1px solid var(--rule); }
.start li:first-child { border-top: 0; }
.start p { margin: 0; }
.start__for { font-weight: 600; color: var(--accent); }
.start__clip a { font-weight: 600; }
.start__why { color: var(--muted); }
.newlist { list-style: none; max-width: var(--reading); }
.newlist li { padding: var(--s3) 0; border-top: 1px solid var(--rule); }

/* clip ledger rows */
.tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding: var(--s4); margin-bottom: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.tools[hidden] { display: none; }
.tools label { font-weight: 600; }
.tools select { min-height: 44px; padding: 0 var(--s3); font: inherit; background: var(--surface); color: var(--text); border: 1px solid var(--muted); border-radius: var(--radius); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chipbtn { min-height: 44px; padding: 0 var(--s4); font: inherit; font-size: .95rem; background: var(--surface); color: var(--text); border: 1px solid var(--muted); border-radius: var(--radius); cursor: pointer; }
.chipbtn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
#result-count { flex-basis: 100%; margin: 0; }
.ledger-rows { list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.row { display: grid; grid-template-columns: 112px 1fr; gap: var(--s3) var(--s4); padding: var(--s4); border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; }
.row[hidden] { display: none; }
.row__img { display: block; align-self: start; aspect-ratio: 16 / 9; background: var(--rule); border-radius: 2px; overflow: hidden; }
.row__img img { width: 100%; height: 100%; object-fit: cover; }
.row__title { font-size: 1.0625rem; margin-bottom: var(--s1); }
.row__title a { color: var(--text); text-decoration: none; }
.row__title a:hover { color: var(--accent); text-decoration: underline; }
.row .tag { margin-bottom: var(--s1); font-size: .825rem; }
.row__verdict { margin: 0 0 var(--s1); font-size: .975rem; line-height: 1.65; }
.row__by { margin: 0; font-size: .875rem; color: var(--muted); }
.row__nums { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0; font-size: .875rem; }
.row__nums div { display: flex; gap: var(--s2); }
.row__nums dt { color: var(--muted); }
.row__nums dd { margin: 0; font-weight: 600; }

/* numbers */
.trio { display: grid; gap: var(--s6); }
.trio h3 { margin-bottom: var(--s3); padding-bottom: var(--s2); border-bottom: 1px solid var(--text); }
.rank, .timeline { list-style: none; font-size: .95rem; }
.rank li, .timeline li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.rank a, .timeline a { color: var(--text); }
.rank li { align-items: center; }
.rank a { display: inline-flex; align-items: center; min-height: 44px; }
.timeline li { display: grid; grid-template-columns: 1fr auto; }
.tl-names { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
.tl-names a { color: var(--muted); }

/* faq */
.faq details { border-top: 1px solid var(--border); }
.faq details:last-child { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; align-items: center; min-height: 52px; padding: var(--s3) 0; font-weight: 600; cursor: pointer; }
.faq__a { padding: 0 0 var(--s3); }
.faq__a p { margin-bottom: var(--s2); }

.chlist { list-style: none; display: grid; gap: 0 var(--s6); }
.chlist li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s1) var(--s3); min-height: 48px; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.chlist .meta { display: inline; }
.chlist a { display: inline-flex; align-items: center; min-height: 44px; }

/* page heads, prose */
.pagehead { padding: var(--s6) 0 0; max-width: var(--reading); }
.pagehead h1 { margin-bottom: var(--s3); }
.prose h2 { margin: var(--s6) 0 var(--s3); }
.prose h3 { margin: var(--s5) 0 var(--s2); padding-top: var(--s2); }
.prose--page { max-width: var(--reading); margin-top: var(--s5); }
.prose--page li { margin-bottom: var(--s2); }
.prose--page ul { padding-left: var(--s5); margin-bottom: var(--s4); }
.empty { max-width: var(--reading); padding: var(--s5); background: var(--surface); border: 1px dashed var(--border); margin-top: var(--s5); }

/* resources */
.reslist { list-style: none; }
.reslist li { padding: var(--s3) 0; border-top: 1px solid var(--rule); font-size: .975rem; }
.reslist .url { display: block; font-family: var(--mono); font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.reslist--full li { display: block; }
.reslist--full .refs { display: block; }

/* clip page */
.clip__head { padding: var(--s6) 0 0; max-width: 900px; }
.clip__head h1 { margin-bottom: var(--s2); }
.orig { color: var(--muted); font-size: .95rem; margin-bottom: var(--s4); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0 0 var(--s4); font-size: .925rem; }
.facts div { display: flex; gap: var(--s2); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
.lede { max-width: var(--reading); font-size: 1.1875rem; margin-bottom: var(--s4); }
.verdict { max-width: var(--reading); padding: var(--s3) var(--s4); background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: var(--s5); }
.verdict__k { display: block; font-size: .85rem; font-weight: 600; color: var(--accent); }
.player { max-width: 900px; aspect-ratio: 16 / 9; background: #0b0f1a; border-radius: var(--radius); overflow: hidden; position: relative; }
.player__link, .player iframe { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player__link img { width: 100%; height: 100%; object-fit: cover; }
.player__btn { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(11, 15, 26, .86); border: 3px solid #fff; border-radius: 50%; }
.player__btn::after { content: ""; position: absolute; left: 28px; top: 20px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.player__link:hover .player__btn { background: var(--accent); }
.clip__grid { display: grid; gap: var(--s6); margin-top: var(--s6); }
.clip__main { max-width: var(--reading); }
.take { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s4); }
.take h2 { font-size: 1.125rem; margin-bottom: var(--s2); }
.take ul { padding-left: var(--s5); }
.take li { margin-bottom: var(--s2); }
.srcnote { padding: var(--s2) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: .925rem; }
.srcnote__k { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.srcnote--warn { border-color: var(--differ); background: var(--differ-soft); }
.toc { margin: var(--s5) 0 0; padding: var(--s3) var(--s4); border-left: 3px solid var(--border); font-size: .95rem; }
.toc__h { margin: 0 0 var(--s1); font-weight: 600; color: var(--muted); font-size: .875rem; }
.toc ol { padding-left: var(--s5); }
.toc a { display: inline-block; padding: var(--s1) 0; }
.clip .prose { margin-top: var(--s5); }
.clip .prose > h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--text); }
.clip__main > section + section { margin-top: var(--s6); }
.clip__main > section > h2 { margin-bottom: var(--s3); }
.clip__side { display: grid; gap: var(--s4); align-content: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s4) var(--s5); }
.panel h2 { font-size: 1.0625rem; margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--text); }
.panel p { margin-bottom: var(--s2); font-size: .95rem; }
.times { list-style: none; }
.times li { border-top: 1px solid var(--rule); }
.times li:first-child { border-top: 0; }
.times a { display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--s3); align-items: baseline; min-height: 44px; padding: var(--s2) 0; text-decoration: none; color: var(--text); font-size: .95rem; line-height: 1.5; }
.times a:hover span:last-child { text-decoration: underline; }
.times .n { color: var(--accent); font-weight: 600; }
.kv { margin: 0; }
.kv div { padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.kv div:first-child { border-top: 0; }
.kv dt { font-size: .85rem; color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }

/* footer */
.foot { background: var(--text); color: #d5dbe5; padding: var(--s6) 0; font-size: .925rem; }
.foot a { color: #fff; }
.foot p { margin: 0 0 var(--s2); max-width: 760px; }
.foot__name { font-weight: 600; color: #fff; font-size: 1.0625rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-bottom: var(--s2); }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__nav a[aria-current="page"] { text-decoration: none; border-bottom: 2px solid #fff; }

@media (min-width: 600px) {
  .row { grid-template-columns: 184px 1fr; }
  .chlist { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .lead { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: var(--s7); align-items: start; }
  .duo { grid-template-columns: 1fr 1fr; }
  .start li { grid-template-columns: 15rem minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s5); align-items: baseline; }
  .start__why { font-size: .975rem; }
  .row { grid-template-columns: 184px minmax(0, 1fr) 11.5rem; padding: var(--s5); }
  .row__nums { grid-column: auto; display: block; font-size: .9rem; }
  .row__nums div { justify-content: space-between; padding: var(--s1) 0; border-bottom: 1px solid var(--rule); }
  .ledger-rows--compact .row { grid-template-columns: 184px minmax(0, 1fr); }
  .ledger-rows--compact .row__nums { grid-column: 1 / -1; display: flex; }
  .ledger-rows--compact .row__nums div { border: 0; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .chlist { grid-template-columns: repeat(3, 1fr); }
  .clip__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s7); align-items: start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }