/* ============================================================
   THE BARBER SHOP — West Broadway
   Editorial / heritage design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500;1,9..144,600;1,9..144,700;1,9..144,900&family=Cormorant:ital,wght@0,500;0,600;1,400;1,500;1,600&family=Archivo:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* warm neutrals */
  --cream:    oklch(0.962 0.012 83);
  --paper:    oklch(0.928 0.016 80);
  --paper-2:  oklch(0.905 0.018 78);
  --ink:      oklch(0.205 0.012 60);
  --ink-soft: oklch(0.385 0.012 60);
  --ink-mute: oklch(0.545 0.012 65);
  --espresso: oklch(0.205 0.016 52);
  --espresso-2: oklch(0.255 0.018 50);
  /* accents — shared chroma, varied hue */
  --brass:     oklch(0.715 0.088 78);
  --brass-2:   oklch(0.60 0.082 72);
  --oxblood:   oklch(0.435 0.095 28);
  /* lines */
  --line:      oklch(0.205 0.012 60 / 0.16);
  --line-soft: oklch(0.205 0.012 60 / 0.09);
  --line-cream: oklch(0.962 0.012 83 / 0.16);

  --ff-display: 'Fraunces', 'Times New Roman', serif;
  --ff-ledger: 'Cormorant', 'Times New Roman', serif;
  --ff-body: 'Archivo', system-ui, sans-serif;
  --ff-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 440px;
  --pad: 26px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--ff-body);
  background:
    radial-gradient(120% 80% at 50% -10%, oklch(0.30 0.02 50) 0%, oklch(0.185 0.015 50) 46%, oklch(0.13 0.012 50) 100%);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================
   STAGE + PHONE COLUMN
   ============================================================ */
.stage{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:0;
}
.phone{
  position:relative;
  width:100%;
  max-width:var(--maxw);
  background:var(--cream);
  min-height:100vh;
  overflow-x:clip;
  box-shadow:0 0 0 1px oklch(0 0 0 / .35), 0 40px 120px -20px oklch(0 0 0 / .7);
}
@media (min-width:520px){
  .stage{ padding:38px 20px 60px; align-items:flex-start; }
  .phone{
    border-radius:46px;
    min-height:calc(100vh - 98px);
    overflow:hidden;
    border:10px solid oklch(0.16 0.008 50);
    box-shadow:
      0 0 0 2px oklch(0.32 0.01 60),
      0 50px 130px -30px oklch(0 0 0 / .8),
      inset 0 0 0 1px oklch(1 0 0 / .04);
  }
}

/* notch / status bar */
.statusbar{
  position:sticky; top:0; z-index:60;
  height:0;
}
.notch{ display:none; }
@media (min-width:520px){
  .notch{
    display:block;
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:128px; height:26px;
    background:oklch(0.16 0.008 50);
    border-radius:0 0 18px 18px;
    z-index:80;
  }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
  background:color-mix(in oklab, var(--cream) 78%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:border-color .4s, background .4s, padding .4s;
}
.nav.scrolled{ border-bottom-color:var(--line); padding-top:12px; padding-bottom:12px; }
.nav-mark{
  font-family:var(--ff-ledger);
  font-style:italic; font-size:21px; letter-spacing:0; text-transform:none;
  font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:9px;
}
.nav-mark .pole-dot{
  width:9px; height:9px; border-radius:50%;
  background:
    repeating-linear-gradient(45deg, var(--oxblood) 0 3px, var(--cream) 3px 6px, var(--brass) 6px 9px);
  box-shadow:0 0 0 1px var(--line);
}
.nav-book{
  font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.04em; text-transform:none;
  font-weight:600; color:var(--cream);
  background:var(--ink);
  border:none; cursor:pointer; text-decoration:none;
  padding:9px 14px; border-radius:100px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  transition:transform .2s var(--ease), background .3s;
}
.nav-book:hover{ background:var(--oxblood); }
.nav-book:active{ transform:scale(.95); }

/* ============================================================
   TYPE
   ============================================================ */
.kicker{
  font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass-2); font-weight:500;
  display:flex; align-items:center; gap:10px;
}
.kicker::before{
  content:""; width:22px; height:1px; background:var(--brass-2); display:inline-block;
}
.kicker.center{ justify-content:center; }
.kicker.center::after{ content:""; width:22px; height:1px; background:var(--brass-2); }

h1,h2,h3{ font-family:var(--ff-display); font-weight:600; line-height:0.98; letter-spacing:-0.01em; }
.display{
  font-family:var(--ff-display);
  font-weight:900;
  font-style:italic;
  line-height:0.94;
  letter-spacing:-0.025em;
  font-size:clamp(48px, 15vw, 70px);
}
.serif-it{ font-style:italic; font-weight:500; }
.section-title{
  font-family:var(--ff-display);
  font-size:clamp(34px,10vw,46px);
  line-height:0.98;
  font-weight:700;
  font-style:italic;
  letter-spacing:-0.015em;
}
.lede{
  font-size:18px; line-height:1.5; color:var(--ink-soft); font-weight:400;
  text-wrap:pretty;
}
.meta{
  font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ padding:64px var(--pad); position:relative; }
.dark{ background:var(--espresso); color:var(--cream); }
.dark .lede{ color:oklch(0.86 0.012 80); }
.dark .meta{ color:oklch(0.72 0.012 80); }
.dark .kicker{ color:var(--brass); }
.dark .kicker::before,.dark .kicker.center::after{ background:var(--brass); }

/* ============================================================
   PLACEHOLDER IMAGE
   ============================================================ */
.ph{
  position:relative;
  background-color:var(--paper);
  background-image:repeating-linear-gradient(135deg,
     oklch(0.205 0.012 60 / .05) 0 9px, transparent 9px 18px);
  border:1px solid var(--line);
  display:flex; align-items:flex-end; justify-content:flex-start;
  overflow:hidden;
}
.ph.dark-ph{
  background-color:var(--espresso-2);
  background-image:repeating-linear-gradient(135deg,
     oklch(1 0 0 / .04) 0 9px, transparent 9px 18px);
  border-color:var(--line-cream);
}
.ph .ph-tag{
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mute); background:var(--cream);
  padding:5px 8px; margin:10px; border:1px solid var(--line);
}
.ph.dark-ph .ph-tag{ color:oklch(0.78 0.01 80); background:var(--espresso); border-color:var(--line-cream); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* reveal: visible by default; entrance animation (when the clock is live)
   plays from a hidden first frame via fill:'both'. Frozen clock → stays visible. */
.reveal{ opacity:1; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  border:none; cursor:pointer; border-radius:100px; white-space:nowrap;
  padding:16px 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .2s var(--ease), background .3s, color .3s;
}
.btn-fill{ background:var(--ink); color:var(--cream); }
.btn-fill:hover{ background:var(--oxblood); }
.btn-fill:active{ transform:scale(.97); }
.btn-brass{ background:var(--brass); color:var(--ink); }
.btn-brass:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; color:inherit; border:1px solid currentColor; }
.btn-block{ width:100%; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--line-cream); border-bottom:1px solid var(--line-cream);
  padding:16px 0;
}
.marquee-track{ display:inline-flex; gap:30px; animation:marq 26s linear infinite; will-change:transform; }
.marquee-track span{
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  font-size:26px; color:var(--cream); opacity:.92;
  display:inline-flex; align-items:center; gap:30px; white-space:nowrap;
}
.marquee-track span::after{ content:"✦"; font-size:13px; color:var(--brass); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:oklch(0.155 0.012 50); color:var(--cream); padding:54px var(--pad) 40px; }
.foot a{ color:var(--cream); text-decoration:none; }
.foot-row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line-cream); }

/* hide scrollbars inside phone but keep scroll */
.phone::-webkit-scrollbar{ width:0; }

/* When the animation clock is frozen (some capture/preview contexts), disabling
   durations makes every transition/animation snap to its end state so the UI
   stays fully functional and visible instead of stalling on frame 0. */
.no-anim *, .no-anim *::before, .no-anim *::after{
  transition-duration:0s !important;
  animation-duration:0s !important;
}