/* Northport Barber Co.
   Tone: a hand-painted window and a price board screwed to the wall. The one
   idea, and the reason this sample exists in the set: there is not a single
   photograph on the page. Most small shops have nothing but three blurry phone
   pictures of an empty chair, and the honest answer to that is not a stock
   photograph of somebody else's barber shop. It is to let the type do all of it.
   Type: Big Shoulders Display, a condensed American industrial face that reads
   like painted signage at any size, against IBM Plex Sans for the plain facts.
   Palette: #121212 the wall, #f2efe9 the towel, #c8a044 the gold leaf on glass.
   The gold is spent on prices and one button, nowhere else. */

:root{
  --bg:#121212;
  --bg-2:#1a1a1a;
  --ink:#f2efe9;
  --ink-soft:#a39d92;
  --line:#2e2c29;
  --gold:#c8a044;
  --display:"Big Shoulders Display","Haettenschweiler",Impact,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --thumb-h:0px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:var(--thumb-h)}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{padding:0 clamp(18px,5vw,56px)}

/* ---------- the wordmark ----------
   The signature element. The name is set in three lines that each fill the
   measure edge to edge, sized in vw so the shop's name is always exactly as wide
   as the screen it is on. That is what a painted window does, and it is the only
   thing on this page doing the work a photograph would do elsewhere. */
.mark{container-type:inline-size;padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(20px,3vw,36px);max-width:1180px;margin:0 auto}
.wordmark{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0;line-height:.8;letter-spacing:-.005em;display:grid}
/* Name the three word lines rather than styling every span inside the mark.
   ".wordmark span" is specificity 0,1,1 and quietly out-ranked ".w3"'s own
   display:flex, so the last row stayed a block and the three standing facts
   stacked one per line instead of sitting beside "Co.". */
.w1,.w2,.w3-word{display:block;white-space:nowrap}
/* Each line is sized so its glyphs reach both edges of the measure, which is
   what a sign painter does and what a font-size picked by eye does not. The
   numbers come from measuring the rendered width of each word at a known size:
   Northport sets about 3.94x its font-size, Barber about 2.56x. Co. is three
   characters and would need to be absurd to fill a line on its own, so it takes
   the left of the last row and the shop's three standing facts take the right,
   which is the row that would be painted along the bottom of a window anyway. */
/* Sized against the container, not the viewport. A vw-based size is only right
   at the width it was measured at: once max-width capped the measure at 1180px
   the viewport kept growing and Northport ran off the right edge. cqw is the
   measure itself, so each line reaches both edges at every width. Northport sets
   about 3.94x its font-size and Barber about 2.56x, hence 25.4 and 39.1. */
.w1{font-size:25.4cqw}
.w2{font-size:39.1cqw;color:var(--gold)}
.w3{display:flex;align-items:flex-end;justify-content:space-between;gap:16px clamp(20px,4vw,48px);font-size:min(11vw,126px);letter-spacing:.02em}
.w3-word{flex:0 0 auto}
.est{flex:1 1 auto;font-family:var(--body);font-weight:400;font-size:clamp(.72rem,1.35vw,.95rem);line-height:1.6;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);text-align:right;padding-bottom:.4em}
/* No literal space between the facts in the markup, so the separator is drawn
   here with margins instead. A middot typed into the HTML sits after a space and
   a phone will happily start a line with it, which is how three facts became
   five ragged lines with two of them a single dot. */
.est span{white-space:nowrap}
.est span+span::before{content:"\00b7";margin:0 .7em;opacity:.55}

/* ---------- the board ----------
   Prices on the first screen, which is the whole point of a shop where nobody
   books. Two columns on anything but a narrow phone, so six prices take one
   glance instead of a scroll. */
.board{max-width:1180px;margin:0 auto;padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(32px,5vw,64px)}
.board-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,6vw,88px);border-top:1px solid var(--line)}
.board-list li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:clamp(13px,2vw,18px) 0;border-bottom:1px solid var(--line)}
.board-list span{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(1.35rem,3vw,1.9rem);line-height:1;letter-spacing:.005em}
.board-list b{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,3.4vw,2.1rem);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.board-list b::before{content:"$";font-size:.62em;vertical-align:.14em;margin-right:.08em;opacity:.7}
.board-foot{margin:clamp(20px,3vw,28px) 0 0;color:var(--ink-soft);font-size:.99rem;max-width:56ch}

/* ---------- queue ---------- */
.queue{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.queue-inner{max-width:1180px;margin:0 auto}
.queue h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);line-height:.94;margin:0 0 .4em;max-width:17ch}
.queue p{color:var(--ink-soft);max-width:52ch;margin:0 0 1em}
.queue-act{margin:1.6em 0 .9em}
.btn{display:inline-flex;align-items:center;min-height:52px;font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;background:var(--gold);color:#17130a;padding:12px 30px;border-radius:2px}
.btn:hover{background:#ddb96a}
.queue-fine{font-size:.95rem}

/* ---------- facts ---------- */
.facts{max-width:1180px;margin:0 auto;padding-top:clamp(40px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.facts-list{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 clamp(28px,5vw,64px)}
.facts-list>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--line)}
.facts-list dt{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:1.15rem;letter-spacing:.02em;color:var(--ink-soft)}
.facts-list dd{margin:0;text-align:right;font-size:1rem}

/* ---------- says ---------- */
.says{border-top:1px solid var(--line);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.says-inner{max-width:1180px;margin:0 auto}
.says blockquote{margin:0;max-width:34ch}
.says p{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,4.2vw,2.9rem);line-height:1.04;text-transform:uppercase;margin:0 0 .6em;letter-spacing:.005em}
.says cite{font-style:normal;font-family:var(--body);font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ---------- foot ---------- */
.foot{padding:clamp(32px,5vw,56px) clamp(18px,5vw,56px);border-top:1px solid var(--line);color:var(--ink-soft);font-size:.96rem}
.foot-mark{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.5rem;color:var(--ink);margin:0 0 .3em;line-height:1}
.foot p{margin:0}
.foot a{color:var(--gold)}

.thumb{display:none}
@media (max-width:620px){
  /* Beside "Co." there is not enough room left on a phone for the three facts,
     and right-aligning them broke the line into four rags with the separators
     stranded on their own. On a phone they get their own row under the mark,
     left aligned, which is where a painted window would put them anyway. */
  .w3{flex-wrap:wrap}
  .est{flex:1 1 100%;text-align:left;max-width:none;padding-bottom:0;margin-top:14px;border-top:1px solid var(--line);padding-top:14px;letter-spacing:.14em}
  .board-list{grid-template-columns:1fr}
  .facts-list dd{text-align:right}
  :root{--thumb-h:74px}
  .thumb{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:98;padding:11px 14px;padding-bottom:calc(11px + env(safe-area-inset-bottom));background:var(--bg-2);border-top:1px solid var(--line)}
  .thumb a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:52px;font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;background:var(--gold);color:#17130a;border-radius:2px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}