/* Barbershops: the old-school shop — two barber poles turning, the headline in a framed sign, black signboards.
   Palette: barber red and navy on aged paper. Font: Rakkas. */
body.skin-barbershops{--bg:#F1E9DA;--card:#FBF7EF;--card-2:#E9DFCB;--border:#CDBFA5;--fg:#1A1A1A;--secondary-fg:#2B2B2B;--muted:#564E43;
  --primary:#B91C1C;--on-primary:#FFFFFF;--accent:#1E3A8A;--i-font:"Rakkas";--i-w:400;--i-r:4px;--peak:#1D4ED8;color-scheme:light}
.skin-barbershops .btn{border-radius:4px}
.skin-barbershops .ih::before,.skin-barbershops .ih::after{content:"";position:absolute;top:24%;bottom:14%;width:44px;border-radius:22px;border:4px solid #1A1A1A;z-index:-1;
  background:repeating-linear-gradient(-45deg,#B91C1C 0 16px,#FBF7EF 16px 32px,#1E3A8A 32px 48px,#FBF7EF 48px 64px);background-size:100% 90.5px;animation:bb-pole 2.4s linear infinite}
.skin-barbershops .ih::before{inset-inline-start:clamp(14px,6vw,120px)}
.skin-barbershops .ih::after{inset-inline-end:clamp(14px,6vw,120px)}
@keyframes bb-pole{to{background-position:0 90.5px}}
.skin-barbershops .ih-copy{padding:clamp(28px,4vw,48px) clamp(20px,4vw,56px);background:var(--card);border:3px solid #1A1A1A;outline:1px solid #1A1A1A;outline-offset:7px;max-width:820px}
.skin-barbershops .ih h1{font-size:clamp(42px,6.4vw,88px);line-height:1.15}
.skin-barbershops .ih-art{position:relative;inset:auto;z-index:0;order:-1}
.skin-barbershops .ih-art .art{width:120px}
.skin-barbershops .ih{gap:6px;align-content:center}
.skin-barbershops .scissors circle,.skin-barbershops .scissors path,.skin-barbershops .orn{fill:none;stroke:#1A1A1A;stroke-width:9;stroke-linecap:round}
/* clients: black signboards */
.skin-barbershops .ir-list li{background:#1A1A1A;color:#F1E9DA;border:0;font:400 24px/1.2 "Rakkas",var(--font-body);box-shadow:inset 0 0 0 3px #1A1A1A,inset 0 0 0 5px #F1E9DA}
/* services: double-ruled cards */
.skin-barbershops .is-list li,.skin-barbershops .ic-box{border:4px double #1A1A1A}
.skin-barbershops .is-ico{border-radius:50%;background:var(--accent);color:#fff}
.skin-barbershops .is-list li:nth-child(even) .is-ico{background:var(--primary)}
.skin-barbershops .im-list a{border-color:#1A1A1A;color:#1A1A1A}
@media (max-width:700px){
  .skin-barbershops .ih::before,.skin-barbershops .ih::after{width:18px;border-width:2px;top:auto;bottom:24px;height:120px}
}
/* phones, during the story: the scissors stay small so the framed sign fits on one screen */
@media (max-width:700px){ .skin-barbershops .is-story .ih.stack .ih-art .art{width:90px;height:auto} }