@font-face{font-family:'Anton';src:url(fonts/anton-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url(fonts/archivo-latin.woff2) format('woff2');font-weight:400 800;font-display:swap}

:root{
  /* brand: the logo plaque is black with a warm tan script */
  --black:#000;
  --tan:#e6cfa9;          /* brand tan (logo) */
  --tan-2:#c9ae86;        /* secondary text on black, 9.6:1 */
  --g1:#1b150e; --g2:#4a3b28; --g3:#7f6847; --g4:#b49a72;   /* fade steps black -> tan */
  --tobacco:#5e3c1d;      /* tan-family text on tan, 6.3:1 */
  --white:#fff;

  --display:'Anton',Impact,sans-serif;
  --body:'Archivo',system-ui,sans-serif;

  --step-0:1rem; --step-1:1.2rem; --step-2:1.6rem; --step-3:2.4rem; --step-4:clamp(2.6rem,6vw,4.4rem); --step-5:clamp(3.4rem,10vw,8.5rem);
  --gutter:clamp(16px,6vw,80px);
  --radius:4px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 var(--step-0)/1.55 var(--body);background:var(--black);color:var(--tan);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--white);outline-offset:3px}
h2{font:400 var(--step-4)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em}
.es{color:var(--tan-2);font-weight:400}
.wrap{padding-inline:var(--gutter);max-width:1280px;margin-inline:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6em;font:800 1.05rem/1 var(--body);padding:1.05em 1.5em;border-radius:var(--radius);text-decoration:none;transition:background .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-tan{background:var(--tan);color:var(--black)}
.btn-line{box-shadow:inset 0 0 0 2px var(--tan);color:var(--tan)}
.btn-black{background:var(--black);color:var(--tan)}
@media (hover:hover){
  .btn-tan:hover{background:var(--white)}
  .btn-line:hover{background:var(--tan);color:var(--black)}
  .btn-black:hover{background:var(--g1)}
}

/* ---------- hero: a fade chart ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.bands{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr)}
.band{position:relative;transform:scaleY(0);transform-origin:top;animation:pass .75s cubic-bezier(.2,.8,.2,1) forwards}
.band span{position:absolute;bottom:20px;left:16px;font:400 1rem/1 var(--display)}
.band:nth-child(1){background:var(--black);animation-delay:.05s}
.band:nth-child(2){background:var(--g1);animation-delay:.13s}
.band:nth-child(3){background:var(--g2);animation-delay:.21s}
.band:nth-child(4){background:var(--g3);animation-delay:.29s}
.band:nth-child(5){background:var(--g4);animation-delay:.37s}
.band:nth-child(6){background:var(--tan);animation-delay:.45s}
.band:nth-child(-n+3) span{color:var(--tan-2)}
.band:nth-child(n+4) span{color:var(--black)}
@keyframes pass{to{transform:scaleY(1)}}

.nav{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter)}
.nav .logo img{height:52px;width:auto;filter:sepia(.55) saturate(1.3)}
.nav ul{display:flex;gap:28px;list-style:none;font-weight:700}
.nav ul a{text-decoration:none;color:var(--black);padding:6px 0;border-bottom:2px solid transparent}
.nav ul a:hover{border-color:var(--black)}

.hero-copy{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter) 100px;max-width:900px}
.hero h1{font:400 var(--step-5)/.92 var(--display);text-transform:uppercase;color:var(--tan)}
.hero p{margin-top:22px;font-size:var(--step-1);max-width:31ch}
.hero .ctas{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.today{margin-top:26px;display:inline-flex;align-items:center;gap:10px;font-weight:700}
.today .dot{width:10px;height:10px;border-radius:50%;background:#62d474;box-shadow:0 0 8px #62d474}
.today.closed .dot{background:var(--tan-2);box-shadow:none}
.rise{opacity:0;animation:rise .6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- services: a menu on tan ---------- */
.services{background:var(--tan);color:var(--black);padding:96px 0}
.services .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.services .intro p{margin-top:18px;max-width:34ch;color:var(--tobacco);font-weight:500}
.menu{list-style:none;border-top:3px solid var(--black)}
.menu li{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:22px 0;border-bottom:1px solid rgba(0,0,0,.25)}
.menu h3{font:400 var(--step-2)/1.05 var(--display);text-transform:uppercase}
.menu .price{font:400 var(--step-2)/1.05 var(--display);text-align:right}
.menu .price.tbd{color:var(--tobacco);font:700 .85rem/1.2 var(--body);align-self:center;border:1.5px dashed var(--tobacco);padding:6px 10px;border-radius:var(--radius)}
.menu p{grid-column:1/-1;color:var(--tobacco);max-width:52ch}
.menu .es{display:block;margin-top:4px;color:var(--tobacco);font:500 .95rem var(--body);text-transform:none}

/* ---------- barbers ---------- */
.barbers{padding:110px 0 96px}
.barbers .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.barbers .head p{max-width:38ch;color:var(--tan-2)}
.chairs{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.chair{position:relative}
.ph{aspect-ratio:4/5;border-radius:var(--radius);display:grid;place-items:end start;padding:18px;font-weight:700;font-size:.95rem;color:var(--tan);
  background:repeating-linear-gradient(135deg,var(--g1) 0 14px,#120e09 14px 28px)}
.chair h3{margin-top:14px;font:400 var(--step-2)/1 var(--display);text-transform:uppercase}
.chair small{display:block;margin-top:4px;color:var(--tan-2);font-size:.9rem}

/* ---------- reviews ---------- */
.reviews{background:var(--g2);padding:96px 0}
.reviews .wrap{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:start}
.score{font:400 clamp(5rem,12vw,9rem)/.85 var(--display)}
.score small{display:block;margin-top:14px;font:700 1rem/1.4 var(--body)}
.stars{display:flex;gap:4px;margin-top:12px}
.stars svg{width:22px;height:22px}
.quotes{display:grid;gap:36px}
.quotes blockquote{font-size:var(--step-1);line-height:1.5;max-width:56ch;padding-left:22px;border-left:3px solid var(--tan)}
.quotes cite{display:block;margin-top:10px;font:700 .95rem var(--body);font-style:normal;color:var(--tan-2)}
.reviews .more{display:inline-block;margin-top:8px;font-weight:700}

/* ---------- visit ---------- */
.visit{padding:110px 0}
.visit .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:64px}
.hours{margin-top:30px;border-top:3px solid var(--tan);font-size:var(--step-1)}
.hours div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid rgba(230,207,169,.3);font-weight:700}
.hours div.is-today{color:var(--white)}
.hours .es{font-size:.85em;margin-left:8px}
.where{background:var(--tan);color:var(--black);border-radius:var(--radius);padding:36px;display:flex;flex-direction:column;gap:22px}
.where address{font-style:normal;font:400 var(--step-3)/1 var(--display);text-transform:uppercase}
.where address small{display:block;margin-top:10px;font:500 1rem/1.4 var(--body);text-transform:none;color:var(--tobacco)}
.where .lines a{display:block;font-weight:700;font-size:var(--step-1);text-decoration:none;padding:4px 0}
.where .lines a:hover{text-decoration:underline}
.where .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}

footer{border-top:1px solid rgba(230,207,169,.25);padding:28px 0;font-size:.9rem;color:var(--tan-2)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .nav ul{display:none}
  /* on phones the fade becomes a strip under the text, so copy always sits on black */
  .hero{min-height:auto}
  .bands{position:relative;order:3;height:150px;inset:auto}
  .band span{left:8px;bottom:14px;font-size:.85rem}
  .hero-copy{justify-content:flex-start;padding-top:4vh;padding-bottom:44px}
  .hero p{font-size:1.1rem}
  .hero .ctas .btn{flex:1 1 auto;justify-content:center}
  .services .wrap,.reviews .wrap,.visit .wrap{grid-template-columns:1fr;gap:36px}
  .chairs{grid-template-columns:1fr 1fr}
  .chair:last-child{display:none}
  .where{padding:26px}
}
@media (prefers-reduced-motion:reduce){
  .band,.rise{animation:none;transform:none;opacity:1}
}
.hours div>span:last-child{white-space:nowrap}
@media (max-width:860px){
  .hours .es{display:block;margin:2px 0 0}
  .hero-copy{padding-top:12px}
}