/* ของใช้ร่วม 3 แบบ: ฟอนต์ · สี CI (docs/ci.html) · reset · reveal */
@font-face{font-family:"Chakra Petch";src:url(fonts/ChakraPetch-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(fonts/ChakraPetch-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(fonts/ChakraPetch-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* ชั้นแบรนด์ — ห้ามแก้ */
  --ink:#120D0B; --ink-2:#1B1714; --ink-3:#241F18;
  --bone:#E3D6BB; --bone-hi:#F0E6D2; --bone-mid:#BFAE8D; --bone-dark:#8C7A5F;
  --blood:#5B2620;
  --crystal:#6FC0B4; --crystal-hi:#C8FFF6;
  --devour:#9B6FE0; --devour-deep:#4F2C88; --devour-black:#24103D;
  /* ชั้นความหมาย — สีโซน */
  --earth:#C9A24A; --water:#5A9BB5; --fire:#B8503A; --wind:#4E9B6B;
  --accent:#C2572E;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Chakra Petch",system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* เลื่อนถึงแล้วค่อยโผล่ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important}
}