:root { --cream:#f4eedf; --cream2:#fffaf0; --ink:#302619; --muted:#786b5b; --gold:#9f7b3f; --dark:#191511; --line:rgba(48,38,25,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Noto Sans Thai",system-ui,sans-serif; letter-spacing:0; }
img { display:block; width:100%; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:20; min-height:70px; padding:12px clamp(18px,4vw,58px); display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(244,238,223,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.brand { display:grid; gap:2px; }
.brand-name { font:700 24px/1 "Playfair Display",serif; }
.brand-sub { color:var(--muted); font-size:12px; font-weight:600; }
.nav { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:700; }
.nav a { white-space:nowrap; }
.nav .is-active { color:var(--gold); }
.menu-toggle { display:none; width:42px; height:38px; padding:0; border:1px solid var(--line); background:transparent; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.menu-toggle span { width:18px; height:2px; background:var(--ink); }
.portfolio-hero { min-height:calc(88vh - 70px); display:grid; grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr); align-items:center; gap:clamp(34px,7vw,110px); padding:clamp(54px,8vw,110px) clamp(18px,7vw,110px); background:var(--cream2); }
.portfolio-hero > div { max-width:620px; }
.eyebrow { margin:0 0 12px; color:var(--gold); font-size:13px; font-weight:800; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:24px; font:700 clamp(48px,6.8vw,92px)/1.04 "Playfair Display","Noto Sans Thai",serif; }
h2 { margin-bottom:16px; font-size:clamp(30px,4.2vw,56px); line-height:1.22; }
p { color:var(--muted); font-size:16px; line-height:1.8; }
.portfolio-hero p:not(.eyebrow) { max-width:550px; font-size:18px; }
.hero-work { position:relative; margin:0; aspect-ratio:4/5; overflow:hidden; }
.hero-work::before { content:"REAL ORDER"; position:absolute; z-index:1; top:18px; left:18px; padding:8px 10px; color:#fff; background:rgba(25,21,17,.72); font-size:11px; font-weight:800; }
.hero-work img { height:100%; object-fit:cover; }
.button { display:inline-flex; min-height:48px; margin-top:12px; padding:12px 20px; align-items:center; justify-content:center; border:1px solid var(--ink); font-weight:800; }
.button.primary { color:var(--cream2); background:var(--ink); }
.button.secondary { background:transparent; }
.trust-band { display:grid; grid-template-columns:repeat(3,1fr); background:var(--dark); color:#fff; padding:28px clamp(18px,7vw,110px); }
.trust-band > div { display:flex; align-items:center; gap:16px; padding:8px clamp(14px,3vw,44px); border-right:1px solid rgba(255,255,255,.2); }
.trust-band > div:first-child { padding-left:0; }
.trust-band > div:last-child { border:0; }
.trust-band b { color:#c5a368; font:700 28px "Playfair Display",serif; }
.trust-band span { display:grid; }
.trust-band strong { font-size:15px; }
.trust-band small { margin-top:3px; color:#cfc5b7; }
.gallery-section { padding:clamp(70px,9vw,120px) clamp(18px,5vw,78px); }
.section-heading { max-width:760px; margin:0 auto 34px; text-align:center; }
.filters { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.filters button { min-height:42px; padding:8px 15px; border:1px solid var(--line); color:var(--ink); background:transparent; font:700 14px "Noto Sans Thai",sans-serif; cursor:pointer; }
.filters button.is-active { color:#fff; background:var(--ink); border-color:var(--ink); }
.gallery { columns:4 260px; column-gap:14px; max-width:1440px; margin:auto; }
.work { position:relative; display:block; width:100%; margin:0 0 14px; padding:0; border:0; background:#ddd; overflow:hidden; cursor:zoom-in; break-inside:avoid; }
.work img { min-height:220px; max-height:520px; object-fit:cover; transition:transform .35s ease; }
.work:hover img { transform:scale(1.025); }
.work::after { content:"ดูภาพ"; position:absolute; right:10px; bottom:10px; padding:6px 9px; color:#fff; background:rgba(25,21,17,.72); font-size:11px; font-weight:700; opacity:0; transition:opacity .2s; }
.work:hover::after { opacity:1; }
.work[hidden] { display:none; }
.closing { padding:clamp(74px,10vw,130px) 18px; text-align:center; color:#fff; background:var(--dark); }
.closing h2 { color:#fff; }
.closing p:not(.eyebrow) { max-width:620px; margin-left:auto; margin-right:auto; color:#cfc5b7; }
.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.closing .primary { color:var(--dark); background:#fff; border-color:#fff; }
.closing .secondary { color:#fff; border-color:#fff; }
footer { padding:24px 18px; text-align:center; color:var(--muted); font-size:12px; }
dialog { width:min(94vw,1100px); max-height:92vh; padding:0; border:0; background:#111; }
dialog::backdrop { background:rgba(0,0,0,.86); }
dialog img { max-height:88vh; object-fit:contain; }
dialog button { position:absolute; z-index:2; top:10px; right:10px; width:42px; height:42px; border:0; color:#fff; background:rgba(0,0,0,.7); font-size:28px; cursor:pointer; }
@media (max-width:900px) {
  .menu-toggle { display:flex; order:3; }
  .nav { display:none; position:absolute; top:70px; left:0; right:0; padding:18px; background:var(--cream2); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }
  .site-header.is-menu-open .nav { display:flex; }
  .portfolio-hero { grid-template-columns:1fr; min-height:auto; padding-top:60px; }
  .hero-work { aspect-ratio:5/4; }
  .trust-band { grid-template-columns:1fr; }
  .trust-band > div,.trust-band > div:first-child { padding:14px 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.2); }
}
@media (max-width:560px) {
  h1 { font-size:45px; }
  .portfolio-hero { padding-bottom:42px; }
  .portfolio-hero p:not(.eyebrow) { font-size:16px; }
  .hero-work { aspect-ratio:4/5; }
  .gallery { columns:2 145px; column-gap:8px; }
  .work { margin-bottom:8px; }
  .work img { min-height:150px; max-height:330px; }
}