/* ============================================================================
   web-06 · บ้านเรือนแก้ว บูทีค โฮเทล

   Concept: what people remember about an old teak house is not the furniture,
   it is the light coming through the louvred shutters and lying on the floor in
   bands. That is the whole visual system here. The ground is Lanna lacquer green
   — the colour lai-kham gold stencil is laid on, and the colour of the garden
   the house sits in — deliberately not the ivory-and-gold every boutique hotel
   in the world defaults to.

   Signature: shutter light (.shutterlight). One hero image per page, and the
   bands crawl across it on a 90-second loop — slow enough that a visitor never
   catches it moving, but the page is never quite still.
   ============================================================================ */

:root {
  --jade: #10231D;
  --jade-2: #17322A;
  --jasmine: #F5F0E6;
  --gold: #C8A253;
  --teak: #6B4A2E;
  --muted: #9AA79F;

  --container: 1160px;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(88px, 11vw, 152px);
}

body {
  background: var(--jade);
  color: var(--jasmine);
  font-family: 'Sarabun', system-ui, sans-serif;
  line-height: 1.85;
}

.mono, .num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
/* Charm is loud. It is allowed on h1 and h2 and nowhere else — put it on buttons or labels
   as well and the site turns into a restaurant menu. */
h1, h2 { font-family: 'Charm', cursive; font-weight: 700; line-height: 1.4; }
h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.25vw, 2.5rem); }
h3 { font-family: 'Sarabun', sans-serif; font-weight: 600; }

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--gap); }
.section--alt { background: var(--jade-2); }
.lede { color: var(--muted); max-width: 56ch; }
.center { text-align: center; margin-inline: auto; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.laikham { width: 240px; height: 12px; color: var(--gold); display: block; margin: 0 auto 24px; opacity: .8; }
.laikham--left { margin-inline: 0 auto; width: 160px; }

/* -- buttons: outline only ---------------------------------------------------- */
/* No solid buttons anywhere. A solid button reads as e-commerce, and this hotel takes
   enquiries by LINE rather than selling a room in a checkout. */
.btn { display: inline-block; padding: 15px 34px; text-decoration: none; border: 1px solid var(--gold); color: var(--gold); transition: background .32s, color .32s; }
.btn:hover { background: var(--gold); color: var(--jade); }
.btn--quiet { border-color: rgba(245,240,230,.35); color: var(--jasmine); }
.btn--quiet:hover { background: var(--jasmine); color: var(--jade); border-color: var(--jasmine); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.center .btn-row { justify-content: center; }

/* -- header ------------------------------------------------------------------ */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; transition: background .4s; }
.header.is-stuck { background: var(--jade); }
.header__inner { max-width: var(--container); margin-inline: auto; padding: 18px var(--pad); display: flex; align-items: center; gap: 28px; }
.brand { font-family: 'Charm', cursive; font-weight: 700; font-size: 1.5rem; color: var(--jasmine); text-decoration: none; }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav__link { color: var(--jasmine); text-decoration: none; font-size: .9375rem; transition: color .32s; }
.nav__link.is-active, .nav__link:hover { color: var(--gold); }
.burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.burger span { display: block; width: 22px; height: 2px; background: var(--jasmine); }
@media (max-width: 900px) {
  .burger { display: flex; }
  .nav { position: fixed; inset: 0; z-index: 40; flex-direction: column; justify-content: center; align-items: center; gap: 28px; margin: 0; background: var(--jade); transform: translateY(-100%); transition: transform .4s; }
  .nav.is-open { transform: none; }
  .nav__link { font-size: 1.375rem; }
  body.nav-open { overflow: hidden; }
}

/* -- SIGNATURE: shutter light -------------------------------------------------- */
/* 102° is the angle afternoon light comes through the louvres in November. The band pattern
   is twice the width of the element so it can translate a full period and loop seamlessly. */
.shutterlight { position: relative; overflow: hidden; }
.shutterlight > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shutterlight::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -100%; width: 300%;
  background: repeating-linear-gradient(102deg, transparent 0 34px, rgba(245,240,230,.10) 34px 46px);
  pointer-events: none;
  animation: shutter 90s linear infinite;
}
@keyframes shutter { to { transform: translateX(33.333%); } }
@media (prefers-reduced-motion: reduce) { .shutterlight::after { animation: none; } }
@media (max-width: 640px) {
  .shutterlight::after { background: repeating-linear-gradient(102deg, transparent 0 26px, rgba(245,240,230,.07) 26px 36px); }
}

/* -- hero ---------------------------------------------------------------------- */
.hero { position: relative; height: min(92vh, 860px); }
.hero .shutterlight { position: absolute; inset: 0; }
/* Two scrims, not one: the bottom carries the headline, and the top exists only so the
   fixed header stays legible when the hero happens to be bright sky up there. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(16,35,29,.72) 0%, transparent 22%),
    linear-gradient(to top, var(--jade) 0%, rgba(16,35,29,.55) 40%, transparent 72%);
}
.hero__text { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(56px,8vw,104px); }
.hero__text .wrap { max-width: var(--container); }
.hero h1 { max-width: 14ch; }
.hero__sub { color: var(--gold); font-size: 1.0625rem; }
.hero__desc { color: rgba(245,240,230,.82); max-width: 52ch; margin-top: 18px; }
.hero__meta { margin-top: 24px; color: var(--muted); font-size: .875rem; }

.hero--inner { height: min(64vh, 620px); }
.hero--rooms { height: min(56vh, 520px); }

/* -- room trio: doorway proportions ---------------------------------------------- */
.rooms3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 900px) { .rooms3 { grid-template-columns: 1fr; max-width: 420px; } }
.room3__img { aspect-ratio: 3/4; overflow: hidden; }
.room3__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease-out; }
.room3:hover .room3__img img { transform: scale(1.04); }
.room3 h3 { font-family: 'Charm', cursive; font-weight: 700; font-size: 1.5rem; margin-top: 16px; }
.room3__spec { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-size: .875rem; }
.room3__price { font-family: 'IBM Plex Mono', monospace; color: var(--gold); font-size: 1.125rem; margin-top: 6px; }
.room3__price small { color: var(--muted); font-size: .75rem; }

/* -- figures --------------------------------------------------------------------- */
.figs { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.fig { padding-inline: clamp(20px,4vw,44px); border-right: 1px solid rgba(200,162,83,.35); text-align: center; }
.fig:last-child { border-right: 0; }
.fig__n { display: block; font-family: 'IBM Plex Mono', monospace; font-size: clamp(1.75rem,3.5vw,2.5rem); color: var(--gold); line-height: 1.2; }
.fig__label { color: var(--muted); font-size: .875rem; }

/* -- bleed image ------------------------------------------------------------------- */
.bleed { width: 100%; height: clamp(280px,34vw,520px); object-fit: cover; display: block; }

/* -- amenity list ------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 45fr 55fr; gap: clamp(32px,5vw,64px); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } .two-col > .is-media { order: -1; } }
.amen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 640px) { .amen { grid-template-columns: 1fr; } }
.amen div { padding: 14px 0; border-bottom: 1px solid rgba(245,240,230,.14); }
.amen b { display: block; color: var(--gold); font-weight: 600; font-size: .9375rem; }
.amen span { color: var(--muted); font-size: .9375rem; }

/* -- neighbourhood list ---------------------------------------------------------------- */
.near { max-width: 720px; margin-top: 40px; }
.near__row { padding: 14px 0; border-bottom: 1px solid rgba(200,162,83,.2); }
.near__line { display: flex; align-items: baseline; gap: 10px; }
.near__name { font-weight: 600; }
.near__dots { flex: 1; border-bottom: 1px dotted rgba(200,162,83,.28); transform: translateY(-5px); }
.near__dist { font-family: 'IBM Plex Mono', monospace; color: var(--gold); white-space: nowrap; }
.near__note { color: var(--muted); font-size: .9375rem; }
@media (max-width: 560px) { .near__dots { display: none; } .near__line { justify-content: space-between; } }

.callout { background: var(--teak); padding: 28px; margin-top: 36px; max-width: 720px; }
.callout p { color: rgba(245,240,230,.92); }

/* -- timeline --------------------------------------------------------------------------- */
.timeline { max-width: 760px; margin-top: 40px; border-left: 1px solid rgba(200,162,83,.4); }
.tl { position: relative; padding: 0 0 32px 28px; }
.tl::before { content: ''; position: absolute; left: -4.5px; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.tl__year { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; color: var(--gold); }
.tl p { color: rgba(245,240,230,.84); max-width: 54ch; }

/* -- kept / changed / not done ------------------------------------------------------------ */
.cols3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 44px; }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; gap: 32px; } }
.col3 { padding-inline: clamp(0px,2.5vw,28px); border-right: 1px solid rgba(200,162,83,.25); }
.col3:first-child { padding-left: 0; } .col3:last-child { border-right: 0; padding-right: 0; }
@media (max-width: 900px) { .col3 { border-right: 0; padding-inline: 0; } }
.col3 h3 { font-family: 'Charm', cursive; font-weight: 700; font-size: 1.375rem; color: var(--gold); margin-bottom: 10px; }
.col3 p { color: rgba(245,240,230,.8); font-size: .9375rem; }

/* -- staff roster --------------------------------------------------------------------------- */
.roster { width: 100%; max-width: 880px; margin-top: 36px; }
.roster th, .roster td { padding: 16px 20px 16px 0; border-top: 1px solid rgba(245,240,230,.12); vertical-align: top; font-weight: 400; text-align: left; }
.roster tr:last-child td, .roster tr:last-child th { border-bottom: 1px solid rgba(245,240,230,.12); }
.roster .is-name { font-weight: 600; white-space: nowrap; }
.roster .is-role { color: var(--gold); }
.roster .is-note { color: rgba(245,240,230,.78); font-size: .9375rem; }
@media (max-width: 800px) {
  .roster, .roster tbody, .roster tr, .roster th, .roster td { display: block; width: auto; }
  .roster tr { padding: 14px 0; border-top: 1px solid rgba(245,240,230,.12); }
  .roster th, .roster td { padding: 0; border: 0; }
}

/* -- room detail blocks, alternating sides ---------------------------------------------------- */
.roomblock { display: grid; grid-template-columns: 52fr 48fr; gap: clamp(28px,4vw,56px); align-items: center; padding-block: clamp(48px,6vw,80px); }
.roomblock:nth-child(even) { direction: rtl; }
.roomblock:nth-child(even) > * { direction: ltr; }
@media (max-width: 900px) { .roomblock, .roomblock:nth-child(even) { grid-template-columns: 1fr; direction: ltr; } }
.roomblock__gal { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.roomblock__gal button { padding: 0; display: block; overflow: hidden; cursor: zoom-in; border: 0; background: none; }
.roomblock__gal button:first-child { grid-column: 1 / -1; }
.roomblock__gal img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease-out; }
.roomblock__gal button:hover img { transform: scale(1.03); }
.roomblock__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; }
.roomblock h2 { font-size: clamp(1.75rem,3vw,2.25rem); }
.roomblock__price { font-family: 'IBM Plex Mono', monospace; font-size: 1.5rem; color: var(--gold); }
.roomblock__spec { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-size: .875rem; margin-top: 4px; }
.roomblock__amen { color: rgba(245,240,230,.88); margin-top: 14px; }
.roomblock__desc { color: rgba(245,240,230,.78); max-width: 46ch; margin-top: 14px; }
.roomblock__cap { background: var(--jade-2); padding: 12px 16px; margin-top: 18px; font-size: .9375rem; color: var(--muted); }
.section--alt .roomblock__cap { background: var(--jade); }

/* -- lightbox ---------------------------------------------------------------------------------- */
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(16,35,29,.96); display: none; place-items: center; padding: clamp(16px,4vw,48px); }
.lb[open], .lb.is-open { display: grid; }
.lb__img { max-width: min(1100px, 100%); max-height: 82vh; object-fit: contain; }
.lb__close { position: absolute; top: 16px; right: 20px; font-size: 1.5rem; color: var(--jasmine); padding: 10px 14px; line-height: 1; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--jasmine); font-size: 2rem; padding: 16px 20px; line-height: 1; }
.lb__nav--prev { left: 8px; } .lb__nav--next { right: 8px; }
.lb__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: .8125rem; color: var(--muted); }

/* -- seasons / policy tables --------------------------------------------------------------------- */
.seasons { max-width: 760px; margin-top: 32px; }
.season { padding: 16px 0; border-bottom: 1px solid rgba(200,162,83,.2); }
.season__line { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.season__adj { font-family: 'IBM Plex Mono', monospace; color: var(--gold); white-space: nowrap; }
.season__bar { height: 4px; background: var(--gold); margin-top: 8px; width: var(--w); opacity: var(--o,1); }

.policy { width: 100%; max-width: 820px; margin-top: 32px; }
.policy th, .policy td { padding: 14px 20px 14px 0; border-top: 1px solid rgba(245,240,230,.12); vertical-align: top; text-align: left; font-weight: 400; }
.policy tr:last-child td, .policy tr:last-child th { border-bottom: 1px solid rgba(245,240,230,.12); }
.policy .is-k { color: var(--gold); font-weight: 600; white-space: nowrap; }
.policy .is-v { color: rgba(245,240,230,.82); }
@media (max-width: 700px) {
  .policy, .policy tbody, .policy tr, .policy th, .policy td { display: block; width: auto; }
  .policy tr { padding: 14px 0; border-top: 1px solid rgba(245,240,230,.12); }
  .policy th, .policy td { padding: 0; border: 0; }
}

/* -- contact ------------------------------------------------------------------------------------- */
.channels { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 44px; }
@media (max-width: 640px) { .channels { grid-template-columns: 1fr; } }
.channel { display: block; text-decoration: none; padding-top: 16px; border-top: 1px solid rgba(200,162,83,.35); transition: border-color .32s; }
.channel:hover, .channel:focus-visible { border-top-color: var(--gold); }
.channel__label { font-family: 'IBM Plex Mono', monospace; font-size: .75rem; color: var(--muted); }
.channel__value { display: block; font-weight: 600; font-size: 1.25rem; color: var(--jasmine); margin: 4px 0 6px; }
.channel__note { color: var(--muted); font-size: .9375rem; }

.locator { width: 100%; display: block; border: 1px solid rgba(200,162,83,.3); }
.dl__row { padding: 14px 0; border-top: 1px solid rgba(200,162,83,.22); }
.dl__row:last-child { border-bottom: 1px solid rgba(200,162,83,.22); }
.dl__label { font-weight: 600; }
.dl__row p:last-child { color: var(--muted); }
.dl__row .mono { color: var(--gold); }

.hours { max-width: 620px; margin: 24px auto 0; }
.hours tr { border-top: 1px solid rgba(245,240,230,.12); }
.hours tr:last-child { border-bottom: 1px solid rgba(245,240,230,.12); }
.hours th, .hours td { padding: 12px 0; font-weight: 400; text-align: left; }
.hours td { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.hours .is-key td { color: var(--gold); }

.dots { max-width: 720px; margin-top: 36px; }
.dot-item { padding: 18px 0; border-bottom: 1px solid rgba(200,162,83,.2); }
.dot-item h3 { display: flex; align-items: baseline; gap: 12px; font-size: 1.0625rem; }
.dot-item h3::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.dot-item p { color: var(--muted); margin-left: 20px; font-size: .9375rem; }

/* -- CTA band --------------------------------------------------------------------------------------- */
.band { background: var(--teak); padding-block: clamp(56px,7vw,88px); text-align: center; }
.band p { color: rgba(245,240,230,.88); max-width: 58ch; margin-inline: auto; }
.band .btn { border-color: var(--gold); color: var(--gold); }
.band .btn:hover { background: var(--gold); color: var(--teak); }
.band__ps { color: var(--gold); font-size: .9375rem; margin-top: 20px; }

/* -- footer ------------------------------------------------------------------------------------------ */
.footer { background: var(--jade); padding-block: 48px 28px; }
.footer__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; font-size: .9375rem; color: var(--muted); margin-top: 8px; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { font-family: 'Charm', cursive; font-weight: 700; font-size: 1.375rem; color: var(--jasmine); margin-bottom: 8px; }
.footer__label { color: var(--gold); font-size: .8125rem; margin-bottom: 6px; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(200,162,83,.18); font-size: .8125rem; }

/* -- mobile bar ---------------------------------------------------------------------------------------- */
.mobilebar { display: none; }
@media (max-width: 640px) {
  .mobilebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--jade); border-top: 1px solid var(--gold); }
  .mobilebar .btn { display: block; text-align: center; padding: 12px; }
  body { padding-bottom: 72px; }
}