
:root{
  --black:#0a0a0a;
  --soft-black:#141414;
  --cream:#f4efe7;
  --champagne:#c8a46a;
  --white:#ffffff;
  --muted:#9a9a9a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--white);
  background:var(--black);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1120px,calc(100% - 32px));margin:auto}
.nav{
  position:sticky;top:0;z-index:20;
  background:rgba(10,10,10,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
.nav-inner{height:72px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:Georgia,serif;letter-spacing:.28em;font-size:18px}
.menu{display:none;gap:28px;font-size:14px;letter-spacing:.08em}
.menu a:hover{color:var(--champagne)}
.menu-button{background:none;border:0;color:white;font-size:28px}
.mobile-menu{display:none;padding:0 16px 18px}
.mobile-menu.open{display:grid;gap:12px}
.hero{
  min-height:calc(100vh - 72px);
  display:grid;
  align-items:end;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.85)),
    url('assets/hero.jpg');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
}
.hero-copy{padding:80px 0 56px;max-width:760px}
.eyebrow{color:var(--champagne);text-transform:uppercase;letter-spacing:.28em;font-size:12px}
h1{
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(42px,9vw,86px);
  line-height:1.02;
  margin:14px 0 20px;
  font-weight:400
}
.hero p{font-size:17px;max-width:600px;color:#e5e5e5}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;border:1px solid var(--champagne);
  text-transform:uppercase;letter-spacing:.14em;font-size:12px
}
.btn.primary{background:var(--champagne);color:#111}
.btn:hover{transform:translateY(-1px)}
section{padding:80px 0}
.section-title{font-family:Georgia,serif;font-size:clamp(32px,6vw,54px);font-weight:400;margin:0 0 12px}
.section-sub{color:#aaa;max-width:650px;margin:0 0 36px}
.grid{display:grid;grid-template-columns:1fr;gap:24px}
.card{background:var(--soft-black);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.card-media{aspect-ratio:4/5;overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover img{transform:scale(1.03)}
.card-body{padding:22px}
.card h3{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0 0 8px}
.meta{color:var(--champagne);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.story{background:var(--cream);color:#161616}
.story-wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.story img{border-radius:1px}
.story p{color:#454545}
.quote{font-family:Georgia,serif;font-size:30px;line-height:1.25}
.contact-grid{display:grid;gap:16px}
.contact-card{border:1px solid rgba(255,255,255,.12);padding:26px}
.contact-card span{display:block;color:var(--champagne);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
footer{border-top:1px solid rgba(255,255,255,.1);padding:30px 0;color:#aaa;font-size:13px}
.footer-grid{display:grid;gap:12px}
.product-page{padding:48px 0 80px}
.product-layout{display:grid;gap:34px}
.product-image{background:#111}
.product-info h1{font-size:clamp(38px,7vw,64px);margin-top:0}
.price{font-size:24px;color:var(--champagne)}
.details{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:20px}
.badge{display:inline-block;border:1px solid var(--champagne);color:var(--champagne);padding:6px 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.legal{max-width:800px}
.legal h1{font-size:48px}
.notice{border:1px solid #b98d3f;background:#2b2112;padding:16px;margin:24px 0;color:#f3d8a8}
@media(min-width:760px){
  .hero{background-position:center 12%}
  .menu{display:flex}
  .menu-button{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .story-wrap{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr auto}
  .product-layout{grid-template-columns:1.1fr .9fr;align-items:start}
}

/* Collection and product introduction prices */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:20px 0 0}
.price-label{font-size:14px;font-weight:400;color:#ddd}
.price strong{font-size:28px;font-weight:500;white-space:nowrap}
.product-info .price{margin:20px 0 24px}

.order-info{margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.12)}
.order-info h3{font-family:Georgia,serif;font-size:28px;font-weight:400;margin:0 0 24px}
.order-info-grid{display:grid;gap:24px}
.order-info h4{font-size:16px;color:var(--champagne);margin:0 0 10px}
.order-info p,.product-order-info p{font-size:16px;line-height:1.6;color:#ddd;margin:0 0 12px}
.product-order-info{margin-top:22px}
@media(min-width:760px){.order-info-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Preserve original product photo proportions at every viewport width. */
.product-layout > *{min-width:0}
.product-image img{width:100%;height:auto;object-fit:contain}
.order-page{max-width:760px;padding:48px 0 80px}
.order-page h1{font-size:clamp(36px,6vw,54px)}
.order-form{display:grid;gap:18px;margin-top:28px}
.order-form label{display:grid;gap:6px;font-size:16px}
.order-form input,.order-form select,.order-form textarea{width:100%;background:#141414;color:#fff;border:1px solid #777;padding:12px;font:inherit;border-radius:0}
.order-form textarea{min-height:220px;resize:vertical}
.order-form .btn{font:inherit;font-size:14px;cursor:pointer}
.order-help{color:#ccc;font-size:16px}
.order-status{min-height:26px;color:var(--champagne)}
