/* Design system layer, loaded last. Principles: 4-pt spacing, one sans font, calm shadows (none in dark: depth comes from
   lighter surfaces), four button states, readable overlays on photos.
   Thai note: tone marks and vowels stack above/below the line, so headings keep line-height 1.3 and only tighten
   letter-spacing slightly; the tighter -2% / 1.15 treatment is used for Latin (English) headings only. */
:root {
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --shadow-md:0 2px 4px rgba(15,23,42,.03), 0 16px 40px rgba(15,23,42,.09);
  --ring:0 0 0 3px rgba(37,99,235,.3);
}

/* ---- typography ---- */
body { line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-optical-sizing:auto; }
h1, h2, h3 { font-weight:700; letter-spacing:-.01em; line-height:1.3; text-wrap:balance; }
h1 { font-size:clamp(1.75rem, 1.3rem + 1.4vw, 2.375rem); }
h2 { font-size:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
h3 { font-size:1.0625rem; }
p, li, dd { text-wrap:pretty; }
:lang(en) h1 { letter-spacing:-.03em; line-height:1.15; }
:lang(en) h2 { letter-spacing:-.02em; line-height:1.2; }
:lang(en) h3 { letter-spacing:-.01em; line-height:1.25; }
.muted, .small-text { line-height:1.7; }

/* ---- surfaces: soft, spread-out shadows that are felt rather than seen ---- */
.card, .pcard { box-shadow:var(--shadow); }
.pcard-wrap:hover .pcard, .card:hover { box-shadow:var(--shadow-md); }

/* ---- buttons: default / hover / active / disabled (+ keyboard focus) ---- */
.btn { transition:background .2s, border-color .2s, color .2s, box-shadow .2s, transform .15s; }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.98); background:#1E40AF; border-color:#1E40AF; transition-duration:.05s; }
.btn.outline:active { background:rgba(37,99,235,.16); border-color:var(--primary); }
.btn:disabled, .btn[aria-disabled="true"] { background:var(--grey-bg); border-color:var(--grey-bg); color:var(--muted); box-shadow:none; transform:none; opacity:1; cursor:not-allowed; }
.btn.outline:disabled { background:transparent; border-color:var(--border); }
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:0; box-shadow:var(--ring); }

/* ---- text over photos: a gradient scrim, never bare text on a picture ---- */
.pcard-photo::after { content:""; position:absolute; inset:auto 0 0 0; height:55%; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(2,6,23,.5), transparent); }
.pcard-photo > .badge, .pcard-photo > .avatar-ring, .pcard-photo > .cta { z-index:2; }

@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition:none; transform:none; } }