/* =========================================
   MR PROPER BARBER  —  v2 vintage shared styles
   palette inspired by the shop's actual teal walls,
   ornate tin ceiling, dark wood, and brass fixtures.
   ========================================= */

:root{
  --paper:        #ece0c0;
  --paper-2:      #ddd0a8;
  --paper-3:      #c8b88c;
  --ink:          #14100c;
  --ink-soft:     #2a1d14;
  --teal:         #1f4847;
  --teal-deep:    #143433;
  --teal-bright:  #2a6260;
  --oxblood:      #6a1d1d;
  --brass:        #b48642;
  --brass-bright: #d6a85a;
  --rule:         rgba(20,15,10,.5);
  --shadow:       0 18px 40px -22px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(rgba(40,20,10,.07) 1px, transparent 1px),
    radial-gradient(rgba(40,20,10,.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
}

a{color:var(--oxblood); text-decoration:none; border-bottom:1px solid rgba(106,29,29,.25); transition:all .2s}
a:hover{color:var(--ink); border-bottom-color:var(--oxblood)}

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

/* ---------- TYPOGRAPHY ---------- */
.display, h1, h2, h3{
  font-family:'Abril Fatface', 'Playfair Display', serif;
  font-weight:400;
  letter-spacing:.5px;
  color:var(--ink);
  margin:0 0 .4em;
}
h1{font-size:clamp(2.4rem, 6vw, 4.6rem); line-height:1.05}
h2{font-size:clamp(2rem, 4.4vw, 3.4rem); line-height:1.05}
h3{font-size:clamp(1.4rem, 2.4vw, 1.9rem)}
.smallcaps{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--oxblood);
}
.tagline-script{
  font-family:'Pinyon Script', cursive;
  color:var(--brass-bright);
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.1;
  font-weight:400;
}

/* ---------- LAYOUT ---------- */
.container{ width:min(1120px, 92%); margin:0 auto;}
.narrow{ width:min(720px, 92%); margin:0 auto;}
section{ padding:clamp(56px, 8vw, 110px) 0;}

/* ---------- HEADER / NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: var(--teal-deep);
  border-bottom:1px solid var(--brass);
  color: var(--paper);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
  border:none; color: var(--paper);
}
.brand .crest{ width:42px; height:42px; flex:0 0 auto;}
.brand .name{
  font-family:'Abril Fatface', serif;
  font-size:1.3rem;
  line-height:1; letter-spacing:.5px;
  color: var(--paper);
}
.brand .name small{
  display:block;
  font-family:'IM Fell English SC', serif;
  font-size:.62rem; letter-spacing:.32em;
  color: var(--brass-bright);
  margin-top:3px;
}
nav.primary{ display:flex; align-items:center; gap:26px;}
nav.primary a{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--paper);
  border:none;
  padding-bottom:4px;
  border-bottom:2px solid transparent;
}
nav.primary a:hover{ color: var(--brass-bright); border-bottom-color: var(--brass);}
nav.primary a.current{ color: var(--brass-bright); border-bottom-color: var(--brass);}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--paper);
  padding:8px 12px; cursor:pointer;
  font-family:'IM Fell English SC', serif; letter-spacing:.18em; text-transform:uppercase;
  font-size:.7rem; color: var(--paper);
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;
  padding:14px 30px;
  font-family:'IM Fell English SC', serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.82rem;
  border:2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor:pointer;
  transition: all .2s ease;
  border-bottom-color: var(--ink);
}
.btn:hover{ background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); transform:translateY(-1px); box-shadow:var(--shadow);}
.btn.gold{ background: var(--brass); border-color: var(--brass); color: var(--ink);}
.btn.gold:hover{ background: var(--brass-bright); border-color: var(--brass-bright); color: var(--ink);}
.btn.ghost{ background:transparent; color:var(--paper); border-color:var(--paper);}
.btn.ghost:hover{ background:var(--paper); color: var(--ink); border-color:var(--paper);}
.btn.ghost.dark{ color:var(--ink); border-color:var(--ink);}
.btn.ghost.dark:hover{ background:var(--ink); color:var(--paper);}

/* ---------- HERO (dark, moody) ---------- */
.hero{
  position:relative;
  text-align:center;
  padding:clamp(60px, 10vw, 130px) 0 clamp(50px, 7vw, 90px);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(180,134,66,.18), transparent 60%),
    var(--teal-deep);
  color: var(--paper);
  border-bottom:6px double var(--brass);
}
.hero::before, .hero::after{
  content:''; position:absolute;
  width:120px; height:120px;
  border:2px solid var(--brass);
  opacity:.55; pointer-events:none;
}
.hero::before{ top:24px; left:24px; border-right:none; border-bottom:none;}
.hero::after{ bottom:24px; right:24px; border-left:none; border-top:none;}
.hero .est{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.36em;
  text-transform:uppercase;
  font-size:.76rem;
  color: var(--brass-bright);
  margin-bottom:14px;
}
.hero .ornament{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin: 0 auto 14px;
}
.hero .ornament .line{ width:90px; height:1px; background:linear-gradient(90deg, transparent, var(--brass));}
.hero .ornament .line.right{ background:linear-gradient(90deg, var(--brass), transparent);}
.hero .ornament svg{ color: var(--brass-bright); width:22px; height:22px;}
.hero h1{
  font-size:clamp(3rem, 9vw, 6.4rem);
  line-height:.95;
  letter-spacing:1px;
  color: var(--paper);
  margin: 0 0 14px;
}
.hero h1 .amp{
  font-family:'Pinyon Script', cursive;
  color: var(--brass-bright);
  font-size:.7em;
  font-style:italic;
  display:inline-block;
  transform: translateY(.06em);
  margin: 0 .05em;
}
.hero .lead{
  font-family:'Pinyon Script', cursive;
  color: var(--brass-bright);
  font-size:clamp(1.7rem, 3.6vw, 2.8rem);
  margin: 0 0 36px;
}
.hero .cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hero .stars{
  margin-top:34px;
  font-family:'IM Fell English SC', serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  color: var(--paper);
  font-size:.78rem;
  opacity:.85;
}
.hero .stars .num{
  font-family:'Abril Fatface', serif;
  font-size:1.4rem; color: var(--brass-bright); letter-spacing:0;
}

/* Page-hero (smaller, used on inner pages) */
.page-hero{
  text-align:center;
  padding: 90px 0 60px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(180,134,66,.18), transparent 55%),
    var(--teal-deep);
  color: var(--paper);
  border-bottom:6px double var(--brass);
}
.page-hero .est{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.36em;
  text-transform:uppercase;
  font-size:.76rem;
  color: var(--brass-bright);
  margin-bottom:6px;
}
.page-hero h1{ font-size:clamp(2.6rem, 7vw, 5rem); margin-bottom:6px; color:var(--paper)}
.page-hero .lead{
  font-family:'Pinyon Script', cursive;
  color: var(--brass-bright);
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  margin:0;
}

/* ---------- BARBER POLE (kept, in dark hero) ---------- */
.pole-wrap{ display:flex; justify-content:center; margin:18px 0;}
.pole{
  width:28px; height:110px;
  border-radius:14px;
  background: repeating-linear-gradient(35deg,
    #ffffff 0 12px,
    #d62828 12px 24px,
    #1d4ed8 24px 36px,
    #ffffff 36px 48px);
  border:2px solid var(--ink);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
  animation: poleSpin 4s linear infinite;
}
.pole::before, .pole::after{
  content:''; position:absolute; left:-4px; right:-4px;
  height:10px;
  background: linear-gradient(180deg, #d6a85a, #8a5d22);
  border:1px solid var(--ink);
}
.pole::before{ top:-6px} .pole::after{ bottom:-6px}
@keyframes poleSpin{ 0%{ background-position:0 0;} 100%{ background-position:0 -96px;}}

/* ---------- SECTION HEADS ---------- */
.section-head{ text-align:center; margin-bottom:50px;}
.section-head .smallcaps{ display:block; margin-bottom:8px;}

.divider-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin:8px 0 26px;}
.divider-row .line{ height:1px; flex:1; max-width:140px; background:linear-gradient(90deg, transparent, var(--rule), transparent);}
.divider-row svg{ width:32px; height:auto; color: var(--oxblood);}

/* ---------- SERVICES TABLE ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:0;
  border-top:1px solid var(--rule);
}
.service-row{
  display:grid; grid-template-columns:1fr auto;
  align-items:baseline;
  padding:22px 26px;
  border-bottom:1px dashed rgba(106,29,29,.4);
  border-right:1px dashed rgba(106,29,29,.2);
  gap:14px;
}
.service-row:nth-child(2n){ border-right:none;}
.service-row .name{
  font-family:'Abril Fatface', serif;
  font-size:1.4rem;
  letter-spacing:.3px;
}
.service-row .meta{
  font-family:'IM Fell English SC', serif;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
}
.service-row .price{
  font-family:'Abril Fatface', serif;
  font-size:1.5rem; color:var(--oxblood);
  white-space:nowrap;
}

/* ---------- INSTAGRAM EMBEDS ---------- */
.ig-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.ig-card{
  background: var(--paper-2);
  border:1px solid var(--ink);
  overflow:hidden;
  position:relative;
  box-shadow: var(--shadow);
  /* IG embeds report their own height; keep min */
  min-height: 540px;
}
.ig-card iframe{
  display:block; width:100%; min-height:540px; border:0; background:#fff;
}
.ig-card::after{
  content:''; position:absolute; inset:6px;
  border:1px solid rgba(20,15,10,.18);
  pointer-events:none;
}

/* ---------- BARBERS ---------- */
.barbers{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.barber{
  text-align:center;
  background: var(--teal-deep);
  border:1px solid var(--brass);
  padding:32px 18px;
  position:relative;
  color: var(--paper);
}
.barber::before{
  content:''; position:absolute; inset:7px;
  border:1px solid rgba(214,168,90,.3);
  pointer-events:none;
}
.barber .monogram{
  font-family:'UnifrakturCook', 'Abril Fatface', serif;
  font-weight:700;
  font-size:3.6rem;
  color: var(--brass-bright);
  line-height:1; margin-bottom:16px;
  border-bottom:2px solid var(--brass);
  display:inline-block;
  padding-bottom:6px;
}
.barber .barber-name{
  font-family:'Abril Fatface', serif;
  font-size:1.6rem; color: var(--paper);
}

/* ---------- TESTIMONIALS ---------- */
.testimonials{
  background: var(--ink);
  color: var(--paper);
  border-top:6px double var(--brass);
  border-bottom:6px double var(--brass);
}
.testimonials .smallcaps{ color: var(--brass-bright);}
.testimonials h2{ color: var(--paper);}
.testimonials .quotes{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;
  margin-top:40px;
}
.testimonials blockquote{
  margin:0; padding:0 0 0 30px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.2rem;
  line-height:1.55;
  position:relative;
}
.testimonials blockquote::before{
  content:'\201C';
  position:absolute; left:-4px; top:-22px;
  font-family:'Abril Fatface', serif;
  font-style:normal;
  font-size:4.5rem;
  color: var(--brass);
  line-height:1;
}
.testimonials cite{
  display:block; margin-top:14px;
  font-style:normal;
  font-family:'IM Fell English SC', serif;
  letter-spacing:.2em; text-transform:uppercase;
  font-size:.78rem;
  color: var(--brass-bright);
}

/* ---------- CONTACT / HOURS ---------- */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:50px;
}
.info-card{
  background: var(--teal-deep);
  color: var(--paper);
  border:1px solid var(--brass);
  padding:42px 36px;
  position:relative;
}
.info-card::before{
  content:''; position:absolute; inset:7px;
  border:1px solid rgba(214,168,90,.3);
  pointer-events:none;
}
.info-card h3{ margin-top:0; color: var(--paper);}
.info-card .smallcaps{ color: var(--brass-bright);}
.info-card .label{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.2em; text-transform:uppercase;
  font-size:.72rem;
  color: var(--brass-bright);
  margin-top:22px; margin-bottom:4px;
}
.info-card .val{ font-family:'Cormorant Garamond', serif; font-size:1.18rem; color: var(--paper);}
.info-card .val a{ color: var(--paper); border-bottom-color:rgba(214,168,90,.4);}
.info-card .val a:hover{ color: var(--brass-bright);}

table.hours{ width:100%; border-collapse:collapse;}
table.hours td{
  padding:11px 0;
  border-bottom:1px dashed rgba(214,168,90,.25);
  font-family:'IM Fell English SC', serif;
  letter-spacing:.16em; text-transform:uppercase;
  font-size:.86rem;
  color: var(--paper);
}
table.hours td:last-child{
  text-align:right;
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  color: var(--brass-bright);
  letter-spacing:0; text-transform:none;
}

/* ---------- AMENITIES ---------- */
.amenities{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px;}
.amenity{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.18em; text-transform:uppercase;
  font-size:.74rem;
  padding:8px 16px;
  border:1px solid var(--ink);
  background:var(--paper);
  color: var(--ink);
}

/* ---------- BOOK BAND ---------- */
.book-band{
  text-align:center;
  background: var(--teal);
  color: var(--paper);
  border-top:6px double var(--brass);
  border-bottom:6px double var(--brass);
}
.book-band .smallcaps{ color: var(--brass-bright);}
.book-band h2{ color: var(--paper); font-size:clamp(2.4rem, 5vw, 4rem);}
.book-band .lead{
  font-style:italic; max-width:540px; margin:0 auto 28px;
  font-size:1.2rem; color: var(--paper);
}

/* ---------- FOOTER ---------- */
footer{ background:var(--ink); color:var(--paper); padding:56px 0 32px; text-align:center;}
footer .brand{ justify-content:center; color:var(--paper); margin-bottom:18px;}
footer .brand .name small{ color:var(--brass-bright);}
footer nav{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-bottom:26px;}
footer nav a{
  color:var(--paper); border:none;
  font-family:'IM Fell English SC', serif;
  letter-spacing:.18em; text-transform:uppercase;
  font-size:.78rem;
}
footer nav a:hover{ color:var(--brass-bright);}
footer .socials{ display:flex; gap:18px; justify-content:center; margin-bottom:22px;}
footer .socials a{
  color:var(--paper); border:none;
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--paper);
  border-radius:50%;
  transition:all .2s;
}
footer .socials a:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink);}
footer .legal{
  font-family:'IM Fell English SC', serif;
  letter-spacing:.2em; text-transform:uppercase;
  font-size:.7rem;
  color:rgba(241,231,206,.55);
  margin-top:14px;
}

/* ---------- MOBILE ---------- */
@media (max-width: 880px){
  body{ font-size:18px;}
  nav.primary{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background: var(--teal-deep);
    flex-direction:column;
    border-top:1px solid var(--brass);
    border-bottom:1px solid var(--brass);
    padding:14px 0; gap:0;
  }
  nav.primary.open{ display:flex;}
  nav.primary a{
    padding:12px 0;
    border-bottom:1px solid rgba(214,168,90,.15);
    width:92%; margin:0 auto;
    text-align:center;
  }
  nav.primary a:last-child{ border-bottom:none;}
  .nav-toggle{ display:inline-flex;}

  .hero::before, .hero::after{ width:60px; height:60px;}
  .contact-grid{ grid-template-columns:1fr; gap:30px;}
  .services-grid{ grid-template-columns:1fr;}
  .service-row{ border-right:none;}
  .barbers{ grid-template-columns:1fr 1fr; gap:18px;}
  .testimonials .quotes{ grid-template-columns:1fr; gap:50px;}
  .ig-grid{ grid-template-columns:1fr 1fr; gap:14px;}
  .ig-card, .ig-card iframe{ min-height: 480px;}
  .info-card{ padding:30px 22px;}
}

@media (max-width: 480px){
  .barbers{ grid-template-columns:1fr;}
  .ig-grid{ grid-template-columns:1fr;}
  .hero h1{ font-size:clamp(2.4rem, 13vw, 3.6rem);}
}