@font-face { font-family: "Mali"; src: url("/assets/fonts/Mali-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-VF.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Noto Sans Thai"; src: url("/assets/fonts/NotoSansThai-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Sans Thai"; src: url("/assets/fonts/NotoSansThai-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #fff6e6;
  --paper-deep: #fbe9cc;
  --ink: #49342b;
  --ink-soft: #7a6156;
  --coral: #db7458;
  --butter: #f8d67a;
  --blush: #f6c6c0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.75 "Nunito", "Noto Sans Thai", system-ui, sans-serif;
}
:lang(th) { font-family: "Noto Sans Thai", "Nunito", system-ui, sans-serif; }
[lang="en"] { font-family: "Nunito", system-ui, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
.stamps, .more-grid img, footer img { mix-blend-mode: multiply; }
h1, h2, h3 { font-family: "Mali", "Noto Sans Thai", sans-serif; font-weight: 700; line-height: 1.3; margin: 0; }
a { color: var(--coral); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 2px; }

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 96px) clamp(16px, 4vw, 48px) 48px;
}
.wordmark { width: min(420px, 80%); }
.tagline {
  font-family: "Mali", "Noto Sans Thai", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.25;
  margin: 28px 0 8px;
}
.tagline-en { font-size: 1.25rem; color: var(--ink-soft); margin: 0 0 32px; }
.soon {
  display: inline-block;
  margin: 0;
  padding: 14px 22px;
  background: var(--butter);
  border: 2px solid var(--ink);
  border-radius: 18px 22px 16px 24px / 22px 16px 24px 18px;
  font-weight: 600;
  line-height: 1.55;
}
.soon span { font-weight: 600; font-size: 0.92em; opacity: 0.8; }
.hero-art img {
  border-radius: 28px 34px 26px 38px / 34px 26px 38px 28px;
  border: 2px solid var(--ink);
  box-shadow: 10px 12px 0 var(--blush);
  transform: rotate(1.5deg);
}
.hero-art { margin: 0; }

main { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
section { padding: clamp(48px, 8vw, 96px) 0; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 28px; }

.day { border-top: 2px dashed var(--paper-deep); }
.steps { list-style: none; padding: 0; margin: 0 0 36px; display: grid; gap: 14px; max-width: 40em; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: baseline; }
.steps li::before {
  content: counter(step);
  font-family: "Mali", sans-serif;
  font-size: 1.15rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--coral);
  color: var(--paper);
  border-radius: 50%;
  transform: translateY(-4px);
}
.steps strong { font-weight: 600; margin-right: 6px; }
.stamps { width: min(560px, 100%); }

.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 36px); }
.more-grid img { width: 120px; margin-bottom: 8px; }
.more-grid h3 { font-size: 1.2rem; margin-bottom: 6px; }
.more-grid p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

.promise {
  background: var(--paper-deep);
  border-radius: 32px 28px 36px 30px / 28px 36px 30px 32px;
  padding: clamp(28px, 5vw, 56px);
  margin-bottom: 64px;
}
.promise h2 { margin-bottom: 12px; }
.promise p { margin: 0; max-width: 40em; }

footer { text-align: center; padding: 0 16px 48px; color: var(--ink-soft); font-size: 0.92rem; }
footer img { width: 72px; margin: 0 auto 4px; }
footer p { margin: 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { max-width: 420px; }
  .more-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .more-grid { grid-template-columns: 1fr; }
  .more-grid article { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; }
  .more-grid img { width: 88px; grid-row: span 2; }
}

/* Privacy policy */
.policy-nav { max-width: 760px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 0; }
.policy-nav img { width: 140px; }
.policy main { max-width: 760px; }
.policy article { padding: 40px 0 24px; }
.policy h1 { font-size: clamp(1.9rem, 4.4vw, 2.6rem); margin-bottom: 10px; }
.policy h2 { font-size: 1.3rem; margin: 36px 0 8px; }
.policy p, .policy li { max-width: 40em; }
.policy ul { padding-left: 1.2em; margin: 0; }
.policy li { margin-bottom: 6px; }
.policy .meta { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.policy-en { border-top: 2px dashed var(--paper-deep); margin-top: 32px; }
.policy footer { padding-top: 24px; }