/* Del & Dia — base styles. Most layout is inline in the page parts (converted from the approved mockups). */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#FAF5E9;color:#2A241D;font-family:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.65}
img{max-width:100%;height:auto}
a{color:#8A5A2B}a:hover{color:#2A241D}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #C98B29;outline-offset:2px}
.dd-site{overflow-x:clip}
.dd-skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#2A241D;color:#FAF5E9;padding:10px 16px;border-radius:8px}
.dd-skip:focus{left:8px}
[id]{scroll-margin-top:16px}
input,select,textarea,button{font:inherit}
form input[type=text],form input[type=email],form input[type=tel],form select,form textarea{width:100%;min-width:0;color:#2A241D}
form button[type=submit]:hover{filter:brightness(1.05)}
details>summary{list-style:revert}
.dd-prose{max-width:820px;margin:0 auto;padding:72px 24px 96px}
.dd-prose h1{font-family:'Noto Serif Thai',Georgia,serif;font-weight:600;font-size:44px;line-height:1.15;margin:0 0 8px}
.dd-prose h2{font-family:'Noto Serif Thai',Georgia,serif;font-weight:600;font-size:26px;line-height:1.3;margin:40px 0 10px}
.dd-prose p,.dd-prose li{color:#4A4238}
.dd-prose .dd-updated{color:#8A5A2B;font-weight:600;font-size:15px;margin:0 0 24px}

/* Header on small screens: nav becomes a horizontal scroller under the logo. */
@media (max-width:860px){
  .dd-header__inner{gap:10px!important}
  .dd-nav{order:3;width:100%;flex-wrap:nowrap!important;overflow-x:auto;gap:22px!important;padding:6px 0 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dd-nav::-webkit-scrollbar{display:none}
  .dd-nav a{white-space:nowrap}
}
@media (max-width:520px){
  .dd-header__cta{font-size:13px!important;padding:8px 12px!important}
  .dd-brand span{font-size:18px!important}
  .dd-brand img{width:40px!important;height:40px!important}
}

/* Typography + spacing scale-down for phones. */
@media (max-width:700px){
  body{font-size:16px}
  main h1{font-size:36px!important;line-height:1.18!important}
  main h2{font-size:29px!important;line-height:1.22!important}
  main h3{font-size:20px!important}
  main section>div,main section[style*="padding"]{padding-top:56px!important;padding-bottom:56px!important}
  main [style*="padding: 32px"]{padding:20px!important}
  main [style*="padding: 36px"]{padding:24px!important}
  main img[style*="height: 6"],main img[style*="height: 5"]{height:340px!important}
  main img[style*="height: 4"]{height:300px!important}
  main form{grid-template-columns:1fr!important}
  main [style*="position: sticky"]{position:static!important}
  main [style*="min-width: 210px"]{min-width:0!important;flex:1 1 100%}
  main [style*="flex: 0 0 260px"]{flex:1 1 100%!important;width:100%!important}
  main [style*="grid-template-columns: 3fr 2fr"]{grid-template-columns:1fr 1fr!important}
  main [style*="grid-template-columns: 3fr 2fr"] img{height:240px!important}
  .dd-prose h1{font-size:34px}
}
@media (max-width:420px){
  main [style*="minmax(330px"],main [style*="minmax(300px"]{grid-template-columns:1fr!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}