:root{font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#28251f;background:#f3efe7;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f3efe7;color:#28251f}
.site-header{position:relative;z-index:10;display:grid;grid-template-columns:auto minmax(240px,620px) auto;align-items:center;gap:28px;min-height:86px;padding:15px clamp(18px,4vw,68px);border-bottom:1px solid #ded5c7;background:rgba(247,244,237,.96)}
.brand{display:flex;align-items:center;gap:12px;color:#24211c;text-decoration:none}
.brand-mark{display:grid;width:45px;height:45px;place-items:center;border-radius:50%;background:#24211c;color:#d4b16e;font-size:16px;font-weight:850}
.brand>span:last-child{display:grid}
.brand b{font-size:16px;letter-spacing:.12em}
.brand small{color:#947849;font-size:8px;font-weight:850;letter-spacing:.35em}
.search-box{display:flex;align-items:center;gap:9px;width:100%;height:46px;padding:0 16px;border:1px solid #d8cfc0;border-radius:24px;background:#fff}
.search-box>span{color:#9a8d79;font-size:23px;line-height:1}
.search-box input{width:100%;border:0;outline:0;background:transparent;color:#2e2a24;font:inherit;font-size:13px}
.search-box input::placeholder{color:#a69b8b}
.favorites-only{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid #d5cbba;border-radius:22px;background:transparent;color:#4b4439;cursor:pointer}
.favorites-only span{font-size:20px}
.favorites-only b{font-size:11px}
.favorites-only.active{border-color:#9e7e45;background:#9e7e45;color:#fff}
main{max-width:1760px;margin:0 auto;padding:28px clamp(14px,3vw,46px) 70px}
.filter-panel{position:sticky;top:10px;z-index:8;margin:18px 0 32px;padding:12px 66px 12px 14px;border:1px solid rgba(213,203,188,.92);border-radius:18px;background:rgba(249,247,242,.92);box-shadow:0 12px 35px rgba(52,43,30,.08);backdrop-filter:blur(16px)}
.breadcrumbs{display:flex;align-items:center;gap:7px;min-height:23px;margin:0 4px 7px;overflow-x:auto;color:#a29583;white-space:nowrap;scrollbar-width:none}
.breadcrumbs::-webkit-scrollbar{display:none}
.breadcrumbs button{padding:0;border:0;background:transparent;color:#847661;font-size:10px;font-weight:750;cursor:pointer}
.breadcrumbs button[aria-current=page],.breadcrumbs button:hover{color:#9d7a3e}
.category-levels{display:grid;gap:7px}
.category-level{display:flex;align-items:center;gap:9px;min-width:0}
.category-level>small{width:24px;color:#a99c89;font-size:8px;font-weight:800}
.category-level>div{display:flex;min-width:0;gap:7px;overflow-x:auto;scrollbar-width:none}
.category-level>div::-webkit-scrollbar{display:none}
.category-chip{display:flex;flex:0 0 auto;align-items:center;gap:9px;height:38px;padding:0 8px 0 14px;border:1px solid #dbd2c4;border-radius:20px;background:#fff;color:#514a3f;cursor:pointer;white-space:nowrap}
.category-chip span{font-size:11px;font-weight:720}
.category-chip b{min-width:23px;height:23px;padding:0 6px;border-radius:12px;background:#f0ebe3;color:#8d806e;font-size:9px;line-height:23px}
.category-chip:hover{border-color:#af8d55}
.category-chip.active{border-color:#9b7b46;background:#9b7b46;color:#fff}
.category-chip.active b{background:rgba(255,255,255,.18);color:#fff}
.reset-filter{position:absolute;right:12px;bottom:12px;width:43px;height:38px;padding:0;border:0;border-radius:20px;background:#29261f;color:transparent;cursor:pointer}
.reset-filter::after{content:"×";color:#fff;font-size:21px}
.results-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 2px 19px}
.results-heading p{margin:0 0 5px;color:#a07f47;font-size:9px;font-weight:850;letter-spacing:.19em}
.results-heading h2{margin:0;font-size:clamp(24px,3vw,38px);font-weight:650}
.results-heading>span{color:#8a7d6b;font-size:11px}
.masonry{column-count:5;column-gap:16px}
.content-card{position:relative;display:inline-block;width:100%;margin:0 0 16px;overflow:hidden;border:1px solid #ded6c9;border-radius:16px;background:#fff;box-shadow:0 4px 15px rgba(56,45,29,.06);break-inside:avoid;transition:transform .18s ease,box-shadow .18s ease}
.content-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(56,45,29,.13)}
.card-cover{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:0;background:#ded8ce;cursor:pointer}
.card-cover img{display:block;width:100%;height:auto;background:#e7e1d8;transition:transform .25s ease}
.content-card:hover .card-cover img{transform:scale(1.012)}
.image-total{position:absolute;right:10px;top:10px;padding:6px 9px;border-radius:15px;background:rgba(31,28,23,.78);color:#fff;font-size:9px;font-weight:800;backdrop-filter:blur(5px)}
.favorite{position:absolute;left:10px;top:10px;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(31,28,23,.7);color:#fff;font-size:23px;line-height:35px;cursor:pointer;backdrop-filter:blur(5px)}
.favorite:hover{transform:scale(1.06)}
.favorite.active{background:#a07d44;color:#fff}
.card-copy{padding:13px 14px 15px}
.card-copy span,.card-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-copy span{margin-bottom:5px;color:#9a7a45;font-size:8px;font-weight:800;text-transform:uppercase}
.card-copy strong{font-size:13px;font-weight:700}
.empty-state{padding:100px 20px;text-align:center}
.empty-state strong,.empty-state span{display:block}
.empty-state span{margin-top:8px;color:#877b6a;font-size:12px}
.more-wrap{padding-top:30px;text-align:center}
.show-more{min-width:190px;height:46px;border:0;border-radius:24px;background:#28251f;color:#fff;font-weight:750;cursor:pointer}
.load-error{column-span:all;padding:90px 20px;color:#a24435;text-align:center}
.viewer{inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:#171612;color:#fff}
.viewer[open]{display:grid;grid-template-rows:60px minmax(0,1fr)}
.viewer::backdrop{background:#171612}
.viewer-bar{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:0 clamp(14px,3vw,40px);border-bottom:1px solid rgba(255,255,255,.08);background:#211f1a}
.viewer-brand{display:flex;align-items:center;gap:9px;margin-right:auto}
.viewer-brand span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#d0ac68;color:#24211b;font-size:11px;font-weight:850}
.viewer-brand b{font-size:10px;letter-spacing:.12em}
.viewer-action{height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:transparent;color:#ddd5c9;font-size:10px;cursor:pointer}
.viewer-close{width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.09);color:#fff;font-size:25px;line-height:1;cursor:pointer}
.viewer-scroll{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;background:#ebe6dc;overscroll-behavior:contain;scroll-behavior:smooth}
.viewer-intro{max-width:760px;margin:0 auto;padding:54px 0 34px;color:#29251f}
.viewer-intro span{color:#9b7b45;font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.viewer-intro h2{margin:7px 0 5px;font-size:clamp(30px,4vw,54px);font-weight:650;line-height:1.15;letter-spacing:-.025em}
.viewer-intro p{margin:0;color:#877b69;font-size:12px}
.viewer-images{width:100%;max-width:760px;margin:0 auto;padding:0 0 50px}
.viewer-page{width:100%;margin:0 0 28px;overflow:hidden;border-radius:4px;background:#fff;box-shadow:0 12px 38px rgba(48,39,25,.13);scroll-margin-top:20px}
.viewer-page img{display:block;width:100%;height:auto;background:#f7f4ef}
.viewer-page figcaption{display:flex;align-items:center;gap:16px;min-height:48px;padding:10px 16px;border-top:1px solid #eee8de;color:#7e715f;background:#fff}
.viewer-page figcaption span{flex:0 0 auto;color:#a18048;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}
.viewer-page figcaption b{overflow:hidden;font-size:10px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.viewer-end{display:grid;place-items:center;padding:58px 20px 72px;color:#716755;text-align:center}
.viewer-end span{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;background:#28251f;color:#d4b16e;font-size:13px;font-weight:850}
.viewer-end p{margin:10px 0 0;font-size:10px;font-weight:750;letter-spacing:.1em}
@media(max-width:1400px){.masonry{column-count:4}
}
@media(max-width:1050px){.masonry{column-count:3}
}
@media(max-width:760px){.site-header{grid-template-columns:auto auto;gap:12px;min-height:78px;padding:12px 14px}
.search-box{grid-column:1/-1;grid-row:2}
.favorites-only{justify-self:end}
.favorites-only b{display:none}
main{padding:14px 9px 42px}
.filter-panel{top:7px;margin:10px 0 23px;padding:9px 50px 9px 8px;border-radius:14px}
.category-level>small{display:none}
.category-chip{height:36px;padding-left:12px}
.reset-filter{right:7px;bottom:9px;width:37px;height:36px}
.masonry{column-count:2;column-gap:9px}
.content-card{margin-bottom:9px;border-radius:12px}
.card-copy{padding:10px}
.card-copy strong{font-size:11px}
.results-heading{margin:0 2px 13px}
.results-heading>span{font-size:9px}
.viewer[open]{grid-template-rows:54px minmax(0,1fr)}
.viewer-intro{padding:34px 14px 23px}
.viewer-images{padding:0 0 30px}
.viewer-page{margin-bottom:10px;border-radius:0;box-shadow:none;scroll-margin-top:8px}
.viewer-page figcaption{min-height:42px;padding:8px 12px}
.viewer-action{font-size:9px}
}
@media(max-width:390px){.brand b{font-size:14px}
.card-copy span{font-size:7px}
.card-copy strong{font-size:10px}
}