:root {
  --ink: #24362a;
  --deep: #173b2a;
  --matcha: #617b42;
  --leaf: #8d9f61;
  --cream: #f6f0e5;
  --paper: #fbf8f1;
  --sand: #e7dcc9;
  --clay: #b56d4a;
  --line: rgba(36, 54, 42, .14);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans Thai', sans-serif;
  background: var(--paper);
  color: var(--ink);
}

.display { font-family: 'Cormorant Garamond', serif; line-height: calc(1.1em + 5px); }
.thai-title { font-family: 'Noto Sans Thai', sans-serif; line-height: calc(1.1em + 5px); letter-spacing: -0.02em; }
p, li { line-height: calc(1.5em + 5px); }
h1, h2, h3, h4, h5, h6 { line-height: calc(1.1em + 5px); }

/* Preserve each existing rhythm while adding 5px between wrapped lines. */
.leading-6 { line-height: calc(1.5rem + 5px) !important; }
.leading-7 { line-height: calc(1.75rem + 5px) !important; }
.leading-8 { line-height: calc(2rem + 5px) !important; }
.leading-none { line-height: calc(1em + 5px) !important; }
.leading-tight { line-height: calc(1.25em + 5px) !important; }
.leading-\[\.88\] { line-height: calc(.88em + 5px) !important; }
.leading-\[\.9\] { line-height: calc(.9em + 5px) !important; }
.leading-\[\.95\] { line-height: calc(.95em + 5px) !important; }
.leading-\[\.98\] { line-height: calc(.98em + 5px) !important; }

.bg-paper { background: var(--paper); }
.bg-cream { background: var(--cream); }
.bg-deep { background: var(--deep); }
.text-ink { color: var(--ink); }
.text-matcha { color: var(--matcha); }
.text-clay { color: var(--clay); }
.border-soft { border-color: var(--line); }

.site-header {
  background: rgba(251, 248, 241, .91);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.logo-mark { letter-spacing: .19em; }
.nav-link { position: relative; color: rgba(36, 54, 42, .72); transition: color .25s ease; }
.nav-link:hover, .nav-link.active { color: var(--deep); }
.nav-link.active::after {
  content: '';
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: -8px;
  background: var(--clay);
}

.hero-home { min-height: min(760px, 88vh); background-image: linear-gradient(90deg, rgba(15, 35, 24, .7) 0%, rgba(15, 35, 24, .34) 47%, rgba(15, 35, 24, .08) 100%), url('assets/hero-exterior.3775f6befbc6.webp'); background-size: cover; background-position: center; }
.hero-interior { background-image: linear-gradient(90deg, rgba(15, 35, 24, .76), rgba(15, 35, 24, .25)), url('assets/interior.3f620025f5b0.webp'); }
.hero-menu { background-image: linear-gradient(90deg, rgba(15, 35, 24, .72), rgba(15, 35, 24, .2)), url('assets/tea-tools.d315d053d646.webp'); }
.hero-page { min-height: 420px; background-size: cover; background-position: center; display: grid; place-items: end start; }
.hero-product { min-height: 400px; background-size: cover; background-position: center; }

.hero-title {
  line-height: calc(1.12em + 5px);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-title--spaced {
  font-family: 'Noto Sans Thai', sans-serif;
  font-weight: 700;
  line-height: calc(1.22em + 5px);
  letter-spacing: -0.02em;
}

.eyebrow { letter-spacing: .24em; text-transform: uppercase; font-size: .72rem; font-weight: 600; }
.section-kicker { color: var(--clay); letter-spacing: .15em; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.soft-card { box-shadow: 0 18px 50px rgba(36, 54, 42, .08); }
.image-hover { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.image-hover:hover { transform: scale(1.045); }
.menu-card:hover .menu-card-arrow { transform: translateX(4px); }
.menu-card-arrow { transition: transform .25s ease; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.leaf-pattern { background-image: radial-gradient(rgba(97,123,66,.16) 1px, transparent 1px); background-size: 18px 18px; }
.pull-quote { border-left: 3px solid var(--clay); }
.map-frame { min-height: 360px; filter: saturate(.72) sepia(.08); }
.map-frame iframe { width: 100%; height: 100%; min-height: 360px; border: 0; }

.reveal { opacity: 0; transform: translateY(14px); animation: reveal .7s ease forwards; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }
.delay-1 { animation-delay: .08s; }.delay-2 { animation-delay: .16s; }.delay-3 { animation-delay: .24s; }

@media (max-width: 767px) {
  .hero-home { min-height: 670px; background-position: 62% center; }
  .hero-page { min-height: 350px; }
  .hero-title { font-size: clamp(3rem, 12vw, 3.75rem); line-height: calc(1.16em + 5px); letter-spacing: -0.01em; }
  .hero-title--spaced { line-height: calc(1.28em + 5px); }
  .nav-link.active::after { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-home { min-height: 720px; }
  .hero-page { min-height: 450px; }
  .hero-title { line-height: calc(1.1em + 5px); }
  .hero-title--spaced { line-height: calc(1.2em + 5px); }
}