/* MSA — inner pages (prototype v11): Work index + Almond House detail.
 * Loaded after styles.css (Home V10.3). Reuses its tokens, nav, display type, card tag, pills,
 * contact block and footer. Only what the two pages need is added here. */

/* ── Shared: header that starts solid (pages without a dark opening) ── */
.site-header.is-static { position: sticky; top: 0; animation: none; }
.site-header.is-static.menu-open { position: fixed; }
body.menu-lock { overflow: hidden; }
.ext-mark { font: 500 11px/1 var(--font-body); letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; }

/* ═════════════════ WORK INDEX ═════════════════ */
.ix { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) var(--s10); }
.ix-head {
  padding: clamp(40px, 4.5vw, 72px) 0 clamp(32px, 3.5vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); column-gap: var(--s8); align-items: end;
}
.ix-head .intro-meta { grid-column: 1 / -1; }
.ix-total { margin: 0; }
.ix-title { margin-top: var(--s6); font-size: clamp(40px, 7vw, 108px); }
.ix-lede { margin: 0 0 .6em; max-width: 44ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 900px) {
  .ix-head { grid-template-columns: minmax(0, 1fr); }
  .ix-lede { margin-top: var(--s5); }
}

/* filters */
.ix-filters {
  display: grid; grid-template-columns: auto auto 1fr; gap: var(--s5) var(--s7); align-items: end;
  padding: var(--s5) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.fgroup { min-width: 0; }
.fgroup:first-child { grid-column: 1 / -1; }
.flabel { margin: 0 0 var(--s2); font: 500 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--hairline); border-radius: 999px; background: var(--bg); color: var(--ink);
  font: 400 14px/1 var(--font-body); cursor: pointer;
  transition: background-color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.chip-n { font: 400 11px/1 var(--font-pixel); color: var(--ink-2); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"] .chip-n { color: rgba(255, 255, 255, .7); }
.chip:disabled { opacity: .35; cursor: default; }
.fyears { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.fyears .flabel { width: 100%; }
.fsel select {
  min-height: 40px; padding: 0 30px 0 12px; border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111'/%3E%3C/svg%3E") no-repeat right 12px center;
  font: 400 14px/1 var(--font-body); color: var(--ink); appearance: none; cursor: pointer;
}
.fresult { justify-self: end; text-align: right; display: grid; justify-items: end; gap: var(--s1); }
.fresult p { margin: 0; font: 500 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.freset { min-height: 32px; padding: 0; background: none; border: 0; border-bottom: 1px solid currentColor; font: 400 13px/1 var(--font-body); color: var(--ink-2); cursor: pointer; }

/* grid + cards */
.ix-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 64px) var(--s5); }
.ix-card[hidden] { display: none; }
.ix-link { display: grid; gap: var(--s4); text-decoration: none; color: inherit; }
.ix-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 6px; }
.ix-fig { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); }
.ix-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease); }
.ix-fig.fit-contain img { object-fit: contain; padding: 4%; }
.ix-fig .tag {
  position: absolute; top: var(--s3); right: var(--s3);
  padding: 5px 8px; background: rgba(17, 17, 17, .82); color: #fff;
  font: 400 11px/1 var(--font-pixel); letter-spacing: .06em;
}
.ix-fig .ph {
  position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s5); text-align: center;
  background: repeating-linear-gradient(135deg, #f1efe9 0 2px, #ece9e1 2px 12px);
  font: 500 12px/1.5 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.ix-body { display: grid; gap: 6px; }
.ix-cat { font: 500 11px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ix-cat .dot, .ix-loc .dot { color: var(--accent-ink); }
.ix-stage.is-design { color: var(--accent-ink); }
.ix-name { font: 500 20px/1.25 var(--font-body); letter-spacing: -.01em; transition: color var(--dur-s) var(--ease); }
.ix-loc { font-size: 14px; color: var(--ink-2); }
.ix-src { font-size: 12px; color: var(--ink-2); font-style: italic; }
.ix-go { margin-top: var(--s1); display: inline-flex; align-items: center; gap: var(--s2); font: 500 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.ix-go .arr { transition: transform var(--dur-s) var(--ease); }
.ix-empty { padding: var(--s9) 0; text-align: center; display: grid; justify-items: center; gap: var(--s5); }
.ix-empty p { margin: 0; font-size: 18px; }
@media (hover: hover) and (pointer: fine) {
  .ix-link:hover .ix-fig img { transform: scale(1.03); }
  .ix-link:hover .ix-fig.fit-contain img { transform: scale(1.015); }
  .ix-link:hover .ix-name { color: var(--accent-ink); }
  .ix-link:hover .ix-go .arr { transform: translateX(4px); }
  .chip:not(:disabled):not([aria-pressed="true"]):hover { border-color: var(--ink); }
}

/* photos held (live "Recently delivered" captions) */
.ix-held { margin-top: clamp(96px, 10vw, 160px); padding-top: var(--s5); border-top: 1px solid var(--ink); }
.ix-held .eyebrow { color: var(--accent-ink); }
.ix-held-title { margin: 0; font: 400 clamp(28px, 3vw, 44px)/1.1 var(--font-body); letter-spacing: -.02em; }
.ix-held-note { margin: var(--s3) 0 0; font-size: 14px; color: var(--ink-2); }
.ix-held-list { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.ix-held-list li { padding: var(--s4); min-height: 120px; display: grid; align-content: end; gap: 4px; background: repeating-linear-gradient(135deg, #f4f2ec 0 2px, #efece5 2px 12px); font-size: 15px; }
.ix-held-list small { font-size: 12px; color: var(--ink-2); }

.contact-title em { font: italic 400 1em/1 var(--font-accent); color: var(--accent); }
.contact-sub-long { max-width: 48ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; }

@media (max-width: 1100px) {
  .ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-filters { grid-template-columns: 1fr 1fr; }
  .fresult { grid-column: 1 / -1; justify-self: start; justify-items: start; text-align: left; }
  .ix-held-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .ix-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .ix-filters { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .chip { min-height: 44px; }
  .fsel select { min-height: 44px; }
  .ix-held-list { grid-template-columns: minmax(0, 1fr); }
  .ix-held-list li { min-height: 88px; }
}

/* ═════════════════ ALMOND HOUSE ═════════════════ */
.page-almond .site-header:not(.is-solid):not(.menu-open) .nav { color: var(--on-film); }
.ah-open, .ah-film { background: var(--film-ink); color: #f7f4ee; }
.ah-open-inner, .ah-film-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.ah-open-inner { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(72px, 8vw, 128px); }
.ah-crumbs { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding-bottom: var(--s4); margin-bottom: clamp(40px, 6vw, 88px); border-bottom: 1px solid rgba(247, 244, 238, .18); font-size: 14px; }
.ah-idx { font: 400 12px/1 var(--font-pixel); letter-spacing: .06em; color: rgba(247, 244, 238, .6); }
.ah-open .eyebrow, .ah-film .eyebrow { color: rgba(247, 244, 238, .66); }
.ah-open .eyebrow .dot { color: var(--accent); }
.ah-title { margin: 0; font: 400 clamp(56px, 9vw, 136px)/.95 var(--font-body); letter-spacing: -.035em; }
html[lang="th"] .ah-title { line-height: 1.15; letter-spacing: -.01em; }
.ah-facts { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(247, 244, 238, .18); }
.ah-facts li { padding: var(--s4) var(--s4) 0 0; display: grid; gap: 4px; font-size: 16px; }
.ah-facts .k { font: 500 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 244, 238, .56); }
.ah-lede { margin: clamp(48px, 6vw, 88px) 0 0; max-width: 30ch; font: 400 clamp(24px, 2.5vw, 38px)/1.3 var(--font-body); letter-spacing: -.015em; }
.ah-brief { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); max-width: 1100px; }
.ah-h3 { margin: 0 0 var(--s3); font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ah-brief p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(247, 244, 238, .84); }
.ah-source { margin: var(--s6) 0 0; font-size: 12px; color: rgba(247, 244, 238, .46); }

.ah-sec-head { max-width: 1440px; margin: 0 auto; }
.ah-h2 { margin: 0; max-width: 22ch; font: 400 clamp(30px, 3.4vw, 52px)/1.1 var(--font-body); letter-spacing: -.025em; }
.eyebrow .tag { font: 400 12px/1 var(--font-pixel); }

/* film + galleries */
.ah-film-inner { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(88px, 9vw, 144px); border-top: 1px solid rgba(247, 244, 238, .12); }
.ah-player { margin: clamp(32px, 4vw, 56px) 0 0; }
.ah-player video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ah-player figcaption, .ah-note { margin-top: var(--s3); font-size: 13px; line-height: 1.5; color: rgba(247, 244, 238, .6); }
.badge { display: inline-block; margin-right: 6px; padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font: 500 10px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap; }
.badge-ai { color: #e6c79a; }
.badge-dd { color: var(--accent); }
.badge-warn { color: #9a5b2a; border-color: #c9905f; background: #fbf1e6; }
.ah-group { margin-top: clamp(56px, 6vw, 96px); }
.ah-group-title { margin: 0 0 var(--s5); font: 400 18px/1.4 var(--font-body); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ah-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.ah-gallery.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-gallery.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ah-gallery.g4 .wide { grid-column: span 2; grid-row: span 2; }
.g-item { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #1f1c18; cursor: zoom-in; overflow: hidden; text-align: left; color: #f7f4ee; }
.g-item img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform var(--dur-l) var(--ease), opacity var(--dur-s) var(--ease); }
.ah-gallery.g4 .wide .g-item img { aspect-ratio: auto; min-height: 100%; }
.g-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 10px; background: linear-gradient(to top, rgba(20, 18, 15, .78), rgba(20, 18, 15, 0)); font: 500 12px/1.3 var(--font-body); letter-spacing: .04em; }
.g-item:focus-visible { outline: 2px solid #f7f4ee; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .g-item:hover img { transform: scale(1.03); } }

/* plans: drawing paper */
.ah-plans { background: var(--bg-soft); padding: clamp(80px, 9vw, 144px) var(--gutter); }
.ah-plans > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.ah-plans .eyebrow { color: var(--accent-ink); }
.ah-restricted { margin: var(--s5) 0 0; max-width: 70ch; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.plan-pair { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.plan-card { margin: 0; }
.plan-open { position: relative; display: block; width: 100%; padding: 12px; border: 1px solid var(--hairline); background: #fff; cursor: zoom-in; }
.plan-open img { width: 100%; height: auto; }
.plan-zoom { position: absolute; right: 12px; bottom: 12px; padding: 8px 12px; background: var(--ink); color: #fff; font: 500 12px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.plan-card figcaption { margin-top: var(--s3); font-size: 13px; color: var(--ink-2); }
.plan-card figcaption .tag { font: 400 11px/1 var(--font-pixel); color: var(--accent-ink); margin-right: 4px; }
.plan-read { margin-top: clamp(48px, 6vw, 88px); }
.plan-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s5); }
.plan-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--ink); }
.plan-steps .n { font: 400 13px/1.3 var(--font-pixel); color: var(--accent-ink); }
.plan-steps h3 { margin: 0 0 6px; font: 500 15px/1.3 var(--font-body); }
.plan-steps p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ah-plans .ah-note { color: var(--ink-2); }
.ah-check { margin-top: clamp(48px, 5vw, 72px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.ah-check summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font: 500 15px/1.3 var(--font-body); list-style-position: inside; }
.ah-check summary::marker { color: var(--accent-ink); }
.check-table { overflow-x: auto; margin: var(--s3) 0 var(--s4); }
.check-table table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.check-table th, .check-table td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-top: 1px solid var(--hairline); }
.check-table thead th { font: 500 11px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-top: 0; }
.check-table tbody th { font-weight: 500; white-space: nowrap; }
.check-table td:last-child { color: #7a4a22; }

/* details */
.ah-details { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 9vw, 144px) var(--gutter); }
.ah-details .eyebrow { color: var(--accent-ink); }
.ah-dl { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s7); }
.ah-dl > div { display: grid; grid-template-columns: minmax(0, 11em) 1fr; gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--hairline); }
.ah-dl dt { font: 500 11px/1.6 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ah-dl dd { margin: 0; font-size: 15px; line-height: 1.55; }
.ah-dl .src { color: var(--ink-2); font-size: 13px; }
.ah-pn { margin-top: clamp(64px, 7vw, 112px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.ah-pn-link { display: grid; align-content: start; gap: 6px; min-height: 120px; padding: var(--s4) var(--s4) var(--s4) 0; text-decoration: none; }
.ah-pn-link + .ah-pn-link { padding-left: var(--s4); border-left: 1px solid var(--hairline); }
.ah-pn-link .k { font: 500 11px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ah-pn-link .t { font: 400 20px/1.25 var(--font-body); letter-spacing: -.01em; }
.ah-pn-all .t { font-weight: 500; }
.ah-pn-next { text-align: right; justify-items: end; }
@media (hover: hover) and (pointer: fine) { .ah-pn-link:hover .t { color: var(--accent-ink); } }

/* dialogs */
.lightbox, .planview { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 13, 11, .96); color: #f7f4ee; }
.lightbox::backdrop, .planview::backdrop { background: rgba(14, 13, 11, .9); }
.lb-bar, .pv-bar { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s3) var(--gutter); }
.lb-count { font: 400 12px/1 var(--font-pixel); letter-spacing: .06em; }
.lb-btn { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid rgba(247, 244, 238, .4); border-radius: 999px; background: transparent; color: inherit; font: 400 14px/1 var(--font-body); cursor: pointer; }
.lb-btn:focus-visible, .lb-nav:focus-visible { outline: 2px solid #f7f4ee; outline-offset: 2px; }
.lb-fig { position: absolute; inset: 72px var(--gutter) 24px; margin: 0; display: grid; grid-template-rows: 1fr auto; gap: var(--s3); justify-items: center; }
.lb-fig img { max-width: 100%; max-height: 100%; object-fit: contain; align-self: center; min-height: 0; }
.lb-fig figcaption { font-size: 14px; color: rgba(247, 244, 238, .78); text-align: center; }
.lb-nav { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; margin-top: -26px; border: 0; border-radius: 50%; background: rgba(247, 244, 238, .12); color: #f7f4ee; font-size: 20px; cursor: pointer; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.pv-title { margin: 0; font-size: 14px; }
.pv-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.pv-z { width: 44px; padding: 0; font-size: 20px; }
.pv-level { min-width: 48px; text-align: center; font: 400 12px/1 var(--font-pixel); }
.pv-stage { position: absolute; inset: 72px 0 0 0; overflow: auto; background: #fff; overscroll-behavior: contain; touch-action: pan-x pan-y; cursor: default; }
.pv-stage.is-zoomed { cursor: grab; }
.pv-stage.is-dragging { cursor: grabbing; }
.pv-stage:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.pv-stage img { display: block; margin: 0 auto; max-width: none; user-select: none; -webkit-user-drag: none; }

@media (max-width: 1100px) {
  .plan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah-dl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ah-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah-brief { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .plan-pair { grid-template-columns: minmax(0, 1fr); }
  .ah-gallery.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .ah-gallery.g3 { grid-template-columns: minmax(0, 1fr); }
  .ah-gallery.g4 .wide { grid-column: 1 / -1; grid-row: auto; }
  .ah-gallery.g4 .wide .g-item img { aspect-ratio: 3 / 2; }
  .plan-steps { grid-template-columns: minmax(0, 1fr); }
  .ah-dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ah-pn { grid-template-columns: minmax(0, 1fr); }
  .ah-pn-link + .ah-pn-link { padding-left: 0; border-left: 0; border-top: 1px solid var(--hairline); }
  .ah-pn-next { text-align: left; justify-items: start; }
  .ah-crumbs { font-size: 13px; }
  .pv-bar { flex-direction: column; align-items: stretch; gap: var(--s2); padding: var(--s2) var(--s3); }
  .pv-tools { justify-content: space-between; }
  .pv-tools .lb-btn { min-height: 40px; padding: 0 10px; font-size: 13px; }
  .pv-tools .pv-z { width: 40px; }
  .lb-nav { top: auto; bottom: 16px; margin-top: 0; }
  .lb-fig { inset: 64px var(--s3) 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-fig img, .g-item img, .chip { transition: none; }
  .ix-link:hover .ix-fig img, .g-item:hover img { transform: none; }
}
html[data-reduced] .ix-fig img, html[data-reduced] .g-item img { transition: none; transform: none !important; }
.ix-empty[hidden], .freset[hidden] { display: none; }

/* film-vs-drawings table: stacked rows on phones (no sideways scrolling to read it) */
@media (max-width: 719px) {
  .check-table { overflow: visible; }
  .check-table table { min-width: 0; }
  .check-table thead { display: none; }
  .check-table table, .check-table tbody, .check-table tr, .check-table th, .check-table td { display: block; }
  .check-table tr { padding: var(--s3) 0; border-top: 1px solid var(--hairline); }
  .check-table th, .check-table td { border-top: 0; padding: 4px 0; }
  .check-table tbody th { white-space: normal; font-size: 15px; }
  .check-table td::before { display: block; font: 500 10px/1.6 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
  .check-table td:nth-of-type(1)::before { content: "Compared with"; }
  .check-table td:nth-of-type(2)::before { content: "Agrees"; }
  .check-table td:nth-of-type(3)::before { content: "Differs / not checked"; }
  html[lang="th"] .check-table td:nth-of-type(1)::before { content: "เทียบกับ"; }
  html[lang="th"] .check-table td:nth-of-type(2)::before { content: "ตรงกัน"; }
  html[lang="th"] .check-table td:nth-of-type(3)::before { content: "ต่างกัน / ยังตรวจไม่ได้"; }
}

/* ═════════════════ v11.1 — Almond opens with the house ═════════════════
 * Landscape: the image fills the screen, anchored to its bottom edge so the house sits high and the
 * name sits on the lawn/driveway band below the house. Portrait: image at its own ratio (no side crop). */
.ah-hero { position: relative; height: 100svh; min-height: 600px; max-height: 1100px; background: var(--film-ink); color: #f7f4ee; overflow: hidden; }
.ah-hero-media { position: absolute; inset: 0; margin: 0; }
.ah-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.ah-hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20, 18, 15, .46) 0, rgba(20, 18, 15, 0) 200px),
    linear-gradient(to top, rgba(20, 18, 15, .74) 0%, rgba(20, 18, 15, .28) 16%, rgba(20, 18, 15, 0) 26%);
}
.ah-hero-back { position: absolute; z-index: 2; left: var(--gutter); top: calc(var(--nav-h) - 8px); font-size: 14px; color: rgba(247, 244, 238, .9); }
.ah-hero-label { position: absolute; right: var(--gutter); bottom: calc(clamp(18px, 2.4vh, 32px) + 50px); z-index: 2; }
.ah-hero-label .badge { background: rgba(20, 18, 15, .5); }
.ah-hero-copy { position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 2.4vh, 32px); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s5); }
.ah-hero-copy .eyebrow { margin: 0 0 6px; color: rgba(247, 244, 238, .84); }
.ah-hero-copy .eyebrow .dot { color: var(--accent); }
.ah-hero-title { margin: 0; font: 400 clamp(44px, 4.6vw, 72px)/1 var(--font-body); letter-spacing: -.03em; }
html[lang="th"] .ah-hero-title { line-height: 1.2; letter-spacing: -.01em; }
.ah-hero-more { font-size: 15px; color: #f7f4ee; white-space: nowrap; }
/* very wide screens: keep the gable and roof in view (the driveway band gives way instead) */
@media (min-aspect-ratio: 2/1) { .ah-hero-media img { object-position: 50% 58%; } }
.ah-project { max-width: 1440px; margin: 0 auto; padding: clamp(72px, 8vw, 128px) var(--gutter) clamp(80px, 8vw, 128px); }
.ah-project .eyebrow { color: var(--accent-ink); }
.ah-lede-h { max-width: 26ch; }
.ah-facts2 { margin: clamp(40px, 5vw, 64px) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.ah-facts2 > div { padding: var(--s4) var(--s4) 0 0; }
.ah-facts2 dt { font: 500 11px/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ah-facts2 dd { margin: 4px 0 0; font-size: 16px; line-height: 1.45; }
.ah-brief2 { margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); max-width: 1100px; }
.ah-brief2 .ah-h3 { color: var(--accent-ink); }
.ah-brief2 p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.ah-film-inner { border-top: 0; }
.ah-more { max-width: 1440px; margin: 0 auto; padding: clamp(64px, 7vw, 104px) var(--gutter); }
.ah-media-note { margin: 0; max-width: 70ch; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.ah-more .ah-pn { margin-top: var(--s7); }

@media (max-width: 900px) {
  .ah-facts2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ah-facts2 > div:last-child { grid-column: 1 / -1; }
  .ah-brief2 { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
/* Portrait screens: the whole house stays in view (no side crop) — image at its own ratio, name below it */
@media (max-aspect-ratio: 1/1) {
  .ah-hero { height: auto; min-height: 0; max-height: none; padding-bottom: var(--s6); }
  .ah-hero-media { position: relative; inset: auto; }
  .ah-hero-media img { height: auto; aspect-ratio: 1646 / 1097; }
  .ah-hero-shade { bottom: auto; height: 120px; background: linear-gradient(to bottom, rgba(20, 18, 15, .5) 0, rgba(20, 18, 15, 0) 100%); }
  .ah-hero-label { position: static; padding: var(--s3) var(--gutter) 0; }
  .ah-hero-back { position: static; display: inline-flex; margin: var(--s4) var(--gutter) 0; }
  .ah-hero-copy { position: static; flex-direction: column; align-items: flex-start; padding: var(--s2) var(--gutter) 0; gap: var(--s3); }
  .ah-hero-title { font-size: clamp(42px, 11.5vw, 64px); }
}


/* v11.2 — no fade-from-blank for content already on screen when arriving via Back/reload (see site.js) */
html.is-arriving .reveal, html.is-arriving .reveal-up, html.is-arriving .reveal-card { opacity: 1 !important; transform: none !important; transition: none !important; }
html.is-arriving .reveal-card img, html.is-arriving .ix-fig img { transition: none !important; }

/* ═════════════════ v12 — About + Contact (same tokens, type and motion as Home / Work / Almond) ═════════════════ */
.ab-head, .ct-head { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.ab-title, .ct-title { margin-top: var(--s6); font-size: clamp(40px, 7vw, 108px); }
.ab-sec, .ct-direct, .ct-form-wrap {
  max-width: 1440px; margin: 0 auto; padding: clamp(72px, 8vw, 128px) var(--gutter);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5);
  border-top: 1px solid var(--hairline);
}
.ab-lead { grid-column: 1 / 6; align-self: start; position: sticky; top: 104px; }
.ab-lead .eyebrow, .ab-work-head .eyebrow, .ct-form-lead .eyebrow { color: var(--accent-ink); }
.ab-h { margin: 0; font: 400 clamp(24px, 2.3vw, 36px)/1.22 var(--font-body); letter-spacing: -.01em; max-width: 24ch; }
html[lang="th"] .ab-h { line-height: 1.4; letter-spacing: 0; }
.ab-founder { margin: var(--s5) 0 0; font-size: 14px; color: var(--ink-2); }
.ab-founder .dot { color: var(--accent-ink); }
.ab-body { grid-column: 7 / 13; }
.ab-timeline { list-style: none; margin: 0 0 var(--s7); padding: 0; border-top: 1px solid var(--ink); }
.ab-timeline li { display: grid; grid-template-columns: 104px 1fr; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.5; }
.ab-year { font: italic 700 26px/1.1 var(--font-body); letter-spacing: -.01em; }
.ab-prose p { margin: 0 0 var(--s5); font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }
html[lang="th"] .ab-prose p { line-height: 1.8; }

.ab-do-list { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.ab-do-list li { border-top: 1px solid var(--ink); padding: var(--s5) 0 var(--s6); }
.ab-do-n, .ab-n { font: 400 13px/1 var(--font-pixel); letter-spacing: .04em; color: var(--accent-ink); }
.ab-do-list h3 { margin: var(--s3) 0 0; font: 500 clamp(20px, 1.6vw, 24px)/1.25 var(--font-body); letter-spacing: -.01em; }
.ab-do-list p { margin: var(--s2) 0 0; font-size: 14px; color: var(--ink-2); }

.ab-how { background: var(--film-ink); color: #f7f4ee; }
.ab-how-inner { max-width: 1440px; margin: 0 auto; padding: clamp(80px, 9vw, 144px) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); }
.ab-how .ab-lead { grid-column: 1 / 5; }
.ab-how .eyebrow { color: rgba(247, 244, 238, .7); }
.ab-how-list { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s6); }
.ab-how-list li { border-top: 1px solid rgba(247, 244, 238, .28); padding: var(--s5) 0 var(--s6); }
.ab-how .ab-n { color: var(--accent); }
.ab-how-list h3 { margin: var(--s3) 0 0; font: 500 19px/1.3 var(--font-body); }
.ab-how-list p { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.6; color: rgba(247, 244, 238, .72); }

.ab-vision-label { margin: var(--s5) 0 var(--s2); font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.ab-vision { margin: 0; }
.ab-vision p { margin: 0; font: italic 400 clamp(22px, 2vw, 30px)/1.4 var(--font-body); letter-spacing: -.01em; max-width: 26ch; }
html[lang="th"] .ab-vision p { font-style: normal; line-height: 1.6; letter-spacing: 0; }
.ab-mission, .ab-roles { grid-column: 7 / 13; list-style: none; margin: 0; padding: 0; }
.ab-mission li, .ab-roles li { border-top: 1px solid var(--ink); padding: var(--s5) 0 var(--s6); }
.ab-mission li:last-child, .ab-roles li:last-child { border-bottom: 1px solid var(--ink); }
.ab-mission h3, .ab-roles h3 { margin: var(--s3) 0 0; font: 500 clamp(20px, 1.6vw, 24px)/1.25 var(--font-body); letter-spacing: -.01em; }
.ab-roles h3 { margin-top: 0; }
.ab-mission p, .ab-roles p { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }

.ab-work { display: block; }
.ab-work-head { max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.ab-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.ab-tiles a { display: grid; gap: var(--s2); text-decoration: none; color: inherit; height: 100%; }
.ab-tiles figure { margin: 0 0 var(--s2); aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-soft); }
.ab-tiles img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease); }
.ab-tile-cat { font: 500 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.ab-tile-name { font: 500 17px/1.3 var(--font-body); }
.ab-tile-all a { border: 1px solid var(--ink); padding: var(--s5); align-content: end; min-height: 100%; aspect-ratio: auto; }
.ab-tile-all-n { font: italic 700 clamp(48px, 5vw, 72px)/1 var(--font-body); letter-spacing: -.02em; }
.ab-tiles-note { margin: var(--s6) 0 0; font-size: 13px; color: var(--ink-2); }

/* Contact */
.ct-main { grid-column: 1 / 8; list-style: none; margin: 0; padding: 0; }
.ct-main a { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--s5); row-gap: var(--s2); align-items: baseline; padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--ink); text-decoration: none; color: inherit; }
.ct-main li:last-child a { border-bottom: 1px solid var(--ink); }
.ct-k { font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin: 0; }
.ct-v { font: 400 clamp(32px, 3.8vw, 60px)/1.05 var(--font-body); letter-spacing: -.02em; }
.ct-v-mail { font-size: clamp(18px, 2vw, 30px); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ct-h { grid-column: 2; font-size: 14px; color: var(--ink-2); }
.ct-side { grid-column: 9 / 13; display: grid; gap: var(--s7); align-content: start; }
.ct-studio p { margin: 0 0 var(--s2); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ct-studio .ct-k { margin-bottom: var(--s3); }
.ct-studio .ct-name { color: var(--ink); font-weight: 500; }
.ct-map { margin-top: var(--s2); }
.ct-social { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ct-social a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: 52px; padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; font-size: 16px; }
.ct-handle { color: var(--ink-2); font-size: 14px; margin-right: auto; }

.ct-form-lead { grid-column: 1 / 5; align-self: start; }
.ct-preview-note { margin: var(--s5) 0 0; padding-left: var(--s4); border-left: 3px solid var(--accent); font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 38ch; }
.ct-form { grid-column: 6 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); align-content: start; }
.field { display: grid; gap: var(--s2); min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font: 500 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.req { color: #b3261e; }
.field input, .field select, .field textarea, #copyText {
  width: 100%; min-width: 0; font: 400 17px/1.4 var(--font-body); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: var(--s3) 0;
}
.field select { appearance: none; -webkit-appearance: none; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 12px) 55% / 6px 6px no-repeat, linear-gradient(135deg, var(--ink) 50%, transparent 50%) calc(100% - 6px) 55% / 6px 6px no-repeat; padding-right: 28px; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, #copyText:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.field.invalid input { border-bottom: 2px solid #b3261e; }
.ct-consent { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); max-width: 64ch; }
.ct-actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.ct-status { border: 1px solid var(--ink); padding: var(--s5); background: var(--bg-soft); }
.ct-status[data-kind="missing"] { border-color: #b3261e; }
.ct-status:focus { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.ct-status-title { margin: 0; font: 500 18px/1.35 var(--font-body); }
.ct-status-body { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ct-copy { margin-top: var(--s5); display: grid; gap: var(--s4); }
#copyText { border: 1px solid var(--hairline); padding: var(--s3); font-size: 15px; background: #fff; }
.ct-copy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
.contact-foot-only { padding-top: var(--s2); }

@media (hover: hover) and (pointer: fine) {
  .ab-tiles a:hover img { transform: scale(1.03); }
  .ct-main a:hover .ct-v, .ct-social a:hover > span:first-child { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
}
html[data-reduced] .ab-tiles img { transition: none; }
@media (max-width: 900px) {
  .ab-sec, .ct-direct, .ct-form-wrap, .ab-how-inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s7); }
  .ab-lead, .ab-how .ab-lead, .ab-body, .ab-do-list, .ab-how-list, .ab-mission, .ab-roles,
  .ct-main, .ct-side, .ct-form-lead, .ct-form { grid-column: 1; }
  .ab-lead { position: static; }
  .ab-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ab-do-list, .ab-how-list, .ct-form { grid-template-columns: minmax(0, 1fr); }
  .ab-timeline li { grid-template-columns: 72px 1fr; }
  .ab-tiles { gap: var(--s5) var(--s4); }
  .ct-main a { grid-template-columns: minmax(0, 1fr); }
  .ct-h { grid-column: 1; }
}

/* v12.1 — Contact form lock: the fieldset keeps the 2-column grid; while disabled (no script) it is dimmed */
.ct-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s5); min-width: 0; margin: 0; padding: 0; border: 0; }
.ct-fields:disabled { opacity: .45; }
.ct-fields:disabled .field input, .ct-fields:disabled .field select, .ct-fields:disabled .field textarea, .ct-fields:disabled .btn { cursor: not-allowed; }
.ct-off { border: 1px solid var(--ink); padding: var(--s5); background: var(--bg-soft); }
.ct-off[hidden] { display: none; }
.ct-off-title { margin: 0; font: 500 18px/1.35 var(--font-body); }
.ct-off-body { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.ct-off-links { margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); }
@media (max-width: 560px) { .ct-fields { grid-template-columns: minmax(0, 1fr); } }

/* v12.1 — Thai labels: the small uppercase labels are letter-spaced for Latin (.08–.14em); spacing
   Thai glyphs apart hurts reading, so on About / Contact / Journal the Thai text runs at normal spacing.
   (Home / Work / Almond have the same pattern — not changed here; see the v12.1 notes.) */
html[lang="th"] body:is(.page-about, .page-contact, .page-journal, .page-article) :is(main, .contact) * { letter-spacing: 0; }

/* v12.1 — preview note: hairline rule instead of a thick left stripe (Hallmark: side-stripe tell) */
.ct-preview-note { border-left: 0; padding-left: 0; padding-top: var(--s4); border-top: 1px solid var(--accent-ink); }

/* ═════════════════ v12.1 — Journal index + essay (same tokens, type, spacing and motion as the other pages).
   Index: one row per real article (image + text), chapters under it, then the seven reasons as a plain
   numbered reading list (no cards, no arrows, no hover). Essay: reading column ~66ch with a chapter list. ═════════════════ */
.jn-head { max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.jn-title { margin-top: var(--s6); font-size: clamp(44px, 7.5vw, 116px); }
.jn-essays, .jn-reasons { max-width: 1440px; margin: 0 auto; padding: clamp(64px, 7vw, 112px) var(--gutter); border-top: 1px solid var(--hairline); }
.jn-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--ink); margin-bottom: var(--s6); }
.jn-label { margin: 0; font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.jn-count { margin: 0; font: 500 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.jn-list { list-style: none; margin: 0; padding: 0; }
.jn-entry + .jn-entry { margin-top: var(--s8); padding-top: var(--s8); border-top: 1px solid var(--hairline); }
.jn-link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); row-gap: var(--s5); text-decoration: none; color: inherit; align-items: start; }
.jn-fig { grid-column: 1 / 8; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }
.jn-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-l) var(--ease); }
.jn-text { grid-column: 8 / 13; display: grid; gap: var(--s3); align-content: start; }
.jn-kicker, .ar-kicker { margin: 0; font: 500 12px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.jn-h { margin: 0; font: 400 clamp(26px, 2.5vw, 38px)/1.18 var(--font-body); letter-spacing: -.015em; }
html[lang="th"] .jn-h { line-height: 1.35; letter-spacing: 0; }
.jn-dek { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }
html[lang="th"] .jn-dek { line-height: 1.8; }
.jn-meta { margin: 0; font-size: 13px; color: var(--ink-2); }
.jn-meta .dot { color: var(--accent-ink); }
.jn-read { margin: var(--s2) 0 0; font: 500 14px/1.4 var(--font-body); white-space: nowrap; }
.jn-read span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.jn-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 6px; }
.jn-n { font: 400 13px/1 var(--font-pixel); letter-spacing: .04em; color: var(--accent-ink); }
.jn-chapters { margin-top: var(--s6); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); }
.jn-chapters-label { grid-column: 1 / 4; margin: 0; padding-top: var(--s3); font: 500 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.jn-chapters ol { grid-column: 4 / 13; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); }
.jn-chapters a { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; min-height: 48px; border-top: 1px solid var(--hairline); color: inherit; text-decoration: none; font-size: 15px; line-height: 1.45; }
.jn-reasons { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); }
.jn-reasons-lead { grid-column: 1 / 5; align-self: start; position: sticky; top: 104px; display: grid; gap: var(--s5); }
.jn-reasons-lead .jn-label { font: 400 clamp(24px, 2.3vw, 36px)/1.22 var(--font-body); letter-spacing: -.01em; text-transform: none; }
html[lang="th"] .jn-reasons-lead .jn-label { line-height: 1.4; }
.jn-reasons-link { margin: 0; }
.jn-notes { grid-column: 6 / 13; list-style: none; margin: 0; padding: 0; }
.jn-notes li { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: var(--s5); padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--hairline); }
.jn-notes li:first-child { border-top-color: var(--ink); }
.jn-note-k { grid-row: 1 / 3; margin: 0; font: 500 12px/1.6 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: var(--s3); align-items: baseline; }
.jn-notes h3 { margin: 0; font: 500 clamp(19px, 1.5vw, 22px)/1.3 var(--font-body); letter-spacing: -.01em; }
.jn-notes p:not(.jn-note-k) { margin: var(--s2) 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 60ch; }
html[lang="th"] .jn-notes p:not(.jn-note-k) { line-height: 1.8; }

/* essay */
.ar { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }
.ar-back { margin: 0; padding: var(--s6) 0 0; }
.ar-head { padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 4vw, 56px); max-width: 60rem; display: grid; gap: var(--s4); }
.ar-title { margin: 0; font: 400 clamp(34px, 4.6vw, 68px)/1.08 var(--font-body); letter-spacing: -.025em; overflow-wrap: anywhere; }
html[lang="th"] .ar-title { line-height: 1.3; letter-spacing: 0; }
.ar-dek { margin: 0; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 48ch; }
.ar-meta { margin: 0; font-size: 13px; color: var(--ink-2); }
.ar-meta .dot { color: var(--accent-ink); }
.ar-hero { margin: 0; }
.ar-hero img, .ar-fig img { width: 100%; height: auto; display: block; background: var(--bg-soft); }
.ar-hero figcaption, .ar-fig figcaption { margin-top: var(--s3); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ar-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s5); padding: clamp(48px, 6vw, 96px) 0; }
.ar-toc { grid-column: 1 / 4; align-self: start; position: sticky; top: 104px; }
.ar-toc-label { margin: 0 0 var(--s3); font: 500 12px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ar-toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ar-toc a { display: flex; gap: var(--s3); align-items: baseline; min-height: 44px; padding: var(--s3) 0; border-bottom: 1px solid var(--hairline); color: inherit; text-decoration: none; font-size: 14px; line-height: 1.4; }
.ar-body { grid-column: 5 / 12; max-width: 68ch; }
.ar-body > p, .ar-body li { font-size: 18px; line-height: 1.72; color: var(--ink); }
html[lang="th"] .ar-body > p, html[lang="th"] .ar-body li { line-height: 1.9; }
.ar-body > p { margin: 0 0 var(--s5); }
.ar-section-k { margin: 0 0 var(--s4) !important; font: 500 12px/1.4 var(--font-body) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink) !important; }
.ar-body .ar-lead { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.6; }
.ar-body h2 { margin: var(--s8) 0 var(--s4); font: 500 clamp(24px, 2vw, 30px)/1.25 var(--font-body); letter-spacing: -.01em; scroll-margin-top: 96px; }
html[lang="th"] .ar-body h2 { line-height: 1.4; }
.ar-body h2 .jn-n { margin-right: var(--s2); font-size: 15px; vertical-align: .15em; }
.ar-body ul { margin: 0 0 var(--s5); padding-left: 1.2em; }
.ar-body li { margin-bottom: var(--s3); }
.ar-body strong { font-weight: 600; }
.ar-fig { margin: var(--s7) 0; }
.ar-quote { margin: var(--s7) 0; padding: var(--s5) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.ar-quote p { margin: 0; font: 400 clamp(22px, 2vw, 30px)/1.35 var(--font-body); letter-spacing: -.01em; }
html[lang="th"] .ar-quote p { line-height: 1.55; letter-spacing: 0; }
.ar-close-h { margin-top: var(--s8) !important; }
.ar-next { border-top: 1px solid var(--ink); padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 112px); display: grid; gap: var(--s4); max-width: 60rem; }
.ar-next p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.ar-next .ar-next-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s3); }
.ar-next-links a { white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .jn-link:hover .jn-fig img { transform: scale(1.02); }
  .jn-link:hover .jn-h { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .jn-chapters a:hover span:last-child, .ar-toc a:hover span:last-child { text-decoration: underline; text-underline-offset: 4px; }
}
html[data-reduced] .jn-fig img { transition: none; }
@media (max-width: 900px) {
  .jn-fig, .jn-text { grid-column: 1 / -1; }
  .jn-chapters { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); }
  .jn-chapters-label, .jn-chapters ol { grid-column: 1; }
  .jn-reasons { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .jn-reasons-lead, .jn-notes { grid-column: 1; }
  .jn-reasons-lead { position: static; }
  .ar-layout { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .ar-toc, .ar-body { grid-column: 1; }
  .ar-toc { position: static; }
}
@media (max-width: 560px) {
  .jn-chapters ol { grid-template-columns: minmax(0, 1fr); }
  .jn-notes li { grid-template-columns: minmax(0, 1fr); }
  .jn-note-k { grid-row: auto; margin-bottom: var(--s2); }
  .ar-body > p, .ar-body li { font-size: 17px; }
}

/* v12.2 — gallery items are links (open the full image without JavaScript); keep the old button look */
a.g-item { text-decoration: none; }

/* ═════════════════ v12.5 — Almond: Explore the model (local only) ═════════════════ */
.ah-explore { background: var(--bg-soft); }
.ah-explore-inner { max-width: 1440px; margin: 0 auto; padding: clamp(64px, 7vw, 112px) var(--gutter); }
.ah-explore-frame { margin: clamp(32px, 4vw, 56px) 0 0; }
.ah-explore-stage { position: relative; }   /* the overlay belongs to the poster, not to the caption below it */
.ah-explore-poster { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #e7e5df; filter: saturate(.55); }   /* the SketchUp sky is loud next to the page; the still is otherwise unchanged */
.ah-explore-cta { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 3vw, 40px); display: grid; gap: var(--s3); justify-items: start;
  background: linear-gradient(to top, rgba(20, 18, 15, .78), rgba(20, 18, 15, 0)); color: #f7f4ee; }
.ah-explore-cta .btn-ink { background: #f7f4ee; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ah-explore-cta .btn-ink:hover { background: #fff; } }
.ah-explore-link { color: inherit; font-size: 14px; }
.ah-explore-size { margin: 0; font-size: 12px; opacity: .8; }
.ah-explore-cap { margin-top: var(--s3); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ah-explore-cap .badge { margin-right: 6px; }
.ah-explore-frame.is-open .ah-explore-stage { display: none; }
.ah-explore-iframe { display: block; width: 100%; height: clamp(560px, 78vh, 900px); border: 1px solid var(--hairline); background: #e7e5df; }
.ah-explore-close { margin-bottom: var(--s3); }
@media (max-width: 640px) {
  .ah-explore-poster { aspect-ratio: 4 / 3; }
  .ah-explore-cta { padding: 16px; }
  .ah-explore-iframe { height: 620px; }
}
html:not(.js) .ah-explore-cta .needs-js { display: none; }

/* ═════════════════ v12.5 — Concept Study page (concept-studies/) — built on the article styles ═════════════════ */
.cs .ar-hero { margin-top: 0; }
.cs .ar-hero > a { display: block; }
.cs .ar-meta .badge { margin-right: 6px; }
.cs-note { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s6) var(--s8); padding: clamp(48px, 6vw, 88px) 0 clamp(32px, 4vw, 56px); max-width: 1440px; }
.cs-note h2, .cs-motion-head h2 { margin: 0; font: 500 clamp(24px, 2vw, 30px)/1.25 var(--font-body); letter-spacing: -.01em; }
html[lang="th"] :is(.cs-note h2, .cs-motion-head h2) { line-height: 1.4; }
.cs-note-text p { margin: 0 0 var(--s4); max-width: 62ch; font-size: 18px; line-height: 1.72; }
html[lang="th"] .cs-note-text p { line-height: 1.9; }
.cs-disclosure { color: var(--ink-2); font-size: 15px; }
.cs-motion { padding: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 88px); }
.cs-motion-head { max-width: 60rem; display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.cs-motion-head p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.cs-player { margin: 0; }
.cs-player video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.cs-player figcaption { color: var(--ink-2); }
.cs-player figcaption .badge { margin-right: 6px; }
.cs-next-title { font-size: clamp(28px, 3vw, 44px); }
@media (max-width: 900px) { .cs-note { grid-template-columns: 1fr; gap: var(--s4); } }

/* ═════════════════ v13 (integration preview) — Almond: entry card to the guided experience ═════════════════ */
.ah-explore-poster.is-experience { filter: none; }
.ah-explore-steps { margin: 0 0 var(--s2); font-size: 13px; letter-spacing: .02em; opacity: .9; }
.ah-explore-steps span[aria-hidden] { opacity: .6; margin: 0 2px; }
.ah-explore-cta a.btn-ink { text-decoration: none; }
.ah-explore-entry .ah-explore-cta { background: linear-gradient(to top, rgba(20, 18, 15, .86), rgba(20, 18, 15, .38) 58%, rgba(20, 18, 15, 0)); }   /* the model image is light: a deeper shade keeps the white copy readable */
@media (max-width: 640px) { .ah-explore-steps { display: none; } }   /* phones: the step line has no room over a 4:3 poster */

/* v13 round 1 — draft label on the article meta line (date pending owner) */
.ar-draft, .jn-meta .ar-draft { display: inline-block; padding: 1px 8px; border: 1px dashed currentColor; border-radius: 3px; font-size: .92em; opacity: .85; }

/* v13 round 3 — Work: featured entry + folded advanced filters on phones */
.ix-featured { margin: 0 0 clamp(28px, 3vw, 44px); }
.ix-featured .eyebrow { margin-bottom: var(--s3); }
.ix-feat { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s5) var(--s7); align-items: end; text-decoration: none; color: inherit; }
.ix-feat-fig { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); }
.ix-feat-fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ix-feat-body { display: grid; gap: var(--s2); padding-bottom: var(--s2); }
.ix-feat-name { font: 400 clamp(28px, 3vw, 44px)/1.1 var(--font-body); letter-spacing: -.02em; }
html[lang="th"] .ix-feat-name { line-height: 1.3; letter-spacing: 0; }
.chip-more { display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px dashed var(--ink-2); border-radius: 999px; background: var(--bg); color: var(--ink); font: 400 14px/1 var(--font-body); cursor: pointer; }   /* not .chip: work.js manages .chip counts */
.chip-more[aria-expanded="true"] { border-style: solid; }
.ix-advanced { display: contents; }
@media (hover: hover) and (pointer: fine) { .ix-feat:hover .ix-feat-name { color: var(--accent-ink); } .ix-feat:hover .ix-feat-fig img { transform: scale(1.02); } }
.ix-feat-fig img { transition: transform var(--dur-l) var(--ease); }
@media (max-width: 719px) {
  .ix-lede { display: none; }                 /* phones: title + count, then straight to the work */
  .ix-title { margin-top: var(--s4); }
  .ix-head { padding-bottom: var(--s5); }
  .ix-feat { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .chip-more { display: inline-flex; }
  .ix-advanced:not(.is-open) { display: none; }   /* folded by default on phones (CSS, before any script) */
  .ix-filters { margin-bottom: var(--s7); }
}

.ix-stage.is-construction { color: #8a5a2b; }   /* v13: under construction (owner-confirmed stage) */

/* ═══ hybrid About: pictures early, visible Vision / Mission, process band, people, seven reasons ═══ */
.ab-open { margin: 0 auto; max-width: 1440px; padding: 0 var(--gutter); display: grid; gap: var(--s3); }
.ab-open img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg-soft); }
.ab-open figcaption, .ab-proof figcaption, .ab-people figcaption { font-size: 13px; line-height: 1.5; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ab-open .tag, .ab-proof .tag { padding: 4px 7px; background: var(--ink); color: #fff; font: 400 10px/1 var(--font-pixel); letter-spacing: .08em; }
.ab-year-word { font-size: 15px !important; letter-spacing: .12em; }
.ab-vm { background: var(--bg-soft); }
.ab-vm > div { max-width: 1440px; margin: 0 auto; padding: clamp(56px, 6vw, 88px) var(--gutter); display: grid; grid-template-columns: minmax(200px, 30%) 1fr; gap: var(--s6); align-items: start; }
.ab-vm-vision { border-bottom: 1px solid var(--hairline); }
.ab-vm .eyebrow { grid-column: 1; }
.ab-vm-h { grid-column: 1; margin: 0; font: italic 700 clamp(40px, 5.6vw, 84px)/.95 var(--font-body); letter-spacing: -.02em; text-transform: uppercase; }
html[lang="th"] .ab-vm-h { font-style: normal; font-size: clamp(32px, 4.4vw, 60px); letter-spacing: 0; line-height: 1.1; }
.ab-vm .ab-vision { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.ab-vm .ab-vision p { margin: 0; font: italic 500 clamp(22px, 2.4vw, 34px)/1.35 var(--font-accent); }
html[lang="th"] .ab-vm .ab-vision p { font: 400 clamp(19px, 2vw, 28px)/1.55 var(--font-body); }
.ab-vm .sub-italic, .ab-vm .ab-mission { grid-column: 2; }
.ab-vm .sub-italic { grid-row: 1; align-self: end; margin: 0; }
.ab-vm .ab-mission { grid-row: 2 / 4; margin-top: var(--s4); }
.ab-process .ab-lead .link-arrow { margin-top: var(--s4); }
.ab-process .ab-phases, .ab-process .ab-proof, .ab-team .ab-people { grid-column: 1 / -1; }   /* the .ab-sec two-column grid: lists span both columns */
.ab-phases { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); counter-reset: none; }
.ab-phases li { border-top: 1px solid var(--ink); padding-top: var(--s3); display: grid; gap: var(--s2); font-size: 15px; line-height: 1.4; }
.ab-phases .wk { font: 400 12px/1.4 var(--font-pixel); letter-spacing: .04em; color: var(--accent-ink); }
.ab-proof { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.ab-proof figure { margin: 0; display: grid; gap: var(--s3); }
.ab-proof img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-soft); }
.ab-people { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.ab-people figure { margin: 0; display: grid; gap: var(--s3); }
.ab-people img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--bg-soft); filter: grayscale(1); }
.ab-people figcaption, .ab-people-more p { display: grid; gap: 2px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.ab-people b, .ab-people-more b { font-weight: 500; color: var(--ink); font-size: 15px; }
.ab-people-more { display: grid; align-content: end; border-top: 1px solid var(--ink); padding-top: var(--s3); }
.ab-why { background: var(--film-ink); color: #f7f4ee; }
.ab-why-inner { max-width: 1440px; margin: 0 auto; padding: clamp(64px, 7vw, 104px) var(--gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s7); }
.ab-why .eyebrow { color: rgba(247, 244, 238, .7); }
.ab-why .ab-h { margin: var(--s3) 0 var(--s5); }
.ab-seven { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; }
.ab-seven li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid rgba(247, 244, 238, .18); font-size: 17px; line-height: 1.45; }
.ab-seven .ab-n { font: 400 12px/1.6 var(--font-pixel); color: var(--accent); }
.ab-why .ab-how-list { margin: 0; }
.ab-why .link-arrow { color: #f7f4ee; }
@media (max-width: 900px) {
  .ab-vm > div { grid-template-columns: 1fr; }
  .ab-vm .ab-vision, .ab-vm .sub-italic, .ab-vm .ab-mission { grid-column: 1; grid-row: auto; }
  .ab-phases { grid-template-columns: 1fr; gap: 0; } .ab-phases li { grid-template-columns: 92px 1fr; padding: var(--s3) 0; }
  .ab-proof { grid-template-columns: 1fr; }
  .ab-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-why-inner { grid-template-columns: 1fr; }
}

/* ═══ hybrid Almond: Materials & Light chapter ═══ */
.ah-mat { max-width: 1440px; margin: 0 auto; padding: clamp(64px, 7vw, 104px) var(--gutter) 0; }
.ah-mat .ah-sec-head { max-width: 62ch; }
.ah-mat-status { margin: var(--s4) 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.ah-mat-fig { margin: clamp(32px, 4vw, 48px) 0 0; display: grid; gap: var(--s3); }
.ah-mat-fig img { width: 100%; height: auto; background: var(--bg-soft); }
.ah-mat-fig.is-wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.ah-mat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.ah-mat-pair .ah-mat-fig img { aspect-ratio: 16 / 10; object-fit: cover; }
.ah-mat-fig figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 900px) { .ah-mat-pair { grid-template-columns: 1fr; } }

/* ═══ closing round: Services + case studies (same tokens as About) ═══ */
.sv, .cs-page { padding-bottom: clamp(56px, 6vw, 96px); }
.sv-ctaline { margin: var(--s6) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }
.pill-ink { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; max-width: 100%; padding: 12px var(--s6); border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; font-size: 16px; line-height: 1.35; white-space: normal; text-align: center; }
.sv-sec, .cs-sec, .sv-cases { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 5vw, 80px) var(--gutter) 0; display: grid; grid-template-columns: minmax(220px, 34%) 1fr; gap: var(--s6) var(--s7); border-top: 1px solid var(--hairline); }
.sv-cases { display: block; }
.sv-lead .ab-h { margin-top: var(--s3); }
.sv-body { min-width: 0; }
.sv-p { margin: 0 0 var(--s4); font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.sv-sub { margin-top: var(--s6); color: var(--ink); font-weight: 500; }
.sv-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 0; }
.sv-list li { display: grid; gap: 4px; padding: var(--s3) 0; border-top: 1px solid var(--hairline); font-size: 16px; line-height: 1.5; }
.sv-list b { font-weight: 500; color: var(--ink); } .sv-list span { color: var(--ink-2); font-size: 15px; }
.sv-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: var(--s5); }
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); }
.sv-steps li { border-top: 1px solid var(--ink); padding-top: var(--s3); display: grid; gap: 6px; align-content: start; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.sv-steps b { color: var(--ink); font-weight: 500; font-size: 16px; }
.sv-n { font: 400 12px/1.4 var(--font-pixel); color: var(--accent-ink); }
.sv-proof, .cs-pair { margin-top: var(--s6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.cs-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-one { margin-top: var(--s6); max-width: 820px; }
.sv figure, .cs-page figure { margin: 0; display: grid; gap: var(--s3); }
.sv figure img, .cs-page figure img { width: 100%; height: auto; background: var(--bg-soft); }
.sv-proof img, .sv-case-list img { aspect-ratio: 4 / 3; object-fit: cover; }
.sv figcaption, .cs-page figcaption { font-size: 13px; line-height: 1.5; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sv .tag, .cs-page .tag { padding: 4px 7px; background: var(--ink); color: #fff; font: 400 10px/1 var(--font-pixel); letter-spacing: .08em; }
.sv-case-list { list-style: none; margin: var(--s6) 0 var(--s5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.sv-case-list a { display: grid; gap: var(--s2); text-decoration: none; color: inherit; }
.sv-case-list b { font-size: 18px; font-weight: 500; }
.sv-case-k { font: italic 700 12px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
html[lang="th"] .sv-case-k { font-style: normal; letter-spacing: 0; text-transform: none; font-size: 13px; }
.cs-title { font-size: clamp(34px, 6.4vw, 96px); }
.cs-top { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: var(--s5); }
.cs-hero img { aspect-ratio: 16 / 9; object-fit: cover; }
.cs-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s4) var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hairline); }
.cs-facts dt { font: 500 11px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
html[lang="th"] .cs-facts dt { letter-spacing: 0; text-transform: none; font-size: 13px; }
.cs-facts dd { margin: 4px 0 0; font-size: 18px; }
.cs-note { margin: var(--s3) 0 0; font-size: 13px; color: var(--ink-2); }
.cs-end { max-width: 1440px; margin: 0 auto; padding: clamp(48px, 5vw, 72px) var(--gutter) 0; border-top: 1px solid var(--hairline); }
.cs-status { margin: 0; max-width: 70ch; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.cs-others { margin: var(--s6) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
@media (max-width: 900px) {
  .sv-sec, .cs-sec { grid-template-columns: 1fr; }
  .sv-steps { grid-template-columns: 1fr; gap: 0; } .sv-steps li { grid-template-columns: 44px 1fr; padding: var(--s3) 0; } .sv-steps li > span:last-child { grid-column: 2; }
  .sv-proof, .cs-pair, .sv-case-list { grid-template-columns: 1fr; }
}

/* finish_media — 2026-09-28 */
.jn-note-fig{grid-column:2;margin:var(--s4) 0 0;max-width:440px}
.jn-note-fig img{display:block;width:100%;height:auto;background:var(--bg-soft)}
.jn-note-fig figcaption{margin-top:var(--s2);font-size:12px;color:var(--ink-2)}
.fbm-still{position:relative;display:block;margin-bottom:var(--s3);background:var(--bg-soft);overflow:hidden}
.fbm-still img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;height:auto}
.fbm-still-tag{position:absolute;left:var(--s3);bottom:var(--s3);background:var(--ink);color:var(--bg);padding:6px 10px;font-size:13px}
.fbm-still-cap{font-size:12px;color:var(--ink-2);margin:0 0 var(--s2)}
.fbm-video{display:block;width:100%;max-width:360px;height:auto;aspect-ratio:9/16;background:#000;margin-bottom:var(--s3)}
.fbm-work-links{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.fbm-work-links a{display:inline-block;border:1px solid var(--hairline);padding:8px 12px;color:var(--ink);text-decoration:none;max-width:100%}
.fbm-work-links a:hover{border-color:var(--ink)}
.ab-process .ab-lead{position:static}   /* a sticky lead slid over the full-width rows below it */
.ab-reel{grid-column:1/-1;margin:var(--s6) 0 0;min-width:0;max-width:1100px}
.ab-reel video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.ab-reel figcaption{margin-top:var(--s2);font-size:13px;color:var(--ink-2)}
.ah-cont{max-width:1440px;margin:0 auto;padding:var(--s6) var(--gutter);border-top:1px solid var(--hairline)}
.ah-cont-h{font:500 clamp(20px,1.8vw,26px)/1.35 var(--font-body);margin:0 0 var(--s4)}
.ah-cont ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s6)}
.ah-cont li{display:grid;gap:4px;padding:var(--s3) 0;border-top:1px solid var(--hairline);min-width:0}
.ah-cont-k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.ah-cont li.diff .ah-cont-k{color:#9a3b1f}
.ah-cont-d{font-size:14px;line-height:1.7;color:var(--ink-2)}
@media(max-width:767px){.ah-cont ul{grid-template-columns:minmax(0,1fr)}.jn-note-fig{grid-column:1}.fbm-video{max-width:100%}}