/* ============================================================================
   starter.css — MECHANICS-ONLY FLOOR (kept intact; design lives below it)
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; }

:root {
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;     --space-8: 4.5rem;
  --measure: 38rem;
  --section-pad: 4.5rem;
}

h1 { font-size: 2.5rem;   line-height: 1.08; margin: 0 0 1rem; }
h2 { font-size: 1.75rem;  line-height: 1.15; margin: 0 0 0.75rem; }
h3 { font-size: 1.375rem; line-height: 1.25; margin: 0 0 0.5rem; }
p  { margin: 0 0 1rem; max-width: var(--measure); }
@media (min-width: 1000px) { h1 { font-size: 3rem; } }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid currentColor; outline-offset: 2px;
}
a { text-underline-offset: 3px; }

:root { --header-safe: clamp(5rem, 9vh, 7rem); }
html { scroll-padding-top: var(--header-safe); }

@media (max-width: 720px) {
  :root { --section-pad: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ============================================================================
   END OF FLOOR — SHEAR SENSATIONS bespoke design begins here.
   Boutique hair salon · Donna Stover, master stylist since 1992 · Lititz, PA.
   Palette: warm cream canvas, deep aubergine-wine anchor, champagne-brass +
   soft blush accents. Type: Fraunces (display) / Hanken Grotesk (body).
   ============================================================================ */

:root {
  --cream:      #faf6f1;   /* page canvas */
  --cream-2:    #f3ebe1;   /* alternate / inset surface */
  --ink:        #241c20;   /* body text (warm near-black) ~15:1 on cream */
  --wine:       #4a1f33;   /* anchor; dark band bg ~12.8:1 with cream text */
  --wine-deep:  #341320;   /* footer / deepest band */
  --wine-text:  #6e2440;   /* accent text on cream (~9.8:1, AA pass) */
  --brass:      #b9863f;   /* DECORATIVE only — rules, frames (never body text) */
  --champagne:  #e8cfa0;   /* light gold — text on wine bands only */
  --blush:      #e7cdd3;   /* soft accent — decorative */
  --line:       #e4d6c6;   /* hairline on cream */
  --line-2:     #d9c7b4;   /* stronger hairline */
}

body {
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--wine-text); }
a:hover { color: var(--wine); }

img { display: block; }

/* --- shared layout shell --- */
.wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 var(--space-5); }
.measure { max-width: var(--measure); }

.eyebrow {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wine-text);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background-color: var(--brass);
  display: inline-block;
}
.eyebrow.center { justify-content: center; }

.lead { font-size: 1.375rem; line-height: 1.5; max-width: 34rem; }
.muted { color: #5a4a50; }

/* --- buttons --- */
.cta, .ghost {
  display: inline-block;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cta {
  color: var(--cream);
  background-color: var(--wine);
  border: 2px solid var(--wine);
}
.cta:hover { background-color: var(--wine-deep); color: var(--cream); transform: translateY(-2px); }
.ghost {
  color: var(--wine);
  background-color: transparent;
  border: 2px solid var(--line-2);
}
.ghost:hover { color: var(--wine); border-color: var(--wine); background-color: var(--cream-2); }

/* ============================================================================
   HEADER / NAV  (sticky — flows after itself, no fixed-header hero collision)
   ============================================================================ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background-color: rgba(250, 246, 241, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); min-height: 4.75rem; padding-top: var(--space-3); padding-bottom: var(--space-3);
}
.brand { text-decoration: none; color: var(--ink); line-height: 1.05; display: block; }
.brand .name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600; font-size: 1.375rem; letter-spacing: 0.01em;
  white-space: nowrap; display: block;
}
.brand .sub {
  font-size: 0.8125rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--wine-text); line-height: 1.4; display: block; margin-top: 2px;
}
.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-links { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: 0.9375rem;
  padding: var(--space-1) 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--wine); border-bottom-color: var(--brass); }
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav .cta { padding: var(--space-2) var(--space-4); }
}

/* ============================================================================
   HERO / OPENING  (asymmetric split — never centered hero+cards)
   ============================================================================ */
.opening { padding: var(--section-pad) 0 calc(var(--section-pad) - var(--space-6)); }
.opening .wrap {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center;
}
.opening h1 { margin-bottom: var(--space-5); }
.opening .meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid var(--line); font-size: 0.9375rem;
}
.opening .meta strong { font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* arched portrait frame — the recurring signature motif */
.portrait { position: relative; }
.portrait .frame {
  position: relative;
  border-radius: 14rem 14rem var(--space-3) var(--space-3);
  overflow: hidden;
  background-color: var(--cream-2);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -28px rgba(52, 19, 32, 0.45);
}
.portrait .frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait .frame.tall { aspect-ratio: 4 / 5; }
.portrait .frame.wide { aspect-ratio: 4 / 3; }
.portrait .brass-edge {
  position: absolute; inset: -0.625rem -0.625rem auto auto;
  width: 6rem; height: 6rem; border: 2px solid var(--brass);
  border-radius: 999px 999px 0 0; z-index: -1;
}
.tag-since {
  position: absolute; left: -1rem; top: 2.5rem;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 0.8125rem; letter-spacing: 0.3em; text-transform: uppercase;
  font-weight: 700; color: var(--cream); background-color: var(--wine);
  padding: var(--space-3) var(--space-2); border-radius: 999px;
  line-height: 1.2;
}

/* ============================================================================
   SECTIONS
   ============================================================================ */
.section { padding: var(--section-pad) 0; }
.section.tint { background-color: var(--cream-2); }
.section-head { max-width: 44rem; margin-bottom: var(--space-7); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ornamental scallop divider (generated band asset) */
.scallop {
  height: 4.5rem; background-image: url("images/band.png");
  background-repeat: repeat-x; background-position: center; background-size: auto 100%;
}

/* split feature row — text + arched image, alternating */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
.split.flip .col-text { order: 2; }

/* ============================================================================
   SERVICE MENU  (price list with dotted leaders — not cards)
   ============================================================================ */
.menu-group { margin-bottom: var(--space-7); }
.menu-group > h3 {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--wine); color: var(--wine);
}
.menu-group > h3 .note { font-family: "Hanken Grotesk", sans-serif; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: #5a4a50; text-transform: none; margin-left: auto; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list > li {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px dotted var(--line-2);
}
.price-list > li .item { font-weight: 600; }
.price-list > li .lede-dots { flex: 1; border-bottom: 2px dotted var(--line-2); transform: translateY(-3px); min-width: 1.5rem; }
.price-list > li .amt { font-family: "Fraunces", Georgia, serif; font-weight: 600; white-space: nowrap; }
.price-list > li small { display: block; font-weight: 400; color: #5a4a50; }

/* feature/promise list — unclassed children styled via parent (no card tell) */
.promises { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-6); }
.promises > li { padding-top: var(--space-4); border-top: 3px solid var(--brass); }
.promises > li h3 { color: var(--wine); }

/* ============================================================================
   WINE BAND  (light text on dark — bg restated per rule for the analyzer)
   ============================================================================ */
.creed { background-color: var(--wine); color: #f6ece1; }
.creed h2 { color: var(--champagne); background-color: var(--wine); }
.creed .eyebrow { color: var(--champagne); background-color: var(--wine); }
.creed .eyebrow::before { background-color: var(--brass); }
.creed a.ghost { color: var(--champagne); background-color: var(--wine); border-color: rgba(232, 207, 160, 0.5); }
.creed a.ghost:hover { color: var(--cream); background-color: var(--wine-deep); border-color: var(--champagne); }
.creed .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.creed .stat-row > div { border-left: 2px solid var(--brass); padding-left: var(--space-4); }
.creed .stat-row .num { font-family: "Fraunces", Georgia, serif; font-size: 2.5rem; line-height: 1.05; color: var(--champagne); background-color: var(--wine); display: block; }
.creed .stat-row .lbl { font-size: 0.9375rem; color: #ecdfd2; background-color: var(--wine); }

/* ============================================================================
   REVIEWS
   ============================================================================ */
.rating-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding: var(--space-6); background-color: var(--cream-2); border-radius: var(--space-4); border: 1px solid var(--line); }
.rating-hero .score { font-family: "Fraunces", Georgia, serif; font-size: 2.5rem; line-height: 1; color: var(--wine); }
.stars { color: #8a6520; letter-spacing: 0.15em; font-size: 1.375rem; line-height: 1; }
.quotes { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--space-6); }
.quotes > li { padding: var(--space-6); background-color: var(--cream); border: 1px solid var(--line); border-radius: var(--space-4); position: relative; }
.quotes > li::before { content: "\201C"; font-family: "Fraunces", Georgia, serif; font-size: 3rem; line-height: 1; color: #a86b80; position: absolute; top: var(--space-2); right: var(--space-4); }
.quotes > li p { font-style: italic; }
.quotes > li .who { font-style: normal; font-weight: 700; color: var(--wine); margin-top: var(--space-3); display: block; }

/* placeholder frames for real photos to come (gallery) */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.gallery-grid > figure { margin: 0; }
.ph-photo {
  aspect-ratio: 4 / 5; border-radius: 12rem 12rem var(--space-2) var(--space-2);
  background-color: var(--cream-2); border: 2px dashed var(--line-2);
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--space-5); color: #6a5a60;
}
.ph-photo span { font-size: 0.9375rem; line-height: 1.4; }
.gallery-grid > figure figcaption { font-size: 0.9375rem; color: #5a4a50; margin-top: var(--space-2); }

/* ============================================================================
   CONTACT
   ============================================================================ */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list > li { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.fact-list > li .k { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wine-text); display: block; margin-bottom: var(--space-1); }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table th, .hours-table td { text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.hours-table th { font-weight: 600; }
.hours-table td { text-align: right; font-variant-numeric: tabular-nums; }

/* demo inquiry form */
.form-card { background-color: var(--cream-2); border: 1px solid var(--line); border-radius: var(--space-4); padding: var(--space-6); }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wine-text); margin-bottom: var(--space-2); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background-color: var(--cream);
  border: 1px solid var(--line-2); border-radius: var(--space-2); padding: var(--space-3);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--wine); outline: 2px solid var(--blush); }
.form-note { font-size: 0.8125rem; color: #5a4a50; margin-top: var(--space-2); }

.map-embed { width: 100%; border: 0; border-radius: var(--space-4); aspect-ratio: 4 / 3; filter: saturate(0.85) contrast(0.95); }

/* ============================================================================
   FOOTER
   ============================================================================ */
.colophon { background-color: var(--wine-deep); color: #e9dccb; padding: var(--section-pad) 0 var(--space-6); margin-top: var(--space-8); }
.colophon a { color: var(--champagne); background-color: var(--wine-deep); text-decoration: none; }
.colophon a:hover { color: var(--cream); background-color: var(--wine-deep); }
.colophon .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
.colophon h3 { color: var(--champagne); background-color: var(--wine-deep); font-size: 1.0625rem; letter-spacing: 0.08em; text-transform: uppercase; font-family: "Hanken Grotesk", sans-serif; font-weight: 700; }
.colophon .name { font-family: "Fraunces", Georgia, serif; font-size: 1.75rem; color: var(--champagne); background-color: var(--wine-deep); line-height: 1.1; }
.colophon p, .colophon li { color: #e3d4c4; background-color: var(--wine-deep); }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { padding: var(--space-1) 0; }
.signoff { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(232, 207, 160, 0.25); font-size: 0.8125rem; color: #cdbaa8; background-color: var(--wine-deep); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; }
.signoff span { background-color: var(--wine-deep); }

.news-form { display: flex; gap: var(--space-2); margin-top: var(--space-3); max-width: 22rem; }
.news-form input { flex: 1; font: inherit; padding: var(--space-3); border-radius: 999px; border: 1px solid rgba(232, 207, 160, 0.4); background-color: var(--wine); color: var(--cream); }
.news-form input::placeholder { color: #c9b6a6; background-color: var(--wine); }
.news-form button { font: inherit; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: var(--space-3) var(--space-4); border-radius: 999px; border: 0; background-color: var(--champagne); color: var(--wine-deep); }
.news-form button:hover { background-color: var(--cream); color: var(--wine-deep); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  .opening .wrap, .split, .contact-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .split.flip .col-text { order: 0; }
  .portrait { max-width: 28rem; }
  .colophon .grid { grid-template-columns: 1fr 1fr; }
  .tag-since { left: -0.5rem; }
}
@media (max-width: 560px) {
  .colophon .grid { grid-template-columns: 1fr; }
  .actions { flex-direction: column; align-items: flex-start; }
  .actions .cta, .actions .ghost { width: 100%; text-align: center; }
  .tag-since { display: none; }
}