/* Feale Barbers: after.
   Towel page, Navy for text and the night band behind the photo, Pole red as the only accent
   (Book buttons and the full stops of the answer), Steel for quiet lines, Window only for the
   lit-window glow on the photo when you can walk in. Anybody for the answer and headings,
   Work Sans for text. Phone first: the answer is the first screen. */

@font-face {
  font-family: "Anybody";
  src: url("/assets/redesigns/feale-barbers/fonts/anybody.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Work Sans";
  src: url("/assets/redesigns/feale-barbers/fonts/work-sans.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --towel: #f4f5f7;
  --navy: #14213d;
  --red: #c1272d;
  --red-deep: #a51f25;
  --steel: #5b6372;
  --window: #f3c27a;
  --hair: rgba(20, 33, 61, 0.16);
  --display: "Anybody", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --gutter: 20px;
  --wrap: 1280px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

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

body {
  margin: 0;
  background: var(--towel);
  color: var(--navy);
  font: 400 18px/1.55 var(--sans);
  overflow-x: clip;
}

header.top, main, footer.foot { box-sizing: border-box; }
header.top *, main *, footer.foot * { box-sizing: border-box; }

main h1, main h2, main p, main dl, main dd, main ul, main figure,
footer.foot p, header.top p { margin: 0; padding: 0; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--red-deep); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- header ---------- */

.top { position: relative; z-index: 5; }

.skip {
  position: absolute;
  left: 8px; top: -60px;
  background: var(--navy);
  color: var(--towel);
  padding: 10px 14px;
  border-radius: 3px;
  z-index: 30;
}
.skip:focus { top: 8px; }

.top__in {
  max-width: var(--wrap);
  margin: 0 auto;
  height: 64px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--navy); }
.brand__name {
  font: 900 19px/1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.01em;
}
.brand__place { font-size: 13px; line-height: 1; color: var(--steel); }

.top__nav { display: none; }

.top__call {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--navy);
  border-radius: 3px;
  font-weight: 500;
  text-decoration: none;
}
.top__call:hover { background: var(--navy); color: var(--towel); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 3px;
  font: 500 19px/1.2 var(--sans);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn--book { background: var(--red); color: #fff; border-color: var(--red); }
.btn--book:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn--call { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--call:hover { background: var(--navy); color: var(--towel); }

/* ---------- hero: the answer ---------- */

.hero__in { padding: 20px var(--gutter) 32px; }

main h1 {
  font: 700 22px/1.2 var(--display);
  font-stretch: 100%;
  letter-spacing: 0;
  color: var(--navy);
}

.answer { margin-top: 18px; }

.answer__live:empty { display: none; }
@media (scripting: enabled) {
  .answer__live:empty { display: block; min-height: 190px; }
}

.answer__main {
  font: 900 42px/0.98 var(--display);
  font-stretch: 118%;
  letter-spacing: -0.015em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.answer__main .a-line { display: block; }
.answer__main--long { font-size: 34px; }
.answer__main i { font-style: normal; color: var(--red); }

.answer__sub {
  margin-top: 16px;
  font: 500 21px/1.35 var(--sans);
  max-width: 28ch;
  text-wrap: balance;
}

.answer__rule {
  font: 500 22px/1.4 var(--sans);
  max-width: 34ch;
}

.actions {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.booksy-msg {
  margin-top: 16px;
  font-size: 17px;
  color: var(--navy);
  max-width: 36ch;
}
.booksy-msg:empty { display: none; }

/* ---------- sections ---------- */

.sec__in { padding: 56px var(--gutter); }

main h2 {
  font: 900 34px/1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.015em;
}

/* prices: the board */

.plist { margin-top: 28px; }
.plist__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
}
.plist__row:first-child { border-top: 1px solid var(--hair); }
.plist dt { font: 500 21px/1.25 var(--sans); }
.plist dd {
  font: 800 28px/1 var(--display);
  font-stretch: 112%;
  white-space: nowrap;
}
.board__note { margin-top: 20px; color: var(--steel); font-size: 17px; }

/* the shop at dusk: the night band */

.night {
  background: var(--navy);
  padding: 44px var(--gutter);
}
.night__frame {
  position: relative;
  width: min(420px, 100%);
  margin: 0 auto;
  line-height: 0;
}
.night__frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* the window: lit when walk-ins are on, dimmed when they are not (state set by after.js) */
.night__pane {
  position: absolute;
  top: 32.9%;
  height: 26.8%;
  opacity: 0;
  pointer-events: none;
}
.night__pane--l { left: 34.4%; width: 19%; }
.night__pane--r { left: 54.3%; width: 17.9%; }

main[data-state="yes"] .night__pane { background: var(--window); mix-blend-mode: screen; opacity: 0.3; }
main[data-state="book"] .night__pane,
main[data-state="closed"] .night__pane { background: var(--navy); mix-blend-mode: multiply; opacity: 0.5; }
main[data-state="closed"] .night__pane { opacity: 0.7; }

@media (prefers-reduced-motion: no-preference) {
  .night__pane { transition: opacity 0.8s ease; }
}

/* the barbers */

.blist { margin-top: 28px; list-style: none; display: grid; gap: 22px; }
.blist li { font: 400 24px/1.3 var(--sans); max-width: 30ch; }
.blist strong { font: 800 24px/1.3 var(--display); font-stretch: 112%; }
.barbers__ask { margin-top: 28px; color: var(--steel); }

/* hours */

.week { margin-top: 24px; }
.day {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  column-gap: 12px;
  padding: 12px 12px;
  margin: 0 -12px;
  border-radius: 3px;
  line-height: 1.35;
}
.day dt { font-weight: 500; }
.day__h { font: 800 19px/1.35 var(--display); font-stretch: 105%; }
.day__n { grid-column: 2; color: var(--steel); font-size: 17px; }
.day__n:empty { display: none; }
.day.is-today { background: var(--navy); color: var(--towel); }
.day.is-today .day__n { color: #d4d9e3; }
.day.is-today dt::after { content: " (today)"; font-weight: 400; }

.hours__find { margin-top: 40px; display: grid; gap: 4px; }
.hours__find p { font-size: 19px; }
.hours__find a { display: inline-block; padding: 8px 0; }
.find__place { font-weight: 500; }
.booksy-note {
  margin-top: 16px;
  font-size: 16px !important;
  color: var(--steel);
  max-width: 34ch;
}
.booksy-note:target { color: var(--navy); border-left: 4px solid var(--red); padding-left: 12px; }

/* footer */

.foot { background: var(--navy); color: var(--towel); }
footer.foot a { white-space: nowrap; display: inline-block; padding: 14px 0; margin: -14px 0; }
footer.foot p { max-width: var(--wrap); margin: 0 auto; padding: 28px var(--gutter); font-size: 16px; }
.foot a { color: var(--towel); }
.foot :focus-visible { outline-color: var(--towel); }

/* ---------- tablet and up ---------- */

@media (min-width: 640px) {
  .hero__in { padding: 28px 32px 56px; }
  main h1 { font-size: 26px; }
  .answer__main { font-size: 64px; }
  .answer__main--long { font-size: 52px; }
  .answer__sub { font-size: 24px; max-width: 30ch; }
  .actions { display: flex; flex-wrap: wrap; }
  .sec__in { padding: 72px 32px; }
  main h2 { font-size: 44px; }
  .plist dt { font-size: 24px; }
  .plist dd { font-size: 32px; }
  .blist li, .blist strong { font-size: 32px; }
  .night { padding: 56px 32px; }
  .day { grid-template-columns: 8.5em 7em 1fr; }
  .day__n { grid-column: auto; font-size: 18px; }
}

/* ---------- desktop: the answer in daylight, the shop in the night ---------- */

@media (min-width: 960px) {
  :root { --night: clamp(460px, 42vw, 640px); }

  .top { z-index: 5; }
  .top__in { height: 88px; padding: 0 40px; }
  .brand__name { font-size: 24px; }
  .top__call { display: none; }
  .top__nav { display: flex; align-items: center; gap: 22px; }
  .top__link { display: none; color: var(--towel); text-decoration: none; padding: 12px 0; font-weight: 500; }
  .top__link:hover { color: var(--towel); text-decoration: underline; text-underline-offset: 0.25em; }
  .top__nav .btn { min-height: 48px; padding: 0 22px; font-size: 17px; }
  .top :focus-visible { outline-color: var(--towel); }
  .top .brand:focus-visible { outline-color: var(--navy); }

  main {
    margin-top: -88px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--night);
  }
  .hero { grid-column: 1; grid-row: 1; min-height: 720px; display: flex; align-items: center; }
  .hero__in {
    padding: 128px 48px 72px max(40px, calc((100vw - var(--wrap)) / 2 + 40px));
    width: 100%;
  }
  main h1 { font-size: 30px; }
  .answer { margin-top: 26px; }
  .answer__live:empty, .answer__live { min-height: 0; }
  @media (scripting: enabled) { .answer__live:empty { min-height: 260px; } }
  .answer__main { font-size: clamp(64px, 6.6vw, 96px); font-stretch: 128%; line-height: 0.96; }
  .answer__sub { font-size: 28px; margin-top: 22px; max-width: 32ch; }
  .answer__main--long { font-size: clamp(52px, 5.4vw, 80px); }
  .answer__rule { font-size: 26px; }
  .actions { margin-top: 40px; gap: 16px; }
  .btn { min-height: 60px; padding: 0 34px; font-size: 20px; }
  .booksy-msg { font-size: 18px; }

  .night {
    grid-column: 2; grid-row: 1;
    position: relative;
    z-index: 2;
    padding: 0;
  }
  /* the print is pinned to the night: it hangs below the band onto the page */
  .night__frame { position: absolute; top: 152px; left: 0; width: 460px; margin: 0; }

  .board, .barbers, .hours { grid-column: 1 / -1; }
  .sec__in { max-width: var(--wrap); margin: 0 auto; padding: 112px 40px; }
  main h2 { font-size: 56px; }

  .plist {
    margin-top: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: 96px;
  }
  .plist__row { padding: 22px 0; }
  .plist__row:nth-child(5) { border-top: 1px solid var(--hair); }
  .plist dt { font-size: 28px; }
  .plist dd { font-size: 40px; }
  .board__note { margin-top: 28px; font-size: 18px; }

  .barbers .sec__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 96px; align-items: start; }
  .barbers h2 { grid-row: 1; }
  .blist { grid-column: 2; grid-row: 1 / span 2; margin-top: 8px; gap: 34px; }
  .blist li { font-size: 40px; max-width: 24ch; }
  .blist strong { font-size: 40px; }
  .barbers .sec__in { grid-template-rows: auto 1fr; }
  .barbers__ask { grid-column: 1; grid-row: 2; font-size: 20px; margin-top: 24px; max-width: 22ch; }

  .hours .sec__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); column-gap: 96px; align-items: start; }
  .week { margin-top: 32px; }
  .day { grid-template-columns: 9em 6em 1fr; padding: 16px 16px; margin: 0 -16px; }
  .day dt { font-size: 20px; }
  .day__h { font-size: 22px; }
  .day__n { font-size: 19px; }
  .hours__find { margin-top: 96px; }
  .hours__find p { font-size: 22px; }
}

@media (min-width: 1180px) {
  .top__link { display: inline-block; }
  .night__frame { left: -56px; }
}