/* ============================================================
   Fatani Enterprises — Design tokens
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@700;800&family=Work+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --red:        #B43628;
  --red-deep:   #8B291E;
  --black:      #1C1815;
  --paper:      #F6F3EE;
  --paper-dim:  #EFEAE1;
  --thread:     #D9D2C4;
  --ink:        #1C1815;
  --ink-soft:   #6B655C;
  --ink-faint:  #9A9488;

  --display: 'Archivo Expanded', sans-serif;
  --body:    'Work Sans', sans-serif;
  --mono:    'IBM Plex Mono', monospace;

  --max: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.wrap{
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gap);
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--red);
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.05;
  color:var(--black);
}

h1{ font-size:clamp(2.4rem, 6vw, 4.4rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
h3{ font-size:1.05rem; letter-spacing:0.03em; }

p{ color:var(--ink-soft); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  font-family:var(--mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.95rem 1.6rem;
  border:2px solid var(--black);
  background:var(--black);
  color:var(--paper);
  transition:all .18s ease;
  cursor:pointer;
}
.btn:hover{ background:var(--paper); color:var(--black); }

.btn.outline{
  background:transparent;
  color:var(--black);
  border-color:var(--black);
}
.btn.outline:hover{ background:var(--black); color:var(--paper); }

.btn.on-dark{ border-color:var(--paper); background:var(--paper); color:var(--black); }
.btn.on-dark:hover{ background:transparent; color:var(--paper); }

.btn.red{ border-color:var(--red); background:var(--red); color:#fff; }
.btn.red:hover{ background:transparent; color:var(--red); }

/* ---------------- Selvage fringe — signature motif ----------------
   A row of alternating ticks referencing a fabric's woven selvage
   edge, the reinforced border that keeps cloth from unraveling. */
.selvage{
  width:100%;
  height:14px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--red) 0 2px,
    transparent 2px 10px,
    var(--black) 10px 12px,
    transparent 12px 20px
  );
  opacity:0.9;
}
.selvage.thin{ height:8px; }

/* ---------------- Header ---------------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--thread);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:0.9rem;
}
.brand{ display:flex; align-items:center; gap:0.7rem; }
.brand img{ height:38px; width:auto; }
.brand span{
  font-family:var(--display); font-weight:800; font-size:1rem;
  letter-spacing:0.04em;
}
nav.links{ display:flex; gap:2rem; align-items:center; }
nav.links a{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink-soft);
  padding-bottom:4px; border-bottom:2px solid transparent;
  transition:all .15s ease;
}
nav.links a:hover, nav.links a.active{ color:var(--black); border-color:var(--red); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{ display:none; }

@media (max-width:820px){
  nav.links{
    position:fixed; inset:56px 0 auto 0; background:var(--paper);
    flex-direction:column; align-items:flex-start; gap:0;
    border-bottom:1px solid var(--thread);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  nav.links.open{ max-height:320px; }
  nav.links a{ width:100%; padding:1rem var(--gap); border-bottom:1px solid var(--thread); border-left:0; }
  .nav-toggle{ display:block; font-family:var(--mono); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; }
}

/* ---------------- Footer ---------------- */
footer.site{
  background:var(--black);
  color:var(--paper);
  margin-top:5rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-block:3.5rem 2.5rem;
}
.footer-grid h4{
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--red); margin-bottom:1rem;
}
.footer-brand img{ height:34px; filter:brightness(0) invert(1); margin-bottom:0.9rem; }
.footer-grid p, .footer-grid a{ color:#C9C4BB; font-size:0.92rem; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-grid a:hover{ color:var(--paper); }
.social-row{ display:flex; gap:0.9rem; margin-top:1.1rem; }
.social-row a{
  width:36px; height:36px; border:1px solid #4A443D; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease;
}
.social-row a:hover{ background:var(--red); border-color:var(--red); }
.footer-bottom{
  border-top:1px solid #33302B;
  padding-block:1.2rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem;
  font-size:0.78rem; color:#8A8478;
  font-family:var(--mono);
}
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------------- Hero slider (home) ---------------- */
.hero{
  position:relative;
  background:var(--black);
  overflow:hidden;
}
.hero-slide{
  display:none;
  align-items:center;
  min-height:min(78vh, 620px);
  position:relative;
}
.hero-slide.active{ display:flex; }
.hero-slide .wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:var(--gap);
  width:100%;
}
.hero-copy .eyebrow{ color:var(--red); }
.hero-copy h1{ color:var(--paper); margin-block:0.6rem 1rem; }
.hero-copy p{ color:#C9C4BB; max-width:34ch; margin-bottom:1.8rem; }
.hero-copy .btn-row{ display:flex; gap:0.9rem; flex-wrap:wrap; }
.hero-art{ display:flex; justify-content:center; align-items:center; }
.hero-art svg{ width:min(100%, 380px); height:auto; }

.hero-dots{
  position:absolute; bottom:1.4rem; left:0; right:0;
  display:flex; justify-content:center; gap:0.6rem; z-index:5;
}
.hero-dots button{
  width:9px; height:9px; border-radius:50%; border:1px solid var(--paper);
  background:transparent; cursor:pointer; padding:0;
}
.hero-dots button.active{ background:var(--red); border-color:var(--red); }

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:transparent; border:1px solid #4A443D; color:var(--paper);
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:5;
  font-family:var(--mono); font-size:1.1rem;
  transition:all .15s ease;
}
.hero-arrow:hover{ background:var(--red); border-color:var(--red); }
.hero-arrow.prev{ left:1rem; }
.hero-arrow.next{ right:1rem; }
@media (max-width:820px){
  .hero-slide .wrap{ grid-template-columns:1fr; text-align:center; }
  .hero-copy p{ margin-inline:auto; }
  .hero-copy .btn-row{ justify-content:center; }
  .hero-arrow{ display:none; }
}

/* ---------------- Sections ---------------- */
section{ padding-block:4.5rem; }
.section-head{ max-width:52ch; margin-bottom:2.6rem; }
.section-head h2{ margin-top:0.5rem; }

/* Feature strip */
.feature-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
.feature-strip .feat{ border-left:2px solid var(--black); padding-left:1rem; }
.feature-strip .feat .num{ font-family:var(--mono); color:var(--red); font-size:0.8rem; }
.feature-strip .feat h3{ margin-block:0.4rem 0.5rem; }
.feature-strip .feat p{ font-size:0.92rem; }
@media (max-width:820px){ .feature-strip{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .feature-strip{ grid-template-columns:1fr; } }

/* Product grid */
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
}
.product-card{
  background:var(--paper-dim);
  border:1px solid var(--thread);
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(28,24,21,0.35); }
.product-media{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--paper); border-bottom:1px solid var(--thread);
}
.product-media svg{ width:100%; height:100%; }
.product-body{ padding:1.2rem 1.3rem 1.5rem; }
.product-body h3{ margin-bottom:0.5rem; }
.tag-row{ display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.tag{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.06em;
  text-transform:uppercase; border:1px solid var(--black); padding:0.25rem 0.55rem;
}
.tag.dyed{ background:var(--black); color:var(--paper); border-color:var(--black); }
.tag.print{ background:transparent; color:var(--black); }
.product-body .btn{ width:100%; justify-content:center; padding:0.75rem; font-size:0.72rem; }

@media (max-width:960px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } }

/* Customer slider */
.customer-strip{ background:var(--black); color:var(--paper); }
.customer-track-wrap{ overflow:hidden; margin-top:2rem; }
.customer-track{
  display:flex; gap:1.4rem; width:max-content;
  animation: scroll-left 26s linear infinite;
}
.customer-track:hover{ animation-play-state:paused; }
@keyframes scroll-left{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.customer-card{
  border:1px solid #4A443D; padding:1.6rem 2.2rem;
  display:flex; flex-direction:column; align-items:center; gap:0.7rem;
  min-width:190px;
}
.customer-card .mark{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff; font-family:var(--display); font-weight:800; font-size:1.1rem;
}
.customer-card .name{ font-family:var(--mono); font-size:0.82rem; letter-spacing:0.04em; color:#D9D2C4; text-transform:uppercase; text-align:center; }

/* CTA banner */
.cta-banner{
  background:var(--red); color:#fff; text-align:center; padding-block:3.4rem;
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:#F3DAD5; max-width:48ch; margin-inline:auto; margin-block:0.8rem 1.6rem; }

/* About page */
.about-hero{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--gap); align-items:center;
}
.about-visual{
  background:var(--black); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.about-visual img{ width:58%; filter:brightness(0) invert(1); opacity:0.95; }
.about-visual::before{
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(90deg, var(--red) 0 2px, transparent 2px 22px);
  opacity:0.5;
}
.about-copy .eyebrow{ margin-bottom:0.6rem; display:block; }
.about-copy p{ margin-bottom:1.1rem; }
.stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.6rem;
}
.stat{ border-top:2px solid var(--black); padding-top:0.8rem; }
.stat .big{ font-family:var(--display); font-size:2.2rem; color:var(--red); font-weight:800; }
.stat .lbl{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
@media (max-width:820px){
  .about-hero{ grid-template-columns:1fr; }
  .about-visual{ aspect-ratio:16/9; }
}
@media (max-width:560px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

/* Contact page */
.contact-grid{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--gap);
}
.contact-info{ background:var(--black); color:var(--paper); padding:2.6rem; }
.contact-info .eyebrow{ color:var(--red); }
.contact-info h2{ color:var(--paper); margin-block:0.5rem 1.5rem; }
.info-line{ display:flex; gap:0.9rem; padding-block:1rem; border-top:1px solid #3A362F; }
.info-line:last-of-type{ border-bottom:1px solid #3A362F; }
.info-line .lbl{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:#9A9488; min-width:90px; }
.info-line a, .info-line span{ font-size:0.98rem; }
.contact-form{ background:var(--paper-dim); border:1px solid var(--thread); padding:2.6rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ margin-bottom:1.2rem; }
.field.full{ grid-column:1/-1; }
.field label{ display:block; font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:0.5rem; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--thread); background:var(--paper);
  padding:0.8rem 0.9rem; font-family:var(--body); font-size:0.95rem; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--red); outline-offset:1px; }
.contact-form .btn{ width:100%; justify-content:center; padding:1rem; margin-top:0.4rem; }
.form-note{ font-size:0.82rem; color:var(--ink-soft); margin-top:0.9rem; }
@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* Page title band (Items / About / Contact) */
.page-title{ background:var(--paper-dim); border-bottom:1px solid var(--thread); padding-block:3rem; }
.page-title .eyebrow{ margin-bottom:0.6rem; display:block; }

:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .customer-track{ animation:none; }
  *{ transition:none !important; }
}


#curtain { background:var(--paper); color:var(--black); border-color:var(--black);
}
#curtain_two { background:var(--black); color:var(--paper); border-color:var(--black);
}
#table { background:var(--paper); color:var(--black); border-color:var(--black);
}
#cover { background:var(--black); color:var(--paper); border-color:var(--black);
}
#pillow { background:var(--paper); color:var(--black); border-color:var(--black);
} 
#cover { background:var(--black); color:var(--paper); border-color:var(--black);
} 
#quilt { background:var(--paper); color:var(--black); border-color:var(--black);
}
#cover { background:var(--black); color:var(--paper); border-color:var(--black);
}