:root {
  --black: #0D0D0D;
  --coal: #161616;
  --coal-2: #232323;
  --brass: #C9A15B;
  --brass-2: #E0BD7C;
  --bone: #EDE8DF;
  --muted: #8C877F;
  --head: 'Oswald', Impact, sans-serif;
  --body: 'Inter Tight', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--bone); font-family: var(--body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; text-transform: uppercase; line-height: .95; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 18px; }

/* header */
.header { position: sticky; top: 0; z-index: 50; background: var(--black); border-bottom: 1px solid #262626; }
.header-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.logo { font-family: var(--head); font-size: 1.4rem; font-weight: 700; color: var(--brass); letter-spacing: .04em; }
.nav { display: none; gap: 36px; font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; }
.nav a:hover { color: var(--brass); }
.header-book { font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; padding: 8px 14px; border: 1px solid var(--brass); color: var(--brass); }
.header-book:hover { background: var(--brass); color: var(--black); }

/* афіша */
.poster { padding: 18px 0 30px; }
.poster-top, .poster-bottom { border-color: #333; }
.poster-top { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #333; font-family: var(--head); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.poster-title { display: flex; flex-direction: column; align-items: flex-start; margin: 14px 0 8px; font-size: clamp(5.6rem, 33vw, 21rem); line-height: .8; letter-spacing: -.01em; }
.photo-text {
  color: transparent;
  background:
    linear-gradient(120deg, rgba(224, 189, 124, .55), rgba(237, 232, 223, .45) 55%, rgba(201, 161, 91, .6)),
    url(img/hero.webp) center 40% / cover;
  -webkit-background-clip: text;
  background-clip: text;
}
.photo-text:last-child { align-self: flex-end; background-position: center 70%; }
.amp { align-self: center; font-family: var(--head); font-weight: 400; font-size: .4em; color: var(--brass); line-height: .9; margin: -.12em 0; }
.poster-bottom { display: grid; gap: 18px; padding-top: 18px; border-top: 1px solid #333; }
.poster-bottom p { color: var(--muted); max-width: 46ch; }
.poster-cta { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: var(--brass); color: var(--black); font-family: var(--head); font-size: 1.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.poster-cta span { font-size: 1.6rem; transition: transform .3s; }
.poster-cta:hover span { transform: translateX(6px); }

/* смуга-перукарський стовп */
.stripe { overflow: hidden; background: repeating-linear-gradient(-45deg, var(--brass) 0 18px, var(--black) 18px 36px); padding: 10px 0; }
.stripe-track { display: flex; width: max-content; animation: run 24s linear infinite; }
.stripe span { margin: 0 14px; padding: 4px 16px; background: var(--black); font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; white-space: nowrap; }
@keyframes run { to { transform: translateX(-50%); } }

/* прайс-табло */
.price { padding: 70px 0; }
.price-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.price-head h2 { font-size: clamp(4rem, 20vw, 10rem); color: var(--bone); }
.price-head p { color: var(--muted); font-size: .9rem; }
.price-head b { color: var(--brass); font-family: var(--head); font-size: 1.3rem; }
.board li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid #2a2a2a; transition: background .25s, padding .25s; }
.board li:last-child { border-bottom: 1px solid #2a2a2a; }
.board li:hover { background: var(--coal); padding-left: 10px; padding-right: 10px; }
.board .n { font-family: var(--head); color: var(--muted); font-size: .9rem; }
.board .name { font-family: var(--head); font-size: clamp(1.3rem, 5vw, 2.2rem); text-transform: uppercase; line-height: 1.05; }
.board small { display: block; margin-top: 4px; font-family: var(--body); font-size: .8rem; color: var(--muted); text-transform: none; }
.board .cost { font-family: var(--head); font-size: clamp(1.8rem, 8vw, 3.6rem); color: var(--brass); line-height: 1; }
.board .cost::after { content: '₴'; font-size: .45em; margin-left: 3px; vertical-align: top; }
.board .hot { background: var(--brass); color: var(--black); padding-left: 12px; padding-right: 12px; }
.board .hot:hover { background: var(--brass-2); }
.board .hot .n, .board .hot small, .board .hot .cost { color: var(--black); }
.price-note { margin-top: 18px; color: var(--muted); font-size: .85rem; }

/* майстри */
.team { padding: 30px 0 70px; }
.team-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.team-head h2 { font-size: clamp(3rem, 14vw, 7rem); }
.team-head p { color: var(--brass); font-family: var(--head); letter-spacing: .1em; text-transform: uppercase; }
.team-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 18px 8px; scrollbar-width: none; }
.team-strip::-webkit-scrollbar { display: none; }
.barber { position: relative; flex: 0 0 78%; scroll-snap-align: start; overflow: hidden; background: var(--coal); }
.barber img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .5s, transform .6s; }
.barber:hover img { filter: grayscale(0); transform: scale(1.03); }
.barber div { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); }
.barber h3 { font-size: 2.4rem; }
.barber p { color: var(--brass); font-weight: 600; font-size: .9rem; }
.barber small { color: var(--muted); }

/* правила */
.rules { padding: 60px 0; background: var(--bone); color: var(--black); }
.rules-grid { display: grid; gap: 24px; }
.rules h2 { font-size: clamp(3rem, 13vw, 6rem); }
.rules ol { counter-reset: r; display: grid; gap: 0; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 54px 1fr; gap: 10px; padding: 16px 0; border-top: 2px solid var(--black); font-weight: 600; font-size: 1.05rem; }
.rules li::before { content: counter(r, upper-roman) '.'; font-family: var(--head); font-size: 1.4rem; }

/* квиток */
.booking { padding: 70px 0 90px; }
.ticket { display: grid; max-width: 920px; margin: 0 auto; background: var(--brass); color: var(--black); position: relative; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); }
.ticket-main { padding: 28px 22px; display: grid; gap: 16px; }
.ticket-label { font-family: var(--head); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; }
.ticket h2 { font-size: clamp(3rem, 14vw, 5.5rem); }
.ticket-fields { display: grid; gap: 12px; }
.ticket label { display: grid; gap: 4px; font-family: var(--head); font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.ticket input, .ticket select { width: 100%; padding: 10px 0; border: 0; border-bottom: 2px solid var(--black); background: transparent; font-family: var(--body); font-size: 1.05rem; color: var(--black); text-transform: none; letter-spacing: 0; }
.ticket input::placeholder { color: rgba(13, 13, 13, .5); }
.ticket input:focus, .ticket select:focus { outline: none; border-bottom-color: var(--bone); }
.ticket-stub { position: relative; display: grid; gap: 12px; padding: 24px 22px; border-top: 3px dashed var(--black); background: var(--brass-2); text-align: center; }
.ticket-stub::before, .ticket-stub::after { content: ''; position: absolute; top: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--black); }
.ticket-stub::before { left: -15px; }
.ticket-stub::after { right: -15px; }
.ticket-stub p { font-family: var(--head); font-size: 2rem; }
.ticket-stub button { padding: 16px; border: 0; background: var(--black); color: var(--brass); font-family: var(--head); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.ticket-stub button:hover { color: var(--bone); }
.ticket-stub small { font-size: .8rem; line-height: 1.5; }

.footer { padding: 24px 0; border-top: 1px solid #262626; color: var(--muted); font-size: .85rem; }
.footer-in { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }

@media (min-width: 768px) {
  .wrap { padding: 0 32px; }
  .nav { display: flex; }
  .poster { padding-top: 26px; }
  .poster-title { flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: space-between; font-size: min(13.2vw, 13rem); white-space: nowrap; }
  .photo-text:last-child { align-self: auto; }
  .amp { font-size: .5em; margin: 0 .05em; }
  .poster-bottom { grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
  .poster-cta { min-width: 360px; }
  .board li { grid-template-columns: 70px 1fr auto; padding: 22px 0; }
  .team-strip { padding: 0 max(32px, calc((100vw - 1240px) / 2 + 32px)) 8px; }
  .barber { flex-basis: 31%; }
  .rules-grid { grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
  .ticket { grid-template-columns: 1fr 260px; }
  .ticket-main { padding: 40px; }
  .ticket-fields { grid-template-columns: 1fr 1fr; gap: 16px 28px; }
  .ticket-stub { border-top: 0; border-left: 3px dashed var(--black); align-content: center; padding: 30px; }
  .ticket-stub::before { top: -15px; left: -16px; }
  .ticket-stub::after { top: auto; bottom: -15px; left: -16px; right: auto; }
}