@font-face{font-family:Cormorant;src:url(fonts/CormorantGaramond.ttf);font-weight:300 700}
@font-face{font-family:Trirong;src:url(fonts/Trirong-Regular.ttf);font-weight:400}
@font-face{font-family:Trirong;src:url(fonts/Trirong-Medium.ttf);font-weight:500}
@font-face{font-family:Trirong;src:url(fonts/Trirong-SemiBold.ttf);font-weight:600}
@font-face{font-family:Sarabun;src:url(fonts/Sarabun-Regular.ttf);font-weight:400}
@font-face{font-family:Sarabun;src:url(fonts/Sarabun-SemiBold.ttf);font-weight:600}
:root{--paper:#f3ede1;--card:#faf6ee;--line:#dccfb4;--gold:#a8823c;--gold2:#c9a24e;--tx:#3b2a1a;--mut:#6f5d4a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;color:var(--tx);font:400 17px/1.8 Sarabun,sans-serif;background-color:var(--paper);
background-image:radial-gradient(rgba(120,90,50,.06) 1px,transparent 1px),radial-gradient(rgba(120,90,50,.04) 1px,transparent 1px),radial-gradient(ellipse at 50% 0%,#fbf7ef,transparent 70%);
background-size:7px 7px,13px 13px,100% 100%;background-position:0 0,3px 5px,0 0}
h1,h2,h3{font-family:Cormorant,Trirong,serif;font-weight:500;line-height:1.4;margin:0 0 .5em;color:var(--tx)}
a{color:var(--gold)}.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.wm{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--gold)}
.wm b{font:500 34px/1 Cormorant,serif;letter-spacing:.32em;margin-right:-.32em;background:linear-gradient(180deg,#c9a24e,#8a6428);-webkit-background-clip:text;background-clip:text;color:transparent}
.wm i{font:500 10px/1.6 Cormorant,serif;font-style:normal;letter-spacing:.34em;margin-right:-.34em;color:var(--mut)}
.wm img{width:78px;margin-top:4px}
.wm.big b{font-size:clamp(64px,14vw,104px)}.wm.big i{font-size:clamp(12px,2.6vw,16px)}.wm.big img{width:140px;margin-top:10px}
.wm .th{font:400 16px Trirong,serif;color:var(--tx);letter-spacing:.06em;margin-top:6px}
header.top{border-bottom:1px solid var(--line);background:rgba(243,237,225,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:8px}
.pill{font:500 12px Trirong,serif;color:var(--gold);border:1px solid var(--gold2);border-radius:99px;padding:2px 12px}
.hero{padding:40px 0 48px;text-align:center}
.hero .grid{align-items:center}
.hero-img{width:100%;max-width:440px;margin:0 auto;display:block;border-radius:6px;box-shadow:0 18px 40px -18px rgba(70,45,15,.45);border:1px solid var(--line)}
.hero h1{font:500 clamp(24px,5vw,34px)/1.5 Trirong,serif;margin:22px 0 10px}
.lead{color:var(--mut);max-width:560px;margin:0 auto}
.btn{display:inline-block;font:500 16px Trirong,serif;padding:11px 26px;border-radius:2px;text-decoration:none;border:1px solid var(--gold);cursor:pointer;letter-spacing:.03em}
.btn.pri{background:linear-gradient(180deg,#c9a24e,#9c7633);color:#fffaf0}.btn.sec{background:transparent;color:var(--gold)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;justify-content:center}
section{padding:56px 0}
.div{display:block;width:120px;margin:0 auto 28px}
h2{text-align:center;font:500 clamp(24px,4vw,32px) Trirong,serif}
h2 small{display:block;font:500 13px Cormorant,serif;letter-spacing:.4em;color:var(--gold);margin-bottom:4px}
.grid{display:grid;gap:18px;grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:24px;box-shadow:0 1px 0 #fff inset}
.card h3{font:500 19px Trirong,serif;color:var(--gold)}
.num{font:500 34px/1 Cormorant,serif;color:var(--gold2);margin-bottom:8px}
.note{border:1px solid var(--gold2);background:rgba(201,162,78,.10);padding:16px 20px;border-radius:4px;margin-top:22px}
.note strong{color:#7a5520}
.feature{align-items:center}
.feature img{width:100%;max-width:380px;margin:0 auto;display:block;border-radius:4px;border:1px solid var(--line)}
.banner{background:var(--card);border:1px solid var(--gold2);outline:1px solid var(--line);outline-offset:6px;border-radius:4px;padding:30px 24px;text-align:center}
.banner .tag{display:inline-block;font:500 14px Trirong,serif;color:#fffaf0;background:#8a6428;border-radius:2px;padding:4px 14px;margin-bottom:12px}
form.sub{display:flex;flex-direction:column;gap:10px;margin:18px auto 0;max-width:560px}
form.sub input{font:16px Sarabun;padding:12px 14px;border-radius:2px;border:1px solid var(--line);background:#fffdf8;color:var(--tx)}
.small{font-size:14px;color:var(--mut)}
footer{border-top:1px solid var(--line);padding:32px 0;color:var(--mut);font-size:14px;text-align:center}
footer nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin:14px 0 8px}
.doc{padding:40px 0 64px}.doc h1{font:500 30px Trirong,serif;text-align:center}.doc h2{text-align:left;font-size:21px;color:var(--gold);margin-top:28px}
.draft{background:rgba(201,162,78,.12);border:1px dashed var(--gold);padding:12px 16px;border-radius:4px;font-size:15px}
@media(min-width:760px){.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c2{grid-template-columns:repeat(2,1fr)}form.sub{flex-direction:row}form.sub input{flex:1}
.hero{padding:64px 0;text-align:left}.hero .grid{grid-template-columns:1.1fr 1fr;gap:48px}.hero .lead{margin:0}.hero .actions{justify-content:flex-start}.hero .wm{align-items:center}
.feature{grid-template-columns:1fr 1.2fr!important;gap:40px}}
img{height:auto}.hero-img{max-height:640px;width:auto;max-width:100%}
/* saffron accent — text uses darker saffron for WCAG AA */
:root{--saf:#E07B00;--saf-d:#A85600;--saf-t:#9E5200}
a{color:var(--saf-t)}a:hover{color:#6e3900}
h2 small{color:var(--saf-t);font-weight:600}
h2::after{content:"";display:block;width:56px;height:2px;background:var(--saf);margin:10px auto 0}
.doc h2::after{margin-left:0}
.card h3{color:var(--saf-t)}.num{color:var(--saf)}
.card{transition:border-color .2s,transform .2s}.card:hover{border-color:var(--saf);transform:translateY(-2px)}
.btn.pri{background:var(--saf-d);border-color:var(--saf);color:#fffaf0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.btn.pri:hover{background:var(--saf);color:#2a1a0a}
.btn.sec{color:var(--saf-t);border-color:var(--saf)}.btn.sec:hover{background:rgba(224,123,0,.1)}
.btn:focus-visible,input:focus-visible{outline:2px solid var(--saf);outline-offset:2px}
.pill{color:var(--saf-t);border-color:var(--saf)}
.note{border-color:var(--saf);border-left-width:4px}.note strong{color:var(--saf-t)}
.banner{background:linear-gradient(135deg,#E8860A,#D9730D);border-color:#b86200;outline-color:var(--gold2);color:#2a1a0a}
.banner h2{color:#2a1a0a}.banner h2::after{background:#fffaf0}
.banner .tag{background:#2a1a0a;color:#ffd9a0}
.banner .small{color:#2a1a0a}.banner a{color:#2a1a0a;font-weight:600}
.banner .btn.pri{background:#2a1a0a;border-color:#2a1a0a;color:#fffaf0}.banner .btn.pri:hover{background:#4a2e12;color:#fffaf0}
.banner input{border-color:#b86200}
.draft{border-color:var(--saf);background:rgba(224,123,0,.08)}
footer a{color:var(--saf-t)}