/* Base typography. Scale from design-system README section 2.
   Single breakpoint at 760px (hub-widgets-phase1.md, Rules). */

body {
  font-family: var(--hc-font-body);
  font-size: 18px;
  line-height: 1.7;
  color: var(--hc-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hc-ink);
  font-weight: 700;
}

h1 { font-size: 38px; letter-spacing: -0.025em; line-height: 1.15; }
h2 { font-size: 32px; letter-spacing: -0.02em; }
h3 { font-size: 24px; letter-spacing: -0.02em; margin-top: 30px; margin-bottom: 12px; }

.hc-display { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; }

.hc-meta { font-size: 13.5px; color: var(--hc-mut); }

.hc-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-pink);
}
.hc-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hc-line), transparent);
}
.hc-eyebrow--neutral { color: var(--hc-secondary); }

a { color: var(--hc-pink); }
a:hover { color: var(--hc-pink-hover); }

/* Thai: own family, and taller lines because the script needs the headroom. */
:lang(th) { font-family: var(--hc-font-thai); }
:lang(th) p,
:lang(th) li { line-height: 1.85; }
:lang(th) h1,
:lang(th) h2,
:lang(th) h3 { letter-spacing: 0; line-height: 1.45; }

@media (max-width: 760px) {
  body { font-size: 17px; }
  h1 { font-size: 30px; }
  h2 { font-size: 25px; }
  .hc-display { font-size: 34px; }
}