/* Autolist font family, with a quieter image-first hierarchy. */
:root { --font-sans: 'Manrope', 'Noto Sans Thai', sans-serif; }
body { font-family: var(--font-sans); font-size: 14px; font-weight: 300; }
h1, h2, h3 { font-family: var(--font-sans); font-weight: 300; letter-spacing: -.035em; line-height: 1.18; }
h1 { font-size: clamp(34px, 4vw, 60px); }
h2 { font-size: clamp(26px, 2.8vw, 40px); }
h3 { font-size: clamp(22px, 2vw, 30px); }
.brand { font-size: 16px; font-weight: 400; letter-spacing: .24em; }
.brand span { font-weight: 300; }
header nav { font-family: var(--font-sans); font-size: 12px; font-weight: 300; gap: 32px; }
.hero-copy { bottom: 132px; }
.hero-copy h1 { font-size: clamp(34px, 4vw, 58px); font-weight: 300; }
.hero-copy p { font-family: var(--font-sans); font-size: 11px; font-weight: 300; letter-spacing: .04em; margin: 12px 0 0; opacity: .8; }
.project-tabs button { font-family: var(--font-sans); font-weight: 300; font-size: 11px; }
.counter { font-size: 11px; }
.intro p, .studio-layout p, .contact-layout p { font-size: 15px; font-weight: 300; line-height: 1.9; }
.work-caption strong { font-weight: 300; }
.store-card h2 { font-size: clamp(25px, 2.4vw, 34px); }
#menu a { font-family: var(--font-sans); font-size: clamp(26px, 3vw, 36px); font-weight: 300; letter-spacing: -.025em; }
.gallery-top h2 { font-size: 25px; }
.hero:after { background: linear-gradient(180deg,rgba(0,0,0,.16),transparent 25%,transparent 55%,rgba(0,0,0,.4)); }
@media(max-width:700px) {
  .brand { font-size: 14px; }
  .hero-copy { bottom: 158px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-copy p { font-size: 10px; }
  .project-tabs button { font-size: 10px; }
  .intro p, .studio-layout p { font-size: 14px; }
  .gallery-top h2 { font-size: 22px; }
}

/* Left-hand navigation, with easing on both arrival and departure. */
header { gap: 28px; }
.menu-button { order: -1; margin-left: 0; flex-shrink: 0; }
#menu { transform: none; transition: none; }
#menu[open] { animation: drawer-in 800ms cubic-bezier(.16,1,.3,1) both; }
#menu[open]::backdrop { animation: backdrop-in 700ms ease both; }
#menu[open].closing { animation: drawer-out 450ms cubic-bezier(.76,0,.24,1) both; }
#menu[open].closing::backdrop { animation: backdrop-out 450ms ease both; }
#menu[open] a { animation: menu-link-in 850ms cubic-bezier(.16,1,.3,1) both; }
#menu[open] a:nth-of-type(2) { animation-delay: 40ms; }
#menu[open] a:nth-of-type(3) { animation-delay: 80ms; }
#menu[open] a:nth-of-type(4) { animation-delay: 120ms; }
#menu[open] a:nth-of-type(5) { animation-delay: 160ms; }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes drawer-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes backdrop-in { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(15px); } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes menu-link-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@media(max-width:700px) { header { gap: 22px; } .menu-button { margin-left: 0; } }
@media(prefers-reduced-motion:reduce) { #menu[open], #menu[open] a, #menu[open]::backdrop { animation: none!important; } }

.brand{display:flex;align-items:center;line-height:1}.brand img{width:54px;height:54px;object-fit:contain}header{padding-top:24px;padding-bottom:24px}@media(max-width:700px){.brand img{width:46px;height:46px}header{padding-top:20px;padding-bottom:20px}}

/* Monochrome pictogram follows the header text color. */
.brand img{filter:brightness(0)}
header.over-image .brand img{filter:brightness(0) invert(1)}

.brand{gap:14px}.brand .brand-label{display:block;margin:0;text-align:left;font-family:var(--font-sans);font-size:13px;font-weight:300;letter-spacing:.025em;line-height:1.4}@media(max-width:700px){.brand{gap:10px}.brand .brand-label{font-size:11px}}

/* Seven user-selected featured projects. */
.hero-bottom .progress{max-width:100px}.project-tabs{min-width:0;flex:1;justify-content:flex-start;gap:26px;overflow-x:auto}.project-tabs button{flex-shrink:0}@media(max-width:700px){.hero-bottom .progress{display:none}.project-tabs{width:100%}}

.studio-meta{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.studio-meta .certification-badge{width:64px;height:64px;object-fit:contain;flex-shrink:0}@media(max-width:700px){.studio-meta{gap:20px}.studio-meta .certification-badge{width:56px;height:56px}}

.language-switch{display:flex;align-items:center;gap:7px;font-size:10px;white-space:nowrap}.language-switch button{padding:5px 0;font-size:10px;font-weight:300;opacity:.5}.language-switch button[aria-pressed=true]{opacity:1;text-decoration:underline;text-underline-offset:5px}.language-switch>span{opacity:.35}header{gap:24px}@media(max-width:700px){header{gap:16px}.language-switch{margin-left:auto}.brand .brand-label{font-size:10px}.brand{gap:8px}}

/* g3d-home-slow-zoom: keep each featured image moving gently while visible. */
.hero-image {
  transform: scale(1.015);
  transition: opacity var(--slow) var(--ease);
  animation: g3d-home-slow-zoom 30s linear infinite alternate;
  animation-play-state: paused;
}
.hero-image.active { animation-play-state: running; }
@keyframes g3d-home-slow-zoom {
  from { transform: scale(1.015); }
  to { transform: scale(1.10); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none !important; transform: none !important; }
}