/* HAÜS — shared base styles */

:root{
  --cream:#F5F2ED;
  --off-white:#F5F0E8;
  --greige:#E8DDD0;
  --ink:#1C1B19;
  --brown:#6B4423;
  --gold:#C4A882;
  --clay:#C4967A;
  --moss:#3A5C3C;
  --stone:#6B6760;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  overflow-x:hidden;
}
.serif{font-family:'Cormorant Garamond', serif; font-weight:300;}
.thai{font-family:'Noto Sans Thai', sans-serif; font-weight:300;}
.caps{
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-size:11px;
  font-weight:500;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

/* ---------- HEADER ---------- */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:32px 48px;
}
.site-header.solid{
  border-bottom:1px solid var(--greige);
}
.logo{display:flex; flex-direction:column; align-items:flex-start; line-height:1;}
.logo .mark{width:22px; height:14px; margin-bottom:6px;}
.logo .word{font-size:26px; letter-spacing:0.18em; color:var(--ink);}
.logo-img{height:38px; width:auto; display:block;}
.footer-logo-img{height:44px; width:auto; display:block; margin-bottom:14px;}
.site-nav{display:flex; gap:36px;}
.site-nav a{color:var(--ink); padding-bottom:3px;}
.site-nav a.active{border-bottom:1px solid var(--gold);}
.header-right{display:flex; align-items:center; gap:28px;}

/* ---------- BUTTONS ---------- */
.btn-outline{
  display:inline-block;
  border:1px solid var(--ink);
  padding:14px 28px;
  transition:background .25s, color .25s;
}
.btn-outline:hover{background:var(--ink); color:var(--cream);}
.btn-fill{
  display:inline-block;
  background:var(--ink);
  color:var(--cream);
  border:1px solid var(--ink);
  padding:14px 28px;
  transition:opacity .25s;
}
.btn-fill:hover{opacity:.85;}

/* ---------- PAGE HEADS ---------- */
.page-head{
  padding:90px 48px 60px;
  max-width:1240px;
  margin:0 auto;
}
.page-head h1{font-size:52px; line-height:1.1; color:var(--brown); font-weight:300;}
.page-head .rule{width:48px; height:1px; background:var(--ink); margin:22px 0;}
.page-head h1 + .rule + .thai{font-size:44px; line-height:1.25; color:var(--brown); font-weight:400; margin-bottom:14px;}
.page-head .thai{font-size:16px; color:var(--stone); margin-bottom:14px;}
.page-head p.lede{max-width:520px; font-size:14px; line-height:1.7; color:var(--stone);}

/* ---------- PRODUCT CARD ---------- */
.product-card{display:flex; flex-direction:column;}
.product-card .frame{
  width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--off-white);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14%;
}
.product-card .frame img{
  width:100%; height:100%;
  object-fit:contain;
  transition:transform .6s ease;
}
.product-card:hover .frame img{transform:scale(1.05);}
.product-card h3{font-size:26px; font-weight:300; margin-bottom:8px;}
.product-card .dims{color:var(--stone); letter-spacing:0.12em; margin-bottom:8px;}
.product-card .price{letter-spacing:0.12em;}
.product-card .made{color:var(--gold); letter-spacing:0.12em;}

/* ---------- FOOTER ---------- */
.site-footer{
  background:var(--ink);
  color:var(--cream);
  padding:100px 48px 48px;
  margin-top:120px;
}
.footer-grid{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:80px;
}
.footer-grid .word{font-size:22px; letter-spacing:0.18em; margin-bottom:14px;}
.footer-grid .stamp{font-size:12px; color:var(--gold); letter-spacing:0.05em;}
.footer-grid h5{letter-spacing:0.15em; font-size:11px; margin-bottom:22px; color:var(--gold);}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:14px; font-size:14px; opacity:.85;}
.footer-bottom{
  max-width:1240px;
  margin:0 auto;
  border-top:1px solid rgba(245,242,237,.15);
  padding-top:32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  opacity:.6;
}
.socials{display:flex; gap:20px;}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.reveal-group .reveal-item{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}
.reveal-group.is-visible .reveal-item{ opacity:1; transform:translateY(0); }
.reveal-group.is-visible .reveal-item:nth-child(2){transition-delay:.1s;}
.reveal-group.is-visible .reveal-item:nth-child(3){transition-delay:.2s;}
.reveal-group.is-visible .reveal-item:nth-child(4){transition-delay:.3s;}
.reveal-group.is-visible .reveal-item:nth-child(5){transition-delay:.4s;}
.reveal-group.is-visible .reveal-item:nth-child(6){transition-delay:.5s;}
.reveal-group.is-visible .reveal-item:nth-child(7){transition-delay:.6s;}
.reveal-group.is-visible .reveal-item:nth-child(n+8){transition-delay:.7s;}

/* ---------- HERO SLOW ZOOM ---------- */
@keyframes hausKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
.kb{ animation:hausKenBurns 24s cubic-bezier(.25,.1,.25,1) forwards; }

html.no-motion .reveal,
html.no-motion .reveal-group .reveal-item{ opacity:1 !important; transform:none !important; transition:none !important; }
html.no-motion .kb{ animation:none !important; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-group .reveal-item{ opacity:1 !important; transform:none !important; transition:none !important; }
  .kb{ animation:none !important; }
}

@media (max-width: 860px){
  .site-header{padding:24px;}
  .site-nav{display:none;}
  .page-head{padding:56px 24px 40px;}
  .page-head h1{font-size:34px;}
  .site-footer{padding:70px 24px 32px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}