/* Kiln House Studio — warm editorial */
:root{
  --clay:#b5553a;--clay-deep:#8a3d28;--cream:#f6efe6;--sand:#e9dccb;--ink:#2b2420;--muted:#7a6d64;--line:#d9cbb9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cormorant Garamond',Georgia,serif;background:var(--cream);color:var(--ink);font-size:19px;line-height:1.55}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.sans{font-family:'Jost',system-ui,sans-serif}
.wrap{width:min(1200px,92vw);margin:0 auto}
/* header */
.hdr{display:flex;align-items:center;justify-content:space-between;padding:28px 0;border-bottom:1px solid var(--line)}
.logo{font-size:26px;letter-spacing:.02em;font-weight:500}
.logo em{font-style:italic;color:var(--clay)}
.nav{display:flex;gap:34px;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase}
.nav a{position:relative;padding-bottom:4px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--clay);transition:width .3s}
.nav a:hover::after,.nav a.on::after{width:100%}
.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:80px 0}
.hero h1{font-size:clamp(44px,6vw,84px);line-height:1;font-weight:400;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--clay)}
.hero p{margin:28px 0 36px;max-width:46ch;color:var(--muted)}
.btn{display:inline-block;font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:16px 30px;border:1px solid var(--ink);transition:all .3s}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn.fill{background:var(--clay);border-color:var(--clay);color:#fff}
.btn.fill:hover{background:var(--clay-deep);border-color:var(--clay-deep)}
.hero-img{position:relative}
.hero-img img{aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 0 0}
.hero-img .tag{position:absolute;bottom:-20px;left:-30px;background:var(--sand);padding:18px 24px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase}
/* sections */
.sec{padding:80px 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:44px}
.sec-head h2{font-size:clamp(32px,4vw,52px);font-weight:400}
.sec-head a{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.card img{aspect-ratio:3/4;object-fit:cover;transition:transform .6s}
.card{overflow:hidden}
.card:hover img{transform:scale(1.04)}
.card .ph{overflow:hidden;background:var(--sand)}
.card h3{font-size:24px;font-weight:400;margin-top:18px}
.card p{color:var(--muted);font-size:16px;font-family:'Jost',sans-serif;letter-spacing:.05em}
.grid.four{grid-template-columns:repeat(4,1fr);gap:24px}
.grid.stagger .card:nth-child(2){margin-top:60px}
/* feature band */
.band{background:var(--ink);color:var(--cream);padding:100px 0}
.band .inner{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.band h2{font-size:clamp(34px,4vw,56px);font-weight:400;line-height:1.1}
.band p{color:#cdbfb1;margin:22px 0}
.band img{aspect-ratio:1;object-fit:cover}
.band .btn{border-color:var(--cream);color:var(--cream)}
.band .btn:hover{background:var(--cream);color:var(--ink)}
/* process */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:s}
.step{border-top:1px solid var(--line);padding-top:24px}
.step::before{counter-increment:s;content:"0" counter(s);font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;color:var(--clay);display:block;margin-bottom:12px}
.step h3{font-size:26px;font-weight:400;margin-bottom:10px}
.step p{color:var(--muted);font-size:17px}
/* quote */
.quote{text-align:center;padding:90px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quote blockquote{font-size:clamp(26px,3vw,40px);font-style:italic;font-weight:300;max-width:22ch;margin:0 auto 20px;line-height:1.3}
.quote cite{font-family:'Jost',sans-serif;font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* newsletter */
.news{background:var(--sand);padding:70px 0;text-align:center}
.news h2{font-size:36px;font-weight:400}
.news form{display:flex;max-width:480px;margin:28px auto 0;border-bottom:1px solid var(--ink)}
.news input{flex:1;background:none;border:0;padding:14px 0;font-family:'Jost',sans-serif;font-size:15px;outline:0}
.news button{background:none;border:0;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
/* footer */
.ftr{padding:60px 0 30px;border-top:1px solid var(--line)}
.ftr .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.ftr h4{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.ftr li{list-style:none;margin-bottom:8px;font-size:17px;color:var(--muted)}
.ftr li a:hover{color:var(--clay)}
.ftr .copy{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--muted);display:flex;justify-content:space-between}
/* page intro */
.intro{padding:70px 0 30px}
.intro .eyebrow{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--clay)}
.intro h1{font-size:clamp(40px,5vw,72px);font-weight:400;line-height:1.05;margin:14px 0}
.intro p{max-width:58ch;color:var(--muted)}
/* filters */
.filters{display:flex;gap:28px;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-bottom:50px;flex-wrap:wrap}
.filters a{color:var(--muted)}
.filters a.on,.filters a:hover{color:var(--ink)}
/* product */
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;padding:60px 0}
.product .gal{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.product .gal img:first-child{grid-column:span 2;aspect-ratio:4/3;object-fit:cover}
.product .gal img{aspect-ratio:1;object-fit:cover}
.product h1{font-size:48px;font-weight:400;line-height:1.05}
.product .meta{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin-bottom:12px}
.product p{color:var(--muted);margin:22px 0}
.spec{border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.spec span:first-child{font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.actions{display:flex;gap:14px;margin:30px 0;flex-wrap:wrap}
/* about */
.about-hero img{aspect-ratio:21/9;object-fit:cover}
.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:80px 0}
.two h2{font-size:clamp(32px,4vw,50px);font-weight:400;line-height:1.1;margin-bottom:20px}
.two p{color:var(--muted);margin-bottom:16px}
.two img{aspect-ratio:4/5;object-fit:cover}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:0 0 80px}
.values div{background:var(--sand);padding:30px}
.values h3{font-size:24px;font-weight:400;margin-bottom:8px}
.values p{font-size:16px;color:var(--muted);font-family:'Jost',sans-serif}
/* contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding:60px 0 90px}
.form label{display:block;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:22px 0 8px;color:var(--muted)}
.form input,.form textarea,.form select{width:100%;background:none;border:0;border-bottom:1px solid var(--ink);padding:12px 0;font-family:'Jost',sans-serif;font-size:16px;outline:0}
.form textarea{min-height:120px;resize:vertical}
.info h3{font-size:26px;font-weight:400;margin:28px 0 8px}
.info p{color:var(--muted)}
.info .map{aspect-ratio:4/3;background:var(--sand);display:grid;place-items:center;font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:30px}
/* 404 */
.nf{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.nf .txt{padding:8vw}
.nf .num{font-size:clamp(120px,22vw,300px);line-height:.8;color:var(--clay);font-style:italic;font-weight:300}
.nf h1{font-size:clamp(30px,4vw,56px);font-weight:400;margin:20px 0 14px}
.nf p{color:var(--muted);max-width:40ch;margin-bottom:34px}
.nf .pic{height:100vh}
.nf .pic img{height:100%;width:100%;object-fit:cover}
@media(max-width:900px){
  .nav{display:none}.burger{display:block}
  .hero,.band .inner,.product,.two,.contact,.nf{grid-template-columns:1fr}
  .grid,.grid.four,.steps,.values{grid-template-columns:1fr 1fr}
  .grid.stagger .card:nth-child(2){margin-top:0}
  .ftr .cols{grid-template-columns:1fr 1fr}
  .nf .pic{height:50vh;order:-1}
  .hero-img .tag{left:0}
}
@media(max-width:560px){.grid,.grid.four,.steps,.values{grid-template-columns:1fr}.ftr .copy{flex-direction:column;gap:8px}}