/* ============================================
   BEYOND THE PEWS — SHARED BRAND STYLESHEET
   Deep Wine / Rose Gold / Cream · Accessible Luxury
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --wine: #5C1A2C;
  --wine-deep: #3E1120;
  --rose: #B8755A;
  --rose-light: #D6A088;
  --cream: #FAF5EF;
  --cream-dim: #F1E8DD;
  --ink: #2A1015;
  --line: rgba(92,26,44,0.14);
  --shadow: 0 20px 50px rgba(62,17,32,0.10);

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  color:var(--wine);
  margin:0 0 0.5em;
  line-height:1.12;
}
h1{ font-size:clamp(2.6rem,6vw,4.6rem); font-weight:600; }
h2{ font-size:clamp(1.9rem,3.6vw,2.8rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); }

p{ margin:0 0 1em; }

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.72rem;
  color:var(--rose);
  font-weight:500;
}

.container{
  max-width:1120px;
  margin:0 auto;
  padding:0 28px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border-radius:2px;
  font-family:var(--sans);
  font-size:0.9rem;
  letter-spacing:0.04em;
  font-weight:500;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .25s ease;
}
.btn-primary{
  background:var(--wine);
  color:var(--cream);
}
.btn-primary:hover{ background:var(--wine-deep); transform:translateY(-1px); }
.btn-outline{
  background:transparent;
  border:1px solid var(--wine);
  color:var(--wine);
}
.btn-outline:hover{ background:var(--wine); color:var(--cream); }

/* ---------- Header / Nav — bordeaux, matching the original brand ---------- */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg, var(--wine-deep), var(--wine));
  border-bottom:1px solid rgba(184,117,90,0.35);
  box-shadow:0 6px 24px rgba(62,17,32,0.25);
}
.nav-wrap{
  max-width:1120px; margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:var(--serif); font-weight:700; font-size:1.5rem; color:var(--cream);
  letter-spacing:0.02em;
}
.logo span{ color:var(--rose-light); }
nav.main-nav{ display:flex; gap:30px; align-items:center; }
nav.main-nav a{
  font-size:0.85rem; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--cream); opacity:0.85; font-weight:500; position:relative; padding:4px 0;
}
nav.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px;
  background:var(--rose-light); transition:width .25s ease;
}
nav.main-nav a:hover::after, nav.main-nav a.active::after{ width:100%; }
nav.main-nav a:hover, nav.main-nav a.active{ opacity:1; color:var(--rose-light); }
.lang-switch{ display:flex; gap:6px; font-size:0.75rem; letter-spacing:0.05em; opacity:0.85; }
.lang-switch a{ padding:2px 6px; color:var(--cream); opacity:0.7; }
.lang-switch a.active{ opacity:1; color:var(--rose-light); border-bottom:1px solid var(--rose-light); }
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; color:var(--cream); cursor:pointer; }

@media (max-width:820px){
  nav.main-nav{
    position:fixed; top:70px; left:0; right:0; bottom:0;
    background:var(--wine-deep); flex-direction:column; justify-content:flex-start;
    padding:40px 28px; gap:26px; transform:translateX(100%); transition:transform .3s ease;
  }
  nav.main-nav.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
}

/* ---------- Hero — bordeaux, matching the original brand ---------- */
.hero{
  position:relative;
  padding:110px 0 90px;
  text-align:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% -20%, rgba(184,117,90,0.35), transparent 60%), linear-gradient(180deg, var(--wine-deep) 0%, var(--wine) 100%);
  color:var(--cream);
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(250,245,239,0.025) 0px, rgba(250,245,239,0.025) 1px, transparent 1px, transparent 60px);
  pointer-events:none;
}
.hero h1{ margin-bottom:0.3em; color:var(--cream); }
.hero .lede{
  max-width:620px; margin:0 auto 2em; font-size:1.15rem; color:var(--cream); opacity:0.82;
}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.hero .btn-outline{ border-color:var(--cream); color:var(--cream); }
.hero .btn-outline:hover{ background:var(--cream); color:var(--wine-deep); }
.hero .eyebrow{ color:var(--rose-light); }
.hero .btn-primary{ background:var(--rose); color:var(--cream); }
.hero .btn-primary:hover{ background:var(--rose-light); }

/* ---------- Section shell ---------- */
section{ padding:90px 0; }
section.alt{ background:var(--cream-dim); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }

/* ---------- Pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:38px 30px; text-align:center; box-shadow:var(--shadow);
}
.pillar .num{ font-family:var(--serif); font-size:2.2rem; color:var(--rose-light); font-weight:600; }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- Cards (guests / shop) ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:28px; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .25s ease;
}
.card:hover{ transform:translateY(-4px); }
.card img{ width:100%; height:190px; object-fit:cover; background:var(--cream-dim); }
.card-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-tag{ font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--rose); font-weight:600; }
.card h3{ margin:0; }
.card .card-desc{ font-size:0.92rem; opacity:0.8; flex:1; }
.card-links{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.card-links a{ font-size:0.82rem; color:var(--wine); border-bottom:1px solid var(--rose); padding-bottom:1px; }
.price{ font-family:var(--serif); font-weight:600; color:var(--wine); font-size:1.15rem; }

/* ---------- Forms ---------- */
form.stack{ display:flex; flex-direction:column; gap:16px; max-width:460px; margin:0 auto; }
.field label{ display:block; font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--wine); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:2px;
  font-family:var(--sans); font-size:0.95rem; background:#fff; color:var(--ink);
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--rose-light); outline-offset:1px; }
.form-note{ font-size:0.8rem; opacity:0.65; text-align:center; }
.form-success{
  display:none; background:#fff; border:1px solid var(--rose-light); border-left:4px solid var(--wine);
  padding:18px 22px; border-radius:2px; margin-top:18px;
}
.form-success.show{ display:block; }

/* ---------- Search / filter bar ---------- */
.toolbar{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; align-items:center; justify-content:center; }
.toolbar input[type=search]{
  flex:1; min-width:220px; max-width:340px; padding:12px 16px; border:1px solid var(--line);
  border-radius:2px; font-family:var(--sans);
}
.chip{
  padding:8px 18px; border:1px solid var(--line); border-radius:20px; font-size:0.82rem;
  cursor:pointer; background:#fff; transition:all .2s ease;
}
.chip.active, .chip:hover{ background:var(--wine); color:var(--cream); border-color:var(--wine); }

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--wine-deep); color:var(--cream); padding:60px 0 30px; margin-top:60px;
}
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px; }
footer .logo{ color:var(--cream); }
footer .logo span{ color:var(--rose-light); }
footer p{ opacity:0.75; font-size:0.9rem; }
footer h4{ color:var(--rose-light); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; }
footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
footer a{ opacity:0.8; font-size:0.9rem; }
footer a:hover{ opacity:1; color:var(--rose-light); }
.footer-bottom{ border-top:1px solid rgba(250,245,239,0.15); padding-top:22px; font-size:0.78rem; opacity:0.55; text-align:center; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Utility ---------- */
.tac{ text-align:center; }
.mt0{ margin-top:0; }
.divider{ width:60px; height:2px; background:var(--rose); margin:22px auto; }