/* Barbearia Holy — palette sampled from their own poster and profile picture.
   Ground #141316 (their near-black), ember #b4562a (their orange), bone #efe9e0
   (the white ink on the wordmark). Nothing here was invented.

   The page is built as a shop front, not as a dark editorial landing page: two
   barber poles flanking a centred sign, and the pole's stripe repeated as the
   band that separates every section. The 💈 ends nearly every caption they post. */

@font-face{font-family:'Playfair';src:url(fonts/playfair-var-lat.woff2) format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair';src:url(fonts/playfair-var-ext.woff2) format('woff2');
  font-weight:400 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';src:url(fonts/archivo-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';src:url(fonts/archivo-var-ext.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#f2ede6;
  --ink-2:#a8a19a;
  --ink-3:#8a837d;
  --bg:#141316;
  --bg-2:#1b191e;
  --line:#312d34;
  --bone:#efe9e0;
  --ember:#b4562a;
  --ember-hi:#e4894c;
  --wrap:1120px;
  --pad:clamp(20px,5vw,48px);
  --serif:'Playfair',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2{margin:0;font-family:var(--serif);font-weight:900;letter-spacing:-.015em;line-height:.98}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
hr{border:0;margin:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ember);color:#fff;
  padding:12px 18px;font:600 14px var(--sans)}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}

/* ── the wordmark, lifted off their poster as an alpha mask ────────── */
.mark{
  display:block;
  background-color:currentColor;
  -webkit-mask:url(assets/wordmark-mask.png) no-repeat center/contain;
  mask:url(assets/wordmark-mask.png) no-repeat center/contain;
  aspect-ratio:1255/343;
}
.mark-sm{width:126px}
.mark-foot{width:150px;color:var(--ink-3)}
.mark-hero{width:min(560px,100%);margin:clamp(20px,3vw,30px) auto}

/* ── the barber-pole stripe, used as the band between sections ─────── */
.stripe{
  height:13px;
  background:repeating-linear-gradient(115deg,
    var(--ember) 0 11px, #2b2830 11px 22px, var(--bone) 22px 30px, #2b2830 30px 41px);
  background-size:200% 100%;
  border-block:1px solid #0d0c0f;
  animation:stripeRun 9s linear infinite;
}
@keyframes stripeRun{from{background-position:0 0}to{background-position:-96px 0}}

/* ── sticky bar ────────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:40;
  background:rgba(20,19,22,0);
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.bar.solid{background:#141316;border-bottom-color:var(--line)}
.bar-in{
  max-width:var(--wrap);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;gap:24px;
}
.bar-mark{color:var(--ink);display:flex;text-decoration:none}
.bar-nav{margin-left:auto;display:flex;gap:clamp(16px,2.4vw,32px)}
.bar-nav a{
  text-decoration:none;font:500 15.5px/1 var(--sans);
  color:var(--ink-2);padding-bottom:5px;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s
}
.bar-nav a:hover{color:var(--ink);border-bottom-color:var(--ember)}
/* visibility, not just opacity: a transparent link stays in the tab order and a
   keyboard user lands on a button they cannot see */
.bar-cta{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.bar.solid .bar-cta{opacity:1;visibility:visible}

/* ── buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--sans);
  padding:16px 26px;text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s
}
.btn-zap{background:var(--ember);color:#fff;border-color:var(--ember)}
.btn-zap:hover{background:var(--ember-hi);border-color:var(--ember-hi);color:#1a1116}
.btn-ghost{color:var(--ink);border-color:#4a4550}
.btn-ghost:hover{border-color:var(--bone);background:rgba(242,237,230,.06)}
.bar-cta{padding:11px 18px;font-size:13px}

/* ── the shop front ────────────────────────────────────────────────── */
.hero{padding:clamp(20px,3.4vw,44px) var(--pad) clamp(40px,6vw,72px)}
.shopfront{
  /* narrower than the page column, so the poles stand beside the sign like a
     shop front rather than drifting off to the page margins */
  max-width:900px;margin:0 auto;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,3vw,40px);align-items:center;justify-items:center
}
.pole{width:44px;height:clamp(260px,34vw,340px);flex:none;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.pole-stripes{animation:poleTurn 3.6s linear infinite}
@keyframes poleTurn{from{translate:0 -44px}to{translate:0 0}}

.sign{text-align:center;width:100%;max-width:640px}
/* the heavy rule under the wordmark is the one that makes it read as a sign */
.rule-bottom{
  height:5px;background:var(--bone);margin:clamp(16px,2.4vw,24px) auto clamp(22px,3.4vw,32px);
  max-width:min(560px,100%);
  box-shadow:0 3px 0 0 var(--ember)
}
.sign-tag{
  margin-top:6px;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.9vw,20px);
  color:var(--ember-hi)
}
.sign h1{font-size:clamp(34px,5.2vw,58px)}
.sign-addr{margin-top:20px;color:var(--ink-2);font-size:16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;justify-content:center}

/* ── section furniture ─────────────────────────────────────────────── */
.sec{padding:clamp(54px,8vw,104px) 0;scroll-margin-top:70px}
.h-big{font-size:clamp(34px,6vw,62px)}

/* ── serviços ──────────────────────────────────────────────────────── */
.serv-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);
  gap:clamp(30px,5vw,64px);align-items:start}
.serv-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(18px,3vw,40px);
  margin-top:clamp(38px,5.5vw,64px);
  font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.7vw,33px);line-height:1.9
}
.serv-list li{
  position:relative;padding-left:24px;color:var(--ink);
  border-bottom:1px solid var(--line)
}
.serv-list li::before{
  content:"";position:absolute;left:0;top:.68em;width:12px;height:1px;background:var(--ember)
}
.serv-note{
  border-left:2px solid var(--ember);padding-left:clamp(16px,2.4vw,24px);
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start
}
.note-fig{margin:0;grid-row:span 2}
.note-fig img{width:150px;max-width:100%;border:1px solid var(--line)}
.serv-note blockquote{margin:0;align-self:start}
.serv-note blockquote p{font-family:var(--serif);font-size:19px;line-height:1.5;color:var(--ink)}
.note-src{margin-top:10px;font:500 13px/1.4 var(--sans);color:var(--ink-3)}
.serv-foot{margin-top:clamp(32px,4.6vw,50px);color:var(--ink-2);font-size:16px}
.serv-foot a{color:var(--ember-hi);text-underline-offset:4px}

/* ── o trabalho ────────────────────────────────────────────────────── */
.tiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,300px));gap:clamp(18px,2.8vw,32px);
  justify-content:start;margin-top:clamp(32px,5vw,54px)
}
.tile{margin:0}
/* a bone edge, like a print pinned on the shop wall, not a 1px card border */
.tile img{width:100%;border:5px solid var(--bone);filter:saturate(.94) contrast(1.03)}
.tile figcaption{
  margin-top:12px;font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.4;
  color:var(--ink-2)
}

/* ── visitar ───────────────────────────────────────────────────────── */
.visit-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);margin-top:clamp(32px,5vw,54px);align-items:start}
.visit-where{display:flex;flex-direction:column;align-items:flex-start}
.street{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.8vw,44px);line-height:1.12}
.street-num{font-weight:900;color:var(--ember-hi)}
.street-sub{margin-top:16px;color:var(--ink-2);font-size:15.5px}
.lnk{
  margin-top:24px;font:600 14px/1 var(--sans);
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ember);padding-bottom:5px
}
.lnk:hover{color:var(--ember-hi)}
.visit-book{background:var(--bg-2);border:1px solid var(--line);padding:clamp(24px,3vw,34px)}
.book-line{font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);line-height:1.3}
.muted{margin-top:10px;color:var(--ink-2);font-size:15px}
.btn-wide{width:100%;margin-top:22px}
.book-ig{margin-top:18px;color:var(--ink-2);font-size:15px}
.book-ig a{color:var(--ember-hi);text-underline-offset:4px}

/* ── footer ────────────────────────────────────────────────────────── */
.foot{padding:clamp(40px,6vw,64px) 0;background:#100f12}
.foot-in{display:flex;flex-direction:column;gap:12px;align-items:flex-start;color:var(--ink-3)}
.foot-line{font-size:14.5px}
.foot-line a{color:var(--ink-2);text-underline-offset:4px}
.foot-line a:hover{color:var(--ember-hi)}

/* ── reveals. Base state is visible; the hidden state is gated on .js ── */
.js .reveal{opacity:0;translate:0 18px}
.js .reveal.in{opacity:1;translate:none;transition:opacity .7s ease,translate .7s cubic-bezier(.22,.7,.3,1)}
@supports (animation-timeline:view()){
  .js .reveal{opacity:1;translate:none;animation:rise linear both;animation-timeline:view();
    animation-range:entry 0% entry 46%}
  .js .reveal.in{transition:none}
}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}

/* ── responsive. Overrides come after the defaults they replace. ───── */
@media (max-width:1040px){
  /* one pole, not two: at this width a second pole is decoration with no room */
  .shopfront{grid-template-columns:auto minmax(0,1fr)}
  .pole-r{display:none}
}
@media (max-width:860px){
  .serv-head{grid-template-columns:minmax(0,1fr)}
  .serv-note{max-width:520px;margin-top:30px}
  .serv-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(2,minmax(0,300px))}
  .visit-grid{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media (max-width:700px){
  .bar-nav{display:none}
  .bar-cta{margin-left:auto}
  .shopfront{grid-template-columns:minmax(0,1fr)}
  .pole-l{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serv-list{font-size:clamp(21px,6.4vw,30px)}
  .serv-note{grid-template-columns:120px minmax(0,1fr);gap:14px}
  .note-fig img{width:120px}
  .cta-row{flex-direction:column;align-items:stretch}
  .tile img{border-width:4px}
}
@media (max-width:420px){
  .serv-list{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .pole-stripes{animation:none}
  .stripe{animation:none}
  .js .reveal,.js .reveal.in{opacity:1;translate:none;animation:none;transition:none}
  html{scroll-behavior:auto}
}