/* ── Design tokens ───────────────────────────────────── */
:root {
  --bg:           #faf7f0;
  --dark:         #2a1a08;
  --mid:          #5a3e1a;
  --gold:         #c8960c;
  --gold-light:   #e8d08a;
  --white:        #ffffff;
  --dark-section: #1c160a;
  --font-en:      'Playfair Display', Georgia, serif;
  --font-th:      'Noto Serif Thai', serif;
  --font-body:    'Lato', sans-serif;
  --max-width:    1200px;
  --section-pad:  80px 24px;
}

/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--dark); font-family: var(--font-body); }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }

/* ── Navbar ──────────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.navbar.scrolled {
  background: var(--bg);
  box-shadow: 0 2px 12px rgba(42,26,8,0.08);
}
.navbar__logo {
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 0.04em;
  transition: color 0.35s ease;
}
.navbar__logo sup { font-size: 0.6em; vertical-align: super; }

.navbar__links {
  display: flex;
  gap: 36px;
}
.navbar__links a {
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  transition: color 0.2s;
}
.navbar__links a:hover { color: var(--gold); }

.navbar__hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--dark);
  transition: color 0.35s ease;
}

@media (max-width: 768px) {
  .navbar { padding: 16px 20px; }
  .navbar__hamburger { display: block; }
  .navbar__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    padding: 16px 20px 24px;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(42,26,8,0.1);
  }
  .navbar__links.open { display: flex; }
}

/* ── Shared typography ───────────────────────────────── */
.section-title-en {
  font-family: var(--font-en);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 600;
  color: var(--dark);
  line-height: 1.25;
}
.section-title-th {
  font-family: var(--font-th);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.35;
}
.section-tagline {
  font-family: var(--font-en);
  font-size: clamp(0.85rem, 1.8vw, 1.1rem);
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section-body {
  font-family: var(--font-th);
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.8;
}
.section-divider {
  width: 48px;
  height: 2px;
  background: var(--gold);
  border: none;
  margin: 8px 0;
}

/* ── Cover ───────────────────────────────────────────── */
.cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 60px;
  gap: 24px;
  text-align: center;
  background: var(--bg);
}
.cover__label {
  font-family: var(--font-en);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.cover__label sup { font-size: 0.6em; vertical-align: super; }
.cover__img {
  width: 100%;
  max-width: var(--max-width);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(42,26,8,0.1);
}
.cover__tagline {
  font-family: var(--font-en);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.cover__sub {
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 1.4vw, 0.92rem);
  font-weight: 300;
  color: var(--mid);
  letter-spacing: 0.07em;
  line-height: 1.75;
  text-transform: uppercase;
  max-width: 760px;
}

/* ── Fade-in on load ─────────────────────────────────── */
.fade-in {
  animation: fadeIn 0.9s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Full-image sections (shared pattern) ────────────── */
.fullimg-section {
  padding: var(--section-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.fullimg-section__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: var(--max-width);
  width: 100%;
}
.fullimg-section__img {
  width: 100%;
  max-width: var(--max-width);
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(42,26,8,0.1);
}
.fullimg-section__body {
  font-family: var(--font-th);
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.8;
  text-align: center;
  max-width: 700px;
}

/* ── Dark section variant ────────────────────────────── */
.fullimg-section--dark {
  background: var(--dark-section);
}
.fullimg-section--dark .section-title-th,
.fullimg-section--dark .section-title-en {
  color: var(--white);
}
.fullimg-section--dark .section-tagline {
  color: var(--gold);
}
.fullimg-section--dark .section-divider {
  background: var(--gold);
}
.fullimg-section--dark .fullimg-section__body {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
}

/* ── Closing brand line ───────────────────────────────── */
.closing__brand-line {
  font-family: var(--font-en);
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-align: center;
}
.closing__brand-line sup { font-size: 0.6em; vertical-align: super; }

/* ── Footer ──────────────────────────────────────────── */
.footer {
  background: var(--dark);
  color: var(--white);
  text-align: center;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__brand {
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.footer__brand sup { font-size: 0.55em; vertical-align: super; }
.footer__tagline {
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.08em;
}
.footer__contact {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
}
.footer__company {
  font-family: var(--font-th);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.02em;
  margin-top: 8px;
}
.footer__copy {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* ── Scroll reveal ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  :root { --section-pad: 60px 20px; }
  .fullimg-section__img { border-radius: 12px; }
  .cover__img { border-radius: 12px; }
}

@media (max-width: 768px) {
  :root { --section-pad: 48px 16px; }

  .navbar { padding: 14px 16px; }
  .navbar__logo { font-size: 1.2rem; }

  .cover { padding: 80px 16px 40px; }
  .cover__img { border-radius: 8px; }

  .fullimg-section__img { border-radius: 8px; }
}

@media (max-width: 480px) {
  .cover__sub { font-size: 0.72rem; letter-spacing: 0.04em; }
}