/* Fade Street: shop-window poster. Near-black, chalk white, sign yellow, one barber-pole red.
   Anton for shouting, Archivo for talking, Plex Mono for receipts. */
:root{--ink:#0B0B0B;--ink2:#141414;--ink3:#1C1C1C;--chalk:#EDE8DF;--dim:#8F8A82;--sig:#F5D90A;--red:#E0312B;--blue:#2B5BD7;--line:#262626;
  --cond:"Anton",Impact,sans-serif;--sans:"Archivo",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--chalk);font:400 17px/1.6 var(--sans);overflow-x:clip}
a{color:inherit}
::selection{background:var(--sig);color:var(--ink)}
.wrap{max-width:1240px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left))}
.concept{background:var(--sig);color:var(--ink);font:500 12px/1.3 var(--mono);text-align:center;padding:9px 16px;letter-spacing:.04em}
.concept a{color:var(--ink)}

/* cursor: a ring that grows over anything clickable (mouse only) */
.cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--sig);border-radius:50%;pointer-events:none;z-index:100;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,background .25s;display:none}
.cursor.big{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--sig)}
@media (hover:hover) and (pointer:fine){.cursor{display:block}}

header.top{position:sticky;top:0;z-index:50;background:rgba(11,11,11,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px}
.brand{font:400 28px/1 var(--cond);letter-spacing:.02em;text-decoration:none;text-transform:uppercase}
.brand span{color:var(--sig)}
nav.main{display:flex;gap:28px;font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em}
nav.main a{text-decoration:none;color:var(--dim)}
nav.main a:hover,nav.main a[aria-current]{color:var(--sig)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--sig);color:var(--ink);font:700 14px/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;padding:16px 22px;border-radius:3px;text-decoration:none;border:0;cursor:pointer;position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--chalk);transform:translateY(101%);transition:transform .35s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover::before{transform:none}
.btn.out{background:transparent;color:var(--chalk);box-shadow:inset 0 0 0 1.5px var(--chalk)}
.btn.out:hover{color:var(--ink)}
.btn:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
@media (max-width:760px){nav.main{display:none}}

/* hero */
.hero{padding-block:46px 50px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.hero h1{margin:0;font:400 clamp(78px,12.5vw,200px)/.84 var(--cond);text-transform:uppercase;letter-spacing:-.005em}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block;transform:translateY(100%);animation:up .9s cubic-bezier(.7,0,.2,1) forwards}
.hero h1 .ln:nth-child(2) span{animation-delay:.1s;color:var(--sig)}
.hero h1 .ln:nth-child(3) span{animation-delay:.2s;color:transparent;-webkit-text-stroke:2px var(--chalk)}
@keyframes up{to{transform:none}}
.hero-side{display:grid;gap:20px;justify-items:start;max-width:330px;padding-bottom:14px}
.hero-side p{margin:0;color:var(--dim)}
.live{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);padding:10px 12px;border:1px solid var(--line);border-radius:3px}
.live i{width:8px;height:8px;border-radius:50%;background:#3BD16F;animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.pole{width:62px;height:320px;border-radius:32px;border:5px solid var(--chalk);overflow:hidden;position:relative;background:repeating-linear-gradient(-35deg,var(--red) 0 22px,var(--chalk) 22px 44px,var(--blue) 44px 66px,var(--chalk) 66px 88px);background-size:100% 220px;animation:pole 2.4s linear infinite}
.pole::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.4),transparent 40%,rgba(255,255,255,.3) 60%,rgba(0,0,0,.4))}
@keyframes pole{to{background-position:0 220px}}
.hero-art{display:flex;gap:26px;align-items:end}
@media (max-width:860px){.hero{grid-template-columns:1fr}.pole{height:190px;width:46px}}

.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;transform:rotate(-1.2deg);background:var(--sig);color:var(--ink);margin-block:20px}
.ticker div{display:inline-flex;gap:40px;padding:14px 0;font:400 34px/1 var(--cond);text-transform:uppercase;animation:tick 24s linear infinite}
.ticker span::after{content:"✂";margin-left:40px;font-size:24px}
@keyframes tick{to{transform:translateX(-50%)}}

section{padding-block:100px 20px}
.k{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--sig)}
h2.big{margin:14px 0 36px;font:400 clamp(56px,9vw,130px)/.88 var(--cond);text-transform:uppercase}
h2.big .o{color:transparent;-webkit-text-stroke:1.5px var(--chalk)}

/* services: cards that stack as you scroll */
.stack{display:grid;gap:18px}
.svc{position:sticky;top:calc(90px + var(--i) * 18px);display:grid;grid-template-columns:120px 1fr auto;gap:30px;align-items:center;padding:36px;border-radius:6px;background:var(--ink2);border:1px solid var(--line);min-height:220px;transform-origin:top center}
.svc:nth-child(2){background:var(--chalk);color:var(--ink)}
.svc:nth-child(3){background:var(--sig);color:var(--ink)}
.svc:nth-child(4){background:var(--red);color:var(--chalk)}
.svc .n{font:400 96px/1 var(--cond);opacity:.9}
.svc h3{margin:0 0 8px;font:400 clamp(40px,5vw,64px)/.95 var(--cond);text-transform:uppercase}
.svc p{margin:0;max-width:52ch;opacity:.75}
.svc data{font:400 72px/1 var(--cond)}
@media (max-width:760px){.svc{grid-template-columns:1fr;gap:10px;padding:26px;position:relative;top:auto}.svc .n{font-size:54px}.svc data{font-size:50px}}

/* lookbook: rows that show a style card following the cursor */
.look{border-top:1px solid var(--line);position:relative}
.look a{display:grid;grid-template-columns:80px 1fr auto;gap:20px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .35s cubic-bezier(.2,.7,.2,1),color .3s}
.look a:hover{padding-left:24px;color:var(--sig)}
.look .n{font:500 13px var(--mono);color:var(--dim)}
.look b{font:400 clamp(40px,6vw,86px)/.95 var(--cond);text-transform:uppercase;font-weight:400}
.look span.t{font:500 13px var(--mono);color:var(--dim);text-align:right}
.peek{position:fixed;left:0;top:0;width:260px;aspect-ratio:3/4;border-radius:6px;pointer-events:none;z-index:40;opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-6deg);transition:opacity .25s,transform .35s cubic-bezier(.2,.7,.2,1);overflow:hidden;display:grid;place-items:end start;padding:16px;font:400 40px/.9 var(--cond);text-transform:uppercase;color:var(--ink)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-4deg)}
@media (hover:none){.peek{display:none}}

/* head illustrations used for lookbook and blog covers */
.head{width:100%;height:100%;display:block}

/* booking */
.booking{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{background:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:28px}
.panel h3{margin:0 0 16px;font:400 26px/1 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{all:unset;cursor:pointer;padding:12px 14px;border:1px solid var(--line);border-radius:3px;font:500 14px/1 var(--mono);color:var(--chalk);min-width:46px;text-align:center;transition:border-color .2s}
.chip:hover{border-color:var(--sig)}
.chip small{display:block;color:var(--dim);font-size:11px;margin-bottom:6px}
.chip[aria-pressed="true"]{background:var(--sig);color:var(--ink);border-color:var(--sig)}
.chip[aria-pressed="true"] small{color:var(--ink)}
.chip:disabled{opacity:.28;cursor:not-allowed;text-decoration:line-through}
.barbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.barber{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:6px;padding:16px;display:grid;gap:10px;justify-items:center;text-align:center;font:400 22px/1 var(--cond);text-transform:uppercase}
.barber i{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font:400 28px/1 var(--cond);color:var(--ink);font-style:normal}
.barber small{font:500 11px/1 var(--mono);color:var(--dim);text-transform:none}
.barber[aria-pressed="true"]{border-color:var(--sig);box-shadow:inset 0 0 0 1px var(--sig)}
.receipt{margin-top:20px;padding:18px;background:var(--chalk);color:var(--ink);border-radius:3px;font:500 13.5px/1.7 var(--mono);position:relative}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(-45deg,transparent 6px,var(--chalk) 0) 0 0/12px 8px,linear-gradient(45deg,transparent 6px,var(--chalk) 0) 0 0/12px 8px}
.receipt div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #bbb;padding:3px 0}
.receipt .tot{font-weight:700;border:0;font-size:15px}
.receipt .btn{width:100%;justify-content:center;margin-top:12px}
.done{margin-top:20px;padding:14px 16px;border-radius:3px;background:rgba(245,217,10,.1);border:1px solid rgba(245,217,10,.4);font:500 14px/1.5 var(--mono)}
@media (max-width:900px){.booking{grid-template-columns:1fr}}

/* reviews */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{padding:28px;border:1px solid var(--line);border-radius:6px;display:grid;gap:18px;align-content:space-between}
.quote p{margin:0;font:400 28px/1.05 var(--cond);text-transform:uppercase}
.quote span{font:500 12px var(--mono);color:var(--dim)}
.stars{color:var(--sig);letter-spacing:.2em}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}

/* blog list (shared) */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:140px 1fr 200px;gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative}
.row .thumb{aspect-ratio:1;border-radius:6px;overflow:hidden}
.row h3{margin:0 0 8px;font:400 clamp(30px,3.6vw,48px)/.95 var(--cond);text-transform:uppercase;transition:color .25s}
.row p{margin:0;color:var(--dim);max-width:60ch}
.row .meta{font:500 12px/1.8 var(--mono);color:var(--dim);text-align:right;text-transform:uppercase;letter-spacing:.06em}
.row .meta b{display:block;color:var(--sig);font-weight:500}
.row:hover h3{color:var(--sig)}
.row .thumb svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.row:hover .thumb svg{transform:scale(1.12) rotate(-5deg)}
@media (max-width:760px){.row{grid-template-columns:90px 1fr;gap:16px}.row .meta{grid-column:2;text-align:left}}

/* blog pages */
.b-hero{padding-block:60px 30px}
.b-hero h1{margin:0;font:400 clamp(90px,19vw,290px)/.8 var(--cond);text-transform:uppercase}
.b-hero h1 span{color:transparent;-webkit-text-stroke:2px var(--sig)}
.b-hero p{max-width:46ch;color:var(--dim);font-size:19px}
.post-head{padding-block:50px 30px;display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:end}
.post-head h1{margin:18px 0 0;font:400 clamp(58px,8vw,124px)/.88 var(--cond);text-transform:uppercase}
.post-head .art{aspect-ratio:3/4;border-radius:6px;overflow:hidden;transform:rotate(3deg)}
.back{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;color:var(--dim)}
.back:hover{color:var(--sig)}
.meta-bar{display:flex;gap:24px;flex-wrap:wrap;font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);padding-block:18px;border-block:1px solid var(--line)}
.meta-bar b{color:var(--sig);font-weight:500}
@media (max-width:860px){.post-head{grid-template-columns:1fr}.post-head .art{max-width:260px}}
.prose{max-width:720px;padding-block:44px 10px;font-size:19px;line-height:1.7}
.prose h2{font:400 48px/.95 var(--cond);text-transform:uppercase;margin:54px 0 16px}
.prose p{color:#d6d1c9}
.prose blockquote{margin:44px 0;padding:24px 0 24px 28px;border-left:6px solid var(--sig);font:400 clamp(36px,4.4vw,56px)/.95 var(--cond);text-transform:uppercase}
.grades{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:30px 0;align-items:end}
.grades div{display:grid;gap:8px;justify-items:center;font:500 12px var(--mono);color:var(--dim)}
.grades i{display:block;width:100%;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--sig),#8a7a00);height:calc(12px + var(--g) * 18px);transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--g) * 60ms)}
.grades.in i{transform:none}
.grades b{font:400 22px var(--cond);color:var(--chalk)}
.say{background:var(--chalk);color:var(--ink);border-radius:6px;padding:24px 26px;margin:30px 0;font:500 16px/1.6 var(--mono)}
.say b{display:block;font:400 26px/1 var(--cond);text-transform:uppercase;margin-bottom:10px}
.steps{list-style:none;padding:0;margin:30px 0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:90px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font:400 64px/.9 var(--cond);color:var(--sig)}
.steps b{display:block;font:400 30px/1 var(--cond);text-transform:uppercase;margin-bottom:6px;color:var(--chalk)}
.steps li span{color:#cfc9c0}

/* footer */
.cta-band{margin-top:110px;border-block:1px solid var(--line);padding-block:70px;text-align:center}
.cta-band h2{margin:0 0 30px;font:400 clamp(70px,13vw,200px)/.82 var(--cond);text-transform:uppercase}
.cta-band h2 span{color:var(--sig)}
footer.foot{padding-block:40px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--dim);font:500 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em}

.js .rv{opacity:0;transform:translateY(40px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.hero h1 .ln span{transform:none}.js .rv{opacity:1;transform:none}.grades i{transform:none}}