/* DIVA system layer: one visual language for desktop and mobile. */
:root{
  --font-ui:'Noto Sans Thai','DM Sans',sans-serif;
  --font-display:'Noto Serif Thai','Playfair Display',serif;
  --page-gutter:clamp(22px,5vw,80px);
  --content-width:1280px;
  --gold:#e3b04b;
  --gold-soft:#f6d98c;
  --ink:#f5ede1;
  --black:#080705;
  --cream:#0c0a08;
  --cream-2:#14110e;
}

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body,
button,
input,
textarea,
select{
  font-family:var(--font-ui)!important;
  font-synthesis:none;
}

body{
  font-size:16px;
  line-height:1.55;
  letter-spacing:.005em;
}

*{
  min-width:0;
}

img,
svg,
video,
canvas{
  display:block;
  max-width:100%;
}

a,
button{
  -webkit-tap-highlight-color:transparent;
}

.site,
#app,
main,
section,
footer{
  width:100%;
  max-width:100%;
  min-width:0;
}

main{
  overflow:hidden;
}

.site-header{
  width:100%;
  max-width:100vw;
  padding-inline:var(--page-gutter);
  gap:clamp(14px,2.4vw,34px);
}

.brand{
  font-family:'DM Sans','Noto Sans Thai',sans-serif!important;
  font-weight:700;
  letter-spacing:-.105em;
  line-height:.78;
}

.brand small{
  font-family:var(--font-ui)!important;
  font-weight:600;
  letter-spacing:.22em;
  white-space:nowrap;
}

.site-header nav{
  max-width:100%;
}

.site-header nav a,
.header-book,
.button,
.under-link,
.eyebrow,
.hero-kicker,
.hero-meta,
.signal-bar,
.section-index,
.tile-no,
.room-tile strong,
.room-tile a,
.menu-item>span,
.menu-item>b,
.article-tag,
.footer-label,
.footer-link{
  font-family:var(--font-ui)!important;
}

.site-header nav a,
.header-book,
.button{
  font-weight:700;
}

.header-book,
.button{
  min-height:48px;
}

.hero-panel h1,
.dark-head h1,
.light-head h1,
.home-intro h2,
.spotlight h2,
.home-end h2,
.menu-pair h2,
.contact-copy h2,
.room-tile h2,
.deal h2,
.journal-grid h2,
.contact-wrap form h2,
.success h2,
.menu-poster span,
.answer-band h2,
.room-facts h2,
.menu-facts h2,
.offer-answer h2,
.local-guide h2,
.contact-answer h2,
.room-fact-grid h3{
  font-family:var(--font-display)!important;
  font-weight:700;
  text-wrap:balance;
}

.hero-panel h1,
.dark-head h1,
.light-head h1,
.home-intro h2,
.spotlight h2,
.home-end h2,
.answer-band h2,
.room-facts h2,
.offer-answer h2,
.local-guide h2,
.contact-answer h2{
  letter-spacing:-.065em;
}

.hero-panel h1 em,
.dark-head h1 em,
.light-head h1 em,
.home-intro h2 em,
.spotlight h2 em,
.home-end h2 em,
.menu-pair h2 em,
.contact-copy h2 em,
.answer-band h2 em,
.room-facts h2 em,
.local-guide h2 em,
.contact-answer h2 em{
  font-family:var(--font-display)!important;
  font-weight:700;
}

.hero-panel h1,
.dark-head h1,
.light-head h1,
.home-intro h2,
.spotlight h2,
.home-end h2,
.answer-band h2,
.room-facts h2,
.offer-answer h2,
.local-guide h2,
.contact-answer h2{
  overflow-wrap:anywhere;
}

.home-hero{
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  min-height:clamp(660px,88vh,920px);
  height:auto;
}

.hero-image,
.hero-panel{
  min-width:0;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-panel{
  padding:clamp(112px,12vw,170px) clamp(24px,6vw,92px) clamp(54px,7vw,92px) clamp(24px,5vw,72px);
}

.hero-panel h1{
  font-size:clamp(3.7rem,7vw,7.2rem);
  line-height:.9;
}

.hero-lead,
.dark-head>p,
.light-head>p:last-child,
.home-intro>div:nth-child(2)>p,
.spotlight-copy>p:not(.eyebrow),
.room-note,
.room-fact-grid p,
.menu-item p,
.menu-pair p,
.deal p:not(.eyebrow),
.journal-grid p,
.contact-copy>p:not(.eyebrow),
.faq-list details p,
.local-guide p:not(.eyebrow),
.contact-answer p:last-child{
  overflow-wrap:anywhere;
}

.hero-actions{
  flex-wrap:wrap;
}

.signal-bar{
  white-space:normal;
  text-align:center;
  line-height:1.35;
}

.home-intro,
.spotlight,
.answer-band,
.faq-section,
.room-facts,
.local-guide,
.contact-answer{
  grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
}

.intro-cards,
.room-fact-grid,
.journal-grid{
  min-width:0;
}

.intro-cards article,
.room-fact-grid article,
.journal-grid article,
.menu-item,
.deal{
  min-width:0;
}

.home-intro h2,
.spotlight h2,
.home-end h2{
  font-size:clamp(3rem,5vw,5.8rem);
}

.dark-head,
.light-head{
  padding-inline:var(--page-gutter);
}

.dark-head h1,
.light-head h1{
  font-size:clamp(3.7rem,7vw,7.5rem);
}

.dark-head>p,
.light-head>p:last-child{
  max-width:42ch;
}

.room-showcase{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.room-tile h2{
  font-size:clamp(1.85rem,3vw,2.35rem);
}

.menu-wrap{
  grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
}

.menu-item{
  grid-template-columns:38px minmax(0,1fr) auto;
}

.menu-item>b{
  white-space:nowrap;
}

.deal{
  grid-template-columns:55px minmax(0,1fr) auto;
}

.contact-wrap{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.contact-wrap form,
.contact-wrap input{
  min-width:0;
  max-width:100%;
}

footer{
  grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
}

@media (min-width:801px) and (max-width:1100px){
  .site-header{
    gap:16px;
  }
  .header-status{
    display:none;
  }
  .site-header nav{
    gap:0;
  }
  .site-header nav>a:not(.mobile-nav-cta){
    padding-inline:8px;
    font-size:.7rem;
  }
  .home-intro{
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  }
  .home-intro>.intro-cards{
    grid-column:2;
  }
  .menu-wrap{
    grid-template-columns:minmax(0,1fr) minmax(220px,.45fr);
    gap:5vw;
  }
}

@media (max-width:800px){
  :root{
    --page-gutter:clamp(18px,6vw,28px);
  }

  html{
    scroll-padding-top:78px;
  }

  .site-header{
    height:78px;
    padding-inline:var(--page-gutter);
  }

  .brand{
    font-size:clamp(1.8rem,8vw,2.15rem);
  }

  .brand small{
    font-size:.39rem;
    letter-spacing:.18em;
  }

  .site-header nav{
    max-width:none;
    width:100%;
  }

  .home-hero{
    width:100%;
    min-height:0;
    padding-top:78px;
  }

  .hero-image{
    width:100%;
    height:clamp(250px,72vw,390px);
    min-height:250px;
  }

  .hero-panel{
    width:100%;
    padding:56px var(--page-gutter) 38px;
  }

  .hero-panel h1{
    max-width:100%;
    font-size:clamp(3.35rem,15vw,5.2rem);
    line-height:.92;
  }

  .hero-lead{
    max-width:100%;
    margin:24px 0 28px;
    line-height:1.8;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    width:100%;
  }

  .hero-actions .button,
  .hero-actions .under-link{
    width:100%;
  }

  .hero-actions .under-link{
    justify-content:center;
    padding:12px 0 10px;
  }

  .hero-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:34px;
    padding-top:17px;
    line-height:1.45;
  }

  .hero-meta span+span{
    border-left:0;
    padding-left:0;
  }

  .hero-meta span:last-child{
    grid-column:1/-1;
  }

  .signal-bar{
    min-height:46px;
    padding:12px var(--page-gutter);
    gap:9px 14px;
    justify-content:center;
    font-size:.58rem;
  }

  .home-intro,
  .spotlight,
  .answer-band,
  .faq-section,
  .room-facts,
  .local-guide,
  .contact-answer{
    width:100%;
    padding-inline:var(--page-gutter);
  }

  .home-intro{
    display:block;
    padding-top:76px;
    padding-bottom:76px;
  }

  .home-intro h2,
  .spotlight h2,
  .home-end h2,
  .answer-band h2,
  .room-facts h2,
  .local-guide h2{
    font-size:clamp(2.85rem,13vw,4rem);
    line-height:.94;
  }

  .intro-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:58px;
  }

  .intro-cards h3{
    font-size:clamp(1.15rem,5.2vw,1.45rem);
    overflow-wrap:anywhere;
  }

  .spotlight{
    display:flex;
    flex-direction:column;
    gap:36px;
    padding-top:76px;
    padding-bottom:76px;
  }

  .price-card{
    width:100%;
    min-height:270px;
  }

  .home-end{
    padding:78px var(--page-gutter);
  }

  .dark-head,
  .light-head{
    padding:122px var(--page-gutter) 62px;
  }

  .dark-head h1,
  .light-head h1{
    max-width:100%;
    font-size:clamp(3.2rem,14vw,5rem);
    line-height:.94;
  }

  .dark-head>p,
  .light-head>p:last-child{
    max-width:100%;
    margin-top:26px;
    line-height:1.8;
  }

  .room-showcase{
    display:block;
    width:100%;
    padding:10px;
  }

  .room-tile{
    width:100%;
    min-height:296px;
    padding:25px var(--page-gutter);
  }

  .room-tile+.room-tile{
    margin-top:10px;
  }

  .room-tile h2{
    max-width:100%;
    font-size:clamp(1.75rem,8vw,2.15rem);
  }

  .room-note{
    display:block;
    width:auto;
    margin:0 10px 10px;
    padding:23px var(--page-gutter);
  }

  .room-note b{
    display:block;
    margin-bottom:10px;
    white-space:normal;
  }

  .room-facts,
  .answer-band,
  .faq-section,
  .local-guide{
    display:block;
    padding-top:76px;
    padding-bottom:76px;
  }

  .answer-copy,
  .faq-intro,
  .room-fact-grid,
  .local-guide>div+div{
    margin-top:38px;
  }

  .menu-wrap{
    display:block;
    width:100%;
    padding:10px var(--page-gutter) 78px;
  }

  .menu-category+.menu-category{
    margin-top:54px;
  }

  .menu-item{
    grid-template-columns:28px minmax(0,1fr) auto;
    gap:10px;
    padding:20px 0;
  }

  .menu-item h3{
    font-size:clamp(.98rem,4.5vw,1.08rem);
    overflow-wrap:anywhere;
  }

  .menu-item p{
    font-size:.78rem;
    line-height:1.55;
  }

  .menu-item>b{
    font-size:.94rem;
  }

  .menu-pair{
    padding:28px 22px;
  }

  .menu-pair h2{
    font-size:clamp(2.1rem,11vw,3rem);
  }

  .menu-facts{
    margin-top:54px;
  }

  .menu-facts h2{
    font-size:clamp(2rem,10vw,2.65rem);
  }

  .menu-poster{
    width:calc(100% - 10px);
    min-height:280px;
    margin:44px 5px 0;
    transform:none;
  }

  .menu-poster span{
    font-size:clamp(2.8rem,14vw,4rem);
  }

  .deals,
  .journal-grid,
  .contact-wrap{
    width:100%;
    padding-inline:var(--page-gutter);
  }

  .deal{
    grid-template-columns:30px minmax(0,1fr);
    gap:14px;
    padding:28px 0;
  }

  .deal.featured{
    margin-inline:calc(var(--page-gutter) * -1);
    padding-inline:var(--page-gutter);
  }

  .deal h2,
  .journal-grid h2{
    font-size:clamp(1.8rem,8vw,2.35rem);
    line-height:1.08;
  }

  .deal .button{
    grid-column:2;
    justify-self:start;
    max-width:100%;
  }

  .offer-answer,
  .contact-answer{
    padding-top:76px;
    padding-bottom:80px;
  }

  .offer-answer h2,
  .contact-answer h2{
    font-size:clamp(2.5rem,11vw,3.5rem);
  }

  .journal-grid{
    display:block;
    padding-top:0;
    padding-bottom:76px;
  }

  .journal-grid article{
    width:100%;
    min-height:0;
    padding:28px 22px;
    margin-bottom:14px;
  }

  .contact-wrap{
    display:block;
    padding-top:0;
    padding-bottom:76px;
  }

  .contact-copy{
    margin-bottom:42px;
  }

  .contact-copy h2{
    font-size:clamp(2.5rem,11vw,3.4rem);
  }

  .contact-wrap form{
    width:100%;
    padding:28px var(--page-gutter);
  }

  .form-row{
    display:block;
  }

  .contact-wrap .button{
    width:100%;
  }

  .social-links{
    gap:8px;
  }

  .social-links a{
    min-height:42px;
  }

  footer{
    display:block;
    padding:50px var(--page-gutter);
  }

  footer>div+div{
    margin-top:28px;
  }
}

@media (max-width:380px){
  .intro-cards{
    grid-template-columns:minmax(0,1fr);
  }

  .hero-meta{
    grid-template-columns:minmax(0,1fr);
  }

  .hero-meta span:last-child{
    grid-column:auto;
  }

  .menu-item{
    grid-template-columns:24px minmax(0,1fr);
  }

  .menu-item>b{
    grid-column:2;
    justify-self:start;
    margin-top:3px;
  }
}

/* Keep the mobile viewport locked to the device width. */
@media (max-width:800px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
    overscroll-behavior-x:none;
    touch-action:pan-y;
  }

  #app,
  .site,
  main,
  main>section,
  footer{
    width:100%;
    max-width:100%;
    overflow-x:clip;
  }

  .site-header,
  .site-header nav{
    max-width:100vw;
  }
}