/* Hensley's Barbershop — Standard tier custom demo */
/* Thesis: A barbershop wall price card crossed with a 1920s typographic
   poster — strong vertical stripes, bold uppercase, deep oxblood with brass
   accent. Typography does all the work. */

:root {
  --oxblood:     #3d1414;      /* dominant — barber-chair leather */
  --oxblood-2:   #2a0c0c;      /* deepest, for footer / overlays */
  --oxblood-3:   #4f1c1c;      /* slight lift for cards */
  --bone:        #efe6cf;      /* warm-bone wall-card paper */
  --bone-2:      #e7dcc0;      /* secondary bone surface */
  --ink:         #1a0f0c;      /* near-black, used on bone */
  --cream:       #f3ead8;      /* light text on oxblood */
  --cream-soft:  #d8cdb6;      /* secondary cream */
  --brass:       #c19853;      /* trim, hairlines, accents */
  --brass-deep:  #9a7a40;
  --barber-red:  #c1272d;      /* saturated accent — used ONLY for BOOK */
  --barber-red-deep: #9a1f24;
  --line:        #5a2727;      /* hairline on oxblood */
  --line-bone:   #d2c69f;      /* hairline on bone */
}

html { scroll-behavior: smooth; color-scheme: dark; }
body {
  background: var(--oxblood);
  color: var(--cream);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  /* Manrope 500 — uniform stroke, easily legible on dark oxblood. */
  font-weight: 500;
  font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}
.bone-section, .bone-section *, .bone-section a {
  color: var(--ink);
}
.bone-section { background: var(--bone); color: var(--ink); }
.bone-section a:not([class*="btn-"]) { color: var(--ink); }

::selection { background: var(--brass); color: var(--oxblood); }

/* Display utility — Oswald, bold condensed uppercase, even stroke weight.
   Anti-thin-stroke discipline per feedback_readability_first memory. */
.font-display {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.font-display-heavy {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.font-body { font-family: 'Manrope', system-ui, sans-serif; }

/* Kicker label — bold uppercase Manrope tracking. Distinct from Deligiannis's
   italic-Vollkorn folios, Shingle's em-dash kickers, and Bishop's flanked-line
   kicker — all explicitly avoided. */
.kicker {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}

/* Barber-pole stripe — used once at the top of each page as a brand mark */
.pole-stripe {
  height: 10px;
  background: repeating-linear-gradient(
    -55deg,
    var(--barber-red) 0 22px,
    var(--cream) 22px 36px,
    var(--oxblood) 36px 58px
  );
}

/* Heavy + thin rules */
.rule-brass        { border: 0; border-top: 2px solid var(--brass); height: 0; }
.rule-brass-thin   { border: 0; border-top: 1px solid var(--brass); opacity: 0.6; height: 0; }
.rule-cream        { border: 0; border-top: 1px solid var(--line); height: 0; }
.rule-bone         { border: 0; border-top: 1px solid var(--line-bone); height: 0; }

/* Buttons — wall-card stamp aesthetic, square corners, weighty.
   Default visible color baked in (no specificity bugs). */
.btn-book {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--barber-red);
  color: var(--cream);
  padding: 14px 24px;
  border: 0;
  transition: background 0.15s ease, transform 0.12s ease;
}
.btn-book:hover { background: var(--barber-red-deep); transform: translateY(-1px); }
.btn-book::after { content: '→'; font-weight: 700; }

.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--oxblood);
  padding: 14px 22px;
  border: 0;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: var(--cream); color: var(--oxblood); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--cream);
  padding: 14px 22px;
  border: 2px solid var(--brass);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-secondary:hover { background: var(--brass); color: var(--oxblood); }

/* On bone surfaces, secondary buttons need ink text */
.bone-section .btn-secondary { color: var(--ink); border-color: var(--ink); }
.bone-section .btn-secondary:hover { background: var(--ink); color: var(--bone); }
.bone-section .btn-primary { background: var(--ink); color: var(--bone); }
.bone-section .btn-primary:hover { background: var(--barber-red); color: var(--cream); }

/* Service menu — wall card line items, big and easy to scan */
.menu-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-bone);
}
.menu-row:first-child { border-top: 3px solid var(--ink); }
.menu-row:last-child  { border-bottom: 3px solid var(--ink); }
.menu-row .num {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--barber-red);
  letter-spacing: 0.02em;
}
.menu-row .name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.menu-row .desc {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #4a3a2a;
  margin-top: 6px;
}
.menu-row .price {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Stat tile — used in the trust band */
.stat-tile {
  background: var(--oxblood-3);
  border: 2px solid var(--brass);
  padding: 24px 22px;
}
.stat-tile .big {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--cream);
  letter-spacing: 0.01em;
}

/* Review card — slim, no shadow, just bone with brass rule */
.review-card {
  background: var(--bone);
  color: var(--ink);
  padding: 26px 28px;
  border-left: 4px solid var(--barber-red);
}

/* Chair card — about-page profile insets */
.chair-card {
  background: var(--oxblood-3);
  border: 2px solid var(--brass);
  padding: 28px;
}

/* Form input — wall-card line treatment on bone */
.menu-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--ink);
  padding: 14px 0 10px;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
.menu-input:focus {
  outline: 0;
  border-bottom-color: var(--barber-red);
  background: rgba(193, 39, 45, 0.04);
}
.menu-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Decorative vertical scissors / barber pole ornament */
.pole-mark {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  background: var(--cream);
  border: 2px solid var(--oxblood);
}

/* Footer */
.foot {
  background: var(--oxblood-2);
  color: var(--cream-soft);
  border-top: 2px solid var(--brass);
}
.foot a { color: var(--cream-soft); }
.foot a:hover { color: var(--brass); }