/* ==========================================================================
   base.css — reset และ typography พื้นฐาน
   ========================================================================== */

html{color-scheme:light}
*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}

body{
  margin:0;padding:0;
  background:var(--mist);
  color:var(--ink);
  font-family:var(--font);
}

/* ---- Headline ---- */
h1{
  font-size:clamp(34px,calc(5.4 * var(--vw)),62px);line-height:1.08;font-weight:700;
  margin:0;color:var(--indigo);text-wrap:balance;letter-spacing:-.02em;
}
h2{
  font-size:clamp(24px,calc(3 * var(--vw)),38px);line-height:1.18;font-weight:700;
  margin:0 0 10px;color:var(--indigo);text-wrap:balance;letter-spacing:-.01em;
}

/* ---- Body ---- */
p{margin:0}
.lead{
  font-size:clamp(15px,calc(1.5 * var(--vw)),19px);line-height:1.55;
  color:var(--muted);max-width:60ch;margin:0;
}

/* ---- Inline ---- */
mark{background:linear-gradient(transparent 58%,var(--lime) 58%);color:inherit;padding:0 2px}
.k{color:var(--indigo);font-weight:600}
code{
  font-family:var(--mono);font-size:.88em;background:var(--mist);
  padding:2px 6px;border-radius:5px;color:var(--deep);
}

/* ---- Accessibility ---- */
:focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px}