/* Skustuvas – a men's barbershop. Direction "the place carries it" (design-taste-frontend seed 1785096609): three
   stone tones and charcoal; the grey-green only on the main button; condensed Anton capitals for names, Work Sans
   for reading. Tokens only (theme.css + design.json); motion: transform / opacity, everything visible without it.
   Type steps: display (cover name) · heading clamp(2.6–4.8rem) · title 1.6–2.1rem · lead 1.25–1.5rem · body · small. */
.theme-kirpykla {
  --k-g: var(--chalk);
  --k-g2: var(--paper);
  --k-tx: var(--text);
  --k-soft: var(--ink-2);
  --k-acc: var(--gold);
  --k-m: clamp(16px, 3vw, 48px);
  --k-gap: clamp(12px, 1.4vw, 20px);
  --k-disp: "Anton", "Archivo", system-ui, sans-serif;
  --k-read: "Work Sans", "Archivo", system-ui, sans-serif;
  --k-h2: clamp(2.6rem, 1.6rem + 4.2vw, 4.8rem);
  --k-title: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  --k-lead: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  background: var(--k-g); color: var(--k-tx);
}
.theme-kirpykla main { font-family: var(--k-read); font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.5; }
.kp img { display: block; }
.kp-h2 { margin: 0 0 clamp(28px, 4vw, 48px); font: 400 var(--k-h2)/.92 var(--k-disp); letter-spacing: -.005em; text-transform: uppercase; }
.kp-lead { max-width: 40ch; margin: 0; font-size: var(--k-lead); line-height: 1.4; }
/* a frame crops its photograph and lets it breathe on hover */
.kp-frame { overflow: hidden; background: var(--k-g2); }
.kp-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--k-ease); }
@media (hover: hover) { .kp-frame:hover img { transform: scale(1.035); } }

/* ── buttons: one shape, flat ── */
.kp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 0; background: var(--k-acc); color: var(--on-accent); font: 600 16px/1 var(--k-read); text-decoration: none; white-space: nowrap; transition: transform .25s var(--k-ease), background-color .25s, color .25s; }
.kp-btn span { transition: transform .3s var(--k-ease); }
.kp-btn:hover { background: var(--gold-deep); }
.kp-btn:hover span { transform: translateX(4px); }
.kp-btn:active { transform: scale(.97); }
.kp-btn:focus-visible { outline: 3px solid var(--k-tx); outline-offset: 3px; }
.kp-btn--light { background: var(--k-g); color: var(--k-tx); }
.kp-btn--light:hover { background: var(--k-acc); color: var(--on-accent); }
.kp-btn--light:focus-visible { outline-color: var(--k-g); }

/* ── cover: the room fills the screen, the name runs across it, the line and the button under it ── */
.kp-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; color: var(--k-g); background: var(--k-tx); }
.kp-hero__img, .kp-hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }
.kp-hero__vid { opacity: 0; transition: opacity 1.4s ease; }
.kp-hero__vid.is-on { opacity: 1; }
.kp-hero::after { content: ""; position: absolute; inset: 30% 0 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgb(20 19 18 / .82) 0%, rgb(20 19 18 / .55) 45%, rgb(20 19 18 / 0) 100%); } /* taste-skill-ignore: scrim under the title and the line */
.kp-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 200px; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgb(20 19 18 / .6), rgb(20 19 18 / 0)); } /* taste-skill-ignore: scrim behind the header on the bright window */
.kp-hero__foot { position: absolute; left: var(--k-m); right: var(--k-m); bottom: clamp(20px, 4vh, 44px); z-index: 2; display: grid; gap: clamp(14px, 2.4vh, 24px); }
.kp-hero__name { margin: 0; font: 400 min(calc((100vw - 2 * var(--k-m)) / (var(--len, 9) * .47)), 30rem)/.78 var(--k-disp); letter-spacing: -.01em; text-transform: uppercase; color: var(--k-g); white-space: nowrap; }
.kp-hero__row { display: grid; gap: 18px; justify-items: start; }
.kp-hero__lead { margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.45; color: var(--k-g); text-wrap: pretty; }
@media (min-width: 900px) {
  .kp-hero__row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; justify-items: stretch; column-gap: 48px; }
  .kp-hero__lead { font-size: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kp-hero__img { animation: kp-settle 2.4s var(--k-ease) both; }
  .kp-hero__name { animation: kp-rise 1.1s .2s var(--k-ease) both; }
  .kp-hero__lead { animation: kp-rise 1s .55s var(--k-ease) both; }
  .kp-hero__row .kp-btn { animation: kp-rise 1s .7s var(--k-ease) both; }
}
@keyframes kp-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes kp-rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }

/* ── the board: who is free next ── */
.kp-board { background: var(--k-tx); color: var(--k-g); padding: clamp(48px, 7vw, 104px) var(--k-m); display: grid; gap: 28px; }
.kp-board__title { margin: 0; font: 400 var(--k-h2)/.92 var(--k-disp); text-transform: uppercase; }
.kp-board__note { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; max-width: 38ch; font-size: 18px; color: var(--chalk-2); }
.kp-live { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--k-live); }
@media (prefers-reduced-motion: no-preference) { .kp-live { animation: kp-pulse 2s ease-in-out infinite; } }
@keyframes kp-pulse { 50% { opacity: .35; transform: scale(.8); } }
.kp-board__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; }
.kp-board__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; padding: 20px 22px; background: var(--k-board-row); font-family: var(--k-read); }
.kp-board__who { font-size: 22px; font-weight: 600; }
.kp-board__when { grid-column: 1; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--chalk-2); }
.kp-board__when b { color: var(--k-g); font-weight: 600; }
.kp-board__go { grid-column: 2; grid-row: 1 / span 2; }
@media (min-width: 900px) {
  .kp-board { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 5vw, 96px); align-items: center; }
  .kp-board__row { grid-template-columns: 1fr 1.4fr auto; padding: 26px 28px; }
  .kp-board__when { grid-column: 2; font-size: 20px; }
  .kp-board__go { grid-column: 3; grid-row: auto; }
}

/* ── the printed price list: a scalloped paper sheet beside the hall, on the field colour ── */
.kp-menu { background: var(--k-field); padding: clamp(64px, 9vw, 140px) var(--k-m); display: grid; gap: var(--k-gap); }
.kp-menu__photo { margin: 0; }
.kp-menu__photo .kp-frame { aspect-ratio: 16 / 10; }
.kp-sheet { padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); background: var(--k-g); text-align: center;
  -webkit-mask: radial-gradient(9px at 50% 0, #0000 98%, #000) 50% 0 / 22px 51% repeat-x, radial-gradient(9px at 50% 100%, #0000 98%, #000) 50% 100% / 22px 51% repeat-x; /* taste-skill-ignore: a shape mask (the scalloped paper edge), not a colour */
  mask: radial-gradient(9px at 50% 0, #0000 98%, #000) 50% 0 / 22px 51% repeat-x, radial-gradient(9px at 50% 100%, #0000 98%, #000) 50% 100% / 22px 51% repeat-x; } /* taste-skill-ignore: shape mask */
.kp-sheet__title { margin: 0; font: 400 var(--k-h2)/.92 var(--k-disp); text-transform: uppercase; }
.kp-sheet__note { margin: 14px auto 0; max-width: 40ch; font-size: 16px; color: var(--k-soft); }
.kp-sheet__group { margin-top: 88px; }
.kp-sheet__group h3 { margin: 0 0 20px; font: 400 var(--k-title)/1 var(--k-disp); text-transform: uppercase; letter-spacing: .03em; }
.kp-sheet__group ul { list-style: none; margin: 0 auto; padding: 0; max-width: 520px; display: grid; gap: 18px; text-align: left; }
.kp-sheet__group a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--k-tx); text-decoration: none; font-size: 19px; font-weight: 600; font-family: var(--k-read); }
.kp-sheet__name { transition: color .2s; }
.kp-sheet__group a:hover .kp-sheet__name { color: var(--k-acc); }
.kp-sheet__price { font-variant-numeric: tabular-nums; }
.kp-sheet__group p { margin: 3px 0 0; font-size: 16px; color: var(--k-soft); }
@media (min-width: 1000px) {
  .kp-menu { grid-template-columns: 5fr 7fr; align-items: start; column-gap: clamp(24px, 3vw, 48px); }
  .kp-menu__photo { position: sticky; top: 110px; }
  .kp-menu__photo .kp-frame { aspect-ratio: 4 / 5; }
}

/* ── work: one tall photograph and two beside it ── */
.kp-work, .kp-how, .kp-about, .kp-faq { padding: clamp(80px, 10vw, 160px) var(--k-m); max-width: 1600px; margin: 0 auto; }
.kp-work { display: grid; gap: var(--k-gap); grid-template-columns: 1fr 1fr; }
.kp-work__head { grid-column: 1 / -1; display: grid; gap: 18px; margin-bottom: clamp(16px, 3vw, 40px); }
.kp-work__head .kp-h2 { margin: 0; }
.kp-work__remark { margin: 0; max-width: 30ch; font-size: var(--k-lead); line-height: 1.35; }
.kp-work__item { margin: 0; display: grid; gap: 12px; align-content: start; }
.kp-work__item--a { grid-column: 1 / -1; }
.kp-work__item--a .kp-frame { aspect-ratio: 4 / 5; }
.kp-work__item--b .kp-frame, .kp-work__item--c .kp-frame { aspect-ratio: 1; }
.kp-work__item figcaption { font-size: 16px; color: var(--k-soft); }
.kp-work__item figcaption b { display: block; margin-bottom: 4px; font: 400 var(--k-title)/1 var(--k-disp); text-transform: uppercase; color: var(--k-tx); }
@media (min-width: 900px) {
  .kp-work { grid-template-columns: 7fr 5fr; column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(24px, 3vw, 40px); }
  .kp-work__head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: clamp(16px, 2vw, 28px); }
  .kp-work__item--a { grid-column: 1; grid-row: 2 / span 2; }
  .kp-work__item--a .kp-frame { aspect-ratio: auto; height: min(112vh, 1000px); }
  .kp-work__item--a img { object-position: 50% 40%; }
  .kp-work__item--b { grid-column: 2; grid-row: 2; }
  .kp-work__item--c { grid-column: 2; grid-row: 3; }
  .kp-work__item--b .kp-frame, .kp-work__item--c .kp-frame { aspect-ratio: 5 / 4; }
}

/* ── how: three photographs side by side ── */
.kp-how { background: var(--k-g2); max-width: none; }
.kp-how > * { max-width: 1504px; margin-inline: auto; }
.kp-how__steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: clamp(40px, 6vw, 56px); }
.kp-how__step { display: grid; gap: 14px; align-content: start; }
.kp-how__step .kp-frame { aspect-ratio: 4 / 5; }
.kp-how__lead { margin: 10px 0 0; font: 400 var(--k-title)/1 var(--k-disp); text-transform: uppercase; }
.kp-how__step p { margin: 0; max-width: 38ch; }
@media (min-width: 900px) {
  .kp-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
  .kp-how__step:nth-child(2) { margin-top: clamp(40px, 6vw, 96px); }
  .kp-how__step:nth-child(3) { margin-top: clamp(80px, 12vw, 192px); }
}

/* ── about: the barber at full height, his facts as stone tiles ── */
.kp-about { display: grid; gap: clamp(32px, 5vw, 64px); }
.kp-about__photo { margin: 0; }
.kp-about__photo .kp-frame { aspect-ratio: 4 / 5; }
.kp-about__text { display: grid; gap: 24px; align-content: center; }
.kp-about__text .kp-h2 { margin: 0; }
.kp-about__name { margin: 0; font: 400 var(--k-title)/1 var(--k-disp); text-transform: uppercase; }
.kp-about__role { margin: -14px 0 0; font-size: 16px; color: var(--k-soft); }
.kp-about__facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kp-about__facts li { display: flex; align-items: flex-end; min-height: 128px; padding: 20px; background: var(--k-g2); font: 400 clamp(1.25rem, 1rem + .8vw, 1.6rem)/1.05 var(--k-disp); text-transform: uppercase; }
.kp-about__facts li:first-child { background: var(--k-tx); color: var(--k-g); }
@media (min-width: 900px) {
  .kp-about { grid-template-columns: 6fr 6fr; align-items: center; column-gap: clamp(40px, 6vw, 112px); }
}

/* ── questions: large question left, the answer beside it, all open ── */
.kp-faq { display: grid; max-width: none; background: var(--k-tx); color: var(--k-g); padding-inline: max(var(--k-m), calc((100vw - 1280px) / 2)); }
.kp-faq .kp-h2 { margin-bottom: clamp(32px, 5vw, 64px); }
.kp-faq__list { margin: 0; display: grid; gap: clamp(32px, 4vw, 56px); }
.kp-faq__row { display: grid; gap: 10px; }
.kp-faq__row dt { font: 400 var(--k-title)/1.05 var(--k-disp); text-transform: uppercase; max-width: 24ch; }
.kp-faq__row dd { margin: 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--chalk-2); }
.kp-faq > .kp-btn { justify-self: start; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 900px) {
  .kp-faq__row { grid-template-columns: 5fr 7fr; column-gap: clamp(32px, 4vw, 64px); align-items: baseline; }
}

/* ── visit: the card on the street photograph ── */
.kp-visit { position: relative; min-height: 100svh; padding: clamp(40px, 6vw, 80px) var(--k-m); display: grid; justify-items: end; align-items: center; overflow: hidden; }
.kp-visit__media { position: absolute; inset: 0; overflow: hidden; }
.kp-visit__img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) { .kp-visit__img { animation: kp-drift 26s ease-in-out infinite alternate; } }
@keyframes kp-drift { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1.5%); } }
.kp-visit__card { position: relative; width: min(460px, 100%); padding: clamp(24px, 3vw, 36px); background: var(--k-g); }
.kp-visit__title { margin: 0 0 18px; font: 400 var(--k-h2)/.92 var(--k-disp); text-transform: uppercase; }
.kp-visit__card .place { box-shadow: none; background: var(--k-g2); border-radius: 0; } /* taste-skill-ignore: removes the base outline */

/* ── entrances (kirpykla.js marks parts .is-in with a stagger; everything visible without the script) ── */
@media (prefers-reduced-motion: no-preference) {
  .kp-js [data-k-rise] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--k-ease) var(--d, 0s), transform 1s var(--k-ease) var(--d, 0s); }
  .kp-js [data-k-rise].is-in { opacity: 1; transform: none; }
}

/* ── phone ── */
@media (max-width: 899px) {
  .kp-work, .kp-how, .kp-about, .kp-faq { padding-block: 72px; }
  .kp-menu { padding-block: 72px; }
  .kp-sheet__group { margin-top: 56px; }
  .kp-hero__row .kp-btn { width: 100%; }
  .kp-board__row { padding: 18px; }
  .kp-board__go { min-height: 48px; padding: 0 18px; }
  .kp-visit { min-height: 0; padding: 0 0 72px; display: flex; flex-direction: column; align-items: stretch; }
  .kp-visit__media { position: relative; inset: auto; width: 100%; height: 62svh; }
  .kp-visit__card { margin: -72px 12px 0; width: auto; }
}
@media (max-width: 699px) { .kp-hero__vid { object-position: 50% 50%; } }

/* ── header and footer of this design ── */
.theme-kirpykla .hd--over:not(.is-solid) { color: var(--k-g); }
.theme-kirpykla .hd--over:not(.is-solid) .b-gilt { color: var(--k-g); }
.theme-kirpykla .b-gilt { font-family: var(--k-disp); font-weight: 400; letter-spacing: .01em; text-shadow: none; } /* taste-skill-ignore: removes the base shadow */
.theme-kirpykla .btn--gold, .theme-kirpykla .btn--cobalt, .theme-kirpykla .b-btn--gilt, .theme-kirpykla .btn--accent { background: var(--k-acc); background-image: none; color: var(--on-accent); box-shadow: none; border-radius: 0; } /* taste-skill-ignore: removes the base shadow */
.theme-kirpykla .b-btn--gilt::after, .theme-kirpykla .btn--accent::after { display: none; }
.theme-kirpykla .btn, .theme-kirpykla .consent { border-radius: 0; }
.theme-kirpykla .consent__text { font-size: 15px; }
.theme-kirpykla .lang a { box-shadow: none; } /* taste-skill-ignore: removes the base outline */
.theme-kirpykla .place__nav a { border-radius: 0; box-shadow: none; background: var(--k-g); } /* taste-skill-ignore: removes the base outline */
.theme-kirpykla .place__nav a:hover { box-shadow: none; background: var(--k-acc); color: var(--on-accent); } /* taste-skill-ignore: removes the base outline */
.theme-kirpykla .hours__row { border-bottom: 0; padding: 6px 0; font-size: 16px; }
.theme-kirpykla .place__map, .theme-kirpykla .place__nav { font-size: 16px; }
.theme-kirpykla .ft { background: var(--k-tx); color: var(--chalk-2); border-top: 0; }
.theme-kirpykla .b-ft__sign { padding-top: .2em; }
.theme-kirpykla .b-ft__sign .b-gilt { color: var(--k-g); line-height: 1.05; }
.theme-kirpykla .b-ft__tagline { color: var(--k-g); }
.theme-kirpykla .ft .place { color: var(--k-tx); }
.theme-kirpykla .b-ft__grid, .theme-kirpykla .b-ft__legal { border-top: 0; }
.page-home.theme-kirpykla .b-ft__grid > .b-ft__col:has(.places) { display: none; }
.theme-kirpykla h1, .theme-kirpykla h2, .theme-kirpykla h3 { font-family: var(--k-disp); font-weight: 400; }
.theme-kirpykla .kp-sheet__group a { font-family: var(--k-read); }

/* header: the wordmark is the logo, the booking button is the design's own button */
.theme-kirpykla .b-mark .b-gilt { font-size: 28px; letter-spacing: .02em; line-height: 1; }
.theme-kirpykla .b-book { height: 48px; padding: 0 20px; border-radius: 0; background: var(--k-acc); color: var(--on-accent); font: 600 16px/1 var(--k-read); }
.theme-kirpykla .b-book:hover, .theme-kirpykla .b-book[aria-current] { background: var(--gold-deep); }
@media (max-width: 380px) { .theme-kirpykla .b-mark .b-gilt { font-size: 24px; } .theme-kirpykla .b-book { padding: 0 14px; } }
@media (min-width: 1040px) { .theme-kirpykla .b-mark .b-gilt { font-size: 32px; } .theme-kirpykla .b-book { height: 48px; padding: 0 24px; } }
/* footer: no small grey text on the charcoal */
.theme-kirpykla .b-ft__head { color: var(--chalk-2); font-size: 14px; font-weight: 600; }
.theme-kirpykla .b-ft__legal { color: var(--chalk-2); font-size: 14px; }
.theme-kirpykla .b-ft__intro a, .theme-kirpykla .b-ft__col a { font-size: 17px; }
/* tablet: the steps and the barber sit side by side instead of one tall column of photographs */
@media (min-width: 700px) and (max-width: 899px) {
  .kp-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .kp-how__step .kp-frame { aspect-ratio: 3 / 4; }
  .kp-about { grid-template-columns: 6fr 5fr; align-items: center; column-gap: 32px; }
  .kp-work__item--a .kp-frame { aspect-ratio: 16 / 11; }
}