:root{--paper:#f2f0e8;
  --ink:#191a17;
  --acid:#c5f53c;
  --gray:#66675e}
*{box-sizing:border-box}
body{margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans Thai',sans-serif}
a{color:inherit;
  text-decoration:none}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid #8260f0;
  outline-offset:5px}
.announcement{background:var(--ink);
  color:var(--paper);
  padding:9px 5%;
  text-align:center;
  font-size:12px;
  letter-spacing:2px}
.announcement span{margin-left:28px;
  letter-spacing:.4px}
header{height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  border-bottom:1px solid #bbbcb1}
.logo{font-family:'Barlow Condensed',sans-serif;
  font-weight:900;
  font-size:43px;
  line-height:.85;
  letter-spacing:-1px}
.logo span{font-size:18px;
  vertical-align:top}
.logo small{display:block;
  font-family:Arial,sans-serif;
  font-size:9px;
  letter-spacing:2px;
  margin-top:10px}
nav{display:flex;
  gap:42px}
nav a{font-size:16px;
  padding:10px 0;
  border-bottom:3px solid transparent}
nav a.active{border-color:var(--ink);
  font-weight:700}
.nav-stamp{font:12px/1.6 monospace;
  text-align:right}
.hero{display:grid;
  grid-template-columns:1fr 1fr;
  min-height:590px;
  padding:48px 5% 45px;
  gap:38px;
  overflow:hidden}
.eyebrow{font:12px/1.5 monospace;
  letter-spacing:1px;
  margin:0 0 25px}
h1,h2,h3,p{margin-top:0}
h1{font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(65px,7.8vw,120px);
  font-weight:800;
  line-height:.87;
  letter-spacing:-2px;
  margin-bottom:27px}
h1 span{color:var(--paper);
  -webkit-text-stroke:1.5px var(--ink)}
.thai-title{font-size:24px;
  font-weight:600;
  margin-bottom:10px}
.intro{font-size:16px;
  line-height:1.8;
  color:var(--gray);
  margin-bottom:26px}
.button{display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:16px 23px;
  background:var(--acid);
  border:1px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s,box-shadow .2s}
.button:hover{transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink)}
.button span{font-size:24px;
  line-height:1}
.hero-foot{display:flex;
  justify-content:space-between;
  margin-top:36px;
  font:11px/1.4 monospace;
  letter-spacing:1px}
.hero-art{position:relative;
  transform:rotate(2deg);
  margin:5px 15px 14px;
  background:#949b88;
  min-height:465px;
  border:9px solid #e2e0d5;
  box-shadow:3px 4px 0 #20201d}
.hero-art img{height:100%;
  width:100%;
  position:absolute;
  object-fit:cover;
  filter:saturate(.65) contrast(1.07)}
.photo-label{position:absolute;
  left:-22px;
  top:27px;
  background:var(--acid);
  font:700 19px 'Barlow Condensed',sans-serif;
  padding:8px 14px;
  transform:rotate(-7deg)}
.sticker{position:absolute;
  right:-25px;
  bottom:42px;
  background:var(--acid);
  width:127px;
  height:127px;
  border-radius:50%;
  border:2px solid var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font:800 33px/.85 'Barlow Condensed',sans-serif;
  transform:rotate(12deg)}
.sticker span{font-size:24px;
  margin-top:8px}
.art-caption{position:absolute;
  left:12px;
  bottom:12px;
  font:11px monospace;
  color:white;
  background:#191a17;
  padding:7px}
.ticker{display:flex;
  gap:35px;
  overflow:hidden;
  white-space:nowrap;
  background:var(--acid);
  border-block:2px solid var(--ink);
  font:800 30px 'Barlow Condensed',sans-serif;
  padding:16px 0;
  transform:rotate(-1deg);
  margin:4px -2px 0}
.section{padding:68px 5%}
.section-head{display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:28px}
.section-head h2,.page-title{font-family:'Barlow Condensed',sans-serif;
  font-size:64px;
  line-height:1;
  margin:0}
.section-head h2 em{font-style:normal;
  -webkit-text-stroke:1px var(--ink);
  color:var(--paper)}
.section-head a{border-bottom:1px solid;
  padding-bottom:4px}
.grid{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:23px}
.product-photo{height:315px;
  position:relative;
  background:#deded5;
  overflow:hidden}
.product-photo img{width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s}
.product:hover img{transform:scale(1.04)}
.tag{position:absolute;
  left:12px;
  top:12px;
  background:var(--paper);
  padding:4px 9px;
  font:12px monospace}
.product h3{font-size:16px;
  margin:14px 0 5px}
.product-meta{display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--gray)}
.product button{border:0;
  background:none;
  padding:0;
  text-align:left;
  width:100%;
  cursor:pointer}
.product-meta strong{color:var(--ink)}
.note{font-size:13px;
  color:var(--gray);
  margin-top:24px}
.manifesto{background:var(--ink);
  color:var(--paper);
  padding:55px 5%;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center}
.manifesto h2{font:800 62px/.96 'Barlow Condensed';
  margin:0}
.manifesto h2 span{color:var(--acid)}
.manifesto p{max-width:390px;
  line-height:1.9;
  margin:0}
footer{padding:35px 5%;
  display:flex;
  gap:30px;
  align-items:center;
  border-top:1px solid #babbb0}
footer p{margin:0;
  font-size:14px}
footer>span{font:11px monospace;
  margin-left:auto}
.page-top{padding:55px 5% 30px}
.page-top .page-title{font-size:100px}
.page-top p:last-child{margin:20px 0 0;
  color:var(--gray)}
.filters{display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:30px}
.filters button{padding:9px 22px;
  border:1px solid var(--ink);
  background:transparent;
  cursor:pointer}
.filters button.selected{background:var(--ink);
  color:var(--paper)}
.contact-layout{display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:70px}
.contact-poster{background:var(--acid);
  padding:45px;
  min-height:390px;
  border:2px solid var(--ink);
  transform:rotate(-2deg);
  display:flex;
  flex-direction:column;
  justify-content:space-between}
.contact-poster strong{font:800 95px/.9 'Barlow Condensed'}
.contact-poster span{font:14px monospace}
.contact-content h2{font-size:26px}
.contact-row{padding:22px 0;
  border-bottom:1px solid #c0c1b5}
.contact-row strong{display:block;
  font-size:18px}
.contact-row p{margin:7px 0 0;
  color:var(--gray)}
dialog{border:2px solid var(--ink);
  background:var(--paper);
  padding:28px;
  width:min(650px,90vw);
  max-height:90vh}
dialog::backdrop{background:#101010b0}
.modal-grid{display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.modal-grid img{width:100%;
  height:310px;
  object-fit:cover}
.close{display:block;
  margin:0 0 18px auto;
  background:none;
  border:1px solid;
  padding:4px 12px;
  cursor:pointer}
.modal-grid h2{font-size:25px}
.modal-grid p{line-height:1.7}
.modal-price{font:700 30px 'Barlow Condensed'}
@media(min-width:1500px){.hero{max-width:1600px;
  margin:auto}
}
@media(max-width:850px){header{height:100px}
.nav-stamp{display:none}
nav{gap:23px}
.hero{gap:15px}
.hero-art{min-height:410px;
  margin-right:5px}
h1{font-size:76px}
.thai-title{font-size:20px}
.grid{grid-template-columns:repeat(2,1fr)}
.hero-foot{font-size:10px}
.contact-layout{gap:30px}
.contact-poster{padding:25px}
.contact-poster strong{font-size:75px}
footer{flex-wrap:wrap}
footer>span{margin-left:0}
}
@media(max-width:580px){.announcement{font-size:10px;
  letter-spacing:1px}
.announcement span{display:none}
header{height:100px;
  padding-inline:6%}
.logo{font-size:34px}
.logo small{font-size:7px}
nav{gap:17px}
nav a{font-size:14px}
.hero{grid-template-columns:1fr;
  padding:35px 6% 40px;
  gap:30px}
h1{font-size:clamp(66px,16vw,94px)}
.eyebrow{font-size:10px}
.hero-foot{display:none}
.hero-art{min-height:400px;
  margin:0 10px}
.ticker{font-size:25px}
.section{padding:45px 6%}
.section-head h2{font-size:46px}
.section-head a{font-size:14px}
.grid{gap:22px 14px}
.product-photo{height:240px}
.product h3{font-size:15px}
.product-meta{font-size:13px;
  gap:8px}
.manifesto{align-items:start;
  flex-direction:column;
  padding:40px 6%}
.manifesto h2{font-size:56px}
.manifesto p{font-size:15px}
footer{padding:30px 6%;
  gap:18px}
footer p{font-size:12px}
.page-top{padding:40px 6% 10px}
.page-top .page-title{font-size:75px}
.contact-layout{grid-template-columns:1fr}
.contact-poster{min-height:330px}
.modal-grid{grid-template-columns:1fr}
.modal-grid img{height:240px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
}


/* Jay Ger: contemporary secondhand archive */
:root { --paper: #f5f5f0; --ink: #171817; --acid: #ff683b; --gray: #676963; }
body { background: var(--paper); }
.announcement { background: #ff683b; color: #171817; font-weight: 600; }
header { height: 106px; background: var(--paper); }
nav a { border-bottom-width: 2px; }
nav a.active { border-color: var(--acid); }
.hero { background: #191b1a; color: var(--paper); padding-top: 54px; padding-bottom: 54px; gap: 55px; }
.hero .eyebrow { color: #c1c5be; }
.hero h1 { font-size: clamp(70px, 8.3vw, 124px); }
.hero h1 span { color: var(--acid); -webkit-text-stroke: 0; }
.hero .intro { color: #bfc1b9; }
.hero .button { box-shadow: none; border: none; color: #171817; }
.hero-foot { border-top: 1px solid #484a46; padding-top: 20px; color: #bfc1b9; }
.hero-art { transform: rotate(3deg); margin: 0 28px 10px 15px; border: 10px solid #ededdf; background: #ededdf; box-shadow: 14px 14px 0 #30342f; min-height: 490px; }
.hero-art img { object-fit: contain; filter: none; background: #ededdf; }
.photo-label { font-size: 18px; padding: 9px 18px; color: #171817; }
.sticker { background: #d7ee99; color: #171817; border: none; right: -36px; }
.art-caption { background: #171817; color: #fff; font-size: 12px; }
.ticker { transform: none; margin: 0; font-size: 28px; border: none; padding: 15px 0; }
.section { padding-top: 64px; padding-bottom: 64px; }
.section-head { padding-bottom: 22px; border-bottom: 1px solid #c9ccc1; }
.section-head h2 { font-size: 68px; }
.section-head h2 em { -webkit-text-stroke: 0; color: #777d72; }
.grid { gap: 38px 24px; }
.product-photo { height: auto; aspect-ratio: 1 / 1.15; background: #e3e5dc; padding: 12px; }
.product-photo img { object-fit: contain; }
.product:hover img { transform: scale(1.035); }
.tag { background: #171817; color: white; top: 12px; left: 12px; font-size: 12px; padding: 6px 9px; }
.view-piece { position: absolute; bottom: 12px; right: 12px; background: var(--paper); padding: 8px 12px; font-size: 13px; opacity: 0; transform: translateY(5px); transition: .2s; }
.product button:hover .view-piece, .product button:focus-visible .view-piece { opacity: 1; transform: translateY(0); }
.product h3 { margin-top: 16px; font-weight: 600; }
.product-meta strong { font-weight: 500; }
.manifesto { background: #d7ee99; color: #171817; padding-block: 64px; }
.manifesto h2 span { color: #53613c; }
.page-top { padding-top: 58px; padding-bottom: 35px; border-bottom: 1px solid #c9ccc1; }
.page-top h1 span { -webkit-text-stroke: 0; color: #777d72; }
.filters { gap: 10px; margin-bottom: 22px; }
.filters button { border-color: #c6c9be; border-radius: 30px; background: transparent; padding: 10px 22px; }
.filters button:hover { border-color: var(--ink); }
.filters button.selected { background: var(--ink); border-color: var(--ink); }
.contact-poster { background: #d7ee99; border: none; box-shadow: 10px 10px 0 #e2e5d9; }
.contact-row { padding-block: 24px; }
footer { background: #191b1a; color: var(--paper); padding-block: 42px; border: none; }
dialog { width: min(900px, 94vw); border: 0; padding: 28px; }
.modal-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
.modal-grid img { height: auto; max-height: 65vh; object-fit: contain; background: #e3e5dc; }
.modal-price { font-family: 'IBM Plex Sans Thai', sans-serif; font-size: 23px; }
@media (max-width: 850px) { .hero { gap: 25px; } .hero-art { min-height: 440px; margin-right: 10px; } .hero h1 { font-size: 78px; } .sticker { right: -20px; width: 105px; height: 105px; } }
@media (max-width: 580px) { header { height: 98px; } .hero { padding: 36px 6% 45px; gap: 38px; } .hero h1 { font-size: clamp(65px, 17vw, 95px); } .hero-art { min-height: 380px; margin: 0 15px 8px 4px; } .hero .thai-title { font-size: 23px; } .section { padding-block: 40px; } .section-head h2 { font-size: 46px; } .grid { gap: 28px 12px; } .product-photo { padding: 6px; height: auto; } .tag { top: 7px; left: 7px; font-size: 11px; padding: 4px 6px; } .product h3 { font-size: 14px; } .product-meta { flex-direction: column; gap: 3px; } .view-piece { display: none; } .filters { gap: 8px; } .filters button { padding: 8px 14px; font-size: 14px; } .modal-grid { grid-template-columns: 1fr; } .modal-grid img { max-height: 45vh; } .contact-poster { min-height: 330px; } }

.product .line-order, .line-order { display: inline-flex; width: 100%; justify-content: center; align-items: center; padding: 12px 16px; margin-top: 14px; background: #087f3f; color: #fff; border: 0; font: 600 15px 'IBM Plex Sans Thai', sans-serif; cursor: pointer; text-align: center; }
.line-order:hover { background: #066331; }
.line-order[hidden] { display: none; }
.order-dialog { max-width: 560px; }
.order-dialog h2 { font-size: 26px; }
.order-dialog textarea { width: 100%; padding: 14px; margin-top: 10px; border: 1px solid #a6aa9f; background: white; color: #171817; resize: vertical; font-size: 16px; }
.order-actions { display: flex; gap: 12px; margin-top: 16px; }
.order-actions .line-order { margin: 0; }
.copy-order { flex: 1; min-width: 140px; border: 1px solid #171817; padding: 12px; cursor: pointer; background: transparent; }
.order-status { font-size: 14px; margin-top: 16px; }
@media(max-width:580px) { .order-actions { flex-direction: column; } .product .line-order { font-size: 14px; padding: 10px 6px; } }

/* LINE contact QR supplied by the shop */
.line-qr { margin: 20px 0; text-align: center; }
.line-qr img { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
.line-qr figcaption { margin-top: 10px; font-size: 14px; color: var(--gray); }
.order-dialog .line-qr img { width: 180px; }

/* Homepage LINE follow section */
.line-follow { display: grid; grid-template-columns: 240px 1fr; align-items: center; gap: 64px; padding: 64px 8%; background: #f5f5f0; border-top: 1px solid #c9ccc1; }
.line-follow-qr { display: block; padding: 16px; background: #fff; border: 1px solid #d3d6cb; text-align: center; }
.line-follow-qr img { display: block; width: 100%; height: auto; }
.line-follow-qr span { display: block; margin-top: 10px; font: 12px monospace; letter-spacing: 1px; }
.line-follow-copy h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.4; margin-bottom: 14px; }
.line-follow-copy h2 span { color: #a83616; }
.line-follow-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.8; color: #51554c; margin-bottom: 18px; }
.line-follow-copy .line-order { width: auto; padding-inline: 26px; margin: 0; }
@media(max-width:580px) { .line-follow { grid-template-columns: 1fr; gap: 28px; padding: 40px 6%; text-align: center; } .line-follow-qr { width: 220px; margin-inline: auto; } .line-follow-copy .eyebrow { font-size: 11px; } }

/* Keep the location and founding year on one line. */
.nav-stamp { white-space: nowrap; }

/* Jay Ger — orange and black theme, shared by every page. */
:root { --paper: #121212; --ink: #f6f2ed; --acid: #ff783e; --gray: #b5afa9; color-scheme: dark; }
body, header { background: #121212; color: #f6f2ed; }
header { border-bottom-color: #36312d; }
.logo { color: #ff783e; }
.logo small { color: #c5beb7; }
.announcement, .ticker { background: #ff783e; color: #151210; }
nav a:hover, nav a.active { color: #ff925f; }
.nav-stamp { color: #b5afa9; }
a:focus-visible, button:focus-visible, textarea:focus-visible { outline-color: #ffae7b; }
.hero { background: #181411; color: #f6f2ed; }
.hero .eyebrow, .hero .intro, .hero-foot { color: #c3b9b0; }
.hero-foot { border-color: #4a3930; }
.hero-art { border-color: #332720; background: #332720; box-shadow: 14px 14px 0 #080808; }
.hero-art img { background: #332720; }
.sticker, .photo-label { background: #ff783e; color: #17120f; }
.button, .hero .button { background: #ff783e; color: #17120f; border-color: #ff783e; box-shadow: none; }
.button:hover, .hero .button:hover { background: #ff9865; box-shadow: none; }
.section-head, .page-top { border-color: #38322e; }
.section-head h2 em, .page-top h1 span { color: #ff783e; }
.product-photo, .modal-grid img { background: #24201d; }
.product h3, .product button { color: #f6f2ed; }
.tag { background: #151210; color: #ff9865; border: 1px solid #594033; }
.view-piece { background: #ff783e; color: #17120f; }
.product .line-order, .line-order { background: #ff783e; color: #17120f; }
.product .line-order:hover, .line-order:hover { background: #ff9865; color: #17120f; }
.filters button { color: #ddd5ce; border-color: #605249; }
.filters button:hover { border-color: #ff783e; color: #ff9865; }
.filters button.selected { background: #ff783e; color: #17120f; border-color: #ff783e; }
.manifesto { background: #ff783e; color: #17120f; }
.manifesto h2 span { color: #592613; }
.contact-poster { background: #ff783e; color: #17120f; box-shadow: 10px 10px 0 #34251d; }
.contact-row { border-color: #38322e; }
footer { background: #090909; color: #bdb4ac; border-top: 1px solid #38322e; }
dialog { background: #1d1916; color: #f6f2ed; border: 1px solid #5e4333; }
dialog::backdrop { background: #000c; }
.close, .copy-order { color: #f6f2ed; border-color: #7b6558; }
.close:hover, .copy-order:hover { background: #34271f; }
.order-dialog textarea { background: #121212; color: #f6f2ed; border-color: #7b6558; }
.order-status { color: #c8beb5; }
.line-follow { background: #191512; border-color: #47362b; }
.line-follow-qr { background: #fff; color: #17120f; border-color: #ff783e; }
.line-follow-copy h2 span { color: #ff783e; }
.line-follow-copy > p:not(.eyebrow) { color: #c8beb5; }