/* =========================
   rebeccafinds.ca OVERHAUL (CLEAN + CORRECT)
   Cream + blush base
   Gold borders (NO page border)
   Strong green accents
   Hero text left / image right
   Image size capped (not huge)
   ========================= */

:root{
  --bg: #fbf6f2;
  --blush: #f3e2e8;
  --panel: #ffffff;

  --text:#2f2a27;
  --muted:#7a6f68;

  --gold:#c9a24a;
  --gold-strong:#b8953d;

  --green:#2b6b4f;
  --green-strong:#1f563f;

  --r-lg: 22px;
  --r-md: 16px;
}

/* Reset */
*{ box-sizing:border-box; }
html{ background: var(--bg); }

body{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  color:var(--text);
  line-height:1.65;
  background:
    radial-gradient(1100px 600px at 18% 0%, rgba(243,226,232,0.95) 0%, rgba(243,226,232,0) 55%),
    radial-gradient(900px 500px at 90% 18%, rgba(201,162,74,0.14) 0%, rgba(201,162,74,0) 60%),
    linear-gradient(to bottom, rgba(255,255,255,0.45), rgba(255,255,255,0)),
    var(--bg);
}

/* Gentle “luxury” texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(2px 2px at 12px 18px, rgba(43,107,79,0.06) 0%, rgba(43,107,79,0) 60%),
    radial-gradient(2px 2px at 42px 56px, rgba(201,162,74,0.06) 0%, rgba(201,162,74,0) 60%);
  background-size: 72px 72px;
  opacity: 0.55;
}

/* Layout (tighter) */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: 3.0rem 1.5rem;
}

/* Typography */
h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:650;
  letter-spacing:.2px;
  margin:0;
}
h1{ font-size: 3.1rem; line-height:1.05; }
h2{
  font-size: 2.05rem;
  padding-bottom: .35rem;
  border-bottom: 4px solid var(--green);
}
h3{ font-size: 1.35rem; }

p{ margin: .65rem 0; max-width: 760px; }
.lede{ font-size: 1.05rem; max-width: 720px; }
.muted{ color: var(--muted); }
.smallnote{ font-size: .9rem; }

/* Links */
a{ color: var(--green-strong); text-underline-offset: 3px; }
a:hover{ color: var(--green); }

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(251,246,242,0.93);
  backdrop-filter: blur(10px);
  border-bottom: 4px solid var(--gold);
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 1.0rem 1.5rem;
}
.brand{
  font-family:'Fraunces', serif;
  font-size:1.35rem;
  text-decoration:none;
  color:var(--text);
  padding: .35rem .85rem;
  border-radius: 999px;
  border: 2px solid var(--gold);
  background: rgba(255,255,255,0.75);
}
.nav a{
  margin-left: 1.15rem;
  text-decoration:none;
  color: var(--text);
  font-weight:700;
  position:relative;
  padding-bottom: 4px;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:3px;
  background: linear-gradient(to right, var(--green), var(--gold));
  transition: width .22s ease;
}
.nav a:hover{ color: var(--green); }
.nav a:hover::after{ width:100%; }

/* Buttons */
.button{
  display:inline-block;
  padding: .75rem 1.45rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.3px;
  border: 3px solid transparent;
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.button.small{ padding: .6rem 1.15rem; }

.button.primary{
  color:#fff;
  background: var(--green);
  border-color: var(--green);
}
.button.primary:hover{
  background: var(--green-strong);
  border-color: var(--green-strong);
  transform: translateY(-2px);
}

.button.ghost{
  color: var(--green);
  background: rgba(255,255,255,0.75);
  border-color: rgba(43,107,79,0.35);
}
.button.ghost:hover{
  border-color: var(--green);
  transform: translateY(-2px);
}

/* Button shine */
.button::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-40%;
  width:60%;
  height:220%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  transition: left .35s ease;
}
.button:hover::after{ left: 120%; }

.textlink{
  font-weight:800;
  color: var(--green-strong);
  text-decoration: underline;
  text-decoration-color: rgba(43,107,79,0.35);
  text-underline-offset: 3px;
}
.textlink:hover{ color: var(--green); text-decoration-color: rgba(43,107,79,0.75); }

/* HERO — this is the key: grid layout */
.hero{ padding: 1.6rem 0 0; }

.hero-inner{
  display:grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 1.6rem;
  align-items:start;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom: .9rem;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .22rem .7rem;
  border-radius: 999px;
  border: 2px solid rgba(201,162,74,0.55);
  background: rgba(255,255,255,0.75);
  color: var(--green-strong);
  font-weight: 750;
  font-size: .92rem;
}
.tag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background: var(--gold);
}

.hero-actions{
  display:flex;
  gap:.65rem;
  margin-top: 1.05rem;
  flex-wrap: wrap;
}

/* hero meta */
.hero-meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1.25rem;
}
.meta-item{
  border: 2px solid rgba(201,162,74,0.35);
  background: rgba(255,255,255,0.6);
  border-radius: 14px;
  padding: .85rem .9rem;
}
.meta-kicker{
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--green);
}
.meta-value{ font-weight:650; }

/* hero media column */
.hero-media{
  display:flex;
  flex-direction:column;
  align-items:flex-end; /* right aligned */
  gap: .9rem;
}

/* HARD CAP so it can’t be “huge” */
.hero-img{
  width: 100%;
  max-width: 420px;
  max-height: 520px;
  object-fit: cover;
  display:block;

  border-radius: 18px;
  border: 3px solid var(--gold);
  padding: 6px;
  background: #fff;

  box-shadow:
    inset 0 0 0 2px rgba(239,227,196,0.75),
    0 18px 45px rgba(0,0,0,0.10);
}

.hero-caption{
  width: 100%;
  max-width: 420px;
}

/* Cards */
.card{
  background: var(--panel);
  border-radius: var(--r-md);
  padding: 1.65rem;
  border: 3px solid var(--gold);
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card::before{
  content:"";
  position:absolute;
  top:0; left:0;
  height: 10px;
  width:100%;
  background: linear-gradient(to right, var(--green), var(--gold), var(--green));
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.10);
  border-color: var(--gold-strong);
}
.card-topline{
  font-size:.85rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--green);
  margin-bottom: .55rem;
}

/* Sections */
.section{ margin-top: 2.1rem; }
.section.alt{ margin-top: 2.1rem; }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Collections: 3 across */
.collections-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.collection-tile{
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  border: 3px solid var(--gold);
  padding: 1.35rem 1.3rem;
  position:relative;
  overflow:hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.collection-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(0,0,0,0.10);
  border-color: var(--gold-strong);
}
.tile-accent{
  position:absolute;
  top:0; left:0;
  height: 10px;
  width:100%;
  background: linear-gradient(to right, var(--gold), var(--green), var(--gold));
}
.tile-actions{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin-top: .95rem;
}

/* Two-col sections */
.two-col{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.2rem;
  align-items:start;
}

/* Bullets & steps */
.bullets{ margin: .9rem 0 0; padding-left: 1.1rem; }
.bullets li{ margin: .45rem 0; }
.steps{ margin: .75rem 0 0; padding-left: 1.15rem; }
.steps li{ margin: .5rem 0; }

/* How grid */
.how-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.05rem;
}
.how-card{
  background: rgba(255,255,255,0.75);
  border: 2px solid rgba(201,162,74,0.35);
  border-radius: 16px;
  padding: 1.05rem 1rem;
}
.how-number{
  font-weight:900;
  color: var(--green);
  letter-spacing:.08em;
}

/* Footer */
footer{
  border-top: 4px solid var(--gold);
  background: rgba(247,238,234,0.65);
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  padding: 2rem 1.5rem;
}

/* Responsive */
@media (max-width: 980px){
  .hero-inner, .two-col{ grid-template-columns: 1fr; }
  .how-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-meta{ grid-template-columns: 1fr; }
  .hero-media{ align-items: flex-start; }
}

@media (max-width: 780px){
  .collections-grid{ grid-template-columns: 1fr; }
  h1{ font-size: 2.45rem; }
}