/* Hallmark · macrostructure: Print Index Sheet · nav: N23 · footer: Ft20 · theme: Siamese Broadsheet · paper: light · pre-emit: P5 H5 E5 S5 R5 V5 · contrast: pass (40-41) · mobile: pass (34,49,50-57) · knobs: rule=double · pre-emit-6-axis: hue33-mono-warm/light-paper/newsreader-anuphan/print-index/N23/Ft20 */
:root {
  --color-paper: oklch(96% 0.012 33);
  --color-paper-2: oklch(92% 0.015 33);
  --color-ink: oklch(20% 0.018 33);
  --color-ink-muted: oklch(48% 0.015 33);
  --color-border: oklch(78% 0.014 33);
  --color-accent: oklch(52% 0.21 25);
  --color-accent-ink: oklch(98% 0.005 33);
  --color-focus: oklch(45% 0.20 25);
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --font-display: 'Newsreader', 'Times New Roman', serif;
  --font-body: 'Anuphan', 'Helvetica Neue', sans-serif;
  --measure: 68ch;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  overflow-x: clip;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; border-radius: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; font-style: normal; line-height: 1.2; margin: 0 0 var(--space-md); }
h1 { font-size: clamp(1.9rem, 1.5rem + 1.8vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 var(--space-md); max-width: var(--measure); }
.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-lg); width: 100%; }

/* ---- N23 double-rule masthead ---- */
.masthead { border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); box-shadow: 0 3px 0 -2px var(--color-ink), 0 -3px 0 -2px var(--color-ink); padding: var(--space-lg) 0; background: var(--color-paper); }
.masthead-inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-lg); text-align: center; }
.masthead-kicker { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 var(--space-xs); }
.brand-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; text-decoration: none; display: inline-block; margin-bottom: var(--space-sm); }
.masthead-nav { border-top: 1px solid var(--color-border); padding-top: var(--space-sm); overflow-x: auto; }
.nav-row { list-style: none; display: flex; gap: var(--space-lg); justify-content: center; margin: 0; padding: 0; flex-wrap: nowrap; min-width: max-content; }
.nav-link { text-decoration: none; font-size: 0.92rem; white-space: nowrap; padding: var(--space-xs) var(--space-xs); border-bottom: 2px solid transparent; }
.nav-link--active { border-bottom-color: var(--color-accent); font-weight: 600; }

/* ---- index-table (mục lục báo in) ---- */
.index-table { width: 100%; border-collapse: collapse; margin: var(--space-lg) 0; }
.index-table td { border-bottom: 1px solid var(--color-border); padding: var(--space-md) var(--space-sm); vertical-align: top; }
.index-table .col-num { font-family: var(--font-display); font-weight: 700; color: var(--color-accent); width: 2.2rem; }
.index-table .col-title { font-weight: 600; width: 30%; }
.index-table .col-desc { color: var(--color-ink-muted); font-size: 0.94rem; }
.index-table .col-arrow { text-align: right; color: var(--color-ink-muted); width: 1.4rem; }

/* ---- two-col-news ---- */
.two-col-news { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-2xl); align-items: start; margin: var(--space-2xl) 0; border-top: 1px solid var(--color-border); padding-top: var(--space-xl); }
.two-col-news .news-col-text p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3rem; float: left; line-height: 0.8; padding-right: var(--space-xs); font-weight: 700; color: var(--color-accent); }
.two-col-news .news-col-media figcaption { font-size: 0.82rem; color: var(--color-ink-muted); margin-top: var(--space-xs); }
.two-col-news figure { margin: 0; }

/* ---- compare-table ---- */
.compare-table-wrap { overflow-x: auto; margin: var(--space-xl) 0; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th { text-align: left; font-family: var(--font-display); font-weight: 700; border-bottom: 3px double var(--color-ink); padding: var(--space-sm); font-size: 0.9rem; }
.compare-table td { border-bottom: 1px solid var(--color-border); padding: var(--space-sm); font-size: 0.9rem; vertical-align: top; }
.compare-table td:first-child, .compare-table th:first-child { font-weight: 600; }

/* ---- pull-quote ---- */
.pull-quote { position: relative; text-align: center; padding: var(--space-xl) var(--space-lg); margin: var(--space-2xl) auto; max-width: 46rem; border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-ink); }
.pull-quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); line-height: 1.4; }
.pull-quote blockquote::before { content: '\201C'; color: var(--color-accent); font-size: 2.5rem; display: block; line-height: 0.4; margin-bottom: var(--space-sm); font-family: var(--font-display); }

/* ---- photo-grid-3 ---- */
.photo-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0; }
.photo-grid-3 figure { margin: 0; }
.photo-grid-3 img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photo-grid-3 figcaption { font-size: 0.78rem; color: var(--color-ink-muted); margin-top: var(--space-xs); }

/* ---- sub-index (hub -> children nav) ---- */
.sub-index { border-top: 1px dashed var(--color-border); border-bottom: 1px dashed var(--color-border); margin: 0; padding: var(--space-md) 0; background: var(--color-paper-2); }
.sub-index ul { list-style: none; margin: 0; padding: 0; max-width: 1180px; margin: 0 auto; display: flex; gap: var(--space-lg); flex-wrap: wrap; padding-left: var(--space-lg); padding-right: var(--space-lg); }
.sub-index a { text-decoration: none; font-weight: 600; font-size: 0.9rem; border-bottom: 1px solid var(--color-accent); }

/* ---- main content generic ---- */
main { flex: 1; padding: var(--space-2xl) 0 var(--space-3xl); }
.article-head { max-width: 1180px; margin: 0 auto var(--space-lg); padding: 0 var(--space-lg); }
.article-head .eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.content-block { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-lg); }
.content-block + .content-block { margin-top: var(--space-xl); }
.cta-line { margin: var(--space-xl) 0; }
.btn-affiliate { display: inline-block; background: var(--color-ink); color: var(--color-paper); text-decoration: none; padding: 0.85rem 1.5rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--color-ink); }
.btn-affiliate:hover { background: var(--color-accent); border-color: var(--color-accent); }
.trust-line { font-size: 0.85rem; color: var(--color-ink-muted); }
.trust-line a { text-decoration: underline; }

/* ---- Ft20 rule-capped index footer ---- */
.rule-footer { border-top: 3px solid var(--color-ink); padding-top: var(--space-xl); padding-bottom: var(--space-xl); margin-top: var(--space-3xl); }
.rule-footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-lg); }
.rule-footer-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0 0 var(--space-lg); padding: 0; }
.rule-footer-list a { text-decoration: none; font-size: 0.88rem; white-space: nowrap; }
.footer-cta { font-weight: 700; color: var(--color-accent); }
.rule-footer-copy { font-size: 0.78rem; color: var(--color-ink-muted); margin: 0; }

/* ---- faq ---- */
.faq-item { border-bottom: 1px solid var(--color-border); padding: var(--space-md) 0; }
.faq-item h3 { font-size: 1.02rem; margin-bottom: var(--space-xs); }
.faq-item p { color: var(--color-ink-muted); margin: 0; }

/* ---- 404 ---- */
.page-404 { text-align: center; padding: var(--space-3xl) var(--space-lg); }

/* ---- reduced motion (no animation used, gate placeholder) ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- responsive: mobile ---- */
@media (max-width: 640px) {
  .two-col-news { grid-template-columns: 1fr; gap: var(--space-lg); }
  .photo-grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .index-table .col-desc { display: none; }
  .index-table .col-title { width: auto; }
  .rule-footer-list { flex-direction: column; gap: var(--space-sm); }
  .nav-row { justify-content: flex-start; }
}
@media (min-width: 641px) and (max-width: 992px) {
  .photo-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* CTA aff header (SOP5, agy 3.8-high) */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-accent-ink);
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease;
}

.nav-cta:hover {
  background-color: var(--color-focus);
  border-color: var(--color-focus);
  color: var(--color-accent-ink);
}

.nav-cta:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.nav-cta:active {
  transform: translateY(1px);
}

@media (max-width: 430px) {
  .nav-cta {
    display: inline-flex;
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8125rem;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta {
    transition: none;
    transform: none;
  }
  .nav-cta:active {
    transform: none;
  }
}