@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');

:root{
  --paper:#f5e6c8;
  --paper-2:#efdcb6;
  --ochre:#d4a574;
  --ochre-deep:#b8823f;
  --ink:#262117;
  --ink-soft:#4b402e;
  --line:rgba(38,33,23,.20);
  --glass:rgba(255,250,238,.55);
  --radius:28px;
  --shadow:0 20px 44px -26px rgba(38,33,23,.65);
  --gutter:clamp(1rem,5vw,2.6rem);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:'Noto Sans Thai',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.78;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 8% -6%,rgba(212,165,116,.55),transparent 46%),
    radial-gradient(circle at 96% 4%,rgba(255,216,170,.55),transparent 42%),
    radial-gradient(circle at 46% 106%,rgba(176,127,69,.35),transparent 58%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.2;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink)}

:focus-visible{outline:2px solid var(--ochre-deep);outline-offset:3px}

/* ---------- 顶部：品牌行 + 菜单行 ---------- */
.top{
  position:sticky;
  top:0;
  z-index:52;
  background:rgba(245,230,200,.86);
  -webkit-backdrop-filter:blur(12px) saturate(.85);
  backdrop-filter:blur(12px) saturate(.85);
  border-bottom:1px solid var(--line);
}

.top__brand{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.62rem var(--gutter);
  border-bottom:1px dashed var(--line);
}

.top__gap{flex:1 1 auto}

.top__logo{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-height:44px;
  color:var(--ink);
  text-decoration:none;
}

.top__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:38px;
  height:38px;
  border-radius:13px;
  background:var(--ink);
  color:var(--paper);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.02em;
}

.top__name{
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
}

.top__contact,
.burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.4rem .9rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--glass);
  color:var(--ink);
  font:inherit;
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
}

.burger:hover,.top__contact:hover{background:#fffaf0}

.top__nav{
  padding:.22rem var(--gutter);
  overflow-x:auto;
  scrollbar-width:none;
}

.top__nav::-webkit-scrollbar{display:none}

.top__nav p{
  display:flex;
  flex-wrap:nowrap;
  gap:.15rem;
  margin:0;
}

.top__nav a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:.35rem .72rem;
  border-radius:999px;
  font-size:.94rem;
  color:var(--ink-soft);
  text-decoration:none;
  white-space:nowrap;
}

.top__nav a:hover{background:rgba(212,165,116,.42);color:var(--ink)}

/* ---------- 全屏遮罩菜单 ---------- */
.sheet{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1rem;
  padding:clamp(1.4rem,7vw,4rem);
  background:rgba(38,33,23,.96);
  color:var(--paper);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}

.sheet.is-open{opacity:1;visibility:visible}

.sheet__close{
  position:absolute;
  top:1.1rem;
  right:1.1rem;
  min-height:44px;
  padding:.4rem 1rem;
  border:1px solid rgba(245,230,200,.4);
  border-radius:999px;
  background:transparent;
  color:var(--paper);
  font:inherit;
  font-size:.95rem;
  cursor:pointer;
}

.sheet__nav p{
  display:flex;
  flex-direction:column;
  margin:0;
  gap:.1rem;
}

.sheet__nav a{
  display:block;
  padding:.62rem 0;
  color:var(--paper);
  text-decoration:none;
  font-size:clamp(1.15rem,3.4vw,1.65rem);
  border-bottom:1px solid rgba(245,230,200,.16);
}

.sheet__nav a:hover{color:var(--ochre)}

/* ---------- 首屏 ---------- */
.main{display:block}

.hero{
  position:relative;
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:1rem;
  padding:clamp(1.6rem,6vw,4rem) var(--gutter) clamp(3rem,7vw,4.5rem);
  overflow:hidden;
}

.hero::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-46px;
  height:104px;
  background:linear-gradient(100deg,var(--ochre),var(--paper-2) 62%,var(--ochre));
  transform:skewY(-2.4deg);
  z-index:-1;
}

.hero__art{
  margin:0 0 .3rem;
  width:min(122px,36vw);
  padding:8px 8px 20px;
  background:#fffdf6;
  border-radius:5px;
  box-shadow:var(--shadow);
  transform:rotate(-2.6deg);
  animation:bob 7s ease-in-out infinite;
}

.hero__art:empty{
  min-height:92px;
  background:linear-gradient(140deg,#fffdf6,#efdcb6);
}

.hero__art img,
.hero__img{
  width:100%;
  border-radius:2px;
  filter:sepia(.28) contrast(1.06) saturate(.85);
}

.hero__title{
  margin:0;
  max-width:22ch;
  font-size:clamp(1.9rem,5.2vw,3.5rem);
  line-height:1.22;
  letter-spacing:-.015em;
  font-weight:700;
  animation:track 11s ease-in-out infinite;
}

.hero__lead{
  margin:0;
  max-width:56ch;
  font-size:clamp(.98rem,2.4vw,1.08rem);
  color:var(--ink-soft);
}

@keyframes bob{
  0%,100%{transform:rotate(-2.6deg) translateY(0)}
  50%{transform:rotate(-1.2deg) translateY(-6px)}
}

@keyframes track{
  0%,44%,56%,100%{transform:translateX(0)}
  47%{transform:translateX(-2px) skewX(-1.2deg)}
  50%{transform:translateX(2.5px)}
  53%{transform:translateX(-1px)}
}

/* ---------- 正文 + 右侧栏 ---------- */
.body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.4rem,4vw,2.4rem);
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(1.4rem,4vw,2.4rem) var(--gutter) clamp(2.6rem,7vw,4rem);
}

.body__flow{min-width:0}

.body__flow > section{
  scroll-margin-top:132px;
  padding-block:clamp(1.3rem,3.4vw,2.2rem);
}

.body__flow > section + section{border-top:1px solid var(--line)}

.body__flow p{margin:0 0 1em;max-width:70ch}

.body__flow h1,
.body__flow h2{
  margin:.1em 0 .55em;
  font-size:clamp(1.32rem,3.3vw,1.86rem);
  line-height:1.4;
  letter-spacing:-.01em;
}

.body__flow h2 > span,
.body__flow h3 > span,
.body__flow h1 > span,
.page__h1 > span{
  background:linear-gradient(transparent 64%,rgba(212,165,116,.8) 64%);
  padding:0 .1em;
}

.page__h1{
  margin:0 0 .5em;
  font-size:clamp(1.6rem,4vw,2.3rem);
  line-height:1.35;
}

.body__flow h3{
  margin:1.4em 0 .5em;
  font-size:clamp(1.1rem,2.6vw,1.3rem);
  line-height:1.5;
}

.body__flow figure{
  margin:1.4em 0;
  padding:9px 9px 22px;
  background:#fffdf6;
  border-radius:6px;
  box-shadow:var(--shadow);
  filter:sepia(.2) contrast(1.04);
}

.body__flow figure img{width:100%;border-radius:2px}

.body__flow ul,
.body__flow ol{padding-left:1.3em;margin:0 0 1em;max-width:70ch}

.body__flow li{margin:.28em 0}

.body__flow a{color:var(--ochre-deep);text-underline-offset:3px}

.body__flow blockquote{
  margin:1.4em 0;
  padding:.6em 0 .6em 1.1em;
  border-left:3px solid var(--ochre);
  color:var(--ink-soft);
}

.rail{
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}

.rail__box{
  padding:1.05rem 1.15rem 1.15rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

.rail__box--alt{background:rgba(212,165,116,.32)}

.rail__title{
  margin:0 0 .55rem;
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--ink-soft);
}

.rail__title > span{
  display:inline-block;
  padding-bottom:.15rem;
  border-bottom:2px solid var(--ochre-deep);
}

.rail__links{
  display:flex;
  flex-direction:column;
  margin:0;
}

.rail__links a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.25rem .1rem;
  font-size:.94rem;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px dashed var(--line);
}

.rail__links a:last-child{border-bottom:0}

.rail__links a:hover{color:var(--ink);padding-left:.3rem}

.rail__note{margin:0}

.rail__note a{
  display:flex;
  align-items:center;
  min-height:42px;
  font-size:.94rem;
  color:var(--ochre-deep);
  text-decoration:none;
}

/* ---------- 页脚 ---------- */
.foot{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:1.4rem;
  padding:clamp(2rem,6vw,3.4rem) var(--gutter) clamp(1.6rem,4vw,2.4rem);
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
}

.foot::before{
  content:"";
  position:absolute;
  inset:-30% -10% auto -10%;
  height:70%;
  background:radial-gradient(ellipse at 20% 0%,rgba(212,165,116,.35),transparent 62%);
  pointer-events:none;
}

.foot__brand{
  margin:0;
  font-size:clamp(2rem,8vw,3.4rem);
  line-height:1.02;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--ochre);
}

.foot__col{
  display:flex;
  flex-direction:column;
  margin:0;
}

.foot__col a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.15rem 0;
  font-size:.94rem;
  color:rgba(245,230,200,.88);
  text-decoration:none;
}

.foot__col a:hover{color:var(--ochre)}

.foot__note{
  font-size:.82rem;
  color:rgba(245,230,200,.6);
  align-self:end;
}

/* ---------- 回到顶部 ---------- */
.totop{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:55;
  min-height:44px;
  padding:.5rem 1rem;
  border:1px solid rgba(245,230,200,.35);
  border-radius:999px;
  background:rgba(38,33,23,.88);
  color:var(--paper);
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}

.totop.is-on{opacity:1;transform:none;pointer-events:auto}

/* ---------- 揭示 ---------- */
.js .rv{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .62s ease,transform .62s ease;
}

.js .rv.in{opacity:1;transform:none}

/* ---------- 断点 ---------- */
@media (min-width:900px){
  .body{grid-template-columns:minmax(0,1fr) 302px}

  .rail{position:sticky;top:128px}

  .hero__art{
    position:absolute;
    right:clamp(1.4rem,8vw,7rem);
    top:clamp(1.4rem,7vh,3.2rem);
    width:178px;
    margin:0;
  }
}

@media (min-width:760px){
  .foot{grid-template-columns:1.7fr .8fr .8fr auto;align-items:start}
  .foot__note{text-align:right}
}

@media (max-width:759px){
  .foot__brand{grid-column:1/-1}
  .foot__note{grid-column:1/-1}
}

@media (max-width:899px){
  .rail{flex-direction:row;flex-wrap:wrap}
  .rail__box{flex:1 1 220px}
}

@media (max-width:520px){
  body{font-size:16.5px}
  .top__name{font-size:.98rem}
  .top__nav a{font-size:.9rem;min-height:40px}
  .hero{min-height:62vh}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .hero__art,.hero__title{animation:none}
  .totop{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}