/* ==========================================================================
   INRÉA — shared design system
   Palette + type derived from brand teaser videos:
   ivory silk / champagne-gold shimmer / soft teal accent / ink signature
   ========================================================================== */

:root{
  --ivory:        #FBF8F2;
  --ivory-deep:   #F3ECDD;
  --champagne:    #E9D9BB;
  --gold:         #C6A159;
  --gold-deep:    #A8813C;
  --teal:         #8FB3A6;
  --teal-deep:    #6D9587;
  --ink:          #2B2620;
  --ink-soft:     #5A5348;
  --white:        #FFFFFF;
  --line:         rgba(43,38,32,0.12);

  --font-script:  'Alex Brush', cursive;
  --font-serif:   'Cormorant Garamond', serif;
  --font-sans:    'Jost', sans-serif;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family: var(--font-serif); font-weight:600; margin:0 0 .5em; color: var(--ink); }
.script{ font-family: var(--font-script); font-weight:400; line-height:1; }
p{ margin:0 0 1em; }
.container{ max-width: var(--container); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family: var(--font-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold-deep);
  font-weight: 500;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding: 14px 34px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  cursor:pointer;
  border:1px solid var(--ink);
  transition: all .25s ease;
  background: transparent;
}
.btn-primary{ background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn-primary:hover{ background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-outline{ background: transparent; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--ivory); }
.btn-light{ border-color: var(--ivory); color: var(--ivory); }
.btn-light:hover{ background: var(--ivory); color: var(--ink); }

/* ---------- shimmer background (recreates the teaser fabric+glitter look in pure CSS) ---------- */
.shimmer-bg{
  position: relative;
  background:
    radial-gradient(circle at 15% 25%, rgba(143,179,166,.55), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(198,161,89,.55), transparent 50%),
    linear-gradient(120deg, #EFE9DA 0%, #E9DFC6 35%, #DCC98F 60%, #EADFC7 80%, #F3ECDD 100%);
  overflow:hidden;
}
.shimmer-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.9) 0px, transparent 1.4px),
    radial-gradient(rgba(255,255,255,.7) 0px, transparent 1.1px);
  background-size: 42px 42px, 27px 27px;
  background-position: 0 0, 13px 20px;
  opacity:.55;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.silk-ribbon{
  position:absolute;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  filter: blur(0px);
  opacity:.9;
}

/* ---------- nav ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,248,242,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 0;
}
.logo{
  font-family: var(--font-script);
  font-size: 2.1rem;
  color: var(--ink);
  letter-spacing: .02em;
}
.nav-links{ display:flex; gap:36px; align-items:center; }
.nav-links a{
  font-size: .82rem;
  letter-spacing:.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position:relative;
  padding-bottom:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold-deep); transition: width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--ink); }
.nav-icons{ display:flex; gap:18px; align-items:center; font-size:1.05rem; }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer; color:var(--ink);
  font-size:1.5rem; width:40px; height:40px; align-items:center; justify-content:center;
  flex-shrink:0; line-height:1;
}

@media (max-width: 860px){
  .nav-row{ flex-wrap: nowrap; }
  .nav-icons{ font-size:.7rem; gap:8px; white-space:nowrap; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background: var(--ivory);
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding: 26px 24px 30px;
    border-top:1px solid var(--line);
    box-shadow: 0 24px 40px -20px rgba(43,38,32,.28);
    z-index: 100;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- footer ---------- */
.site-footer{
  background: var(--ink);
  color: var(--ivory-deep);
  padding: 64px 0 28px;
  margin-top: 100px;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
}
.footer-grid h4{ color: var(--ivory); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; font-family: var(--font-sans); margin-bottom:1.1em;}
.footer-grid a, .footer-grid p{ color: rgba(251,248,242,.72); font-size:.92rem; }
.footer-grid li{ margin-bottom: .6em; }
.footer-grid a:hover{ color: var(--gold); }
.footer-logo{ font-family: var(--font-script); font-size:2.4rem; color: var(--ivory); margin-bottom:.3em; }
.footer-bottom{
  border-top: 1px solid rgba(251,248,242,.14);
  margin-top: 48px; padding-top: 22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.78rem; color: rgba(251,248,242,.5);
}
.social-row{ display:flex; gap:14px; margin-top:18px; }
.social-row a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(251,248,242,.35);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem;
}
.social-row a:hover{ background: var(--gold); border-color: var(--gold); color:var(--ink); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }

/* ---------- generic sections ---------- */
section{ padding: 90px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.section-head h2{ font-size: 2.5rem; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; }
@media (max-width:860px){ .two-col{ grid-template-columns:1fr; gap:36px; } }

.frame-img{
  border-radius: 4px;
  box-shadow: 0 30px 60px -30px rgba(43,38,32,.35);
}

/* ---------- product grid ---------- */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; }
.chip{
  padding: 9px 22px; border-radius:999px; border:1px solid var(--line);
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  background: var(--white); transition:.2s ease;
}
.chip.active, .chip:hover{ background: var(--ink); color: var(--ivory); border-color:var(--ink); }

.product-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:32px; }
@media (max-width:1000px){ .product-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .product-grid{ grid-template-columns: 1fr;} }

.product-card{ position:relative; }
.product-media{
  aspect-ratio: 3/4; border-radius:4px; overflow:hidden; position:relative;
  margin-bottom:16px;
}
.product-tag{
  position:absolute; top:14px; left:14px; background:var(--ivory);
  padding:4px 12px; border-radius:999px; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-deep);
}
.product-title{ font-family: var(--font-serif); font-size:1.15rem; margin-bottom:.2em; }
.product-meta{ display:flex; justify-content:space-between; font-size:.85rem; color: var(--ink-soft); }
.product-price{ color:var(--ink); font-weight:500; }

/* ---------- forms ---------- */
.field{
  width:100%; padding:14px 18px; border-radius:6px; border:1px solid var(--line);
  background: var(--white); font-family: var(--font-sans); font-size:.95rem; color:var(--ink);
}
.field:focus{ outline:none; border-color: var(--gold-deep); }
label{ display:block; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.form-row{ margin-bottom:22px; }

/* ---------- utility ---------- */
.text-center{ text-align:center; }
.mt-0{margin-top:0;}
.badge-row{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.badge-row .badge{ display:flex; flex-direction:column; align-items:center; gap:10px; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); text-align:center; max-width:160px;}
.badge .icon{ font-size:1.6rem; }

.reveal{ opacity:0; transform: translateY(18px); transition: all .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }