/* ============================================================
   THE BARBER STUDIO
   Design tokens. Sample the two brand values straight off
   Tony's logo file before launch, these are eyedropped from a
   screenshot and will be a shade or two off.
   ============================================================ */
:root{
  --ink:      #141210;   /* warm near black, the studio at night */
  --ink-2:    #1E1A17;   /* raised surface */
  --ink-3:    #2A2521;   /* hairlines on dark */
  --orange:   #F14902;   /* sampled from the real logo file */
  --bone:     #F3EDE4;   /* warm paper, light sections */
  --bone-2:   #E4DACB;   /* paper shadow */
  --brass:    #C08A3E;   /* the gold clippers in his flyer */

  --f-display: 'Alfa Slab One', Georgia, serif;
  --f-body:    'Karla', system-ui, -apple-system, sans-serif;
  --f-util:    'Space Mono', ui-monospace, 'SF Mono', monospace;

  --gut: clamp(1.25rem, 4vw, 4rem);
  --stack: clamp(4.5rem, 9vw, 8rem);
  --max: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* figure ships with a UA default margin of 1em 40px. Inside a grid
   cell that shows up as large gaps and shrunken photos. */
figure{ margin:0; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

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

/* accessibility floor -------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--orange); color:#fff; padding:.85rem 1.35rem;
  font-family:var(--f-util); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

/* ============================================================
   HEADER
   ============================================================ */
.hd{
  position:sticky; top:0; z-index:100;
  background:rgba(20,18,16,.82);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--ink-3);
}
.hd__in{
  display:flex; align-items:center; gap:1.25rem;
  min-height:64px;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gut);
}
.hd__mark{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }
.hd__mark img{ width:38px; height:38px; border-radius:50%; }
.hd__name{
  font-family:var(--f-util); font-weight:700;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  line-height:1.25;
}
.hd__name span{ display:block; color:var(--orange); }

.hd__nav{ display:none; gap:1.75rem; }
@media (min-width:900px){ .hd__nav{ display:flex; } }
.hd__nav a{
  font-family:var(--f-util); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; opacity:.72;
  padding-block:.4rem; transition:opacity .18s ease, color .18s ease;
}
.hd__nav a:hover{ opacity:1; color:var(--orange); }

/* buttons --------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-util); font-weight:700;
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.95rem 1.7rem;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--fill{ background:var(--orange); color:var(--ink); border-color:var(--orange); }
.btn--fill:hover{ background:#ff5c14; border-color:#ff5c14; }
.btn--line{ background:transparent; color:var(--bone); border-color:rgba(243,237,228,.28); }
.btn--line:hover{ border-color:var(--bone); }
.btn--sm{ padding:.68rem 1.15rem; font-size:.68rem; }
.btn--dark{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn--dark:hover{ background:var(--orange); border-color:var(--orange); color:#fff; }

/* ============================================================
   HERO. The thesis: one barber, one chair, downtown.
   ============================================================ */
.hero{
  position:relative;
  padding-block:clamp(3.5rem,10vw,7.5rem) clamp(3rem,7vw,5.5rem);
  overflow:hidden;
}
.hero::after{  /* single warm bloom, the light over the chair */
  content:""; position:absolute; z-index:0;
  width:min(760px,105vw); aspect-ratio:1;
  top:-32%; right:-18%;
  background:radial-gradient(circle, rgba(232,87,28,.20) 0%, rgba(232,87,28,0) 66%);
  pointer-events:none;
}
.hero__in{ position:relative; z-index:1; }

.eyebrow{
  font-family:var(--f-util); font-size:.72rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--orange);
  margin:0 0 1.5rem;
}
.eyebrow::before{
  content:""; display:inline-block; vertical-align:middle;
  width:34px; height:1px; background:var(--orange);
  margin-right:.9rem; transform:translateY(-1px);
}

.hero h1{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.65rem,10.2vw,7.4rem);
  line-height:.94; letter-spacing:-.022em;
  margin:0 0 1.9rem; max-width:16ch;
  text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--orange); }

.hero__sub{
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem);
  line-height:1.6; max-width:46ch; opacity:.78; margin:0 0 2.4rem;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.75rem; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 2.25rem;
  padding-top:1.6rem; border-top:1px solid var(--ink-3);
  font-family:var(--f-util); font-size:.76rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.hero__meta span{ opacity:.6; }
.hero__meta strong{ font-weight:700; opacity:1; color:var(--bone); }

/* hero photo strip ------------------------------------------ */
.strip{
  display:grid; gap:4px;
  grid-template-columns:repeat(2,1fr);
  margin-top:clamp(2.5rem,6vw,4.5rem);
}
@media (min-width:760px){ .strip{ gap:.6rem; grid-template-columns:repeat(4,1fr); } }

.ph{
  position:relative; overflow:hidden; background:var(--ink-2);
  border:1px solid var(--ink-3);
  aspect-ratio:4/5;
}
.ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 32%;   /* faces sit above centre in these shots */
}
.ph__note{  /* only the map uses this now */
  position:absolute; inset:0;
  display:grid; place-content:center;
  font-family:var(--f-util); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; text-align:center; color:rgba(243,237,228,.34);
  padding:1rem; line-height:1.7;
}

/* ============================================================
   THE BOARD. Signature element. Every shop has a price board
   on the wall. Almost nobody puts it on the web as real text,
   which is exactly why it is the strongest page on the site.
   ============================================================ */
.board{
  background:var(--bone); color:var(--ink);
  padding-block:var(--stack);
}
.board__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.5rem;
  margin-bottom:clamp(2.25rem,5vw,3.5rem);
}
.board__head h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,5.6vw,3.6rem); line-height:1;
  letter-spacing:-.02em; margin:0; margin-right:auto;
}
.board__note{
  font-family:var(--f-util); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.55; max-width:32ch; line-height:1.8;
}

.board__list{ list-style:none; margin:0; padding:0; }
.row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.75rem;
  padding-block:1.15rem;
  border-bottom:1px solid rgba(20,18,16,.13);
  opacity:0; transform:translateY(14px);
}
.row.is-in{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
.row:first-child{ border-top:1px solid rgba(20,18,16,.13); }

.row__name{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.15rem,2.6vw,1.75rem);
  line-height:1.15; letter-spacing:-.01em;
  position:relative;
}
.row__desc{
  display:block; font-family:var(--f-body); font-size:.9rem;
  letter-spacing:0; opacity:.6; margin-top:.3rem; max-width:52ch; line-height:1.55;
}
.row__price{
  font-family:var(--f-util); font-weight:700;
  font-size:clamp(1.05rem,2.2vw,1.45rem);
  color:var(--orange); white-space:nowrap;
}
.row__price small{ font-family:var(--f-util); font-weight:400; font-size:.62em; opacity:.5; display:block; text-align:right; letter-spacing:.08em; }

.board__foot{
  margin-top:2.5rem; padding-top:1.75rem;
  border-top:2px solid var(--ink);
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem;
  font-family:var(--f-util); font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.board__foot p{ margin:0; margin-right:auto; opacity:.62; max-width:44ch; line-height:1.8; }

/* ============================================================
   THE WORK
   ============================================================ */
.work{ padding-block:var(--stack); }
.sec__head{ margin-bottom:clamp(2rem,5vw,3.25rem); max-width:58ch; }
.sec__head h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.9rem,5.4vw,3.4rem); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 1rem;
}
.sec__head p{ margin:0; opacity:.72; max-width:52ch; }

.grid{
  display:grid; gap:4px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,1fr); gap:1rem; } }
.grid .ph{ aspect-ratio:4/5; }

/* Phones: photos run edge to edge. The wrap padding is cancelled with a
   negative margin so the grid is the full width of the screen, and the
   frame borders come off so nothing draws lines between them. */
@media (max-width:759px){
  .strip, .grid{
    margin-inline:calc(var(--gut) * -1);
  }
  .ph{ border:0; }
}

/* ============================================================
   BOOK. The Vagaro frame. Placed low on purpose, the widget
   script is heavy and would wreck LCP if it loaded first.
   ============================================================ */
.book{
  background:var(--ink-2);
  border-block:1px solid var(--ink-3);
  padding-block:var(--stack);
}
.book__head{ margin-bottom:2.25rem; max-width:56ch; }
.book__head h2{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.9rem,5.4vw,3.4rem); line-height:1.02;
  letter-spacing:-.02em; margin:0 0 1rem;
}
.book__lede{ margin:0; opacity:.75; max-width:50ch; }
.book__lede a{ color:var(--orange); text-underline-offset:3px; }

.frame{
  position:relative;
  margin-top:2rem;
  min-height:520px;   /* floor only, so the fallback has somewhere to sit
                         while the scheduler loads. Vagaro's loader reports
                         its own height and the frame grows past this. */
  background:#fff;
  border:1px solid var(--ink-3);
}
.frame__fallback{             /* sits behind the widget, shows if it never paints */
  position:absolute; inset:0; z-index:0;
  display:grid; place-content:center; justify-items:center; gap:1.25rem;
  text-align:center; padding:2rem; color:var(--ink);
}
.frame__fallback p{
  font-family:var(--f-util); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; opacity:.55; margin:0; max-width:34ch; line-height:1.9;
}

/* Vagaro's generated snippet ships with hardcoded inline styles and a
   250px wrapper. These pull it back in line with the page without
   editing Vagaro's own markup, so the snippet can be regenerated and
   pasted straight back in without redoing any of this. */
.frame__widget{ position:relative; z-index:1; }

.frame__widget .vagaro{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
.frame__widget #frameTitle{
  font-family:var(--f-util) !important;
  font-size:.7rem !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:rgba(20,18,16,.42) !important;
  line-height:1.4 !important;
  padding:1rem 1rem 0 !important;
}
.frame__widget #frameTitle:empty{ display:none !important; }

.frame__widget .vagaro a{
  font-family:var(--f-util) !important;
  font-size:.6rem !important;
  letter-spacing:.06em !important;
  color:rgba(20,18,16,.3) !important;
}
.frame__widget .vagaro a:hover{ color:var(--orange) !important; }

.frame__widget iframe{
  width:100% !important;
  border:0;
  display:block;
  /* height is deliberately NOT set. Vagaro's loader measures its own
     content and sets the height inline as the booking flow moves between
     steps. Overriding it produced a short box with a scrollbar inside a
     scrollbar. Letting it report its height means the page itself is the
     only thing that scrolls. */
}


/* ------------------------------------------------------------------
   MOBILE: link out rather than embed.

   Vagaro's booking flow is a full page app. Nested in a box on a small
   screen it creates a scroll region inside a scroll region, and their
   loader scrolls the parent window to the top on every step change,
   which throws the visitor to the top of the page mid booking.

   Fighting that means guessing at a third party script and re-breaking
   on their next release. Linking out is more reliable and a better
   experience: the booking flow gets the whole screen, which is what it
   was built for.
   ------------------------------------------------------------------ */
.book__note{
  font-family:var(--f-util); font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; opacity:.5; margin:0 0 1.25rem; line-height:1.8;
}

/* ============================================================
   FIND THE STUDIO
   ============================================================ */
.find{ padding-block:var(--stack); }
.find__cols{
  display:grid; gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:1fr;
}
@media (min-width:860px){ .find__cols{ grid-template-columns:.85fr 1.15fr; align-items:stretch; } }

.info{ display:grid; gap:2rem; }
.info__block h3{
  font-family:var(--f-util); font-weight:700;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin:0 0 .85rem;
}
.info__block p{ margin:0; line-height:1.75; }
.info__block a{ color:var(--bone); text-underline-offset:3px; }
.info__block a:hover{ color:var(--orange); }

.hours{ list-style:none; margin:0; padding:0; font-family:var(--f-util); font-size:.82rem; }
.hours li{
  display:flex; justify-content:space-between; gap:1rem;
  padding-block:.55rem; border-bottom:1px solid var(--ink-3);
  letter-spacing:.05em;
}
.hours li span:first-child{ opacity:.62; text-transform:uppercase; font-size:.74rem; letter-spacing:.12em; }
.hours li.is-closed span:last-child{ opacity:.4; }

.map{
  position:relative; min-height:420px; height:100%;
  background:var(--ink-2); border:1px solid var(--ink-3);
  overflow:hidden;
}
.map iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
}

/* ============================================================
   FOOTER
   ============================================================ */
.ft{
  border-top:1px solid var(--ink-3);
  padding-block:2.75rem 7rem;
  font-family:var(--f-util); font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
}
@media (min-width:760px){ .ft{ padding-bottom:2.75rem; } }
.ft__in{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; }
.ft__in p{ margin:0; opacity:.45; margin-right:auto; }
.ft__in a{ text-decoration:none; opacity:.62; }
.ft__in a:hover{ opacity:1; color:var(--orange); }

/* mobile book bar ------------------------------------------- */
.bar{
  position:fixed; left:0; right:0; bottom:0; z-index:99;
  display:flex; gap:.5rem; padding:.6rem;
  background:rgba(20,18,16,.94);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--ink-3);
}
.bar .btn{ flex:1; padding-inline:.5rem; }
@media (min-width:760px){ .bar{ display:none; } }


/* ============================================================
   LIGHTBOX
   ============================================================ */
.ph--zoom{ cursor:zoom-in; }
.ph--zoom:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }

.lb{
  position:fixed; inset:0; z-index:200;
  background:rgba(8,7,6,.96);
  display:none;
  grid-template-rows:auto 1fr auto;
}
.lb[open]{ display:grid; }

.lb__bar{
  display:flex; align-items:center; gap:1rem;
  padding:.9rem clamp(.75rem,3vw,1.5rem);
  font-family:var(--f-util); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,237,228,.55);
}
.lb__count{ margin-right:auto; }

.lb__x{
  background:none; border:1px solid rgba(243,237,228,.25);
  color:var(--bone); cursor:pointer;
  font-family:var(--f-util); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.6rem 1.1rem;
  transition:border-color .18s ease, background .18s ease;
}
.lb__x:hover{ border-color:var(--bone); background:rgba(243,237,228,.08); }

.lb__stage{
  position:relative;
  display:grid; place-items:center;
  min-height:0; padding:0 clamp(.5rem,2vw,1rem);
}
.lb__img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}

.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px;
  display:grid; place-items:center;
  background:rgba(20,18,16,.7);
  border:1px solid rgba(243,237,228,.2);
  color:var(--bone); cursor:pointer;
  font-size:1.3rem; line-height:1;
  transition:background .18s ease, border-color .18s ease;
}
.lb__nav:hover{ background:var(--orange); border-color:var(--orange); color:var(--ink); }
.lb__nav[hidden]{ display:none; }
.lb__prev{ left:clamp(.5rem,2vw,1.5rem); }
.lb__next{ right:clamp(.5rem,2vw,1.5rem); }

.lb__cap{
  padding:1rem clamp(.75rem,3vw,1.5rem) calc(1rem + env(safe-area-inset-bottom));
  font-size:.85rem; line-height:1.55;
  color:rgba(243,237,228,.7);
  max-width:70ch; margin-inline:auto; text-align:center;
}

body.lb-open{ overflow:hidden; }

@media (max-width:640px){
  .lb__nav{ width:44px; height:44px; }
  .lb__cap{ font-size:.78rem; }
}

/* load choreography ----------------------------------------- */
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.rise{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both; }
.rise:nth-child(1){ animation-delay:.05s; }
.rise:nth-child(2){ animation-delay:.14s; }
.rise:nth-child(3){ animation-delay:.23s; }
.rise:nth-child(4){ animation-delay:.32s; }
.rise:nth-child(5){ animation-delay:.41s; }

@media (prefers-reduced-motion:reduce){
  .rise{ animation:none; }
  .row{ opacity:1; transform:none; }
}

/* homepage booking handoff --------------------------------------- */
.book__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.5rem; }
.book__cta .btn{ min-width:200px; }
@media (max-width:520px){
  .book__cta{ flex-direction:column; }
  .book__cta .btn{ width:100%; }
}

/* studio credit ---------------------------------------------------- */
.ft__credit{
  margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--ink-3);
}
.ft__credit p{ margin:0; opacity:.34; }
.ft__credit a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(243,237,228,.22);
  padding-bottom:1px;
  transition:color .18s ease, border-color .18s ease, opacity .18s ease;
}
.ft__credit:hover p{ opacity:.6; }
.ft__credit a:hover{ color:var(--orange); border-color:var(--orange); }