/* House of Querida — quiet luxury system
   Palette: bone #F7F4EC · ink #232019 · gold #A08A50 · plaster #E2D8C2 · sand #EFEADB */

:root{
  --bone:#F7F4EC; --card:#FDFBF5; --ink:#232019; --ink-soft:#2E2A20;
  --body:#5F584A; --muted:#8C8471; --label:#6E6656;
  --gold:#A08A50; --gold-deep:#7A6537; --rule:#E3DECF; --hair:#D8D1BC;
  --plaster:#E2D8C2; --sand:#EFEADB; --sand-deep:#F3EFE3; --clay:#B9A88A; --hero:#CDBFA4;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:'Jost',sans-serif;font-weight:300;line-height:1.9;font-size:16px}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:'Cormorant Garamond',serif;font-weight:400}

/* labels & rules */
.eyebrow{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:400}
.hairline{width:44px;border:0;border-top:1px solid #C9B98F;margin:26px 0}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* header */
header{border-bottom:.5px solid var(--rule);background:var(--bone);position:sticky;top:0;z-index:50}
.nav{max-width:1200px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.wordmark{font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:3px;white-space:nowrap}
nav ul{list-style:none;display:flex;gap:26px}
nav a{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--label);padding-bottom:3px}
nav a:hover{color:var(--ink)}
nav a.active{color:var(--ink);border-bottom:1px solid var(--gold)}
nav a:focus-visible,.btn:focus-visible,a:focus-visible{outline:1.5px solid var(--gold-deep);outline-offset:3px}
#menu-toggle{display:none}
.hamburger{display:none;cursor:pointer;font-size:12px;letter-spacing:2px;color:var(--label);border:.5px solid var(--hair);padding:8px 14px}

/* hero */
.hero{position:relative;min-height:72vh;display:flex;align-items:flex-end;background:var(--hero);overflow:hidden}
.hero .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ph-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8A7D5F;font-size:12px;letter-spacing:2px;text-transform:uppercase;text-align:center}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:78%;background:linear-gradient(to top,rgba(247,244,236,.96) 0%,rgba(247,244,236,.72) 40%,rgba(247,244,236,.30) 72%,rgba(247,244,236,0) 100%);pointer-events:none}
.hero .hero-text{z-index:2}
.hero h1{text-shadow:0 0 24px rgba(247,244,236,.95),0 0 8px rgba(247,244,236,.9),0 1px 2px rgba(247,244,236,.8)}
.hero .hero-sub{color:#4A4436;text-shadow:0 0 16px rgba(247,244,236,.95),0 0 6px rgba(247,244,236,.9)}
.hero-text{position:relative;padding:0 0 64px 0;width:100%}
.hero-text .wrap{max-width:1200px}
h1{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,6vw,64px);line-height:1.12;color:var(--ink-soft)}
h1 em{font-style:italic;color:var(--gold-deep)}
.hero-sub{font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--body);margin-top:18px}

/* type scale */
h2{font-family:'Cormorant Garamond',serif;font-size:clamp(26px,3.4vw,36px);line-height:1.35;color:var(--ink-soft)}
h3{font-family:'Cormorant Garamond',serif;font-size:clamp(21px,2.4vw,26px);line-height:1.45;color:var(--ink-soft)}
p{color:var(--body);max-width:56ch}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}

/* layout blocks */
section{padding:0}
.split{display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch}
.split.flip{grid-template-columns:.9fr 1.1fr}
.split .text{padding:clamp(48px,7vw,88px) clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.split .text .eyebrow{margin-bottom:20px}
.split .text p{margin-top:18px}
.pad{padding:clamp(48px,7vw,88px) 24px}

/* image placeholders (swap for <img>) */
.ph{background:var(--plaster);display:flex;align-items:center;justify-content:center;min-height:320px;color:#9C8E6F;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-align:center;line-height:2;padding:20px}
.ph.sand{background:var(--sand)}
.ph img{width:100%;height:100%;object-fit:cover}

/* full-bleed quote band */
.band{position:relative;background:var(--clay);padding:clamp(56px,9vw,96px) 24px;display:flex;align-items:center;justify-content:center}
.band blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(20px,2.6vw,27px);color:#332D21;text-align:center;max-width:34ch;line-height:1.55}

/* collections index */
.index{border-top:.5px solid var(--rule)}
.index .row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;border-bottom:.5px solid var(--rule)}
.index .row .name{font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--ink-soft)}
.index .row .essence{font-size:13px;font-style:italic;color:var(--label);text-align:right}

/* CTA */
.cta{background:var(--sand);text-align:center;padding:clamp(48px,7vw,80px) 24px}
.cta h3{font-size:clamp(22px,2.6vw,27px)}
.btn{display:inline-block;border:.5px solid var(--ink);padding:14px 34px;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ink);margin-top:24px;transition:background .3s,color .3s}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn.solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn.solid:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.cta .alt{font-size:12.5px;font-style:italic;color:var(--muted);margin-top:16px}
.cta .alt a{color:var(--gold-deep);border-bottom:.5px solid #C9B98F}

/* audience sections */
.aud{border-top:.5px solid var(--rule)}
.aud.short{background:var(--sand-deep);text-align:center;padding:clamp(44px,6vw,64px) 24px}
.aud.short h3{max-width:24ch;margin:12px auto 0}
.aud.short p{margin:12px auto 0}

/* contact rows */
.contact-rows{margin-top:44px;max-width:520px}
.contact-rows .crow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-top:.5px solid var(--rule)}
.contact-rows .crow:last-child{border-bottom:.5px solid var(--rule)}
.crow .k{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--label)}
.crow .v{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ink-soft)}
.crow .v:hover{color:var(--gold-deep)}

/* form */
.form-side{background:var(--sand);padding:clamp(44px,6vw,64px) clamp(28px,5vw,56px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--label);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--card);border:.5px solid var(--hair);padding:11px 13px;font-family:'Jost',sans-serif;font-weight:300;font-size:15px;color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 49%,var(--label) 50%),linear-gradient(135deg,var(--label) 50%,transparent 51%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.form-side .btn{width:100%;text-align:center;margin-top:8px}
.form-note{text-align:center;font-size:13px;font-style:italic;color:var(--label);line-height:1.9;margin-top:24px}
.quote-card{background:var(--sand-deep);border-left:2px solid #C9B98F;padding:20px 22px;margin-top:34px;max-width:46ch}
.quote-card p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--body)}

/* footer */
footer{border-top:.5px solid var(--rule)}
.foot{max-width:1200px;margin:0 auto;padding:26px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.foot .tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;letter-spacing:1px;text-transform:none}

/* motion restraint */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* mobile */
@media (max-width:820px){
  .hamburger{display:block}
  nav{position:absolute;left:0;right:0;top:100%;background:var(--bone);border-bottom:.5px solid var(--rule);display:none}
  nav ul{flex-direction:column;gap:0;padding:8px 24px 20px}
  nav li{border-top:.5px solid var(--rule)}
  nav a{display:block;padding:14px 0}
  #menu-toggle:checked ~ nav{display:block}
  .split,.split.flip{grid-template-columns:1fr}
  .split .ph{min-height:260px;order:2}
  .split.flip .ph{order:2}
  .index .row{flex-direction:column;align-items:flex-start;gap:4px}
  .index .row .essence{text-align:left}
  .hero{min-height:60vh}
  .foot{flex-direction:column;gap:8px;text-align:center}
}