/* ============ Pompolarr Modu — Design Tokens ============ */
:root {
  --bone: #F5F0E8;
  --bone-2: #EFE7DA;
  --cream: #E8DFCC;
  --shell: #FFFFFF;
  --ink: #1E1B16;
  --ink-2: #2B2620;
  --ink-3: #524B3F;
  --mute: #8A8173;
  --line: #D9CFBB;
  --line-2: #C7BCA4;
  --clay: #B8755B;
  --clay-2: #9C5E47;
  --moss: #6B7556;
  --moss-2: #4F5A3F;
  --cocoa: #3B2F22;
  --sand: #D9C8AE;
  --peach: #EDD8C6;

  --f-serif: "Newsreader", "Noto Serif Thai", Georgia, serif;
  --f-sans: "Inter Tight", "IBM Plex Sans Thai", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
:lang(th), .th { font-family: "IBM Plex Sans Thai", var(--f-sans); }

.serif { font-family: var(--f-serif); font-optical-sizing: auto; }
.mono  { font-family: var(--f-mono); letter-spacing: .02em; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hair {
  height: 1px; background: var(--line); width: 100%;
}
.container {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
}

/* Subtle grain — pure CSS, no images */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(30,27,22,.08) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .35;
  mix-blend-mode: multiply;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { background: var(--clay); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.btn-line { background: #6FA88B; color: #fff; text-decoration: none; border: none; }
.btn-line:hover { background: #5F9278; }

/* Section */
.section { position: relative; padding: 120px 0; }
.section-dark { background: var(--cocoa); color: var(--bone); }
.section-dark .eyebrow { color: var(--sand); }
.section-cream { background: var(--bone-2); }

/* Headings */
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
.display {
  font-family: var(--f-serif);
  font-weight: 350;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: .98;
  letter-spacing: -.02em;
}
.display :lang(th), .display .th {
  font-weight: 300;
  letter-spacing: -.01em;
}
.h2 {
  font-family: var(--f-serif);
  font-weight: 350;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.lede {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 58ch;
}

/* Italic display accent */
.italic-accent { font-style: italic; font-weight: 300; }

/* Link underline */
.u-line {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
}