/* Proper Job Bar & Restaurant Bangkok: tangerine walls, dark timber, red-striped Thai tablecloths. */
:root{
  --tan:#d9621c;      /* the orange walls */
  --tan-2:#f08a3c;
  --timber:#24160f;   /* dark wood chairs and bar */
  --timber-2:#3a2418;
  --cloth:#8f2a22;    /* red striped tablecloths */
  --lager:#e8b04a;    /* a pint under the lamps */
  --cream:#fbf0e1;
  --paper:#fff8ef;
  --ink:#1d120c;
  --muted:#6d5444;
  --r:14px;
  --stripe:repeating-linear-gradient(90deg,var(--cloth) 0 10px,#5c1914 10px 12px,var(--cloth) 12px 20px,#c9472f 20px 22px,var(--cloth) 22px 34px,#2a1a12 34px 36px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.6 "Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cloth)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--lager);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--lager);color:var(--ink);padding:.5rem 1rem;z-index:99}
.skip:focus{left:.5rem}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.script{font-family:Courgette,"Brush Script MT",cursive;font-weight:400}
.eyebrow{font:700 .8rem/1.2 "Alegreya Sans SC","Alegreya Sans",sans-serif;letter-spacing:.14em;text-transform:lowercase;color:var(--tan);margin:0 0 .4rem}
h1,h2,h3{line-height:1.15;margin:0 0 .6rem}
h2{font-family:Courgette,cursive;font-weight:400;font-size:clamp(2rem,7vw,3rem);color:var(--timber)}
h3{font-size:1.15rem}
.stripe{height:14px;background:var(--stripe)}

/* header */
.hdr{position:sticky;top:0;z-index:20;background:var(--timber);color:var(--cream);border-bottom:3px solid var(--tan)}
.hdr-in{display:flex;align-items:center;gap:.75rem;min-height:60px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--cream);line-height:1}
.brand .script{font-size:1.6rem;color:var(--tan-2)}
.brand small{font:700 .62rem/1.3 "Alegreya Sans SC",sans-serif;letter-spacing:.18em;color:#e9d6c2;text-transform:lowercase}
.nav{display:none;margin-left:auto;gap:1.4rem}
.nav a{color:var(--cream);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--lager)}
.call{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;background:var(--tan);color:#fff;text-decoration:none;font-weight:700;padding:.55rem .95rem;border-radius:999px;white-space:nowrap}
.call:hover{background:var(--tan-2)}
.call svg,.btn svg,.facts svg{width:18px;height:18px;fill:currentColor;flex:none}

/* hero */
.hero{position:relative;color:#fff;background:var(--timber);overflow:hidden}
.hero picture,.hero .bg{position:absolute;inset:0;width:100%;height:100%}
.hero .bg{object-fit:cover;object-position:60% 0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,11,6,.1) 0%,rgba(20,11,6,.35) 30%,rgba(20,11,6,.88) 58%,rgba(20,11,6,.96) 100%)}
.hero-in{position:relative;z-index:1;padding:15rem 0 2.2rem;display:grid;gap:1rem}
.hero-in>*{max-width:720px}
.hero h1{font-size:clamp(2.1rem,9vw,4.4rem);margin:0}
.hero h1 .script{display:block;color:var(--tan-2);font-size:1.25em;line-height:1;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hero h1 .sub{display:block;font:700 clamp(1rem,3.6vw,1.5rem)/1.2 "Alegreya Sans SC",sans-serif;letter-spacing:.08em;text-transform:lowercase;margin-top:.35rem;color:var(--cream)}
.hero .lede{font-size:1.2rem;max-width:34ch;margin:0;color:#fbe9d6}
.hero .lede q{font-style:italic}
.btns{display:flex;flex-wrap:wrap;gap:.6rem}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1.15rem;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent}
.btn.primary{background:var(--tan);color:#fff}
.btn.primary:hover{background:var(--tan-2)}
.btn.ghost{border-color:rgba(255,255,255,.7);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.credit{font-size:.72rem;line-height:1.3;color:rgba(255,255,255,.78)}
.hero .credit{position:absolute;right:.6rem;bottom:.45rem;z-index:1;margin:0}

/* quick facts band */
.facts{background:var(--tan);color:var(--ink)}
.facts ul{list-style:none;margin:0 auto;padding:1rem 0;display:grid;gap:.65rem}
.facts li{display:flex;gap:.6rem;align-items:flex-start;font-weight:500}
.facts li svg{margin-top:.2rem;fill:var(--timber)}
.facts a{color:var(--ink)}

section{scroll-margin-top:70px}
.block{padding:3.2rem 0}

/* about */
.about-grid{display:grid;gap:1.6rem}
.about p{margin:0 0 1rem}
.ticks{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.45rem}
.ticks li{padding-left:1.6rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.8rem;height:.8rem;border-radius:3px;background:var(--stripe)}
.src{font-size:.85rem;color:var(--muted)}
figure{margin:0}
.frame{position:relative;border-radius:var(--r);overflow:hidden;background:var(--timber-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .7rem .45rem;background:linear-gradient(transparent,rgba(15,8,4,.78));color:#fff;font-size:.85rem}
.frame figcaption .credit{display:block}

/* menu */
.menu{background:var(--timber);color:var(--cream);position:relative}
.menu h2{color:var(--tan-2)}
.menu .eyebrow{color:var(--lager)}
.menu-intro{max-width:60ch;color:#ead8c4;margin:0 0 1.6rem}
.menu-cols{display:grid;gap:1.4rem}
.board{background:var(--timber-2);border:1px solid #57382a;border-radius:var(--r);padding:1.3rem 1.2rem}
.board h3{font-family:Courgette,cursive;font-weight:400;font-size:1.6rem;color:var(--lager);margin-bottom:.8rem}
.items{list-style:none;margin:0;padding:0}
.items li{padding:.75rem 0;border-bottom:1px dashed #6a4535}
.items li:last-child{border-bottom:0}
.item-top{display:flex;align-items:baseline;gap:.5rem}
.item-top b{font-weight:700;color:#fff}
.item-top .dots{flex:1;border-bottom:2px dotted #7d5443;transform:translateY(-.3em);min-width:1rem}
.price{font-weight:700;color:var(--lager);white-space:nowrap}
.price.ask{color:#c8ae98;font-weight:500;font-style:italic}
.items .th{display:block;font-family:"Sarabun","Alegreya Sans",sans-serif;font-size:.9rem;color:#d9c2ac}
.items .note{display:block;font-size:.84rem;color:#bfa28c}
.menu-pics{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:1.4rem}
.menu-pics figure{border-radius:10px;overflow:hidden;aspect-ratio:1;position:relative}
.menu-pics img{width:100%;height:100%;object-fit:cover}
.menu-pics figcaption{position:absolute;left:0;right:0;bottom:0;padding:.9rem .4rem .3rem;font-size:.7rem;line-height:1.25;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.disclaimer{margin:1.4rem 0 0;padding:.8rem 1rem;border-left:4px solid var(--tan);background:rgba(255,255,255,.05);font-size:.92rem;color:#f2dfcb}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.gallery figure{aspect-ratio:3/4}
.gallery .wide{grid-column:span 2;aspect-ratio:3/2}

/* reviews */
.reviews{background:var(--cream)}
.rv-grid{display:grid;gap:1rem}
.rv{background:#fff;border-radius:var(--r);padding:1.2rem 1.2rem 1rem;border-top:6px solid transparent;border-image:var(--stripe) 1;box-shadow:0 6px 20px rgba(60,30,10,.08);margin:0}
.stars{color:var(--tan);letter-spacing:.12em;font-size:1.05rem}
.rv blockquote{margin:.5rem 0 .8rem;font-size:1.05rem}
.rv footer{font-size:.9rem;color:var(--muted)}
.rv footer b{color:var(--ink)}

/* visit */
.visit-grid{display:grid;gap:1.4rem}
.card{background:#fff;border:1px solid #efd9c2;border-radius:var(--r);padding:1.3rem}
.card address{font-style:normal;margin-bottom:1rem}
.hours{width:100%;border-collapse:collapse;font-size:1rem}
.hours th,.hours td{text-align:left;padding:.4rem 0;border-bottom:1px solid #f1e2d1}
.hours td{text-align:right;font-variant-numeric:tabular-nums}
.contact-list{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem}
.contact-list a{font-weight:700}
.mapcard{display:block;position:relative;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;min-height:240px;background:var(--timber)}
.mapcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.mapcard span{position:absolute;left:1rem;right:1rem;bottom:1rem;font-weight:700;font-size:1.15rem}
.mapcard small{display:block;font-weight:400;font-size:.9rem;color:#f5e3cf}
.mapcard .credit{position:absolute;top:.5rem;right:.6rem;left:auto;bottom:auto;font-size:.7rem}

/* footer */
.ftr{background:var(--timber);color:#e7d3bf;padding:2rem 0 5.5rem;font-size:.95rem}
.ftr .script{font-size:1.6rem;color:var(--tan-2)}
.ftr a{color:var(--lager)}
.ftr .nap{margin:.4rem 0 1rem}
.ftr .owner{font-size:.8rem;color:#bfa591;border-top:1px solid #4a3024;padding-top:1rem;margin:0}

/* sticky mobile call bar */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#4a3024;border-top:3px solid var(--tan)}
.mbar a{display:flex;justify-content:center;align-items:center;gap:.4rem;padding:.85rem;background:var(--timber);color:var(--cream);text-decoration:none;font-weight:700}
.mbar a:first-child{background:var(--tan);color:#fff}
.mbar svg{width:18px;height:18px;fill:currentColor}

/* 404 */
.lost{min-height:70vh;display:grid;place-items:center;text-align:center;padding:3rem 1rem}
.lost h1{font-family:Courgette,cursive;font-weight:400;font-size:3rem;color:var(--tan)}

@media (min-width:720px){
  .facts ul{grid-template-columns:repeat(3,1fr)}
  .menu-cols{grid-template-columns:1fr 1fr}
  .rv-grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .gallery .wide{grid-column:span 2}
  .visit-grid{grid-template-columns:1.1fr .9fr}
  .menu-pics{grid-template-columns:repeat(6,1fr)}
}
@media (min-width:1000px){
  .nav{display:flex}
  .call{margin-left:1.4rem}
  .hero-in{padding:17rem 0 3.4rem}
  .hero::after{background:linear-gradient(90deg,rgba(20,11,6,.92) 0%,rgba(20,11,6,.7) 38%,rgba(20,11,6,.15) 70%,rgba(20,11,6,.05) 100%),linear-gradient(180deg,transparent 60%,rgba(20,11,6,.6) 100%)}
  .hero .bg{object-position:50% 40%}
  .about-grid{grid-template-columns:1.05fr .95fr;align-items:center}
  .block{padding:4.5rem 0}
  .rv-grid{grid-template-columns:repeat(6,1fr)}
  .rv{grid-column:span 2}
  .rv:nth-child(4){grid-column:2/span 2}
  .gallery{grid-template-columns:repeat(4,1fr)}
  .mbar{display:none}
  .ftr{padding-bottom:2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}