/* ============================================================
   THE BARBER SHOP — W Broadway · cold-pitch redesign
   Classic neighborhood barber. Cream / charcoal / brass / red.
   ============================================================ */

/* ---- Theme: Cream (default — old-shop-sign warmth) ---- */
:root,
:root[data-theme="cream"] {
  --bg:        #F2EBDD;   /* warm cream */
  --bg-2:      #EAE1CE;
  --surface:   #F7F1E5;
  --surface-2: #ECE3D0;
  --line:      rgba(31, 27, 23, 0.14);
  --line-2:    rgba(31, 27, 23, 0.28);
  --ink:       #1F1B17;   /* deep charcoal */
  --ink-soft:  #4a4239;
  --ink-mute:  #857a69;
  --on-accent: #1F1B17;
  --on-dark:   #F2EBDD;
}

/* ---- Theme: Charcoal (dark) ---- */
:root[data-theme="charcoal"] {
  --bg:        #1F1B17;
  --bg-2:      #26211b;
  --surface:   #2c261f;
  --surface-2: #352e25;
  --line:      rgba(242, 235, 221, 0.13);
  --line-2:    rgba(242, 235, 221, 0.26);
  --ink:       #F2EBDD;
  --ink-soft:  #d3c9b5;
  --ink-mute:  #998d77;
  --on-accent: #1F1B17;
  --on-dark:   #F2EBDD;
}

/* ---- Accent (brass) + red stripe ---- */
:root {
  --accent:      #A8804B;   /* classic barber-pole brass */
  --accent-deep: #8a6638;
  --accent-soft: color-mix(in oklab, var(--accent) 16%, transparent);
  --red:         #8E3A3A;   /* muted barber-pole red */

  --serif:   "Playfair Display", Georgia, serif;     /* wordmark + headlines */
  --cond:    "Oswald", "Arial Narrow", sans-serif;   /* condensed grotesque — nav */
  --body:    "Inter", system-ui, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --r-sm: 3px;
  --r-md: 8px;
  --r-lg: 14px;

  --t-fast: 160ms cubic-bezier(.2,.7,.3,1);
  --t-med:  340ms cubic-bezier(.2,.7,.3,1);
  --t-slow: 620ms cubic-bezier(.16,.84,.32,1);
}

/* alt type pairing tweak */
:root[data-fonts="condensed"] {
  --serif: "DM Serif Display", Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--t-med), color var(--t-med);
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- type helpers ---------- */
.serif { font-family: var(--serif); font-weight: 600; line-height: 1.0; letter-spacing: -0.01em; }
.cond  { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.08em; }
.kicker {
  font-family: var(--cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 13px; color: var(--accent);
}
.serif-italic { font-family: var(--serif); font-style: italic; font-weight: 500; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 15px;
  padding: 14px 26px; border-radius: var(--r-sm);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 0 var(--accent-deep); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--accent-deep), 0 14px 26px -14px var(--accent); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 0 var(--accent-deep); }
.btn-ghost { border: 1.5px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- barber-pole stripe divider ---------- */
.stripe {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--red)    0 14px,
    var(--bg)     14px 28px,
    var(--accent) 28px 42px,
    var(--bg)     42px 56px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* spinning pole glyph */
.pole {
  width: 13px; border-radius: 100px; overflow: hidden;
  background: linear-gradient(45deg,
    var(--red) 25%, transparent 25%, transparent 50%,
    var(--red) 50%, var(--red) 75%, transparent 75%);
  background-size: 20px 20px;
  background-color: var(--bg);
  border: 1px solid var(--line-2);
  animation: pole-spin 1.4s linear infinite;
}
@keyframes pole-spin { to { background-position: 0 -40px; } }
@media (prefers-reduced-motion: reduce) { .pole { animation: none; } }

/* ---------- image placeholder (art-directed spec) ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 10%, var(--surface)) 0 14px,
      var(--surface) 14px 28px);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.ph::after {
  content: attr(data-label);
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--bg);
  padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 100px;
  max-width: 82%; text-align: center; line-height: 1.4;
}

/* scrollbar */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 100px; border: 3px solid var(--bg); }