:root {
  --cream: #fbeee8;
  --cream-soft: #fdf5ef;
  --rose-deep: #a85e4a;
  --rose: #dfa7a0;
  --navy: #141430;
  --navy-soft: #2d2640;
  --gold: #b8925a;
  --line: rgba(184, 146, 90, 0.34);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--navy-soft);
  background:
    radial-gradient(circle at 12% 5%, rgba(223, 167, 160, 0.26), transparent 26%),
    radial-gradient(circle at 88% 14%, rgba(184, 146, 90, 0.14), transparent 24%),
    linear-gradient(180deg, var(--cream-soft), var(--cream));
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: multiply;
  background: url('../assets/paper_grain.png') center / cover;
}
a { color: inherit; }
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px max(22px, calc((100vw - 1120px) / 2));
  border-bottom: 1px solid rgba(184, 146, 90, 0.22);
  background: rgba(251, 238, 232, 0.92);
  backdrop-filter: blur(14px);
}
.wordmark {
  color: var(--navy);
  font: italic 400 21px/1 'Fraunces', serif;
  text-decoration: none;
}
.wordmark span { color: var(--rose-deep); }
.nav-links { display: flex; align-items: center; gap: 10px; }
.nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Kanit', sans-serif;
  font-size: 12px;
  text-decoration: none;
}
.nav-link.primary { color: var(--cream-soft); background: var(--navy); border-color: var(--navy); }
.hero, .article-shell, .catalog, .footer-inner { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.hero { padding: 96px 0 64px; text-align: center; }
.eyebrow {
  margin-bottom: 18px;
  color: var(--gold);
  font-family: 'Kanit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
h1, h2, h3 { font-family: 'Fraunces', serif; font-style: italic; font-weight: 300; }
h1 {
  max-width: 850px;
  margin: 0 auto 22px;
  color: var(--navy);
  font-size: clamp(42px, 7vw, 78px);
  line-height: 1.06;
}
.hero-dek { max-width: 680px; margin: 0 auto; color: rgba(45, 38, 64, 0.72); font-size: 18px; }
.catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 0 0 96px;
}
.story-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(253, 245, 239, 0.84);
  box-shadow: 0 18px 60px rgba(45, 38, 64, 0.06);
}
.story-card:nth-child(1), .story-card:nth-child(7) {
  background: radial-gradient(circle at 90% 5%, rgba(223, 167, 160, 0.28), transparent 38%), var(--cream-soft);
}
.story-no { color: var(--gold); font: 400 12px/1 'Kanit', sans-serif; }
.story-card h2 { margin: 24px 0 14px; color: var(--rose-deep); font-size: 34px; line-height: 1.18; }
.story-card p { margin: 0 0 28px; color: rgba(45, 38, 64, 0.72); font-size: 15px; }
.story-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: auto; color: var(--navy); font-family: 'Kanit', sans-serif; font-size: 13px; font-weight: 500; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.article-shell { max-width: 780px; padding: 78px 0 96px; }
.article-header { padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.article-header h1 { margin-left: 0; text-align: left; font-size: clamp(42px, 7vw, 68px); }
.article-dek { margin: 0; color: rgba(45, 38, 64, 0.72); font-size: 19px; }
.article-meta { margin-top: 24px; color: var(--gold); font-family: 'Kanit', sans-serif; font-size: 11px; }
.article-body { padding-top: 30px; }
.article-body p { margin: 0 0 22px; }
.article-body h2 { margin: 52px 0 16px; color: var(--rose-deep); font-size: 34px; line-height: 1.22; }
.article-note {
  margin: 38px 0;
  padding: 24px 26px;
  border-left: 3px solid var(--gold);
  border-radius: 0 18px 18px 0;
  background: rgba(184, 146, 90, 0.1);
  color: rgba(45, 38, 64, 0.78);
}
.article-cta {
  margin-top: 52px;
  padding: 34px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--navy);
  color: var(--cream-soft);
}
.article-cta h2 { margin: 0 0 10px; color: var(--cream-soft); }
.article-cta p { margin: 0 0 22px; color: rgba(253, 245, 239, 0.72); }
.cta-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--cream-soft);
  color: var(--navy);
  font-family: 'Kanit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.back-link { min-height: 44px; display: inline-flex; align-items: center; margin-top: 38px; color: var(--rose-deep); font-size: 14px; text-underline-offset: 5px; }
footer { padding: 32px 0 48px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; color: rgba(45, 38, 64, 0.62); font-size: 12px; }
.footer-inner a { margin-left: 16px; }
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav { padding: 12px 18px; }
  .nav-link:not(.primary) { display: none; }
  .hero { padding: 72px 0 46px; }
  .hero, .article-shell, .catalog, .footer-inner { width: min(100% - 30px, 1080px); }
  .catalog { grid-template-columns: 1fr; gap: 14px; padding-bottom: 64px; }
  .story-card { min-height: 0; padding: 26px; }
  .story-card h2 { font-size: 30px; }
  .article-shell { padding: 54px 0 70px; }
  .article-header h1 { font-size: 44px; }
  .article-dek { font-size: 17px; }
  .article-cta { padding: 28px 20px; }
  .footer-inner { display: block; text-align: center; }
  .footer-inner div + div { margin-top: 10px; }
}