/*
  Ferrule Barbers, a demo. The Chair and Chrome direction from profiles/barber.md: a classic shop,
  polished and proud of its history. Square corners, two-pixel rules, a condensed display face and a
  faint chrome stripe, so it reads nothing like the soft glow of Solvik or the warm paper of Suzume.

  Colours come from checked palettes through the starter's custom properties. Phone first; the wider
  rules sit below the rules they change.
*/

:root {
  --bg: #111014;
  --surface: #1C1A1F;
  --text: #F6F0E1;
  --muted: #CFC4AE;
  --primary: #D4AF37;
  --accent: #D4AF37;
  --accent-text: #111014;
  --border: #3A3326;
  --focus: #D4AF37;
  --band-1: #262126;
  --band-2: #1C1A1F;
  --detail: #D4AF37;

  --rule: 2px solid var(--text);
  --gutter: 16px;
  --display: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --body: "Work Sans", "Segoe UI", system-ui, sans-serif;
  --stripe: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--text) 6%, transparent) 10px 12px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
  -webkit-text-size-adjust: 100%;
  padding-bottom: 72px;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0 0 .45em; text-transform: uppercase; letter-spacing: .01em; }
h1 { font-size: clamp(2.6rem, 12vw, 4.8rem); }
h2 { font-size: clamp(1.9rem, 8vw, 2.8rem); }
h3 { font-size: 1.35rem; font-weight: 500; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* The sample ribbon, pinned, so every screen says the shop is invented. */
.preview-ribbon {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 8px var(--gutter);
  background: var(--accent);
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.showing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--muted);
}
.showing-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.palette-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.palette-switch button {
  font: 500 15px/1 var(--body);
  min-height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border: 2px solid var(--text);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.palette-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--gutter);
  border-bottom: var(--rule);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
/* The mark: a ferrule, drawn as a banded ring. */
.brand-mark {
  width: 40px;
  height: 40px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--stripe), var(--surface);
}
.brand-mark span { width: 22px; height: 8px; background: var(--accent); box-shadow: 0 -7px 0 -2px var(--text), 0 7px 0 -2px var(--text); }
.brand-logo { width: 44px; height: 44px; border-radius: 6px; display: block; }
.hero-logo { width: 100%; max-width: 280px; height: auto; justify-self: center; filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--accent) 30%, transparent)); }
.brand-words { display: flex; flex-direction: column; }
.brand-name { font: 700 20px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.brand-since { font-size: 15px; color: var(--muted); }
.topnav { display: none; gap: 22px; }
.topnav a { text-decoration: none; font-weight: 500; }
.topnav a:hover { color: var(--accent); }
.lang-switch {
  font: 500 15px/1 var(--body);
  min-height: 40px;
  padding: 0 12px;
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.lang-switch:hover { background: var(--text); color: var(--bg); }

main { padding: 0 var(--gutter); max-width: 1120px; margin: 0 auto; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
  font: 700 17px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn.ghost:hover { background: var(--text); color: var(--bg); }
.btn.small { min-height: 44px; font-size: 15px; padding: 0 16px; }
.text-link { color: var(--accent); font-weight: 700; }

/* Hero: type first, the drawing tinted in the look's accent. */
.hero { display: grid; gap: 18px; padding: 26px 0 30px; border-bottom: var(--rule); }
.kicker { font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .8em; }
.since-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 2px solid var(--accent); color: var(--accent); }
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 2px solid var(--text);
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
}
.status .dot { width: 10px; height: 10px; background: var(--muted); flex: none; }
.status.is-open .dot { background: var(--accent); }
.walkin-teaser { font: 500 20px/1.3 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 14px 0 12px; color: var(--accent); }
.lead { font-size: 19px; max-width: 34em; }
.hero-drawing {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  justify-self: center;
  background: var(--accent);
  -webkit-mask: url("../img/line-drawing.png") center / contain no-repeat;
  mask: url("../img/line-drawing.png") center / contain no-repeat;
}

/* Walk in now? */
.walkin { display: grid; gap: 20px; padding: 30px 0; border-bottom: var(--rule); }
.walkin-photo { margin: 0; }
.walkin-photo img, .prices-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--rule); }
.prices-photo img { filter: grayscale(1); }
.walkin-now {
  font: 700 24px/1.25 var(--display);
  text-transform: uppercase;
  padding: 14px 16px;
  background: var(--stripe), var(--band-1);
  border-left: 6px solid var(--accent);
}
.walkin-now[data-state="closed"], .walkin-now[data-state="past"] { border-left-color: var(--muted); }
.walkin-reserve { font-weight: 500; }

/* The price board: laid out like the one on the wall. */
.prices { display: grid; gap: 20px; padding: 30px 0; border-bottom: var(--rule); }
.board { background: var(--surface); border: var(--rule); padding: 22px 18px; box-shadow: 6px 6px 0 var(--text); }
.board h2 { text-align: center; border-bottom: var(--rule); padding-bottom: 10px; }
.board-list { list-style: none; margin: 0 0 12px; padding: 0; }
.board-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; font-size: 18px; }
.board-name { font-weight: 500; }
.board-dots { flex: 1; border-bottom: 2px dotted var(--muted); transform: translateY(-4px); min-width: 20px; }
.board-price { font: 700 20px/1 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.board-note { font-size: 15px; color: var(--muted); margin: 0; text-align: center; }
.prices-photo { margin: 0; }

/* The barbers */
.barbers { padding: 30px 0; border-bottom: var(--rule); }
.section-head p { color: var(--muted); }
.barber-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.barber { border: var(--rule); background: var(--surface); padding: 18px; display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center; }
.barber-face {
  grid-row: span 3;
  width: 88px;
  height: 88px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--stripe), var(--band-1);
}
.barber-face img { width: 100%; height: 100%; object-fit: cover; }
.barber-initial { font: 700 40px/1 var(--display); color: var(--accent); }
.barber h3 { margin: 0; }
.barber-known { margin: 0; font-weight: 500; }
.barber-years { margin: 0; color: var(--muted); font-size: 15px; }
.barber .btn { grid-column: 1 / -1; margin-top: 14px; }
.book-note { margin-top: 16px; padding: 12px 14px; border: 2px dashed var(--accent); font-size: 15px; }

/* The shop */
.shop { display: grid; gap: 20px; padding: 30px 0; border-bottom: var(--rule); }
.shop-photo { margin: 0; }
.shop-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--rule); box-shadow: 6px 6px 0 var(--text); }
.signature { border: var(--rule); padding: 20px; background: var(--stripe), var(--band-1); }
.signature-label { font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3em; }
.signature-name { font: 700 26px/1.1 var(--display); text-transform: uppercase; color: var(--accent); }
.signature p:last-child { margin: 0; }

/* Find us */
.visit { padding: 30px 0 34px; }
.facts { display: grid; gap: 12px; margin: 0 0 18px; }
.facts div { border-top: var(--rule); padding-top: 10px; }
.facts dt { font: 700 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.facts dd { margin: 4px 0 0; }

.footer { max-width: 1120px; margin: 0 auto; padding: 22px var(--gutter) 28px; border-top: var(--rule); font-size: 15px; color: var(--muted); }
.footer-name { color: var(--text); font-weight: 500; }
.made-by { font-weight: 700; }

/* Call, Directions, Reserve, pinned to the bottom of a phone screen. */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: var(--rule);
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  font: 700 16px/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  border-right: 2px solid var(--text);
}
.action-bar a:last-child { border-right: 0; background: var(--accent); color: var(--accent-text); }

.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Wider screens: below the rules they change. */
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .topnav { display: flex; }
  .showing-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hero { grid-template-columns: 1.4fr 1fr; align-items: center; padding: 44px 0 48px; }
  .hero-drawing { max-width: 360px; }
  .hero-logo { max-width: 360px; }
  .walkin, .prices, .shop { grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; }
  .shop-photo { grid-column: 1 / -1; }
  .barber-grid { grid-template-columns: repeat(2, 1fr); }
  .barber { grid-template-columns: 1fr; text-align: center; justify-items: center; row-gap: 6px; }
  .barber-face { grid-row: auto; width: 128px; height: 128px; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 16px 28px; }
}

@media (min-width: 1000px) {
  .barber-grid { grid-template-columns: repeat(4, 1fr); }
  body { padding-bottom: 0; }
  .action-bar { display: none; }
}