*,*::before,*::after{box-sizing:border-box}
:root{color-scheme:light;--paper:#f7f4ee;--ink:#28231d;--muted:#5f554a;--line:#ded6ca;--dark:#26221e;--gold:#e2b97f;--wrap:1180px;font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;color:var(--ink);background:var(--paper)}
body{margin:0;line-height:1.6}
[hidden]{display:none!important} a{color:inherit} button,input,select{font:inherit} button{cursor:pointer} button:disabled{cursor:default;opacity:.45} img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid #af6625;outline-offset:4px}
.wrap{width:min(var(--wrap),calc(100% - 64px));margin-inline:auto}
.skip{position:fixed;z-index:3;top:10px;left:10px;background:white;padding:8px 16px;transform:translateY(-180%)}.skip:focus{transform:none}
.masthead{color:#f9efe0;background:var(--dark);border-bottom:1px solid #494039}
.topbar,.toplinks,.brand{display:flex;align-items:center}.topbar{justify-content:space-between;min-height:72px;gap:12px}.toplinks{gap:24px;font-size:.9rem}.toplinks a{text-decoration:none}.toplinks a:hover{text-decoration:underline}.preview{color:#f3d4a4;border:1px solid #806849;border-radius:100px;padding:3px 11px;font-size:.76rem;white-space:nowrap}
.brand{text-decoration:none;gap:10px;font:600 1.12rem Georgia,serif;white-space:nowrap}.brand small{display:block;font:600 .58rem system-ui,sans-serif;letter-spacing:.16em;color:#d5b58d;margin-top:4px}
.intro{color:#fbf3e6;background:radial-gradient(ellipse at 78% 40%,#4a3527 0,transparent 58%),var(--dark)}
.intro-grid{display:grid;grid-template-columns:1fr minmax(285px,38%);gap:6%;align-items:center;padding-block:42px}
.intro-copy{padding-block:25px}.eyebrow{color:#775024;font-size:.84rem;font-weight:700;letter-spacing:.04em;margin:0 0 10px;display:flex;align-items:center;gap:11px}.eyebrow span{width:24px;height:1px;background:currentColor;flex:none}.intro .eyebrow{color:#edc891}
h1,h2,h3,p,figure{margin-top:0}h1,h2{line-height:1.18}h1{font-size:clamp(2.6rem,5.1vw,5rem);margin:14px 0 20px;letter-spacing:-.025em;font-weight:700}h1 span{font-family:Georgia,serif;color:var(--gold);font-weight:400;letter-spacing:-.07em;margin-right:.09em}.intro-text{max-width:35ch;font-size:clamp(1rem,1.8vw,1.22rem);color:#f0dec7;margin-bottom:27px}.primary{display:inline-flex;gap:18px;align-items:center;text-decoration:none;color:#2b2118;background:var(--gold);min-height:46px;padding:9px 19px;border-radius:4px;font-weight:700}.primary:hover{background:#f4d39d}
.feature{margin:0 auto;width:min(100%,345px)}.feature a{display:block;border:1px solid #aa8963;padding:7px;background:#423227}.feature img{width:100%}.feature figcaption{display:flex;justify-content:space-between;margin-top:9px;color:#edc891;font-size:.78rem}
.collection{padding-block:52px 60px}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.section-heading h2{font-size:clamp(1.75rem,3.1vw,2.5rem);margin:0}.range{font:400 .95rem Georgia,serif;color:#7a532b;white-space:nowrap}.notice{border-left:3px solid #aa773e;background:#efe7db;padding:10px 14px;color:#584736;margin:0 0 20px;font-size:.9rem}.notice strong{margin-right:.3em}
.filters{display:grid;grid-template-columns:1.6fr minmax(180px,.7fr);gap:14px}.field{display:grid;gap:5px;color:var(--muted);font-size:.88rem;font-weight:700;min-width:0}.control{color:var(--ink);background:#fffdf8;border:1px solid #cfc3b3;min-height:46px;width:100%;border-radius:5px;padding:0 12px}.searchbox{display:flex;align-items:center;gap:9px}.searchbox:focus-within{outline:2px solid #af6625}.searchbox svg{width:19px;height:19px;fill:none;stroke:#765335;stroke-width:1.6;flex:none}.searchbox input{color:inherit;background:none;border:0;min-width:0;flex:1;min-height:44px;outline:0;font-size:.95rem}.searchbox input::placeholder{color:#6d6255}select{font-size:.95rem}
#count{color:var(--muted);font-size:.86rem;margin:17px 0 13px;min-height:1.6em}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{display:flex;flex-direction:column;min-width:0;background:#fffdf8;border:1px solid var(--line);text-decoration:none;border-radius:5px;overflow:hidden;transition:border-color .15s,box-shadow .15s}.card:hover{border-color:#9b6e45;box-shadow:0 6px 16px #30221912}.card-media{display:grid;place-items:center;padding:13px;background:#ebe3d7}.card-media img{width:100%;aspect-ratio:440 / 622;object-fit:contain;filter:drop-shadow(0 3px 5px #3929162a)}.card-caption{padding:11px 13px 14px}.card-id{display:flex;justify-content:space-between;color:#815328;font-size:.78rem;font-weight:700}.card h3{font-size:1rem;line-height:1.45;margin:5px 0 4px;overflow-wrap:anywhere}.place{font-size:.82rem;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more{text-align:center;margin-top:25px}.more button,.empty button,.detail-bottom button{min-height:44px;padding:6px 16px;border:1px solid #ac9278;border-radius:4px;background:#fffaf2;color:#48311c;font-weight:700}.more button:hover,.empty button:hover,.detail-bottom button:not(:disabled):hover{background:#ead9c1}.empty{padding:27px;text-align:center;background:#efe7db;border-radius:5px}.empty p{margin-bottom:10px}
.footer{background:var(--dark);color:#f4e5d0;padding:22px 0;font-size:.87rem}.footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
dialog{width:min(1020px,calc(100% - 26px));max-width:none;max-height:calc(100dvh - 26px);padding:0;border:1px solid #d3c2ad;background:var(--paper);border-radius:8px;color:var(--ink);overflow:hidden}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#1a1511c9}body:has(dialog[open]){overflow:hidden}
.detail-top,.detail-bottom{display:flex;flex:none;justify-content:space-between;align-items:center;gap:8px;padding:8px 16px;background:#ede3d5;color:#684421}.detail-top{font-size:.9rem;font-weight:700}.detail-top button{min-width:44px;min-height:44px;background:transparent;border:1px solid #ac9278;border-radius:4px;font:28px/1 system-ui;color:#4e3924}.detail-scroll{overflow:auto;overscroll-behavior:contain}.detail-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:25px;padding:20px}.poster{margin:0}.poster img{width:100%;background:#e7ddcd}.poster figcaption{font-size:.83rem;color:var(--muted);margin-top:6px}.status{font-size:.82rem;color:#73491f;font-weight:700;margin-bottom:7px}.detail-copy h2{font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.32;margin:0 0 12px}.detail-copy h3{font-size:1rem;margin:15px 0 5px}.detail-copy dl{margin:0}.fact{border-bottom:1px solid var(--line);padding:7px 0}.fact dt{font-size:.82rem;color:#745536;font-weight:700}.fact dd{margin:0;font-size:.93rem;overflow-wrap:anywhere}.bio{white-space:pre-line;overflow-wrap:anywhere;margin-bottom:0;font-size:.94rem}.detail-bottom{border-top:1px solid #d8c9b6}
@media(max-width:960px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.wrap{width:calc(100% - 32px)}.toplinks{gap:9px;font-size:.77rem}.topbar{min-height:62px}.preview{padding:2px 7px;font-size:.68rem}.brand{font-size:.94rem;gap:6px}.brand img{width:29px;height:29px}.brand small{font-size:.48rem}.intro-grid{grid-template-columns:1fr;gap:17px;padding-block:26px}.intro-copy{padding-block:7px 0}.feature{width:min(73%,285px)}.intro-text{margin-bottom:18px}.collection{padding-block:34px 42px}.filters{grid-template-columns:1fr;gap:10px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-media{padding:8px}.card-caption{padding:9px}.card h3{font-size:.91rem}.place{font-size:.76rem}.detail-layout{grid-template-columns:1fr;gap:15px;padding:13px}.detail-copy{grid-row:1}.detail-layout .poster{grid-row:2}.detail-top,.detail-bottom{padding-inline:10px}}
@media(max-width:365px){.brand small{display:none}.toplinks{gap:7px}.toplinks a{max-width:72px;text-align:right}.wrap{width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
.detail-layout{grid-template-areas:"poster heading" "poster details";grid-template-rows:auto 1fr;row-gap:0}
.detail-heading{grid-area:heading}.detail-heading h2{font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.32;margin:0 0 12px}
.detail-layout .poster{grid-area:poster}.detail-copy{grid-area:details}
@media(max-width:680px){.detail-layout{grid-template-areas:"heading" "poster" "details";grid-template-rows:auto auto auto;row-gap:14px}.detail-heading h2{margin-bottom:0}}

.filters{grid-template-columns:minmax(0,1fr);max-width:680px}
.card-media img{aspect-ratio:4 / 5}
.detail-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "poster";grid-template-rows:auto auto;row-gap:14px}
.detail-heading,.detail-layout .poster{width:min(100%,610px);margin-inline:auto}
.detail-heading h2{margin-bottom:0}

#detail {
  --detail-charcoal: #24201d;
  --detail-brown: #312822;
  --detail-ivory: #f7efe1;
  --detail-gold: #e3c18f;
  --detail-rule: #8d7357;
  width: min(1040px, calc(100% - 24px));
  height: min(960px, calc(100dvh - 24px));
  max-height: none;
  border: 1px solid var(--detail-rule);
  border-radius: 10px;
  background: var(--detail-charcoal);
  color: var(--detail-ivory);
  box-shadow: 0 28px 90px #120e0acc;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete, overlay .18s allow-discrete;
}
#detail[open] {
  opacity: 1;
  transform: none;
}
@starting-style {
  #detail[open] { opacity: 0; transform: translateY(5px); }
}
#detail::backdrop {
  background: #15110ee0;
}
#detail :focus-visible {
  outline: 2px solid var(--detail-gold);
  outline-offset: 2px;
}
#detail .detail-top, #detail .detail-bottom {
  padding: 8px 18px;
  background: var(--detail-charcoal);
  color: var(--detail-ivory);
}
#detail .detail-bottom {
  border-top: 1px solid #6f5944;
}
.detail-kicker {
  margin: 0 0 2px;
  color: var(--detail-gold);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
}
#detail-title {
  margin: 0;
  font-family: Georgia, "Noto Serif Thai", "Leelawadee UI", Tahoma, serif;
  font-size: clamp(1.06rem, 2.2vw, 1.52rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.detail-controls {
  flex: none;
  padding: 7px 18px 6px;
  border-block: 1px solid #6f5944;
  background: var(--detail-brown);
}
.detail-toolbar, .detail-modes, .detail-zoom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.detail-toolbar {
  justify-content: space-between;
  gap: 6px 14px;
}
#detail button {
  min-height: 44px;
  padding: 5px 12px;
  border: 1px solid #8c7155;
  border-radius: 5px;
  background: transparent;
  color: var(--detail-ivory);
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}
#detail button:not(:disabled):hover {
  border-color: var(--detail-gold);
  background: #514033;
}
#detail #close {
  padding: 0;
  color: var(--detail-gold);
  font-size: 1.5rem;
}
#detail .detail-modes button[aria-pressed="true"] {
  border-color: var(--detail-gold);
  background: var(--detail-gold);
  color: #281f17;
}
.detail-review {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 5px 0 0;
  color: #efd6ac;
  font-size: .78rem;
  line-height: 1.45;
}
.detail-review::before {
  content: "";
  flex: 0 0 5px;
  height: 5px;
  align-self: center;
  border-radius: 50%;
  background: var(--detail-gold);
}
.detail-bio {
  margin-top: 5px;
  border-top: 1px solid #6f5944;
  color: var(--detail-ivory);
  font-size: .9rem;
}
.detail-bio summary {
  min-height: 36px;
  padding: 7px 2px;
  color: var(--detail-gold);
  font-weight: 600;
  cursor: pointer;
}
.detail-bio-body {
  max-height: min(26dvh, 12rem);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 10px;
}
.detail-bio-body p {
  margin: 0 0 5px;
}
.detail-bio-name {
  font-weight: 700;
}
.detail-bio-body a {
  display: inline-block;
  color: var(--detail-gold);
  text-underline-offset: 3px;
}
.detail-zoom button {
  min-width: 44px;
}
#zoom-reset {
  min-width: 64px;
  font-variant-numeric: tabular-nums;
}
#image-status, .detail-hint {
  color: #d1bba0;
  font-size: .78rem;
}
.detail-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  background: radial-gradient(ellipse at center, #f4ebdd, #d8c8b5);
  scrollbar-color: #8c7155 #e9ddce;
}
#detail .detail-viewer:focus-visible {
  outline-color: #63472e;
  outline-offset: -3px;
}
.detail-viewer img {
  flex: none;
  width: 100%;
  height: auto;
  max-width: none;
  margin: auto;
  box-shadow: 0 4px 18px #48352245;
  user-select: none;
  cursor: zoom-in;
  transition: opacity .16s ease;
}
.detail-viewer[data-image-loading] img {
  opacity: 0;
}
.detail-viewer[data-zoomed] img {
  cursor: zoom-out;
}
@media (max-width: 680px) {
  #detail {
    width: calc(100% - 10px);
    height: calc(100dvh - 10px);
    border-radius: 7px;
  }
  #detail .detail-top, #detail .detail-bottom, .detail-controls { padding-inline: 9px; }
  .detail-toolbar { align-items: flex-start; }
  .detail-modes { flex-wrap: nowrap; }
  #detail .detail-modes button { padding-inline: 9px; font-size: .85rem; }
  .detail-zoom { gap: 5px; }
  .detail-hint { display: none; }
}

.intro-en {
  color: #f0dec7;
  font-size: .88rem;
  margin: -10px 0 22px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.detail-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.detail-review {
  font-size: .85rem;
}
.detail-content .detail-bio {
  flex: none;
  margin: 0;
  padding-inline: 18px;
  background: var(--detail-brown);
}
.detail-content .detail-bio summary {
  min-height: 44px;
  padding-block: 10px;
}
.detail-content .detail-bio-body {
  max-height: min(32dvh, 16rem);
  font-size: .95rem;
}
#artwork-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 14px;
  margin: 4px 0 10px;
}
#artwork-facts dt {
  color: var(--detail-gold);
}
#artwork-facts dd {
  margin: 0;
}
#bio-content h3 {
  margin: 8px 0 3px;
  font-size: .95rem;
}
.reference-note {
  color: #efd6ac;
}
.detail-inquiry {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 8px;
  color: var(--detail-gold);
  font-size: .88rem;
  font-weight: 600;
  text-underline-offset: 3px;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .detail-content .detail-bio { padding-inline: 9px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  #detail {
    height: calc(100dvh - 10px);
  }
  #detail .detail-top, #detail .detail-bottom { padding-block: 4px; }
  .detail-kicker { display: none; }
}
@media (min-width: 1000px), (orientation: landscape) and (max-height: 520px) {
  #detail[open] .detail-content:has(.detail-bio[open]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(185px, 38%);
  }
  .detail-content .detail-bio[open] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-block-start: 0;
    border-inline-start: 1px solid #6f5944;
  }
  .detail-content .detail-bio[open] summary { flex: none; }
  .detail-content .detail-bio-body { max-height: none; }
}