/* God is Good Barbershop — midnight indigo band, sunrise gold, parchment below. Rozha One + Epilogue. */
:root {
  --c-primary: #1b2350;
  --c-primary-dark: #10163a;
  --c-accent: #e3a43a;
  --c-ink: #1a1a24;
  --c-muted: #555566;
  --c-bg: #f7f0e3;
  --c-surface: #efe4d0;
  --c-dark: #1b2350;
  --c-on-dark: #f7f0e3;
  --c-border: #dccfb6;
  --f-head: "Rozha One", Georgia, serif;
  --f-body: "Epilogue", system-ui, sans-serif;
  --fw-head: 400;
  --radius: 0px;
  --radius-sm: 2px;
}
h1, h2, h3 { letter-spacing: 0; }
h3 { font-family: var(--f-body); font-weight: 700; }
.fine { font-size: .88rem; color: var(--c-muted); }
.btn { border-radius: 2px; box-shadow: none !important; font-weight: 700; }
.btn:hover { transform: none; }
.btn--primary { background: var(--c-primary); color: #fff; }
.btn--primary:hover { background: #2b3672; color: #fff; }
.btn--ghost { border-color: var(--c-primary); color: var(--c-primary); }

.site-header { background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.brand { color: var(--c-primary); font-size: 1.35rem; font-weight: 400; }
.brand em { font-family: var(--f-body); font-style: normal; font-size: .8rem; font-weight: 500; color: var(--c-muted); margin-left: 4px; }
.nav-links a { font-weight: 500; }
.nav-links a:hover { background: transparent; color: var(--c-primary); text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.call-link { color: var(--c-primary); font-weight: 700; text-decoration: none; border-bottom: 3px solid var(--c-accent); padding-bottom: 2px; }
@media (min-width: 960px) { .nav-links { display: flex; } .nav-cta { display: inline-block; } }
.mobile-menu { position: absolute; inset: 100% 0 auto 0; max-height: calc(100vh - 120px); }

/* opening: navy & gold band, name beside the live "long day" hours board */
.opening { background: var(--c-primary); color: var(--c-on-dark); padding: clamp(36px, 6vw, 84px) 0 clamp(44px, 6vw, 84px); border-bottom: 6px solid var(--c-accent); }
.opening-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .opening-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.addr-line { font-weight: 500; color: #c7cbe6; margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
.opening h1 { font-size: clamp(2.8rem, 9vw, 5.6rem); line-height: .92; color: var(--c-on-dark); margin-bottom: 22px; }
.opening h1 span { display: block; font-family: var(--f-body); font-weight: 700; font-size: max(1rem, .24em); letter-spacing: .32em; text-transform: uppercase; color: var(--c-accent); margin-top: 16px; }
.lede { font-size: 1.08rem; max-width: 30em; color: #e4e6f3; }
.status { display: inline-block; font-weight: 700; color: var(--c-on-dark); border-left: 4px solid var(--c-accent); padding: 4px 0 4px 12px; margin: 6px 0 22px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.btn--gold { background: var(--c-accent); color: #1a1a24; }
.btn--gold:hover { background: #f0b856; color: #1a1a24; }
.text-link { color: var(--c-primary); font-weight: 700; }
.opening .text-link { color: var(--c-on-dark); text-decoration-color: var(--c-accent); text-underline-offset: 5px; }

/* the long day (signature) — board sits in the hero */
.longday { background: var(--c-primary-dark); border: 1px solid #2d3666; padding: clamp(18px, 3vw, 30px); min-width: 0; }
.day-head { margin-bottom: 18px; }
.longday h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin: 0 0 4px; color: var(--c-accent); }
.day-head p { margin: 0; color: #d9dcef; font-size: .92rem; }
.dayboard { position: relative; --lab: 46px; }
.axis { display: flex; justify-content: space-between; margin-left: var(--lab); font-size: .74rem; color: #aeb3d4; padding-bottom: 8px; border-bottom: 1px solid #39437a; }
.row { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; min-height: 42px; border-bottom: 1px solid #2d3666; }
.row .d { font-weight: 700; }
.track { position: relative; height: 28px; display: block; }
.bar { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background: linear-gradient(90deg, #f3c776, var(--c-accent) 55%, #b9622e); transform-origin: left; }
.row .t { position: absolute; top: 50%; transform: translateY(-50%); font-size: .8rem; font-weight: 700; color: #1a1a24; padding-left: 10px; white-space: nowrap; }
.row.is-today .d { color: var(--c-accent); }
.row.is-today .bar { box-shadow: 0 0 0 2px #fff; }
.now-line { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; display: none; }
.now-line::before { content: "now"; position: absolute; bottom: -20px; left: -10px; font-size: .72rem; font-weight: 700; color: #fff; }
.dayboard { padding-bottom: 22px; }
.longday .fine { color: #c7cbe6; margin: 14px 0 0; }
@media (prefers-reduced-motion: no-preference) { .bar { transition: width 1.1s cubic-bezier(.2,.7,.2,1); } }

/* chair */
.chair { padding: clamp(56px, 8vw, 100px) 0; }
.chair-grid { display: grid; gap: 40px; align-items: start; }
@media (min-width: 900px) { .chair-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.chair h2, .barbers h2, .find h2, .message h2 { font-size: clamp(2rem, 5vw, 3rem); color: var(--c-primary); }
.menu { list-style: none; padding: 0; margin: 0 0 14px; }
.menu li { display: flex; align-items: baseline; gap: 10px; padding: 14px 0; font-size: 1.12rem; border-bottom: 2px dotted #b8a888; }
.menu .item { font-weight: 500; }
.lead-dots { flex: 1; border-bottom: 2px dotted #b8a888; transform: translateY(-4px); min-width: 20px; }
.menu .price { font-weight: 700; color: #6e4a00; white-space: nowrap; font-size: .95rem; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.photo-pair figure { margin: 0; background: #2b2f4a; }
.photo-pair img { width: 100%; object-fit: cover; }
.photo-pair figure:first-child img { aspect-ratio: 3/4; }
.photo-pair figure:nth-child(2) img { aspect-ratio: 1/1; }
.photo-pair .photo-note { grid-column: 1 / -1; justify-self: start; }

/* barbers */
.barbers { padding: clamp(56px, 8vw, 100px) 0; background: var(--c-surface); }
.sub { color: var(--c-muted); max-width: 40em; }
.roster { list-style: none; padding: 0; margin: 28px 0 44px; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--c-border); }
.roster li { flex: 1 1 220px; padding: 18px 18px 18px 0; border-bottom: 1px solid var(--c-border); }
.roster .nm { display: block; font-family: var(--f-head); font-size: 1.9rem; color: var(--c-primary); line-height: 1.1; }
.roster .role { font-size: .9rem; color: var(--c-muted); }
.heard { max-width: 760px; border-left: 4px solid var(--c-accent); padding-left: 22px; }
.heard ul { padding-left: 1.1em; }
.heard li { margin-bottom: 8px; }

/* find */
.find { padding: clamp(56px, 8vw, 100px) 0; }
.find-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .find-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; } }
.map-embed { background: #e3d8c2; min-height: 340px; border-radius: 0 0 0 120px; overflow: hidden; }
.map-embed iframe { width: 100%; min-height: 340px; height: 100%; border: 0; }
.big-addr { font-size: 1.35rem; font-weight: 500; }
.phone { font-family: var(--f-head); font-size: 2rem; color: var(--c-primary); text-decoration: none; }

/* message */
.message { padding: clamp(56px, 8vw, 100px) 0; background: var(--c-surface); }
.message-grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .message-grid { grid-template-columns: 1fr 1.2fr; gap: 72px; } }
.msg-form { display: grid; gap: 14px; }
.msg-form .field input, .msg-form .field textarea { background: #fffaf0; border-width: 0 0 2px; border-color: #b8a888; border-radius: 0; }

.site-footer { padding: 28px 0; }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.foot p { margin: 0; }
.foot-name { font-family: var(--f-head); font-size: 1.5rem; color: var(--c-accent); }
.call-bar { background: var(--c-bg); }