/* ===========================================================
   FURNITURE — shared stylesheet
   Palette: linen / ivory / bottle green / oxblood / walnut / stone
   Type: Fraunces (display) + Lora (body) — both serif
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --linen:   #EDE6D6;
  --ivory:   #FAF7F1;
  --bottle:  #1E3B30;
  --bottle-2:#142A22;
  --oxblood: #6E2A32;
  --oxblood-2:#54202A;
  --walnut:  #29201A;
  --walnut-60: rgba(41,32,26,.66);
  --walnut-35: rgba(41,32,26,.35);
  --stone:   #DBCFB9;
  --stone-2: #C4B192;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Lora", Georgia, "Times New Roman", serif;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 3px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--linen);
  color: var(--walnut);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--display);
  color: var(--walnut);
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom:0; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

section{ padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

.eyebrow{
  font-family: var(--body);
  font-style: italic;
  color: var(--oxblood);
  font-size: 1rem;
  margin: 0 0 0.9rem;
}

.section-head{ max-width: 46ch; margin-bottom: 2.75rem; }
.section-head.wide{ max-width: 62ch; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.section-head p{ color: var(--walnut-60); font-size: 1.08rem; }

.section-head-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.section-head-row .section-head{ margin-bottom:0; }

/* ---------- buttons & links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.95rem 1.9rem;
  border: 1.5px solid var(--bottle);
  border-radius: var(--radius);
  background: var(--bottle);
  color: var(--ivory);
  cursor:pointer;
  transition: background .35s ease, border-color .35s ease, color .35s ease, transform .3s ease;
}
.btn:hover{ background: var(--oxblood); border-color: var(--oxblood); }
.btn.outline{
  background: transparent;
  color: var(--bottle);
}
.btn.outline:hover{ background: var(--bottle); color: var(--ivory); }
.btn.on-dark{ border-color: var(--ivory); background: var(--ivory); color: var(--bottle); }
.btn.on-dark:hover{ background: var(--oxblood); border-color: var(--oxblood); color: var(--ivory); }

.text-link{
  position:relative;
  font-size: .98rem;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .35s ease;
}
.text-link:hover{ background-size: 100% 1px; }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 500;
  background: var(--ivory);
  border-bottom: 1px solid var(--stone);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.1rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
.brand{
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bottle);
}
.nav-links{
  display:flex;
  align-items:center;
  gap: 2.4rem;
}
.nav-links a{
  font-size: 1rem;
  color: var(--walnut);
  position:relative;
  padding-bottom:4px;
  background-image: linear-gradient(var(--oxblood), var(--oxblood));
  background-size: 0% 1.5px;
  background-repeat:no-repeat;
  background-position:left bottom;
  transition: background-size .35s ease, color .3s ease;
}
.nav-links a:hover, .nav-links a.current{ background-size:100% 1.5px; color: var(--oxblood); }

.nav-toggle{ display:none; }
.nav-burger{
  display:none;
  width: 30px; height: 22px;
  position:relative;
  cursor:pointer;
  z-index: 600;
}
.nav-burger span{
  position:absolute; left:0; right:0; height:2px;
  background: var(--bottle);
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.nav-burger span:nth-child(1){ top:0; }
.nav-burger span:nth-child(2){ top:10px; }
.nav-burger span:nth-child(3){ top:20px; }

.nav-backdrop{
  display:none;
}

/* ---------- hero (home) ---------- */
.hero{
  position:relative;
  height: min(88vh, 780px);
  min-height: 480px;
  overflow:hidden;
  color: var(--ivory);
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity:0;
  animation: heroFade 28s infinite;
}
.hero-slide:nth-child(1){ animation-delay: 0s; }
.hero-slide:nth-child(2){ animation-delay: 7s; }
.hero-slide:nth-child(3){ animation-delay: 14s; }
.hero-slide:nth-child(4){ animation-delay: 21s; }
@keyframes heroFade{
  0%{ opacity:0; }
  4%{ opacity:1; }
  22%{ opacity:1; }
  27%{ opacity:0; }
  100%{ opacity:0; }
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,42,34,.15) 0%, rgba(20,42,34,.55) 68%, rgba(20,42,34,.82) 100%);
  z-index:1;
}
.hero-content{
  position:relative; z-index:2;
  height:100%;
  display:flex;
  align-items:flex-end;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.hero-content .inner{ max-width: 640px; }
.hero-content h1{
  color: var(--ivory);
  font-weight:300;
  font-size: clamp(2.7rem, 6.4vw, 4.6rem);
  margin-bottom: .45em;
  animation: heroRise .9s ease both;
}
.hero-content p{
  color: rgba(250,247,241,.88);
  font-size: 1.15rem;
  max-width: 46ch;
  margin-bottom: 1.8rem;
  animation: heroRise .9s .12s ease both;
}
.hero-content .btn{ animation: heroRise .9s .22s ease both; }
@keyframes heroRise{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- intro strip ---------- */
.intro-strip{
  padding: clamp(2.5rem, 6vw, 3.5rem) 0;
  text-align:center;
}
.intro-strip p{
  font-family: var(--display);
  font-style: italic;
  font-weight:400;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  color: var(--bottle);
  max-width: 52ch;
  margin: 0 auto;
}

/* ---------- flip cards: shop by room ---------- */
.room-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.flip-card{
  perspective: 1200px;
  height: 360px;
}
.flip-card a{ display:block; height:100%; }
.flip-inner{
  position:relative;
  width:100%; height:100%;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-inner, .flip-card:focus-within .flip-inner{ transform: rotateY(180deg); }
.flip-front, .flip-back{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius: var(--radius);
  overflow:hidden;
}
.flip-front img{ width:100%; height:100%; object-fit:cover; }
.flip-front::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,42,34,0) 45%, rgba(15,26,21,.86) 100%);
}
.flip-front .label{
  position:absolute; left:1.4rem; right:1.4rem; bottom:1.3rem;
  z-index:2;
  color: var(--ivory);
  font-family: var(--display);
  font-size: 1.35rem;
}
.flip-back{
  transform: rotateY(180deg);
  background: var(--bottle);
  color: var(--ivory);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 2rem;
}
.flip-back h3{ color: var(--ivory); font-size:1.3rem; }
.flip-back p{ color: rgba(250,247,241,.82); margin-bottom:1.4rem; }
.flip-back .text-link{ color: var(--ivory); }

/* ---------- product cards ---------- */
.product-card{
  background: var(--ivory);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease, border-color .4s ease;
  transform-style: preserve-3d;
}
.product-card:hover{
  transform: perspective(1000px) rotateX(2deg) rotateY(-4deg) translateY(-6px);
  box-shadow: 0 24px 40px -18px rgba(20,26,22,.32);
  border-color: var(--stone-2);
}
.product-media{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  background: var(--stone);
}
.product-media img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s ease;
}
.product-card:hover .product-media img{ transform: scale(1.06); }
.product-body{ padding: 1.15rem 1.25rem 1.4rem; }
.product-cat{
  font-size: .82rem;
  color: var(--oxblood);
  font-style: italic;
  margin-bottom: .25rem;
}
.product-name{
  font-family: var(--display);
  font-size: 1.15rem;
  margin-bottom: .3rem;
}
.product-mat{
  color: var(--walnut-60);
  font-size: .92rem;
  margin-bottom: .55rem;
}
.product-price{
  font-weight:600;
  color: var(--bottle);
  font-family: var(--display);
}

/* ---------- carousel (scroll-snap) ---------- */
.carousel-wrap{ position:relative; }
.carousel{
  display:flex;
  gap: 1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding: .25rem .25rem 1.4rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel .product-card{ flex: 0 0 clamp(220px, 26vw, 280px); scroll-snap-align:start; }
.carousel .product-card:target{ outline: 2px solid var(--oxblood); outline-offset: 3px; }

.carousel-arrows{
  display:flex;
  gap: .75rem;
  justify-content:flex-end;
  margin-top: -0.6rem;
  margin-bottom: 1.8rem;
}
.carousel-arrows a{
  width: 44px; height:44px;
  border: 1px solid var(--stone-2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.carousel-arrows a:hover{ background: var(--bottle); border-color: var(--bottle); color: var(--ivory); }
.carousel-arrows svg{ width:16px; height:16px; }

/* ---------- dark band: why choose us ---------- */
.band-dark{
  background: var(--bottle);
  color: var(--ivory);
}
.band-dark .section-head h2, .band-dark .section-head p{ color: var(--ivory); }
.band-dark .section-head p{ color: rgba(250,247,241,.78); }
.feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.feature{ border-top: 1px solid rgba(250,247,241,.28); padding-top: 1.4rem; }
.feature h3{ color: var(--ivory); font-size: 1.15rem; margin-bottom:.5rem; }
.feature p{ color: rgba(250,247,241,.75); font-size: .98rem; }
.feature .icon{ margin-bottom: 1.1rem; }
.feature .icon svg{ width: 34px; height:34px; stroke: var(--ivory); }

/* ---------- testimonials ---------- */
.testi-radio{ display:none; }
.testi-wrap{ max-width: 700px; margin: 0 auto; text-align:center; }
.testi-track{ position:relative; min-height: 220px; }
.testi-slide{
  display:none;
  animation: fadeIn .6s ease both;
}
.testi-slide p{
  font-family: var(--display);
  font-style: italic;
  font-weight:400;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--bottle);
  margin-bottom: 1.2rem;
}
.testi-slide cite{ font-style:normal; color: var(--walnut-60); font-size:.95rem; }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

#t1:checked ~ .testi-track [data-n="1"]{ display:block; }
#t2:checked ~ .testi-track [data-n="2"]{ display:block; }
#t3:checked ~ .testi-track [data-n="3"]{ display:block; }

.testi-dots{ display:flex; justify-content:center; gap:.6rem; margin-top:1.5rem; }
.testi-dots label{
  width:9px; height:9px; border-radius:50%;
  background: var(--stone-2);
  cursor:pointer;
  transition: background .3s ease, transform .3s ease;
}
#t1:checked ~ .testi-dots label[for="t1"],
#t2:checked ~ .testi-dots label[for="t2"],
#t3:checked ~ .testi-dots label[for="t3"]{
  background: var(--oxblood);
  transform: scale(1.25);
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;
  padding: clamp(4.5rem, 10vw, 7rem) 0;
  color: var(--ivory);
  text-align:center;
  overflow:hidden;
}
.cta-band img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  z-index:0;
}
.cta-band::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,42,34,.72), rgba(20,42,34,.86));
  z-index:1;
}
.cta-band .container{ position:relative; z-index:2; }
.cta-band h2{ color: var(--ivory); font-size: clamp(2rem, 4vw, 2.9rem); max-width:18ch; margin:0 auto .7rem; }
.cta-band p{ color: rgba(250,247,241,.85); max-width:46ch; margin:0 auto 2rem; }

/* ---------- footer ---------- */
.site-footer{
  background: var(--bottle-2);
  color: var(--ivory);
  padding: 2.6rem 0;
}
.footer-row{
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-contact{
  display:flex;
  gap: 1.8rem;
  flex-wrap:wrap;
  justify-content:center;
  font-size: .95rem;
  color: rgba(250,247,241,.85);
}
.footer-contact span{ display:inline-flex; align-items:center; gap:.5rem; }
.footer-contact svg{ width:15px; height:15px; stroke: var(--stone); flex-shrink:0; }
.footer-credit{
  text-align:center;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(250,247,241,.18);
  font-size: .88rem;
  color: rgba(250,247,241,.6);
}

/* ---------- page header banner (browse / about) ---------- */
.page-banner{
  position:relative;
  height: 300px;
  color: var(--ivory);
  display:flex;
  align-items:center;
  overflow:hidden;
}
.page-banner img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.page-banner::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(20,42,34,.86) 30%, rgba(20,42,34,.35) 100%);
}
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color: var(--ivory); font-weight:300; font-size: clamp(2.2rem, 4.6vw, 3.2rem); margin-bottom:.4rem; }
.page-banner p{ color: rgba(250,247,241,.85); max-width:48ch; }

/* ---------- browse: tabs ---------- */
.cat-radio{ display:none; }
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap: .7rem;
  margin-bottom: 3rem;
}
.tabs label{
  padding: .65rem 1.3rem;
  border: 1.5px solid var(--stone-2);
  border-radius: 999px;
  font-size: .96rem;
  cursor:pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
#cat-all:checked ~ .tabs label[for="cat-all"],
#cat-bed:checked ~ .tabs label[for="cat-bed"],
#cat-side:checked ~ .tabs label[for="cat-side"],
#cat-dining:checked ~ .tabs label[for="cat-dining"],
#cat-sofa:checked ~ .tabs label[for="cat-sofa"]{
  background: var(--bottle);
  border-color: var(--bottle);
  color: var(--ivory);
}
.panel{ margin-bottom: 4.5rem; scroll-margin-top: 100px; }
.panel:last-child{ margin-bottom:0; }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.panel-head h2{ font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom:.25rem; }
.panel-head p{ color: var(--walnut-60); }
.panel-count{ color: var(--walnut-60); font-size:.92rem; white-space:nowrap; }

#cat-bed:checked ~ .panels .panel:not([data-cat="bed"]),
#cat-side:checked ~ .panels .panel:not([data-cat="side"]),
#cat-dining:checked ~ .panels .panel:not([data-cat="dining"]),
#cat-sofa:checked ~ .panels .panel:not([data-cat="sofa"]){
  display:none;
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

/* ---------- about page ---------- */
.story-split{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.story-split img{
  width:100%;
  aspect-ratio: 4/3.1;
  object-fit:cover;
  border-radius: var(--radius);
}
.story-copy p{ color: var(--walnut-60); font-size: 1.05rem; }
.story-copy h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }

.values-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}
.value-card{
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  transition: border-color .35s ease, transform .4s ease;
}
.value-card:hover{ border-color: var(--oxblood); transform: translateY(-5px); }
.value-card h3{ font-size:1.12rem; margin-bottom:.55rem; }
.value-card p{ color: var(--walnut-60); font-size:.96rem; }

.process{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.process-step{ position:relative; }
.process-media{ aspect-ratio: 5/4; overflow:hidden; border-radius: var(--radius); margin-bottom:1.3rem; }
.process-media img{ width:100%; height:100%; object-fit:cover; }
.process-num{
  font-family: var(--display);
  font-size: 1rem;
  color: var(--oxblood);
  margin-bottom:.4rem;
}
.process-step h3{ font-size:1.2rem; margin-bottom:.5rem; }
.process-step p{ color: var(--walnut-60); font-size:.97rem; }

.stats-band{ background: var(--bottle); color: var(--ivory); }
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align:center;
}
.stat .num{
  font-family: var(--display);
  font-weight:300;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--ivory);
  display:block;
  margin-bottom:.3rem;
}
.stat .label{ color: rgba(250,247,241,.75); font-size:.95rem; }

/* ---------- accessibility ---------- */
a:focus-visible, label:focus-visible, .btn:focus-visible{
  outline: 2.5px solid var(--oxblood);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1024px){
  .room-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .values-grid{ grid-template-columns: repeat(2, 1fr); }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
  .story-split{ grid-template-columns: 1fr; }
  .story-split .story-media{ order:-1; }
}

@media (max-width: 780px){
  .nav-links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width: min(78vw, 320px);
    background: var(--ivory);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap: 2rem;
    padding: 2rem 2.4rem;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.2,.7,.3,1);
    box-shadow: -10px 0 30px rgba(20,20,15,.15);
  }
  .nav-links a{ font-size:1.15rem; }
  .nav-burger{ display:block; }
  .nav-backdrop{
    display:block;
    position:fixed; inset:0;
    background: rgba(20,26,22,.4);
    opacity:0;
    pointer-events:none;
    transition: opacity .4s ease;
    z-index: 400;
  }
  .nav-toggle:checked ~ .nav-links{ transform: translateX(0); z-index:550; }
  .nav-toggle:checked ~ .nav-backdrop{ opacity:1; pointer-events:auto; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ top:10px; transform: rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ top:10px; transform: rotate(-45deg); }

  .room-grid{ grid-template-columns: 1fr; }
  .flip-card{ height: 300px; }
  .feature-grid{ grid-template-columns: 1fr; gap: 2.2rem; }
  .values-grid{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-contact{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .page-banner{ height:240px; }
  .section-head-row{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 480px){
  body{ font-size:16px; }
  .product-grid{ grid-template-columns: 1fr 1fr; gap:1rem; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .carousel .product-card{ flex-basis: 72vw; }
}