:root {
  --black: #11110f;
  --ink: #22221f;
  --gray-900: #2c2c28;
  --gray-700: #62615b;
  --gray-500: #94928a;
  --gray-300: #cbc8bf;
  --gray-200: #dfddd5;
  --gray-100: #eae8e1;
  --white: #f4f2ec;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", Arial, sans-serif;
  --thai: "Prompt", "Tahoma", sans-serif;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
  --gallery-gap: clamp(.4rem, .65vw, .75rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
body.dialog-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0; color: var(--gray-700); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 76px; padding: 0 var(--pad); color: var(--white); mix-blend-mode: difference; transition: transform .4s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
.brand { justify-self: start; font-family: var(--sans); font-size: .92rem; font-weight: 300; letter-spacing: .27em; line-height: 1; }
.brand-dot { color: #a0a0a0; }
.site-nav { display: flex; gap: 2.25rem; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; right: 100%; bottom: -.35rem; left: 0; height: 1px; background: currentColor; transition: right .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right: 0; }
.site-nav a[aria-current="page"]::after { right: 0; }
.site-controls { justify-self: end; display: flex; align-items: center; gap: .35rem; }
.utility-btn { display: grid; place-items: center; min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; opacity: .78; transition: opacity .2s ease, transform .2s ease; }
.utility-btn:hover, .utility-btn:focus-visible { opacity: 1; transform: translateY(-1px); }
.language-toggle { grid-auto-flow: column; gap: .32rem; font-size: .58rem; font-weight: 500; letter-spacing: .1em; }
.language-icon { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.menu-toggle { display: none; justify-self: end; border: 0; background: none; color: inherit; letter-spacing: .1em; text-transform: uppercase; }

.hero { position: relative; min-height: 100svh; padding: 9rem var(--pad) 3rem; background: var(--black); color: var(--white); overflow: hidden; }
.hero-kicker { color: #9e9e98; font-size: .64rem; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.hero-title { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(1050px, 92%); margin: 8vh 0 0; font-family: var(--serif); font-size: clamp(4.4rem, 11.2vw, 11rem); font-weight: 400; letter-spacing: -.045em; line-height: .77; }
.hero-title span:nth-child(2) { align-self: center; }
.hero-title span:nth-child(3) { align-self: flex-end; }
.hero-title em { color: #a5a5a0; font-weight: 400; }
.hero-meta { position: absolute; z-index: 2; right: var(--pad); bottom: 3rem; left: var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; }
.hero-meta p { margin: 0; color: #adada7; font-family: var(--thai); font-size: .86rem; }
.hero-meta .text-link { justify-self: end; }
.text-link { display: flex; gap: 1.25rem; align-items: center; padding-bottom: .4rem; border-bottom: 1px solid #555; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.arrow-icon { position: relative; display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; border: 0; border-radius: 0; background: transparent; color: inherit; }
.arrow-icon::before { content: ""; position: absolute; top: 1px; right: 1px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.arrow-icon::after { content: ""; position: absolute; top: 1px; right: 1px; width: 10px; height: 1px; background: currentColor; transform: rotate(-45deg); transform-origin: right center; }
.arrow-icon--down { transform: rotate(90deg); }
.text-link .arrow-icon { transition: transform .25s ease; }
.text-link:hover .arrow-icon--down { transform: rotate(90deg) translate(.18rem, -.18rem); }
.hero-visual { position: absolute; inset: 0; opacity: .48; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,7,.76) 0%, rgba(8,8,7,.28) 55%, rgba(8,8,7,.52) 100%), linear-gradient(180deg, rgba(8,8,7,.2), rgba(8,8,7,.62)); }
.hero-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(.38) saturate(.74) contrast(.94); transform: scale(1.045) translateX(1.2%); transition: opacity 1.15s ease, transform 7s cubic-bezier(.2,.6,.2,1); }
.hero-visual img.is-active { opacity: 1; transform: scale(1.015) translateX(0); }
.hero-credit { position: absolute; z-index: 2; right: 1.15rem; top: 50%; color: rgba(255,255,255,.56); font-size: .5rem; letter-spacing: .13em; text-transform: uppercase; transform: translateX(44%) rotate(90deg); }

body.route-page main > section { display: none; }
body[data-page="work"] #work { display: block; min-height: 100svh; }
body[data-page="studio"] #studio { display: grid; min-height: 100svh; }
body[data-page="studio"] .studio-manifesto { display: grid; }
body[data-page="process"] #process { display: block; min-height: 100svh; }
body[data-page="lab"] #lab { display: block; min-height: 100svh; }
body[data-page="contact"] #contact { display: grid; min-height: 100svh; }

.work-section { padding: 9rem var(--pad); background: #fff; }
.section-heading { display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-bottom: 1px solid var(--gray-300); padding-bottom: 1.75rem; }
.section-heading h2 { margin: 0; font-family: var(--serif); font-size: clamp(3.4rem, 8vw, 7.5rem); font-weight: 400; letter-spacing: -.04em; line-height: 1; }
.section-count { align-self: end; margin: 0 0 .5rem; color: var(--gray-700); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.project-tools { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; padding: 2rem 0 4rem; }
.filter-list { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.filter-btn { padding: .15rem 0; border: 0; border-bottom: 1px solid transparent; background: none; cursor: pointer; color: var(--gray-500); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.filter-btn:hover, .filter-btn.is-active { border-color: currentColor; color: var(--black); }
.project-actions { display: flex; flex: 0 0 auto; align-items: flex-start; gap: 1.75rem; }
.view-switch { display: flex; gap: .9rem; padding-top: .15rem; }
.view-btn { padding: .15rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--gray-500); cursor: pointer; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.view-btn:hover, .view-btn.is-active { border-color: currentColor; color: var(--ink); }
.search-box { display: flex; align-items: center; width: min(280px, 100%); border-bottom: 1px solid var(--gray-300); }
.search-box input { width: 100%; padding: .25rem 0 .7rem; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .72rem; }
.search-box input::placeholder { color: var(--gray-500); }
.search-icon { position: relative; width: .85rem; height: .85rem; flex: 0 0 auto; }
.search-icon::before { content: ""; position: absolute; top: .06rem; left: .05rem; width: .48rem; height: .48rem; border: 1px solid currentColor; border-radius: 50%; }
.search-icon::after { content: ""; position: absolute; right: .05rem; bottom: .12rem; width: .34rem; height: 1px; background: currentColor; transform: rotate(45deg); transform-origin: right center; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.25rem, 5vw, 5rem) var(--gallery-gap); }
.project-card--wide { grid-column: span 2; }
.project-card { transition: transform .55s cubic-bezier(.22,1,.36,1); }
.project-card[hidden] { display: none; }
.project-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.project-image { position: relative; height: clamp(320px, 42vw, 700px); background: var(--gray-200); overflow: hidden; }
.project-card:not(.project-card--wide) .project-image { height: auto; aspect-ratio: 1 / 1; }
.project-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 68%, rgba(12,12,10,.18)); pointer-events: none; transition: opacity .55s ease; }
.project-image img { width: 100%; height: 100%; object-fit: cover; filter: none; transform: scale(1.002); transition: transform 1.05s cubic-bezier(.22,1,.36,1); }
.project-card--villa .project-image img { object-position: center bottom; transform: scale(1.12); transform-origin: center bottom; }
.project-card--process .project-image { background: #f5f2e9; }
.project-card--process .project-image img { object-fit: contain; }
.project-card--process .image-note { color: #a64838; text-shadow: none; }
.project-card:hover { transform: translateY(-9px); }
.project-open:hover .project-image img, .project-open:focus-visible .project-image img { transform: scale(1.025); }
.project-card--villa .project-open:hover .project-image img,
.project-card--villa .project-open:focus-visible .project-image img { transform: scale(1.15); }
.project-open:hover .project-image::after, .project-open:focus-visible .project-image::after { opacity: .7; }
.image-note { position: absolute; z-index: 3; right: 1rem; bottom: 1rem; color: rgba(255,255,255,.8); font-size: .5rem; letter-spacing: .12em; text-shadow: 0 1px 10px rgba(0,0,0,.25); text-transform: uppercase; }
.project-info { position: relative; display: grid; grid-template-columns: 2fr 1fr auto; gap: 1rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--gray-300); }
.project-info h3 { margin: 0 0 .25rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; }
.project-info p, .project-type { margin: 0; color: var(--gray-700); font-size: .65rem; letter-spacing: .06em; text-transform: uppercase; }
.project-type { display: flex; flex-direction: column; }
.project-arrow { margin-top: .2rem; transition: transform .25s ease; }
.project-open:hover .project-arrow { transform: translate(.2rem, -.2rem); }
.project-grid[data-view="index"] { display: block; border: 0; }
.project-grid[data-view="index"] .project-card { border: 0; }
.project-grid[data-view="index"] .project-card + .project-card { margin-top: clamp(.5rem, 1vw, 1rem); }
.project-grid[data-view="index"] .project-open { display: grid; grid-template-columns: minmax(180px, 23vw) 1fr; align-items: center; gap: clamp(1rem, 2vw, 2rem); padding: .5rem 0; }
.project-grid[data-view="index"] .project-image,
.project-grid[data-view="index"] .project-card:not(.project-card--wide) .project-image { width: 100%; height: clamp(120px, 14vw, 210px); aspect-ratio: auto; }
.project-grid[data-view="index"] .project-info { border-top: 0; padding-top: 0; }
.project-grid[data-view="index"] .image-note { top: .75rem; right: .75rem; bottom: auto; }
.empty-state { padding: 6rem 0; text-align: center; color: var(--gray-700); }

.studio-section { display: grid; grid-template-columns: 1.25fr 1fr; gap: 5rem 8vw; padding: 9rem var(--pad); background: #fff; }
.studio-intro h2 { margin: 2rem 0 0; font-family: var(--serif); font-size: clamp(3.4rem, 7.8vw, 7.5rem); font-weight: 400; letter-spacing: -.045em; line-height: .9; }
.studio-copy { align-self: end; max-width: 530px; text-align: left; text-align-last: auto; text-justify: auto; }
.studio-copy p { margin: 0 0 1.4rem; color: var(--gray-700); letter-spacing: 0; word-spacing: normal; text-wrap: pretty; }
.studio-copy p:last-child { margin-bottom: 0; }
.studio-copy .thai-lead { color: var(--ink); font-family: var(--sans); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.72; }
.founders-feature { grid-column: 1 / -1; margin: 3rem 0 0; }
.founders-image-wrap { position: relative; overflow: hidden; background: var(--black); }
.founders-image { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; filter: grayscale(1) contrast(1.04); }
.founders-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 63%, rgba(0,0,0,.62)); pointer-events: none; }
.founders-caption { position: absolute; z-index: 2; right: 1.5rem; bottom: 1.35rem; left: 1.5rem; display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.founders-caption strong { font-size: clamp(.82rem, 1.2vw, 1.05rem); font-weight: 500; letter-spacing: .01em; }
.founders-caption span { margin-top: .2rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; }
.founder-profiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 8rem); width: min(980px, 100%); margin: 0 auto; padding-top: 0; border-top: 0; }
.founder-profile { min-width: 0; }
.founder-profile > span { color: var(--gray-500); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.founder-profile h3 { margin: 1.1rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.08; white-space: normal; text-wrap: balance; }
.founder-bio { color: var(--gray-700); font-size: 1rem; line-height: 1.85; text-align: left; }
.founder-bio p { max-width: 390px; margin: 0 0 1.25rem; text-wrap: pretty; }
.founders-closing { grid-column: 1 / -1; width: min(980px, 100%); margin: 0 auto; padding-top: 2.75rem; border-top: 1px solid var(--gray-300); }
.founders-closing p { max-width: 760px; margin: 0; color: var(--gray-700); }
.name-story { grid-column: 1 / -1; width: min(1160px,100%); margin: clamp(1rem,3vw,3rem) auto 0; }
.name-story-head { margin-bottom: clamp(4rem,8vw,8rem); }
.name-story-head h3 { margin: .6rem 0 0; font-family: var(--serif); font-size: clamp(5rem,12vw,12rem); font-weight: 400; letter-spacing: -.07em; line-height: .8; }
.name-story-layers { display: grid; gap: clamp(4.5rem,8vw,8rem); }
.name-story-layer { display: grid; grid-template-columns: 2.5rem minmax(12rem,.75fr) minmax(22rem,1.25fr); gap: clamp(1.5rem,3vw,4rem); align-items: start; }
.name-story-number { padding-top: .4rem; color: var(--gray-500); font-size: .7rem; letter-spacing: .12em; }
.name-story-layer h4 { max-width: 14ch; margin: 0; font-family: var(--serif); font-size: clamp(2.4rem,4vw,4.5rem); font-weight: 400; letter-spacing: -.035em; line-height: .94; }
.name-story-copy { color: var(--gray-700); font-size: 1rem; line-height: 1.85; }
.name-story-copy p { max-width: 64ch; margin: 0 0 1.15rem; }
.name-story-copy p:last-child { margin-bottom: 0; }
.name-story-copy strong { color: var(--ink); font-weight: 500; }
.name-letters { display: grid; gap: 1.2rem; margin: 2rem 0; }
.name-letters > div { display: grid; grid-template-columns: minmax(8rem,.55fr) 1fr; gap: 1.5rem; align-items: baseline; }
.name-letters dt { color: var(--ink); font-size: .92rem; font-weight: 500; }
.name-letters dt::first-letter { font-size: 1.2rem; }
.name-letters dd { margin: 0; }
.name-story-closing { max-width: 840px; margin: clamp(6rem,11vw,11rem) 0 0 auto; font-family: var(--serif); font-size: clamp(2.3rem,4.8vw,5rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.02; }
.services { grid-column: 1 / -1; margin-top: 3rem; border-top: 1px solid var(--gray-300); }
.service-row { display: grid; grid-template-columns: 7% 1fr 1fr; gap: 1rem; align-items: baseline; padding: 1.7rem 0; border-bottom: 1px solid var(--gray-300); }
.service-row span { color: var(--gray-500); font-size: .62rem; }
.service-row h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 400; }
.service-row p { margin: 0; color: var(--gray-700); font-family: var(--thai); }

.section-index { margin: 0; color: var(--gray-500); font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

.process-section { padding: 9rem var(--pad); background: #fff; }
.process-heading { display: grid; grid-template-columns: minmax(9rem,1fr) minmax(0,2fr); gap: clamp(2rem,6vw,8rem); align-items: start; padding-bottom: clamp(5rem,10vw,10rem); }
.process-heading .section-index { margin-top: .6rem; }
.process-introduction { max-width: 830px; }
.process-heading h2 { margin: 0 0 clamp(2.5rem,5vw,5rem); font-family: var(--serif); font-size: clamp(4rem,8vw,8rem); font-weight: 400; letter-spacing: -.045em; line-height: .86; }
.process-introduction > p:not(.process-sequence) { max-width: 64ch; margin: 0 0 1.2rem; color: var(--gray-700); font-size: clamp(1rem,1.25vw,1.16rem); line-height: 1.85; }
.process-introduction .process-sequence { margin: 2.5rem 0 0; color: var(--ink); font-size: .7rem; font-weight: 500; letter-spacing: .11em; line-height: 1.9; text-transform: uppercase; }
.process-grid { display: grid; gap: clamp(4.5rem,8vw,8.5rem); max-width: 1240px; margin: 0 auto; }
.process-step { display: grid; grid-template-columns: 3rem minmax(12rem,1fr) minmax(18rem,1.15fr); gap: clamp(1.5rem,4vw,5rem); align-items: baseline; }
.process-step > span { color: var(--gray-500); font-size: .7rem; letter-spacing: .12em; }
.process-step h3 { max-width: 16ch; margin: 0; font-family: var(--serif); font-size: clamp(2.2rem,3.8vw,4.15rem); font-weight: 400; letter-spacing: -.03em; line-height: .96; }
.process-step p { max-width: 62ch; margin: 0 0 1rem; color: var(--gray-700); font-size: 1rem; line-height: 1.85; }
.process-step p:last-child { margin-bottom: 0; }
.process-closing { max-width: 760px; margin: clamp(6rem,10vw,10rem) auto 0; }
.process-closing p { margin: 0 0 1.2rem; color: var(--gray-700); font-size: clamp(1rem,1.25vw,1.16rem); line-height: 1.85; }
.process-closing p:first-child { color: var(--ink); font-family: var(--serif); font-size: clamp(2.3rem,4vw,4rem); line-height: 1.05; }
.process-closing .process-closing-line { margin-top: 3.5rem; color: var(--ink); font-size: .78rem; font-weight: 500; letter-spacing: .02em; }

.lab-section{padding:0 0 clamp(6rem,12vw,12rem);background:#fff;font-size:1rem}
.lab-section .section-index{font-size:.7rem}
.lab-intro,.lab-question,.lab-program,.lab-views-intro,.lab-views,.lab-detail,.lab-assembly,.lab-closing{margin-left:var(--pad);margin-right:var(--pad)}
.lab-intro{display:grid;grid-template-columns:1fr 1.35fr;gap:6vw;padding:clamp(9rem,15vw,15rem) 0 3.5rem}
.lab-intro h2{max-width:850px;margin:0;font-family:var(--serif);font-size:clamp(5rem,9.5vw,10rem);font-weight:400;line-height:.78;letter-spacing:-.057em}
.lab-intro-copy{align-self:end;max-width:540px;padding-bottom:.75rem}.lab-intro-copy p{margin:0 0 1.3rem}.lab-intro-copy p:first-child{font-family:var(--thai);font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.7}.lab-intro-copy p:last-child{color:var(--gray-700);font-size:.82rem}
.lab-hero{margin:0}.lab-hero img{display:block;width:100%;height:clamp(400px,52vw,760px);object-fit:cover;object-position:center 28%;background:#f7f7f5}.lab-hero figcaption{display:flex;justify-content:space-between;gap:1rem;margin:.75rem var(--pad) 0;color:var(--gray-700);font-size:.7rem;letter-spacing:.08em}
.lab-question{display:grid;grid-template-columns:1fr 1.35fr;gap:6vw;padding:clamp(5rem,12vw,11rem) 0}.lab-question h3,.lab-views-intro h3,.lab-detail-head h3,.lab-assembly h3,.lab-closing h3{margin:0;font-family:var(--serif);font-size:clamp(3rem,5.5vw,6.5rem);font-weight:400;line-height:.95;letter-spacing:-.04em}.lab-prose p{max-width:680px;margin:0 0 1.25rem;line-height:1.85}
.lab-program{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:clamp(6rem,12vw,11rem)}.lab-program article{min-height:195px;padding:1.75rem;background:#f6f6f4}.lab-program span{color:#97150f;font-size:.7rem;letter-spacing:.1em}.lab-program h4,.lab-detail-grid h4{margin:.7rem 0;font-family:var(--serif);font-size:clamp(1.7rem,2.6vw,2.7rem);font-weight:400;line-height:1.1}.lab-program p,.lab-detail-grid p{margin:0;color:var(--gray-700);font-size:.88rem}
.lab-views-intro{display:grid;grid-template-columns:1fr 1.35fr;gap:6vw;align-items:end;margin-bottom:2.5rem}.lab-views-intro p{max-width:620px;margin:0;color:var(--gray-700)}.lab-views{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.25rem,3vw,3rem);align-items:start}.lab-views figure{min-width:0;margin:0}.lab-views figure>div{overflow:hidden;background:#fafafa}.lab-views img{display:block;width:100%;aspect-ratio:1.6/1;object-fit:cover;object-position:center 36%}.lab-views figure:nth-child(2) img{aspect-ratio:1/1;object-position:75% 36%}.lab-views figcaption{display:flex;gap:1rem;padding-top:.7rem;color:var(--gray-700);font-size:.78rem;line-height:1.55}.lab-views figcaption b{flex:0 0 2.3rem;color:#97150f;font-weight:500}
.lab-detail{margin-top:clamp(5rem,9vw,9rem);margin-bottom:clamp(5rem,9vw,9rem)}.lab-detail-head{display:grid;grid-template-columns:1fr 1.35fr;gap:6vw;margin-bottom:2.5rem}.lab-detail-head p{max-width:570px;margin:0;color:var(--gray-700)}.lab-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.lab-crop{height:clamp(230px,27vw,420px);overflow:hidden;background:#fafafa}.lab-crop img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.65)}.lab-crop--roof img{object-position:72% 10%;transform-origin:72% 20%}.lab-crop--join img{object-position:54% 45%;transform-origin:54% 40%}.lab-crop--base img{object-position:35% 95%;transform-origin:35% 88%}.lab-detail-grid h4{margin:1.3rem 0 .4rem}
.lab-assembly{display:grid;grid-template-columns:1fr 1.35fr;gap:6vw;padding:clamp(5rem,9vw,9rem) 0;border-top:1px solid var(--gray-200)}.lab-assembly ol{list-style:none;margin:0;padding:0}.lab-assembly li{display:grid;grid-template-columns:34px 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--gray-200)}.lab-assembly li span{color:#97150f;font-size:.75rem}.lab-assembly li p{margin:0}.lab-assembly-note{grid-column:2;margin:0;color:var(--gray-700);font-size:.78rem}
.lab-closing-image{overflow:hidden;background:#fafafa}.lab-closing-image img{display:block;width:100%;aspect-ratio:2.05/1;object-fit:cover;object-position:center 33%}.lab-closing-copy{display:grid;grid-template-columns:1fr 1.35fr;gap:6vw;padding-top:4.5rem}.lab-closing-copy p{max-width:650px;margin:0 0 1.2rem}.lab-closing-copy p+p{color:var(--gray-700)}
@media(max-width:850px){.lab-intro,.lab-question,.lab-views-intro,.lab-detail-head,.lab-assembly,.lab-closing-copy{grid-template-columns:1fr;gap:2rem}.lab-intro{padding:7rem 0 2rem}.lab-intro h2{font-size:clamp(5rem,18vw,8rem)}.lab-intro-copy{max-width:100%}.lab-hero img{height:55vw;min-height:310px}.lab-program,.lab-detail-grid{grid-template-columns:1fr}.lab-program article{min-height:0}.lab-views{grid-template-columns:1fr}.lab-views figure:nth-child(2) img{aspect-ratio:1.6/1}.lab-crop{height:55vw;min-height:240px}.lab-assembly-note{grid-column:1}.lab-closing-image img{aspect-ratio:1.45/1}.lab-closing-copy{padding-top:3rem}}

.studio-manifesto { display: grid; place-items: center; min-height: 78vh; padding: 8rem var(--pad); background: var(--gray-100); text-align: center; }
.studio-manifesto blockquote { max-width: 1100px; margin: 0; font-family: var(--serif); font-size: clamp(3rem, 7vw, 7.2rem); font-weight: 400; letter-spacing: -.04em; line-height: .9; }
.studio-manifesto > p { margin: 3rem 0 0; color: var(--gray-500); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }

.contact-section { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; min-height: 85vh; padding: 9rem var(--pad); background: var(--black); color: var(--white); }
.contact-copy h2 { margin: 2rem 0 3rem; font-family: var(--serif); font-size: clamp(4rem, 8vw, 8rem); font-weight: 400; letter-spacing: -.045em; line-height: .82; }
.contact-copy > p:not(.eyebrow) { max-width: 390px; color: #a9a9a3; font-family: var(--thai); }
.contact-section .eyebrow { color: #8a8a85; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-top: 2.5rem; }
.contact-links a { display: inline-flex; align-items: center; gap: .7rem; padding-bottom: .2rem; border-bottom: 1px solid transparent; color: #c6c5be; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; transition: color .25s ease, border-color .25s ease; }
.contact-links a:hover, .contact-links a:focus-visible { border-color: currentColor; color: var(--white); }
.social-icons { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.social-icon { display: grid; place-items: center; width: 1rem; height: 1rem; color: #aaa9a3; transition: color .25s ease, transform .25s ease; }
.social-icon:hover, .social-icon:focus-visible { color: var(--white); transform: translateY(-2px); }
.social-icon:focus-visible { outline: 1px solid currentColor; outline-offset: .45rem; }
.social-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.social-icon rect, .social-icon circle:not(.social-icon-dot) { fill: none; stroke: currentColor; stroke-width: 1.7; }
.social-icon .social-icon-dot { fill: currentColor; stroke: none; }
.contact-form { align-self: center; }
.contact-form label { display: block; margin-bottom: 1.75rem; }
.contact-form label > span { display: block; margin-bottom: .35rem; color: #8e8e88; font-family: var(--thai); font-size: .68rem; letter-spacing: .06em; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: .65rem 0; border: 0; border-bottom: 1px solid #484844; border-radius: 0; outline: 0; background: transparent; color: var(--white); resize: vertical; transition: border-color .2s; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--white); }
.contact-form select option { color: var(--black); }
.submit-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 2.5rem; padding: 1.2rem 0; border: 0; border-top: 1px solid #8a8a84; border-bottom: 1px solid #8a8a84; background: transparent; color: var(--white); cursor: pointer; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.submit-btn i { font-style: normal; transition: transform .25s ease; }.submit-btn:hover i { transform: translate(.2rem, -.2rem); }
.form-note, .form-status { color: #777772; font-family: var(--thai); font-size: .67rem; }
.form-status { color: #c8c8c2; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 2rem; padding: 4rem var(--pad); background: var(--black); border-top: 1px solid #2e2e2b; color: #8d8d87; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.brand--footer { color: var(--white); font-size: 1.32rem; font-weight: 300; letter-spacing: .27em; }

.project-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow-y: auto; background: #fff; color: #111; }
.project-dialog::backdrop { background: rgba(0,0,0,.8); }
.project-dialog[open] { display: block; animation: dialog-in .35s ease both; }
.dialog-close { position: fixed; z-index: 5; top: 1.5rem; left: 1.5rem; display: inline-flex; align-items: center; gap: .65rem; padding: .72rem .9rem; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: rgba(255,255,255,.32); color: #111; box-shadow: 0 4px 20px rgba(20,20,20,.1), inset 0 1px 0 rgba(255,255,255,.65); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); cursor: pointer; font: inherit; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; transition: background-color .25s ease, transform .25s ease; }
.dialog-close:hover { background: rgba(255,255,255,.5); transform: translateX(-2px); }
.dialog-close:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.back-arrow { position: relative; display: inline-block; width: 1.15rem; height: .65rem; flex: 0 0 auto; }
.back-arrow::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; transform: translateY(-50%); }
.back-arrow::after { content: ""; position: absolute; top: 50%; left: 0; width: .42rem; height: .42rem; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translate(.08rem,-50%) rotate(45deg); }
.dialog-hero { position: relative; display: flex; min-height: 100svh; padding: 8rem var(--pad) 3rem; overflow: hidden; background: var(--gray-200) center / cover no-repeat; color: var(--white); isolation: isolate; }
.project-dialog--process .dialog-hero { min-height: min(100svh, 900px); background-color: #f5f2e9; background-size: contain; color: var(--ink); }
.project-dialog--process .dialog-hero-shade { background: linear-gradient(180deg, rgba(245,242,233,0) 48%, rgba(245,242,233,.96) 100%); }
.project-dialog--process .dialog-hero-copy { padding: 1.1rem 1.35rem; background: rgba(245,242,233,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.project-dialog--process .dialog-hero-copy .eyebrow,
.project-dialog--process .dialog-photo-credit,
.project-dialog--process .dialog-scroll-cue { color: rgba(20,20,18,.66); }
.dialog-hero-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(8,8,7,.12) 20%, rgba(8,8,7,.68) 100%); }
.dialog-hero-copy { align-self: flex-end; max-width: min(1080px,82vw); text-align: left; }
.dialog-hero-copy .eyebrow { display: block; margin: 0 0 1.25rem; color: rgba(255,255,255,.72); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.dialog-hero-copy h2 { max-width: 13ch; margin: 0; font-family: var(--serif); font-size: clamp(4.25rem,10.5vw,10.5rem); font-weight: 400; letter-spacing: -.045em; line-height: .78; text-wrap: balance; }
.dialog-photo-credit { display: block; position: absolute; top: 2rem; right: var(--pad); color: rgba(255,255,255,.72); font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.dialog-story { display: grid; grid-template-columns: minmax(280px,.82fr) minmax(360px,1.18fr); gap: clamp(3rem,7vw,7rem); max-width: 1320px; margin: 0 auto; padding: clamp(5rem,7.5vw,7.5rem) var(--pad) clamp(4.5rem,7vw,7rem); background: #fff; }
.dialog-tags { display: none; }
.dialog-data-column { grid-column: 1; min-width: 0; }
.dialog-info { min-width: 0; }
.dialog-concept { grid-column: 2; grid-row: 1; max-width: 62ch; }
.dialog-credits { margin-top: clamp(2rem,3vw,3rem); }
.dialog-section-label { margin: 0 0 .65rem; color: var(--gray-500); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-align: left; text-transform: uppercase; }
.dialog-info > .dialog-section-label, .dialog-concept > .dialog-section-label { display: block; }
.dialog-lead { color: var(--gray-700); font-family: var(--sans); font-size: inherit; font-weight: 300; line-height: 1.85; }
.dialog-lead p { margin: 0 0 1.25rem; text-align: justify; text-align-last: left; text-justify: inter-word; text-wrap: pretty; }
.dialog-lead p:last-child { margin-bottom: 0; }
.dialog-details { margin: 0; border: 0; text-align: left; }
.dialog-details div { display: grid; grid-template-columns: minmax(7rem, 38%) 1fr; align-items: baseline; gap: .45rem; padding: .12rem 0; border: 0; }
.dialog-details dt { color: var(--gray-500); font-size: .62rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.dialog-details dt::after { content: none; }
.dialog-details dd { margin: 0; color: #333; font-size: .72rem; letter-spacing: .03em; line-height: 1.5; }
.dialog-details dd.is-na { color: var(--gray-500); }
.dialog-note { margin-top: 2.5rem; color: var(--gray-500); font-family: var(--sans); font-size: .68rem; line-height: 1.8; text-align: left; }
.dialog-scroll-cue { position: absolute; right: var(--pad); bottom: 3.4rem; display: flex; align-items: center; gap: .9rem; margin: 0; color: rgba(255,255,255,.82); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.dialog-gallery { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-flow: dense; align-items: stretch; gap: var(--gallery-gap); width: min(1320px,100%); margin: 0 auto; padding: 0 var(--pad) clamp(5rem,8vw,8rem); background: #fff; }
.dialog-gallery.has-drawings { padding-bottom: var(--gallery-gap); }
.dialog-gallery-item, .dialog-gallery-item:nth-child(n) { position: relative; display: grid; grid-template-rows: minmax(0,1fr); grid-column: auto; margin: 0; overflow: hidden; background: #fff; }
.dialog-gallery-open { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; overflow: hidden; }
.dialog-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; transition: transform .65s cubic-bezier(.22,1,.36,1); }
.dialog-gallery-item.is-contain,
.dialog-gallery-item.is-contain .dialog-gallery-open { background: #fff; }
.dialog-gallery-item.is-contain img { object-fit: contain; object-position: left center; }
.dialog-gallery[data-layout="mosaic"] { grid-auto-rows: clamp(145px,16vw,260px); }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(6n + 1) { grid-column: 1 / span 8; grid-row: span 2; }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(6n + 2),
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(6n + 3) { grid-column: 9 / span 4; grid-row: span 1; }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(6n + 4) { grid-column: 1 / span 5; grid-row: span 2; }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(6n + 5) { grid-column: 6 / span 7; grid-row: span 2; }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(6n + 6) { grid-column: 1 / -1; grid-row: span 2; }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:only-child { grid-column: 1 / -1; grid-row: span 2; }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(2):last-child { grid-row: span 2; }
.dialog-gallery[data-layout="mosaic"] .dialog-gallery-item:nth-child(6n + 2):last-child { grid-row: span 2; }
.dialog-gallery[data-layout="asymmetric"] { grid-auto-rows: clamp(220px,28vw,430px); }
.dialog-gallery[data-layout="asymmetric"] .dialog-gallery-item:nth-child(4n + 1),
.dialog-gallery[data-layout="asymmetric"] .dialog-gallery-item:nth-child(4n + 4) { grid-column: span 8; }
.dialog-gallery[data-layout="asymmetric"] .dialog-gallery-item:nth-child(4n + 2),
.dialog-gallery[data-layout="asymmetric"] .dialog-gallery-item:nth-child(4n + 3) { grid-column: span 4; }
.dialog-gallery[data-layout="asymmetric"] .dialog-gallery-item:only-child,
.dialog-gallery[data-layout="asymmetric"] .dialog-gallery-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dialog-gallery[data-layout="process"] { display: flex; flex-direction: column; gap: var(--gallery-gap); width: min(1440px,100%); }
.dialog-gallery[data-layout="process"] .dialog-gallery-item { width: 100%; background: #f5f2e9; }
.dialog-gallery[data-layout="process"] .dialog-gallery-open { height: auto; background: #f5f2e9; }
.dialog-gallery[data-layout="process"] .dialog-gallery-item img { width: 100%; height: auto; object-fit: contain; }
.dialog-gallery-item .dialog-gallery-open { height: 100%; }
.dialog-gallery-open:hover img, .dialog-gallery-open:focus-visible img { transform: scale(1.015); }
.dialog-gallery-open:focus-visible { outline: 1px solid #111; outline-offset: 4px; }
.dialog-drawings { padding: 0 var(--pad) clamp(5rem,8vw,8rem); background: #fff; }
.dialog-drawings-inner { width: min(1191px,100%); margin: 0 auto; }
.dialog-plan-list { display: grid; gap: clamp(1.25rem,2vw,2rem); }
.dialog-plan-list.is-grid { display: flex; flex-direction: column; gap: var(--gallery-gap,clamp(.4rem,.65vw,.75rem)); }
.dialog-plan-row { display: flex; align-items: flex-start; gap: var(--gallery-gap,clamp(.4rem,.65vw,.75rem)); width: 100%; }
.dialog-plan-item { flex: var(--image-ratio,1) 1 0; min-width: 0; margin: 0; background: #fff; }
.dialog-plan-open { background: #fff; }
.dialog-plan-item img { display: block; width: 100%; height: auto; background: #fff; transition: opacity .3s ease; }
.dialog-plan-open:hover img, .dialog-plan-open:focus-visible img { opacity: .82; }
.dialog-project-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--gray-300); }
.dialog-project-nav button { min-height: clamp(135px,14vw,220px); padding: clamp(1.5rem,2.5vw,2.75rem) var(--pad); border: 0; background: #fff; color: #111; cursor: pointer; text-align: left; transition: background-color .25s ease; }
.dialog-project-nav button + button { border-left: 1px solid var(--gray-300); text-align: right; }
.dialog-project-nav button:hover { background: var(--gray-100); }
.dialog-project-nav span { display: block; margin-bottom: .9rem; color: var(--gray-500); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }
.dialog-project-nav strong { display: flex; align-items: center; gap: .75rem; font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -.015em; line-height: 1; }
.dialog-project-nav button + button strong { justify-content: flex-end; }
.project-nav-arrow { position: relative; display: inline-block; flex: 0 0 clamp(1.35rem,2.2vw,2.5rem); width: clamp(1.35rem,2.2vw,2.5rem); height: .8rem; }
.project-nav-arrow::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; }
.project-nav-arrow::after { content: ""; position: absolute; top: 50%; right: 0; width: .42rem; height: .42rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-48%) rotate(45deg); }
.project-nav-arrow--back { transform: rotate(180deg); }
.image-lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: #fff; color: #111; }
.image-lightbox::backdrop { background: #fff; }
.image-lightbox[open] { display: grid; grid-template-columns: minmax(4rem,8vw) 1fr minmax(4rem,8vw); align-items: center; }
.lightbox-figure { grid-column: 2; display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: center; justify-items: center; width: 100%; height: 100svh; margin: 0; padding: clamp(3rem,6vw,5.5rem) 0 1.5rem; }
.lightbox-figure img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox-figure figcaption { align-self: end; margin-top: 1rem; color: #555; font-size: .68rem; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.lightbox-close, .lightbox-arrow { position: fixed; z-index: 2; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; padding: 0; border: 0; background: transparent; color: #111; cursor: pointer; }
.lightbox-close { top: 1.2rem; right: 1.2rem; }
.lightbox-close span, .lightbox-close span::after { display: block; width: 1.35rem; height: 1px; background: currentColor; }
.lightbox-close span { transform: rotate(45deg); }
.lightbox-close span::after { content: ""; transform: rotate(90deg); }
.lightbox-arrow { top: 50%; transform: translateY(-50%); }
.lightbox-arrow--previous { left: clamp(.5rem,2vw,2rem); }
.lightbox-arrow--next { right: clamp(.5rem,2vw,2rem); }
.lightbox-arrow span { position: relative; display: block; width: 1.7rem; height: 1rem; }
.lightbox-arrow span::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: currentColor; }
.lightbox-arrow span::after { content: ""; position: absolute; top: 50%; right: 0; width: .55rem; height: .55rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-48%) rotate(45deg); }
.lightbox-arrow--previous span { transform: rotate(180deg); }
.lightbox-close:hover, .lightbox-arrow:hover { opacity: .55; }
.lightbox-close:focus-visible, .lightbox-arrow:focus-visible { outline: 1px solid #111; outline-offset: 2px; }
@keyframes dialog-in { from { opacity: 0; } }

/* Thai typography — Prompt hierarchy with safe Thai line boxes. */
html[lang="th"] body,
html[lang="th"] button,
html[lang="th"] input,
html[lang="th"] select,
html[lang="th"] textarea {
  font-family: var(--thai);
  font-weight: 300;
  font-synthesis: none;
  font-kerning: normal;
  letter-spacing: 0;
  line-height: 1.75;
}

html[lang="th"] .hero-title,
html[lang="th"] .section-heading h2,
html[lang="th"] .studio-intro h2,
html[lang="th"] .process-heading h2,
html[lang="th"] .studio-manifesto blockquote,
html[lang="th"] .contact-copy h2,
html[lang="th"] .dialog-hero-copy h2 {
  font-family: var(--thai);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.18;
  text-transform: none;
}

html[lang="th"] .hero-title em,
html[lang="th"] .studio-manifesto blockquote em {
  font-family: var(--thai);
  font-style: italic;
  font-weight: 400;
}

html[lang="th"] .project-info h3,
html[lang="th"] .founder-profile h3,
html[lang="th"] .service-row h3,
html[lang="th"] .process-step h3 {
  font-family: var(--thai);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-transform: none;
}

html[lang="th"] .studio-copy .thai-lead,
html[lang="th"] .process-introduction > p,
html[lang="th"] .process-step p,
html[lang="th"] .process-closing p:not(:first-child),
html[lang="th"] .founder-bio,
html[lang="th"] .founders-closing,
html[lang="th"] .name-story-copy,
html[lang="th"] .service-row p,
html[lang="th"] .contact-copy > p:not(.eyebrow),
html[lang="th"] .dialog-lead,
html[lang="th"] .dialog-note,
html[lang="th"] .form-note,
html[lang="th"] .form-status {
  font-family: var(--thai);
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1.85;
}

html[lang="th"] .founder-bio { text-justify: inter-character; }
html[lang="th"] .studio-copy { text-align: left; text-justify: auto; }

html[lang="th"] .eyebrow,
html[lang="th"] .hero-kicker,
html[lang="th"] .site-nav,
html[lang="th"] .menu-toggle,
html[lang="th"] .text-link,
html[lang="th"] .section-count,
html[lang="th"] .filter-btn,
html[lang="th"] .view-btn,
html[lang="th"] .project-info p,
html[lang="th"] .project-type,
html[lang="th"] .section-index,
html[lang="th"] .dialog-close,
html[lang="th"] .dialog-section-label,
html[lang="th"] .dialog-details dt,
html[lang="th"] .dialog-scroll-cue,
html[lang="th"] .dialog-project-nav,
html[lang="th"] .submit-btn,
html[lang="th"] .site-footer {
  font-family: var(--thai);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.55;
  text-transform: none;
}

html[lang="th"] .hero-title { font-size: clamp(3.8rem, 9.2vw, 9rem); }
html[lang="th"] .process-heading h2,
html[lang="th"] .process-step h3,
html[lang="th"] .process-closing p:first-child { font-family: var(--thai); font-weight: 300; letter-spacing: 0; line-height: 1.35; }
html[lang="th"] .name-story-layer h4,
html[lang="th"] .name-story-closing { font-family: var(--thai); font-weight: 300; letter-spacing: 0; line-height: 1.45; }
html[lang="th"] .process-heading h2 { font-size: clamp(2.8rem,6vw,5.5rem); }
html[lang="th"] .process-step h3 { font-size: clamp(1.8rem,3vw,3rem); }
html[lang="th"] .process-sequence { font-family: var(--thai); letter-spacing: 0; }
html[lang="th"] .studio-manifesto blockquote { font-weight: 400; line-height: 1.42; }
html[lang="th"] .dialog-details dd { letter-spacing: 0; line-height: 1.6; }
html[lang="th"] .dialog-lead p { text-justify: inter-character; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: .6rem; height: 64px; }
  .site-controls { grid-column: 2; }
  .menu-toggle { display: block; }
  .site-nav { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; background: var(--black); color: var(--white); font-family: var(--serif); font-size: 2.5rem; letter-spacing: -.03em; text-transform: none; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
  .site-nav.is-open { opacity: 1; pointer-events: auto; }
  .hero { padding-top: 7rem; }
  .hero-title { width: 100%; margin-top: 16vh; font-size: clamp(4.15rem, 18vw, 7.5rem); line-height: .83; }
  .hero-title span:nth-child(2), .hero-title span:nth-child(3) { align-self: auto; }
  .hero-title span:nth-child(2) { margin-left: 8vw; }
  .hero-title span:nth-child(3) { margin-left: 32vw; }
  .hero-meta { grid-template-columns: 1fr; align-items: start; gap: .75rem; }
  .hero-kicker { text-align: left; }
  .hero-meta .text-link { justify-self: end; margin-top: .75rem; }
  .hero-visual { opacity: .43; }
  .hero-credit { right: .35rem; }
  .work-section, .studio-section, .process-section, .lab-section, .contact-section { padding-top: 6rem; padding-bottom: 6rem; }
  .section-heading { grid-template-columns: 1fr auto; }
  .project-tools { align-items: stretch; flex-direction: column; padding-bottom: 2.75rem; }
  .project-actions { justify-content: space-between; width: 100%; }
  .search-box { width: 100%; }
  .project-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .project-card--wide { grid-column: auto; }
  .project-image, .project-card:not(.project-card--wide) .project-image { height: auto; aspect-ratio: 1 / 1; }
  .project-card--wide .project-image { height: auto; aspect-ratio: 4 / 3; }
  .project-grid[data-view="grid"] .project-card--flagship .project-image { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .project-info { grid-template-columns: 1fr auto; }.project-type { display: none; }
  .studio-section, .contact-section { grid-template-columns: 1fr; gap: 4rem; }
  .process-heading { grid-template-columns: 1fr; }
  .process-step { grid-template-columns: 2.5rem minmax(0,1fr); gap: 1rem 2rem; }
  .process-step > div { grid-column: 2; }
  .founders-feature { grid-column: auto; margin-top: 0; }
  .founder-profiles { grid-column: auto; gap: 2.5rem; }
  .founder-profile h3 { font-size: clamp(1.55rem, 4vw, 2rem); }
  .founders-closing { grid-column: auto; }
  .name-story { grid-column: auto; }
  .name-story-layer { grid-template-columns: 2.5rem minmax(0,1fr); gap: 1.2rem 1.5rem; }
  .name-story-copy { grid-column: 2; }
  .services { grid-column: auto; margin-top: 0; }
  .service-row { grid-template-columns: 12% 1fr; }.service-row p { grid-column: 2; }
  .contact-section { min-height: auto; }
  .site-footer { grid-template-columns: 1fr auto; }.site-footer p:first-of-type { display: none; }
  .dialog-hero { width: auto; min-height: 78svh; aspect-ratio: auto; margin: 0; padding: 6rem var(--pad) 3rem; }
  .dialog-hero-copy h2 { font-size: clamp(4rem,14vw,7rem); }
  .dialog-story { grid-template-columns: 1fr; gap: 4rem; }
  .dialog-data-column, .dialog-concept { grid-column: 1; grid-row: auto; max-width: none; }
  .dialog-project-nav { grid-template-columns: 1fr; }
  .dialog-project-nav button + button { border-top: 1px solid var(--gray-300); border-left: 0; }

  html[lang="th"] .site-nav { font-size: 2rem; line-height: 1.4; }
  html[lang="th"] .hero-title { margin-top: 15vh; font-size: clamp(3.1rem, 13.5vw, 6.25rem); line-height: 1.16; }
  html[lang="th"] .hero-title span:nth-child(2) { margin-left: 5vw; }
  html[lang="th"] .hero-title span:nth-child(3) { margin-left: 17vw; }
  html[lang="th"] .section-heading h2,
  html[lang="th"] .studio-intro h2,
  html[lang="th"] .process-heading h2,
  html[lang="th"] .contact-copy h2,
  html[lang="th"] .dialog-hero-copy h2 { line-height: 1.22; }
}

@media (max-width: 560px) {
  .dialog-plan-row { flex-direction: column; }
  .dialog-plan-row .dialog-plan-item { width: 100%; }
  .site-header { gap: .35rem; }
  .utility-btn { min-width: 1.9rem; height: 1.9rem; }
  .project-actions { align-items: stretch; flex-direction: column; gap: 1rem; }
  .project-grid[data-view="index"] .project-open { grid-template-columns: 35% 1fr; gap: 1rem; }
  .project-grid[data-view="index"] .project-image,
  .project-grid[data-view="index"] .project-card:not(.project-card--wide) .project-image { height: 30vw; min-height: 110px; }
  .project-grid[data-view="index"] .project-info h3 { font-size: clamp(1.35rem, 6vw, 1.8rem); }
  .process-heading { padding-bottom: 5rem; }
  .process-heading h2 { margin-bottom: 2.5rem; }
  .process-grid { gap: 4.5rem; }
  .process-step { grid-template-columns: 2rem minmax(0,1fr); gap: .8rem 1rem; }
  .process-step h3 { font-size: clamp(2rem,9vw,3.1rem); }
  .process-step p { font-size: .96rem; }
  .process-closing { margin-top: 8rem; }
  .studio-manifesto { min-height: 65vh; padding-top: 6rem; padding-bottom: 6rem; }
  .founders-image { height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; }
  .founders-caption { right: .85rem; bottom: .85rem; left: .85rem; }
  .founders-caption strong { max-width: 26ch; font-size: .72rem; line-height: 1.45; }
  .founder-profiles { grid-template-columns: 1fr; gap: 2rem; }
  .founder-profile + .founder-profile { padding-top: 2rem; border-top: 1px solid var(--gray-300); }
  .founder-profile h3 { font-size: clamp(1.75rem, 8vw, 2.5rem); white-space: normal; }
  .name-story-head h3 { font-size: clamp(4.5rem,19vw,7rem); }
  .name-story-layer { grid-template-columns: 2rem minmax(0,1fr); gap: .85rem 1rem; }
  .name-story-layer h4 { font-size: clamp(2.1rem,9vw,3.3rem); }
  .name-letters > div { grid-template-columns: 1fr; gap: .15rem; }
  .name-story-closing { margin-top: 6rem; }
  .dialog-close { top: .8rem; left: .8rem; padding: .68rem .8rem; }
  .dialog-hero { width: auto; min-height: 72svh; aspect-ratio: auto; margin: 0; padding: 6rem var(--pad) 2rem; }
  .dialog-hero-copy { max-width: 100%; }
  .dialog-hero-copy h2 { font-size: clamp(3.2rem,16vw,5rem); line-height: .84; }
  .dialog-photo-credit { top: 1.1rem; right: .8rem; }
  .dialog-scroll-cue { right: auto; bottom: 1.25rem; left: var(--pad); }
  .dialog-scroll-cue > span:first-child { display: none; }
  .dialog-story { gap: 3rem; padding: 4.5rem var(--pad) 4rem; }
  .dialog-details div { grid-template-columns: minmax(6.5rem, 40%) 1fr; gap: .45rem; padding: .12rem 0; }
  .dialog-lead { font-size: inherit; line-height: 1.85; }
  .dialog-gallery[data-layout] { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .4rem; padding-right: 0; padding-bottom: 4rem; padding-left: 0; }
  .dialog-gallery[data-layout].has-drawings { padding-bottom: .4rem; }
  .dialog-gallery[data-layout] .dialog-gallery-item:nth-child(n) { grid-column: 1 / -1; grid-row: auto; }
  .dialog-gallery-item .dialog-gallery-open { height: auto; }
  .dialog-gallery-item img { height: auto; aspect-ratio: auto; object-fit: contain; }
  .dialog-drawings { padding: 1.5rem 0 4rem; }
  .image-lightbox[open] { grid-template-columns: 3rem 1fr 3rem; }
  .lightbox-figure { padding: 4.5rem 0 1rem; }
  .lightbox-close { top: .7rem; right: .7rem; }
  .lightbox-arrow--previous { left: 0; }
  .lightbox-arrow--next { right: 0; }
  .dialog-project-nav button { min-height: 125px; }


  html[lang="th"] .hero-title { font-size: clamp(2.8rem, 12.5vw, 4.8rem); }
  html[lang="th"] .studio-manifesto blockquote { font-size: clamp(2.25rem, 10vw, 4.2rem); }
}

@media (min-width: 561px) and (max-width: 700px) {
  .founder-profiles { grid-template-columns: 1fr; gap: 2rem; }
  .founder-profile + .founder-profile { padding-top: 2rem; border-top: 1px solid var(--gray-300); }
  .founder-profile h3 { font-size: clamp(1.9rem, 7vw, 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Keep the Studio narrative comfortable across tablet widths. */
.studio-section > *, .name-story-layer > *, .name-letters > div > * { min-width: 0; }
.name-story + .founder-profiles { margin-top: clamp(1rem,3vw,3rem); }
@media (min-width: 701px) and (max-width: 1100px) {
  .studio-section { grid-template-columns: minmax(0,1fr); gap: 4rem; }
  .studio-copy { max-width: 720px; }
  .name-story-layer { grid-template-columns: 2.5rem minmax(0,1fr); gap: 1.2rem 1.5rem; }
  .name-story-copy { grid-column: 2; }
  .founder-profiles { gap: clamp(2rem,5vw,4rem); }
}
@media (max-width: 700px) {
  .founder-profile h3 { white-space: normal; line-height: 1.1; }
  .name-story-copy { grid-column: 1 / -1; }
  .name-story-closing { margin-top: 4rem; }
}

/* LAB research board: quiet copy beside a material axonometric. */
.lab-intro { grid-template-columns: 1fr 1fr; padding-top: 8rem; padding-bottom: 3rem; gap: 4vw; }
.lab-intro h2 { font-size: clamp(3.4rem,6vw,6rem); line-height: .93; }
.lab-intro-copy p:first-child { font-size: clamp(1rem,1.3vw,1.2rem); }
.lab-reference-board { display: grid; grid-template-columns: minmax(240px,.72fr) minmax(0,1.65fr); gap: clamp(2rem,4vw,5rem); align-items: start; margin: 0 var(--pad) 5rem; }
.lab-reference-board > * { min-width: 0; }
.lab-reference-board .lab-question { display: block; margin: 0; padding: 1.5rem 0 0; }
.lab-reference-board .lab-question h3 { font-size: clamp(2rem,2.8vw,3.25rem); line-height: 1.02; margin-bottom: 1.7rem; }
.lab-reference-board .lab-prose p { font-size: .9rem; line-height: 1.85; }
.lab-reference-board .lab-hero { margin: 0; padding: 0; }
.lab-reference-board .lab-hero img { height: auto; min-height: 0; object-fit: contain; width: 100%; }
.lab-reference-board .lab-hero figcaption { margin: .7rem 0 0; }
.lab-program { margin-bottom: 5rem; }
.lab-program article { background: transparent; min-height: 0; padding: 1.4rem 1rem 1.4rem 0; }
.lab-views-intro h3,.lab-detail-head h3,.lab-assembly h3,.lab-closing h3 { font-size: clamp(2.5rem,4vw,4.25rem); }
.lab-detail { margin-top: 5rem; margin-bottom: 5rem; }
.lab-crop { height: clamp(220px,24vw,350px); background: #f7f5ef; }
.lab-crop img { transform: scale(1.35); }
.lab-crop--roof img { object-position: 75% 0%; transform-origin: 75% 15%; }
.lab-crop--join img { object-position: 24% 55%; transform-origin: 24% 50%; }
.lab-crop--base img { object-position: 25% 95%; transform-origin: 25% 85%; }
.lab-assembly { padding: 5rem 0; }
.lab-closing-image img { aspect-ratio: auto; object-fit: contain; }
@media (max-width: 1100px) { .lab-reference-board { grid-template-columns: minmax(200px,.7fr) minmax(0,1.3fr); gap: 2rem; } }
@media (max-width: 850px) {
  .lab-intro { grid-template-columns: 1fr; padding-top: 7rem; gap: 1.5rem; }
  .lab-reference-board { grid-template-columns: 1fr; gap: 2rem; }
  .lab-reference-board .lab-hero { grid-row: 1; }
  .lab-reference-board .lab-question { padding-top: 0; }
  .lab-detail-grid { gap: 2rem; }
  .lab-crop { height: 65vw; max-height: 420px; }
}

/* LAB question index and linked study. */
#lab-study { display: none; }
body[data-page="lab"] #lab { display: block; }
body[data-page="lab-study"] #lab-study { display: block; }
.lab-index { padding: 9rem var(--pad) 7rem; background: #fff; min-height: 85svh; }
.lab-index-heading { margin-bottom: 3rem; }
.lab-index-heading h2 { margin: 0 0 1.5rem; font-family: var(--serif); font-size: clamp(4.5rem,8vw,8rem); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.lab-index-heading p { max-width: 580px; margin: 0; color: var(--gray-700); font-size: 1rem; line-height: 1.8; }
.lab-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 3.5rem 1.5rem; }
.lab-card { min-width: 0; }
.lab-upcoming-questions { margin-top: clamp(4rem,8vw,7rem); }
.lab-question-status { display: block; color: var(--gray-700); font-size: .875rem; line-height: 1.6; }
html[lang="th"] .lab-question-status { font-family: var(--thai); }
.lab-card-link { display: block; }
.lab-card-image { overflow: hidden; background: #f7f5ef; aspect-ratio: 1.6 / 1; }
.lab-card-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.lab-card-link:hover img { transform: scale(1.035); }
.lab-card-link:focus-visible { outline: 1px solid currentColor; outline-offset: .6rem; }
.lab-card h3 { margin: 1.4rem 0 .8rem; max-width: 26ch; font-family: var(--serif); font-size: clamp(2.1rem,3.2vw,3.3rem); font-weight: 400; line-height: 1.08; letter-spacing: -.03em; }
.lab-card p { max-width: 55ch; margin: 0; color: var(--gray-700); font-size: 1rem; line-height: 1.75; }
.lab-back { grid-column: 1 / -1; justify-self: start; font-size: .82rem; color: var(--gray-700); text-decoration: underline; text-underline-offset: .25rem; }
.lab-intro h2 { font-size: clamp(2.8rem,4.5vw,5rem); line-height: 1.02; }
html[lang="th"] .lab-card h3, html[lang="th"] .lab-intro h2 { font-family: var(--thai); font-weight: 300; font-size: clamp(1.7rem,2.5vw,2.6rem); line-height: 1.45; letter-spacing: 0; }
html[lang="th"] .lab-index-heading p, html[lang="th"] .lab-card p, html[lang="th"] .lab-back { font-family: var(--thai); }
@media (max-width: 850px) { .lab-index { padding-top: 7rem; padding-bottom: 5rem; } .lab-card-grid { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .lab-card-image img { transition: none; } }

/* Image-free research topics and ordered project sequences. */
.lab-reference-board { display: block; }
.lab-reference-board .lab-question { max-width: 760px; }
.dialog-gallery[data-layout="sequence"] { grid-auto-flow: row; grid-auto-rows: auto; align-items: start; }
.dialog-gallery[data-layout="sequence"] .dialog-gallery-item:nth-child(n) { grid-column: span 6; grid-row: auto; }
.dialog-gallery[data-layout="sequence"] .dialog-gallery-item:first-child { grid-column: 1 / -1; }
.dialog-gallery[data-layout="sequence"] img { height: auto; object-fit: contain; }
@media (max-width: 850px) {
  .dialog-gallery[data-layout="sequence"] .dialog-gallery-item:nth-child(n) { grid-column: 1 / -1; }
}

/* Ordered portfolio rows, recalculated for the visible category/search results. */
.project-grid[data-view="grid"] { grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-flow: row; }
.project-grid[data-view="grid"] .project-card[data-columns="2"] { grid-column: span 3; }
.project-grid[data-view="grid"] .project-card[data-columns="1"] { grid-column: 1 / -1; }
.project-grid[data-view="grid"] .project-card[data-columns="3"] { grid-column: span 2; }
.project-grid[data-view="grid"] .project-card[data-columns] .project-image { height: auto; aspect-ratio: 1; }
.project-grid[data-view="grid"] .project-card[data-columns="1"] .project-image { aspect-ratio: 2 / 1; }
.project-year { color: var(--gray-500); font-size: .66rem; letter-spacing: .08em; }
/* Natural aspect ratios create equal-height rows without cropped photos or holes. */
.dialog-gallery[data-layout="rows"] { display: flex; flex-direction: column; gap: var(--gallery-gap); }
.dialog-gallery-row { display: grid; gap: var(--gallery-gap); align-items: start; min-width: 0; }
.dialog-gallery[data-layout="rows"] .dialog-gallery-item:nth-child(n) { display: block; min-width: 0; grid-column: auto; grid-row: auto; }
.dialog-gallery[data-layout="rows"] .dialog-gallery-open { height: auto; }
.dialog-gallery[data-layout="rows"] img { width: 100%; height: auto; aspect-ratio: var(--image-ratio); object-fit: contain; }
@media (max-width: 850px) {
  .project-grid[data-view="grid"] { grid-template-columns: minmax(0,1fr); }
  .project-grid[data-view="grid"] .project-card[data-columns] { grid-column: 1 / -1; }
  .project-grid[data-view="grid"] .project-card[data-columns="1"] .project-image { aspect-ratio: 3 / 2; }
  .dialog-gallery-row { grid-template-columns: minmax(0,1fr) !important; gap: .4rem; }
  .dialog-gallery[data-layout="rows"] { gap: .4rem; }
}

/* Drawing cover preserves the complete section, including its annotations. */
.project-card--drawing .project-image { background: #fff; }
.project-card--drawing .project-image img { object-fit: contain; transform: none; }
.project-card--drawing .project-image::after { display: none; }
.project-card--drawing .image-note { color: #666; text-shadow: none; }
.project-dialog--drawing .dialog-hero { background-color: #fff; background-size: contain; color: #171717; }
.project-dialog--drawing .dialog-hero-shade { background: none; }
.project-dialog--drawing .dialog-hero-copy { padding: .75rem 1rem; background: rgba(255,255,255,.9); }
.project-dialog--drawing .dialog-hero-copy .eyebrow,
.project-dialog--drawing .dialog-photo-credit,
.project-dialog--drawing .dialog-scroll-cue { color: #666; }