/* Nokhook House Cafe – apricot, chocolate and the pink/blue of its paper cups. Mobile first. */
:root{
  --cream:#fff7ee; --apricot:#f6c9a6; --peach:#fbe3cf; --choc:#3b2418; --cocoa:#6b4330;
  --amber:#f2a93b; --pink:#e7a3c4; --blue:#9cc3e4; --ink:#2a1a12; --muted:#7a5a48;
  --r:22px; --head:"Abril Fatface", Georgia, serif; --body:"Nunito","Mali",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--body)}
[lang="th"]{font-family:"Mali","Nunito",sans-serif}
img{max-width:100%;display:block}
a{color:var(--cocoa)}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;line-height:1.1;color:var(--choc);margin:0 0 .5em}
h2{font-size:clamp(2rem,6vw,3rem)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:9}
.kicker{font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--cocoa);margin:0 0 .6em}
.small{font-size:.9rem;color:var(--muted)}
.btn{display:inline-block;padding:.7em 1.15em;border-radius:999px;border:2px solid var(--choc);color:var(--choc);text-decoration:none;font-weight:800;background:#fff8;transition:transform .15s}
.btn:hover{transform:translateY(-2px)}
.btn.choc{background:var(--choc);color:var(--cream)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:1.2em 0}

/* header */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 16px;background:rgba(255,247,238,.94);backdrop-filter:blur(6px);border-bottom:3px dotted var(--apricot)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--choc)}
.brand b{display:block;font:400 1.25rem/1 var(--head)}
.brand small{display:block;font-size:.72rem;color:var(--muted);margin-top:3px}
.top nav{display:none}
.top .call{font-size:.85rem;padding:.55em .9em}
@media(min-width:900px){
  .top{padding:12px 32px}
  .top nav{display:flex;gap:22px}
  .top nav a{text-decoration:none;font-weight:800;color:var(--choc)}
  .top nav a:hover{color:var(--amber)}
}

/* hero */
.hero{display:grid;background:radial-gradient(circle at 15% 20%,var(--peach),var(--apricot) 70%);overflow:hidden}
.hero-txt{padding:34px 20px 26px}
.eyebrow{font-weight:800;font-size:.85rem;color:var(--cocoa);margin:0 0 .6em}
.hero h1{font-size:clamp(2.7rem,12vw,5.4rem);margin:0 0 .15em}
.hero h1 em{font-style:normal;color:#b5562b}
.hero .th{font-size:1.05rem;margin:.2em 0 .6em;color:var(--cocoa)}
.lead{font-size:1.12rem;max-width:34em}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--cream);border-radius:999px;padding:.3em .9em;font-weight:800;font-size:.85rem}
.chips li:first-child{background:var(--choc);color:var(--cream)}
.hero-img{margin:0;position:relative}
.hero-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
@media(min-width:900px){
  .hero{grid-template-columns:1fr 1.05fr;min-height:620px}
  .hero-txt{padding:70px 40px 60px max(40px,calc((100vw - 1180px)/2 + 20px));align-self:center}
  .hero-img{border-radius:0 0 0 220px;overflow:hidden}
  .hero-img img{aspect-ratio:auto}
}

/* figures + credits */
figure{margin:0}
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:var(--peach)}
.ph img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.gallery figcaption{font-size:.58rem;padding:1px 5px}}
figcaption{position:absolute;right:8px;bottom:8px;max-width:calc(100% - 16px);font-size:.66rem;line-height:1.3;background:rgba(42,26,18,.66);color:#fff;padding:2px 7px;border-radius:8px}

/* about */
.about{display:grid;gap:28px;padding-top:60px;padding-bottom:60px}
.about-txt p{max-width:38em}
.th-p{background:var(--peach);border-left:5px solid var(--amber);padding:12px 16px;border-radius:0 14px 14px 0}
.about-img{aspect-ratio:16/9;border:6px solid #fff;box-shadow:0 14px 30px -14px #6b433080;transform:rotate(1deg)}
@media(min-width:900px){.about{grid-template-columns:1fr 1fr;align-items:center}}

/* menu */
.menu{background:var(--choc);color:var(--cream);padding:64px 0;position:relative}
.menu::before,.menu::after{content:"";position:absolute;left:0;right:0;height:18px;background:radial-gradient(circle at 10px -2px,var(--cream) 11px,transparent 12px) 0 0/20px 18px repeat-x}
.menu::before{top:0}
.menu::after{bottom:0;transform:rotate(180deg)}
.menu h2,.menu h3,.menu h4{color:var(--cream)}
.menu .kicker{color:var(--apricot)}
.menu-top{display:grid;gap:22px}
.mcat{background:#ffffff10;border:1px solid #ffffff22;border-radius:var(--r);padding:20px}
.mcat h3{font-size:1.5rem}
.mcat h3 span,.sub span,.dish h4 span{font-family:"Mali",sans-serif;font-size:.62em;color:var(--apricot);font-weight:600}
.teas{list-style:none;margin:0;padding:0}
.teas li{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:12px 0;border-bottom:1px dashed #ffffff33}
.teas li:last-child{border:0}
.teas b{font-size:1.05rem}
.teas small{display:block;color:#f3dccb;font-size:.85rem;line-height:1.4;margin-top:3px}
.teas .p{font:400 1.35rem var(--head);color:var(--amber);white-space:nowrap}
.pills{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.pills li{background:var(--pink);color:var(--choc);border-radius:999px;padding:.3em .85em;font-weight:800;font-size:.9rem}
.pills li:nth-child(even){background:var(--blue)}
.menu .small{color:#f3dccb}
.sub{font-size:1.8rem;margin-top:38px}
.dishes{display:grid;gap:18px}
.dish{background:var(--cream);color:var(--ink);border-radius:var(--r);overflow:hidden;display:grid}
.dish .ph{border-radius:0;aspect-ratio:4/3}
.dish>div{padding:14px 18px 18px}
.dish h4{color:var(--choc);font-size:1.3rem;margin-bottom:.3em}
.dish h4 span{color:var(--cocoa)}
.dish p{margin:0;font-size:.95rem}
.dish .offer{margin-top:8px;display:inline-block;background:var(--amber);color:var(--choc);font-weight:800;border-radius:8px;padding:2px 8px;font-size:.85rem}
.price-note{margin:26px 0 0;font-size:.9rem;color:#f3dccb;font-style:italic}
@media(min-width:700px){.dishes{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.menu-top{grid-template-columns:1.25fr 1fr}.dishes{grid-template-columns:repeat(3,1fr)}}

/* gallery */
.gallery-sec{padding-top:64px;padding-bottom:64px}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-auto-rows:170px}
.gallery .tall{grid-row:span 2}
.gallery .ph:nth-child(3n+1){border-radius:var(--r) var(--r) var(--r) 60px}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px}}

/* reviews */
.reviews{background:linear-gradient(135deg,#fbe3cf 0%,#f4d4e4 55%,#dbe9f6 100%);padding:64px 0}
.rating{font-weight:800}
.revs{display:grid;gap:16px}
.rev{margin:0;background:#fff;border-radius:var(--r);padding:20px 22px;box-shadow:0 10px 24px -16px #6b433080}
.rev p{margin:0 0 .6em}
.stars{color:var(--amber);font-size:1.15rem;letter-spacing:2px}
.rev footer{font-size:.9rem;color:var(--muted)}
.rev cite{font-style:normal;font-weight:800;color:var(--choc)}
@media(min-width:900px){.revs{grid-template-columns:repeat(3,1fr)}.rev:first-child{grid-column:span 2}}

/* visit */
.visit{display:grid;gap:28px;padding-top:64px;padding-bottom:64px}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px}
.visit dt{font-weight:800;color:var(--cocoa)}
.visit dd{margin:0}
.hours{list-style:none;padding:14px 18px;margin:0;background:var(--peach);border-radius:var(--r)}
.hours li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dotted var(--apricot)}
.hours li:last-child{border:0}
.visit-img .ph{aspect-ratio:3/4;max-height:620px}
@media(min-width:900px){.visit{grid-template-columns:1.1fr .9fr;align-items:start}}

/* 404 */
.nf{text-align:center;padding:90px 20px}
.nf img{width:90px;height:90px;margin:0 auto 16px}

/* footer */
.foot{background:var(--choc);color:var(--cream);padding:34px 20px 26px;font-size:.92rem}
.foot a{color:var(--apricot)}
.foot .nap{max-width:1180px;margin:0 auto;display:grid;gap:12px;grid-template-columns:auto 1fr}
.foot .nap img{width:44px;height:44px;background:var(--cream);border-radius:50%;padding:4px}
.foot .fh{grid-column:1/-1;margin:0;color:#f3dccb}
@media(min-width:900px){.foot .nap{grid-template-columns:auto 1fr auto}.foot .fh{grid-column:auto}}
.restore-note{max-width:1180px;margin:20px auto 0;font-size:.78rem;color:#e6cdbb;border-top:1px solid #ffffff22;padding-top:14px}