/* ============================================================
   SECTION — Five-O-Six Barber Lounge
   Design system v2: high-contrast black & white · editorial
   Themeable per-section via .theme-dark / .theme-light
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --sans:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'Space Mono', ui-monospace, 'SF Mono', monospace;
  --black:   #0a0a0a;
  --black-2: #141414;
  --paper:   #ffffff;
  --paper-2: #f2f2f2;
  --maxw: 1280px;
  --gutter: clamp(22px, 6vw, 80px);
  --sec-pad: clamp(84px, 12vw, 184px);
  --radius: 2px;
}

.theme-dark{
  --bg:#0a0a0a; --fg:#ffffff; --dim:#c6c6c6; --mute:#8c8c8c;
  --line:rgba(255,255,255,.18); --line-2:rgba(255,255,255,.34);
  --panel:#141414; --panel-2:#1c1c1c;
  --btn-bg:#ffffff; --btn-fg:#0a0a0a; --btn-bg-h:#ffffff;
}
.theme-light{
  --bg:#ffffff; --fg:#0a0a0a; --dim:#444444; --mute:#767676;
  --line:rgba(0,0,0,.15); --line-2:rgba(0,0,0,.32);
  --panel:#f2f2f2; --panel-2:#e8e8e8;
  --btn-bg:#0a0a0a; --btn-fg:#ffffff; --btn-bg-h:#000000;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--black); color:var(--paper);
  font-family:var(--sans); font-weight:400; font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--paper); color:var(--black); }
.theme-light ::selection{ background:#111; color:var(--paper); }

/* type */
.display{ font-family:var(--display); font-weight:700; line-height:1.02; letter-spacing:-.02em; text-wrap:balance; }
h1,h2,h3{ margin:0; font-family:var(--display); font-weight:700; line-height:1.05; letter-spacing:-.015em; }
p{ margin:0; }
.eyebrow{ font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--mute); }

/* layout */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ background:var(--bg); color:var(--fg); padding-block:var(--sec-pad); position:relative; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  padding:18px 34px; border-radius:var(--radius); cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s;
  white-space:nowrap;
}
.btn--primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn--primary:hover{ background:var(--btn-bg-h); transform:translateY(-2px); }
.btn--outline{ background:transparent; color:var(--fg); border-color:var(--line-2); }
.btn--outline:hover{ background:var(--fg); color:var(--bg); transform:translateY(-2px); }
.btn--block{ width:100%; }
.btn--lg{ padding:21px 42px; font-size:15px; }
.btn .arr{ transition:transform .25s; }
.btn:hover .arr{ transform:translateX(5px); }

/* placeholder */
.ph{
  position:relative; background-color:var(--panel);
  background-image:repeating-linear-gradient(135deg, rgba(127,127,127,.10) 0 2px, transparent 2px 12px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--mute); font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; border:1px solid var(--line);
}
.ph span{ padding:8px 12px; }

/* utils */
.center{ text-align:center; }
.mono{ font-family:var(--mono); }
.dim{ color:var(--dim); }
.nowrap{ white-space:nowrap; }

@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }