/* =====================================================================
   SIRIN GUNKLOY — Archive module (Klingspor-style)
   Shared by the home page (archive-first) and the dedicated Archive page.
   ===================================================================== */

/* Paper base for any page hosting the archive */
body.archive-host { background: var(--paper); color: var(--ink); --fg: var(--ink); --fg-dim: var(--muted); --hairline: var(--line-dark); }
body.archive-host ::selection { background: var(--ink); color: var(--paper); }

/* ---------- Intro masthead (home) ---------- */
.arc-hero { padding: calc(var(--nav-h) + 6vh) 0 2vh; }
.arc-hero h1 { font-family: var(--serif); font-weight: 330; font-size: var(--fs-h1); line-height: .95; letter-spacing: -0.02em; }
.arc-hero h1 .th { font-family: var(--thai); font-size: .42em; color: var(--fg-dim); display: block; }
.arc-hero p { max-width: 56ch; color: var(--fg-dim); margin-top: 1.2rem; }
.arc-hero__meta { display: flex; flex-wrap: wrap; gap: 1.2rem 2.2rem; margin-top: 1.6rem; font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
.arc-hero__meta b { font-family: var(--serif); font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 1.4em; margin-right: .4em; }

/* ---------- Sticky toolbar ---------- */
.arc-bar { position: sticky; top: var(--nav-h); z-index: 50; background: rgba(247,247,245,.9); backdrop-filter: blur(10px);
  border-block: 1px solid var(--line-dark); padding: .9rem 0; margin-top: 5vh; }
.arc-bar__in { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.3rem; }
.arc-bar__group { display: flex; align-items: center; gap: .5rem; }
.arc-bar__label { font-size: var(--fs-small); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-dim); white-space: nowrap; }
.arc-bar__sep { width: 1px; align-self: stretch; background: var(--line-dark); }

/* segmented toggles */
.view-toggle, .script-toggle { display: flex; border: 1px solid var(--line-dark); border-radius: 100px; overflow: hidden; }
.view-toggle button, .script-toggle button { padding: .5em 1em; font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; transition: background .25s, color .25s; }
.view-toggle button[aria-pressed="true"], .script-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* category chips */
#arc-cats { display: flex; flex-wrap: wrap; gap: .4rem; }
#arc-cats button { padding: .4em .9em; font-size: var(--fs-small); letter-spacing: .06em; border: 1px solid var(--line-dark); border-radius: 100px; transition: background .25s, color .25s, border-color .25s; }
#arc-cats button[aria-pressed="true"] { background: var(--accent); color: var(--paper); border-color: var(--accent); }

/* native selects */
.arc-select { font: inherit; font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink); background: transparent;
  border: 1px solid var(--line-dark); border-radius: 100px; padding: .5em 2em .5em 1em; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238c8678' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8em center; }
.arc-select:focus { outline: none; border-color: var(--accent); }

/* object-colour swatches */
#arc-colors { display: flex; align-items: center; gap: .35rem; }
.arc-color { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: transform .2s; padding: 0; }
.arc-color span { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); display: block; }
.arc-color.is-all { width: auto; padding: 0 .8em; height: 22px; border-radius: 100px; font-size: var(--fs-small); letter-spacing: .06em; color: var(--fg-dim); }
.arc-color[aria-pressed="true"] { transform: scale(1.12); border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.arc-color.is-all[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; transform: none; }

/* search */
.arc-search { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--line-dark); margin-left: auto; }
.arc-search input { background: none; border: none; outline: none; font: inherit; font-size: var(--fs-small); letter-spacing: .05em; padding: .4em 0; width: clamp(110px, 16vw, 190px); color: var(--ink); }
.arc-search input::placeholder { color: var(--fg-dim); }

.arc-iconbtn { width: 30px; height: 30px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; font-size: .8rem; transition: background .25s, color .25s; }
.arc-iconbtn:hover, .arc-iconbtn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
#arc-reset { font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); }
#arc-reset:hover { color: var(--accent); }
#arc-count { font-family: var(--serif); }

/* ---------- Stage / views ---------- */
.arc-stage { padding: 7vh 0 18vh; min-height: 60vh; }
.arc-empty { padding: 6vh 0; color: var(--fg-dim); font-family: var(--serif); font-size: var(--fs-h3); }

.arc-grid.view-masonry { columns: 3 300px; column-gap: clamp(1.6rem,3.2vw,3.2rem); }
.arc-grid.view-masonry .arc-card { break-inside: avoid; margin-bottom: clamp(1.6rem,3.2vw,3.2rem); }
.arc-grid.view-stack { position: relative; min-height: 78vh; }
.arc-grid.view-stack .arc-card { position: absolute; width: clamp(180px, 18vw, 250px); transform: rotate(var(--rot,0deg)); transition: box-shadow .3s, transform .15s; cursor: grab; }
.arc-grid.view-stack .arc-card.dragging { cursor: grabbing; transform: rotate(0deg) scale(1.03); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.arc-grid.view-stack .arc-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,.18); }

.arc-card { background: var(--paper); border: 1px solid var(--line-dark); padding: 1.1rem; display: flex; flex-direction: column; gap: 1rem; }
.arc-card__head { display: flex; justify-content: space-between; font-size: var(--fs-small); letter-spacing: .1em; color: var(--fg-dim); }
.arc-card__glyph { flex: 1; display: grid; place-items: center; font-family: var(--serif); font-weight: 300; font-size: clamp(3.5rem, 7vw, 6rem); line-height: .8; color: var(--gc, var(--ink)); }
.arc-card__glyph.thai { font-family: var(--thai); }
.arc-card__foot { display: flex; flex-direction: column; gap: .2rem; }
.arc-card__foot .t { font-size: .98rem; font-family: var(--serif); }
.arc-card__foot .t .thai { font-family: var(--thai); color: var(--fg-dim); font-size: .85em; }
.arc-card__foot .m { font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }

/* image objects (real works) */
.arc-card__media { overflow: hidden; background: var(--paper-dim); border: 1px solid var(--line-dark); }
.work-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc-card__media .work-img { aspect-ratio: 16/10; }
.cmp-media { overflow: hidden; background: var(--paper-dim); }
.cmp-media .work-img { aspect-ratio: 5/4; }
.r-thumb { width: 56px; height: 38px; overflow: hidden; background: var(--paper-dim); border: 1px solid var(--line-dark); }
.r-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-plate { background: #fff; }
.work-plate .work-img { aspect-ratio: 16/10; object-fit: contain; background: #fff; }
.sheet__link { color: var(--paper); border-bottom: 1px solid rgba(255,255,255,.4); }
.sheet__link:hover { border-color: var(--paper); }

/* list / index */
.arc-grid.view-list { display: flex; flex-direction: column; }
.arc-row { display: grid; grid-template-columns: 80px 60px 1.4fr 1fr .8fr 60px; align-items: center; gap: 1rem;
  padding: 1rem .4rem; border-bottom: 1px solid var(--line-dark); font-size: .95rem; transition: background .25s, padding-left .25s; }
.arc-row:hover { background: rgba(13,13,12,.04); padding-left: 1rem; }
.arc-row .r-id, .arc-row .r-cat, .arc-row .r-year { font-size: var(--fs-small); letter-spacing: .08em; color: var(--fg-dim); }
.arc-row .r-glyph { font-family: var(--serif); font-size: 1.6rem; }
.arc-row .r-glyph.thai { font-family: var(--thai); }
.arc-row .r-fam { color: var(--fg-dim); }

/* compare / side-by-side */
.arc-grid.view-compare { display: flex; gap: clamp(1rem,2vw,2rem); overflow-x: auto; padding-bottom: 1.5rem; scroll-snap-type: x mandatory; }
.cmp-panel { flex: 0 0 clamp(300px, 42vw, 460px); scroll-snap-align: start; border: 1px solid var(--line-dark); background: var(--paper); cursor: pointer; display: flex; flex-direction: column; }
.cmp-panel .plate-art { aspect-ratio: 5/4; }
.cmp-meta { padding: 1.2rem 1.3rem 1.5rem; }
.cmp-meta__id { font-size: var(--fs-small); letter-spacing: .12em; color: var(--fg-dim); }
.cmp-meta__title { font-family: var(--serif); font-size: var(--fs-h3); line-height: 1.05; margin: .2rem 0 1rem; }
.cmp-meta__dl > div { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding: .5rem 0; border-top: 1px solid var(--line-dark); font-size: .9rem; }
.cmp-meta__dl dt { font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); }

/* ---------- Plate art treatments — monochrome gallery objects ---------- */
.plate-art { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 16/10; padding: 13%; background: var(--paper-dim); }
.plate-art__glyph { font-family: var(--serif); font-weight: 300; line-height: .8; font-size: clamp(3rem, 11vw, 8.5rem); color: var(--gc); }
.plate-art.thai .plate-art__glyph { font-family: var(--thai); }
.plate--ink { background: #141414; }
.plate--ink .plate-art__glyph { color: var(--paper); text-shadow: 0 0 55px rgba(255,255,255,.14); }
.plate--grid { background:
  linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 30px 30px,
  linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px) 0 0 / 30px 30px,
  #ffffff; }
.plate--grid .plate-art__glyph { color: transparent; -webkit-text-stroke: 1.5px var(--gc); text-stroke: 1.5px var(--gc); }
.plate--rubbing { background: #e5e4e1; }
.plate--rubbing::before { content: ""; position: absolute; inset: 0; opacity: .26; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.plate--rubbing .plate-art__glyph { color: #2b2b2b; opacity: .82; mix-blend-mode: multiply; }
.plate--outline { background: #fafafa; }
.plate--outline .plate-art__glyph { color: transparent; -webkit-text-stroke: 2px var(--gc); text-stroke: 2px var(--gc); }

/* ---------- Data sheet ---------- */
/* Full-screen gallery reader — a dark "room" you step into */
.sheet { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
body.sheet-open { overflow: hidden; }
body.sheet-open .sheet { pointer-events: auto; }
.sheet__scrim { position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity .4s var(--ease); }
body.sheet-open .sheet__scrim { opacity: 1; }
.sheet__page { position: absolute; inset: 0; background: var(--ink); color: var(--paper); display: flex; flex-direction: column;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
body.sheet-open .sheet__page { opacity: 1; transform: none; }
.sheet__bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem clamp(1.4rem,4vw,3rem);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--ink); z-index: 2; }
.sheet__id { font-size: var(--fs-small); letter-spacing: .2em; color: var(--muted); }
.sheet__close { font-size: var(--fs-small); letter-spacing: .15em; text-transform: uppercase; display: flex; align-items: center; gap: .5rem; }
.sheet__close:hover { color: var(--muted); }

.sheet__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; }
.sheet__inner { max-width: 1080px; margin-inline: auto; padding: clamp(2rem,7vh,5rem) clamp(1.4rem,5vw,3rem) clamp(4rem,14vh,9rem); }

/* Masthead */
.sheet__hero { text-align: center; padding-block: clamp(1rem,5vh,3.5rem) clamp(1.5rem,5vh,3rem); }
.sheet__eyebrow { font-size: var(--fs-small); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.sheet__title { font-family: var(--serif); font-weight: 340; font-size: var(--fs-h1); line-height: .98; letter-spacing: -0.01em; }
.sheet__title-th { font-family: var(--thai); color: var(--muted); display: block; font-size: .38em; margin-top: .5rem; }

/* Plates — framed works, generous air between them */
.sheet__fig { margin: clamp(2.5rem,8vh,6rem) auto; max-width: 920px; }
.sheet__fig img.work-img { width: 100%; display: block; }
.sheet__fig--crop { aspect-ratio: 16 / 9; overflow: hidden; background: #0c0c0b; }
.sheet__fig--crop img.work-img { height: 100%; object-fit: cover; transform: scale(1.6); transform-origin: 28% 40%; }
.sheet__specimen { aspect-ratio: 4 / 3; background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem,3vh,2rem); padding: 1.5rem; }
.sheet__spec-glyph { font-family: var(--serif); font-weight: 340; font-size: clamp(3.4rem,13vw,8.5rem); line-height: 1; }
.sheet__spec-name { font-size: var(--fs-small); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* Reading sections — big, centred, gallery-label voice */
.sheet__read { max-width: 60ch; margin: clamp(2.5rem,9vh,6.5rem) auto; text-align: center; }
.sheet__read-label { font-size: var(--fs-small); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
.sheet__read-h { font-family: var(--serif); font-weight: 340; font-size: var(--fs-h3); line-height: 1.08; margin-bottom: 1.2rem; }
.sheet__read-h .thai { font-family: var(--thai); }
.sheet__read-p { font-family: var(--body); font-size: clamp(1.08rem,1.5vw,1.4rem); line-height: 1.7; color: rgba(247,247,245,.85); }
.sheet__read-p .thai { font-family: var(--body); }

/* Data sheet at the foot */
.sheet__data { max-width: 720px; margin: clamp(3rem,10vh,7rem) auto 0; }
.sheet__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.2rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.sheet__row dt { font-size: var(--fs-small); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sheet__row dd { font-size: 1rem; }

@media (max-width: 620px) {
  .sheet__read { text-align: left; }
  .sheet__row { grid-template-columns: 1fr; gap: .25rem; padding: .85rem 0; }
}
.swatch { display: inline-block; width: .9em; height: .9em; border-radius: 50%; vertical-align: middle; margin-right: .3em; }

/* ---------- Info "?" overlay ---------- */
.arc-info { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
body.info-open .arc-info { pointer-events: auto; }
.arc-info__scrim { position: absolute; inset: 0; background: rgba(13,13,12,.6); opacity: 0; transition: opacity .4s; }
body.info-open .arc-info__scrim { opacity: 1; }
.arc-info__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--pad-x);
  opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
body.info-open .arc-info__panel { opacity: 1; transform: none; }
.arc-info__card { background: var(--paper); color: var(--ink); max-width: 640px; width: 100%; padding: clamp(2rem,5vw,3.5rem); position: relative; }
.arc-info__card h2 { font-family: var(--serif); font-weight: 340; font-size: var(--fs-h3); margin-bottom: 1.2rem; }
.arc-info__card p { color: var(--fg-dim); margin-bottom: 1rem; max-width: 56ch; }
.arc-info__card dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin-top: 1.4rem; font-size: .92rem; }
.arc-info__card dt { font-weight: 600; }
.arc-info__close { position: absolute; top: 1.2rem; right: 1.4rem; font-size: var(--fs-small); letter-spacing: .15em; text-transform: uppercase; color: var(--fg-dim); }
.arc-info__close:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) { .arc-grid.view-masonry { columns: 2 200px; } }
@media (max-width: 720px) {
  .arc-row { grid-template-columns: 44px 56px 1.5fr .7fr; }
  .arc-row .r-fam, .arc-row .r-year { display: none; }
  .arc-bar__sep { display: none; }
  .arc-search { margin-left: 0; }
}
@media (max-width: 520px) { .arc-grid.view-masonry { columns: 1; } .arc-grid.view-stack .arc-card { width: 46vw; } .cmp-panel { flex-basis: 80vw; } }