/* Base typography, blog design system v2 (v2-canvas boards; v2_kit.py).
   Hanken Grotesk throughout; Thai glyphs fall through to Noto Sans Thai.
   Phone layout below 900px (01-LAYOUT-AND-WIDTHS.md). */

html {
  background: var(--hc-band);
}

body {
  font-family: var(--hc-font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--hc-body);
  background: var(--hc-band);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Astra sets its own family on headings and form controls from the Customizer, including
   `.entry-content :where(h1)` (0,1,0), so the content headings need a stronger selector. */
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.entry-title, .entry-content,
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--hc-font-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hc-text);
  font-weight: 400;
  text-wrap: balance;
}

h1 { font-size: 48px; line-height: 1.1; letter-spacing: -1.4px; }
h2 { font-size: 32px; line-height: 1.2; letter-spacing: -0.6px; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: -0.3px; font-weight: 500; margin-top: 30px; margin-bottom: 12px; }

/* Display headings: thin and large, as on the landing boards. */
.hc-display { font-size: 52px; font-weight: 300; letter-spacing: -1.6px; line-height: 1.08; }

.hc-meta { font-size: 14px; color: var(--hc-muted); }

a { color: var(--hc-accent); text-underline-offset: 3px; }
a:hover { color: var(--hc-accent); opacity: 0.8; }

:focus-visible {
  outline: 2px solid var(--hc-focus);
  outline-offset: 2px;
}

/* Eyebrow: small tracked capitals, one line. Accent by default, muted when neutral. */
.hc-eyebrow {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hc-accent);
}
.hc-eyebrow--neutral { color: var(--hc-muted); }
.hc-eyebrow--center { justify-content: center; }

/* Prose: running text in the 744 measure (.hc-prose, the article body). Full ink on light,
   one step softer on dark. Rules reach only the body's own blocks (direct children), never
   widgets placed inside it, which style themselves. */
.hc-prose { color: var(--hc-prose-text); }
.hc-prose > p {
  font-size: 19px;
  line-height: 1.7;
  margin: 0 0 22px;
}
.hc-prose > :is(h2, h3) { color: var(--hc-text); } /* beats Astra's .entry-content :where(h2) colour */
.hc-prose > h2 {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  font-weight: 400;
  margin: 52px 0 20px;
}
.hc-prose > h3 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  margin: 36px 0 12px;
}
.hc-prose > :is(ul, ol) {
  margin: 0 0 22px;
  padding-left: 1.3em;
}
.hc-prose > :is(ul, ol) > li { margin-bottom: 8px; }
.hc-prose > blockquote {
  margin: 32px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--hc-brand);
  color: var(--hc-text);
  font-size: 21px;
  line-height: 1.55;
}
.hc-prose > :is(p, ul, ol, blockquote) a {
  color: var(--hc-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.hc-prose > :is(p, ul, ol, blockquote) strong { color: var(--hc-text); font-weight: 600; }

/* Thai: no tracking (it pulls vowel and tone marks off their letters), taller lines
   for the marks, balanced headings, eyebrows a size up since they lose the tracking. */
:lang(th) { font-family: var(--hc-font-thai); }
:lang(th) * { letter-spacing: normal !important; }
/* The v2 home and landings keep their boards' own line heights (gen_v2_landings.THAI_CSS). */
:lang(th) :is(p, li):where(:not(.hc-v2h *)) { line-height: 1.85; }
:lang(th) h1,
:lang(th) h2,
:lang(th) h3 { line-height: 1.3; text-wrap: balance; }
:lang(th) .hc-eyebrow { font-size: 13px; }

@media (max-width: 900px) {
  body { font-size: 18px; }
  h1 { font-size: 36px; letter-spacing: -1px; }
  h2 { font-size: 27px; letter-spacing: -0.5px; }
  h3 { font-size: 21px; }
  .hc-display { font-size: 34px; letter-spacing: -0.9px; line-height: 1.12; }
  .hc-prose > p { font-size: 18px; }
  .hc-prose > h2 { font-size: 27px; letter-spacing: -0.5px; margin: 40px 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Site shell (01 §2): 1416 OUTER, gutters included; box-sizing is border-box,
   so max-width carries the outer number, never the 1320 content figure.
   Overrides Astra's per-type widths in one place; --ast-narrow-container-width
   is pinned too so narrow-flagged archives match. */
@media (min-width: 769px) {
  :root { --ast-narrow-container-width: var(--hc-shell); }
  .ast-container,
  .ast-narrow-container .site-content .ast-container {
    max-width: var(--hc-shell);
    padding-left: var(--hc-gutter);
    padding-right: var(--hc-gutter);
  }
}

/* Phones: Astra pads archive and index containers by 0.54em (about 10px) through
   `.ast-separate-container #content .ast-container` (1,2,0); the v2 phone gutter is 20px.
   Articles already get 20px; the home and landings draw their own bands. */
@media (max-width: 768px) {
  .archive #page #content .ast-container,
  .hc-blog-index #page #content .ast-container {
    padding-left: var(--hc-gutter);
    padding-right: var(--hc-gutter);
  }
}

/* Astra paints its own page and container backgrounds from the Customizer. */
.site,
.site-content,
.ast-separate-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-plain-container .site-content {
  background-color: var(--hc-band);
}