/* Denny & Son Upholstery — Starter tier custom demo */
/* Thesis: A fabric swatch book from a 56-year father-and-son workshop —
   material-first, hands-on, walnut wood and natural linen, with slab type
   that belongs on a fabric tag. */

:root {
  --walnut:      #3a2818;      /* dominant — wood-stain dark, distinct from oxblood */
  --walnut-2:    #2c1d11;      /* deepest, footer */
  --walnut-3:    #4a3525;      /* slight lift for cards */
  --linen:       #ebe1cc;      /* unbleached natural linen — pale and dry */
  --linen-2:     #e0d4b7;      /* secondary linen */
  --linen-deep:  #d5c79c;      /* shadow on linen */
  --ink:         #1f1409;      /* near-black warm ink */
  --cream:       #f4eddc;      /* light text on walnut */
  --cream-soft:  #d4c9ad;      /* secondary cream */
  --sage:        #5a6b4d;      /* workshop apron green */
  --sage-soft:   #768a64;
  --terracotta:  #b25538;      /* single CTA accent */
  --terracotta-deep:#8c3f24;
  --tag-amber:   #c19553;      /* brass tag / hairline accent */
  --line:        #5e4634;      /* hairline on walnut */
  --line-linen:  #b8a877;      /* hairline on linen */
}

html { scroll-behavior: smooth; color-scheme: dark; }
body {
  background: var(--walnut);
  color: var(--cream);
  font-family: 'Lexend', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-feature-settings: "kern" 1, "liga" 1;
}

::selection { background: var(--terracotta); color: var(--cream); }

/* Display + utility */
.font-display { font-family: 'Bitter', Georgia, 'Times New Roman', serif; font-weight: 600; letter-spacing: -0.005em; }
.font-display-heavy { font-family: 'Bitter', Georgia, serif; font-weight: 700; letter-spacing: -0.01em; }
.font-body { font-family: 'Lexend', system-ui, sans-serif; }

/* Tag label — fabric-swatch SKU treatment.
   Distinct from every prior portfolio kicker pattern. */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Bitter', Georgia, serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tag-amber);
  padding: 5px 12px;
  border: 1px solid var(--tag-amber);
  border-radius: 2px;
}
.tag-sage   { color: var(--sage-soft); border-color: var(--sage-soft); }
.tag-solid  { background: var(--tag-amber); color: var(--walnut); border-color: var(--tag-amber); }

/* On linen surfaces, tags get inverted */
.linen-section .tag        { color: var(--walnut); border-color: var(--walnut); }
.linen-section .tag-sage   { color: var(--sage); border-color: var(--sage); }
.linen-section .tag-solid  { background: var(--walnut); color: var(--linen); border-color: var(--walnut); }

/* Linen surface */
.linen-section {
  background: var(--linen);
  color: var(--ink);
}
.linen-section h1, .linen-section h2, .linen-section h3 { color: var(--ink); }
.linen-section a:not([class*="btn-"]) { color: var(--ink); }

/* Rules */
.rule-walnut       { border: 0; border-top: 2px solid var(--cream); height: 0; }
.rule-walnut-thin  { border: 0; border-top: 1px solid var(--line); height: 0; }
.rule-amber        { border: 0; border-top: 1px solid var(--tag-amber); height: 0; }
.rule-linen        { border: 0; border-top: 2px solid var(--walnut); height: 0; }
.rule-linen-thin   { border: 0; border-top: 1px solid var(--line-linen); height: 0; }

/* Buttons — utility, square corners 2px radius, weighty.
   Default color baked in to avoid any specificity bugs. */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.04em;
  background: var(--terracotta);
  color: var(--cream);
  padding: 14px 24px;
  border-radius: 2px;
  border: 0;
  transition: background 0.15s ease, transform 0.12s ease;
}
.btn-primary:hover { background: var(--terracotta-deep); transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--cream);
  padding: 14px 22px;
  border-radius: 2px;
  border: 2px solid var(--tag-amber);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover { background: var(--tag-amber); color: var(--walnut); border-color: var(--tag-amber); }

/* On linen, secondary buttons invert */
.linen-section .btn-secondary { color: var(--ink); border-color: var(--ink); }
.linen-section .btn-secondary:hover { background: var(--ink); color: var(--linen); }

/* Service / "what we do" tile */
.work-tile {
  background: var(--walnut-3);
  border: 1px solid var(--line);
  padding: 28px;
  border-radius: 2px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.work-tile:hover {
  border-color: var(--tag-amber);
  background: #503a28;
}
.work-tile .num {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--tag-amber);
}

/* Fabric swatch — used for materials section */
.swatch {
  aspect-ratio: 5 / 4;
  border-radius: 2px;
  border: 1px solid var(--line-linen);
  position: relative;
  overflow: hidden;
}
.swatch::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--linen);
  border: 1px solid var(--walnut);
  box-shadow: 0 0 0 2px var(--linen);
}
.swatch-label {
  font-family: 'Bitter', serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.swatch-meta {
  font-family: 'Lexend', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  color: #5a4a30;
  letter-spacing: 0.04em;
}

/* Specific swatch fills — each is a different fabric/material */
.swatch-leather    { background: linear-gradient(135deg, #6b3a1f 0%, #4a2410 50%, #5a2f18 100%); }
.swatch-wool       { background: linear-gradient(180deg, #6f7a6a 0%, #5a6657 100%); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 4px), linear-gradient(180deg, #6f7a6a 0%, #5a6657 100%); }
.swatch-velvet     { background: linear-gradient(135deg, #6b2929 0%, #4a1818 100%); }
.swatch-linen      { background: linear-gradient(180deg, #d9c997 0%, #c7b582 100%); background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px), linear-gradient(180deg, #d9c997 0%, #c7b582 100%); }
.swatch-vinyl      { background: linear-gradient(135deg, #1f1f24 0%, #0f0f12 100%); }
.swatch-tweed      { background-image:
  repeating-linear-gradient(0deg, #4a4030 0 2px, #3a3024 2px 4px),
  repeating-linear-gradient(90deg, rgba(193, 149, 83, 0.18) 0 2px, transparent 2px 4px); }

/* Review card */
.review-card {
  background: var(--linen-2);
  color: var(--ink);
  padding: 26px 28px;
  border-left: 4px solid var(--terracotta);
  border-radius: 2px;
}

/* "Since 1970" stamp */
.year-stamp {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: 'Bitter', serif;
  font-weight: 700;
  padding: 14px 24px;
  border: 2px solid var(--sage-soft);
  color: var(--sage-soft);
  background: transparent;
  border-radius: 2px;
  transform: rotate(-3deg);
  letter-spacing: 0.04em;
}
.year-stamp .y-line { font-size: 0.65rem; letter-spacing: 0.22em; }
.year-stamp .y-num  { font-size: 2.2rem; line-height: 1; margin-top: 2px; }

/* Address card */
.address-card {
  background: var(--walnut-3);
  border: 1px solid var(--tag-amber);
  padding: 28px;
  border-radius: 2px;
}

/* Image frames */
.img-frame {
  border: 2px solid var(--tag-amber);
  overflow: hidden;
  border-radius: 2px;
}
.img-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-frame-tall   { aspect-ratio: 4/5; }
.img-frame-wide   { aspect-ratio: 16/10; }
.img-frame-square { aspect-ratio: 1/1; }
.linen-section .img-frame { border-color: var(--walnut); }

/* Section anchor offset so sticky-free Starter still scrolls cleanly */
section[id] { scroll-margin-top: 24px; }

/* Footer */
.foot {
  background: var(--walnut-2);
  color: var(--cream-soft);
  border-top: 1px solid var(--tag-amber);
}
.foot a { color: var(--cream-soft); }
.foot a:hover { color: var(--terracotta); }