/* Sruoga – a women's hair salon. Direction "the pinned poster" (design-taste-frontend seed 60524357): the colour book
   is a stage that stays while the shades change inside it. Playfair Display only for the large words (34px and up - a
   colour book is a magazine; Bodoni lost the macron of the Lithuanian ū on phones), Jost for reading and for every small heading; one velvet green carries every word and button, brass marks only the chosen shade.
   Type steps: small · body · lead · h3 · h2 · display (cover). Tokens only (theme.css + design.json); motion: transform /
   opacity, everything readable without it. */
.theme-plaukai {
  --s-bg: var(--chalk);
  --s-bg2: var(--paper);
  --s-tx: var(--text);
  --s-soft: var(--ink-2);
  --s-acc: var(--gold);
  --s-m: clamp(18px, 3.2vw, 56px);
  --s-small: .9375rem;
  --s-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --s-lead: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  --s-h3: clamp(2.25rem, 1.6rem + 1.8vw, 3.25rem);
  --s-h2: clamp(3rem, 1.8rem + 5vw, 7rem);
  --s-disp: "Playfair Display", Georgia, serif;
  --s-text: "Jost", system-ui, sans-serif;
  background: var(--s-bg); color: var(--s-tx);
}
.theme-plaukai main { font-family: var(--s-text); font-size: var(--s-body); line-height: 1.55; }
.sruoga img { display: block; }
.sr-h2 { margin: 0; font: 400 var(--s-h2)/.98 var(--s-disp); letter-spacing: -.025em; }
.sr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 2px; background: var(--s-acc); color: var(--on-accent); font: 500 1.0625rem/1 var(--s-text); letter-spacing: .02em; text-decoration: none; transition: transform .3s var(--sr-ease), background-color .25s; }
.sr-btn:hover { background: var(--gold-deep); transform: translateY(-2px); }
.sr-btn:active { transform: scale(.97); }
.sr-btn--light { background: var(--s-bg); color: var(--s-tx); }
.sr-btn--light:hover { background: var(--s-bg2); }
.sruoga a:focus-visible, .sruoga button:focus-visible { outline: 3px solid var(--sr-brass); outline-offset: 3px; }

/* ── cover: the blow-dry by the window, the name along the bottom ── */
.sr-cover { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--s-bg); background: var(--s-tx); }
.sr-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 40%; }
.sr-cover::before { /* taste-skill-ignore: legibility scrim over the photograph */ content: ""; position: absolute; inset: 0 0 auto; height: 170px; z-index: 1; background: linear-gradient(to bottom, var(--sr-scrim), var(--sr-scrim-soft)); }
.sr-cover::after { /* taste-skill-ignore: legibility scrim over the photograph */ content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to top, var(--sr-scrim) 0%, var(--sr-scrim-soft) 100%); }
.sr-cover__name { position: absolute; left: var(--s-m); bottom: calc(var(--s-m) - .06em); z-index: 2; margin: 0; font: 400 clamp(6rem, 19vw, 20rem)/.85 var(--s-disp); letter-spacing: -.03em; }
.sr-cover__copy { position: absolute; right: var(--s-m); bottom: calc(var(--s-m) + 8px); z-index: 2; display: grid; gap: 22px; justify-items: start; max-width: 30ch; }
.sr-cover__lead { margin: 0; font-size: var(--s-lead); line-height: 1.32; }
@media (max-width: 899px) {
  .sr-cover__img { object-position: 58% 40%; }
  .sr-cover__name { font-size: 25vw; bottom: auto; top: calc(var(--hd-h, 64px) + 12svh); }
  .sr-cover__copy { left: var(--s-m); right: var(--s-m); bottom: calc(var(--s-m) + 12px); }
}
@media (prefers-reduced-motion: no-preference) {
  .sr-cover__img { animation: sr-settle 2.6s var(--sr-ease) both; }
  .sr-cover__name { animation: sr-rise 1.2s .1s var(--sr-ease) both; }
  .sr-cover__copy { animation: sr-rise 1s .45s var(--sr-ease) both; }
}
@keyframes sr-settle { from { transform: scale(1.06); } }
@keyframes sr-rise { from { opacity: 0; transform: translateY(28px); } }

/* ── the colour book: a stage that stays; a strand turns the page, its ground and its note ── */
.sr-book { position: relative; isolation: isolate; display: grid; gap: 32px; padding: calc(var(--hd-h, 64px) + clamp(32px, 5vw, 72px)) var(--s-m) clamp(40px, 5vw, 72px); --s-soft: var(--sr-soft-on-ground); scroll-margin-top: 0; }
.sr-book__grounds { position: absolute; inset: 0; z-index: -1; }
.sr-ground { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--sr-ease); }
.sr-ground.is-on { opacity: 1; }
.sr-ground--1 { background: var(--sr-g1); } .sr-ground--2 { background: var(--sr-g2); } .sr-ground--3 { background: var(--sr-g3); }
.sr-ground--4 { background: var(--sr-g4); } .sr-ground--5 { background: var(--sr-g5); } .sr-ground--6 { background: var(--sr-g6); }
.sr-book__title { margin: 0; font: 400 var(--s-h2)/.98 var(--s-disp); letter-spacing: -.025em; }
.sr-book__hint { margin: 14px 0 0; max-width: 30ch; font-size: var(--s-body); }
.sr-sw { margin-top: 28px; }
.sr-sw ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.sr-sw__a { display: grid; justify-items: center; gap: 10px; padding: 0 0 4px; color: var(--s-soft); font-size: var(--s-small); text-decoration: none; text-align: center; }
.sr-strand { display: block; width: 100%; max-width: 64px; height: clamp(88px, 11vw, 140px); border-radius: 32px 32px 6px 6px; outline: 1px solid var(--sr-line); outline-offset: -1px; transform-origin: 50% 0; transition: transform .45s var(--sr-ease); }
.sr-sw__a:hover .sr-strand { transform: scaleY(1.06); }
.sr-sw__a[aria-current="true"] { color: var(--s-tx); font-weight: 700; }
.sr-sw__a[aria-current="true"] .sr-strand { transform: scaleY(1.12); outline: 2px solid var(--sr-brass); outline-offset: 3px; }
.sr-strand--1 { background: var(--sr-h1); } .sr-strand--2 { background: var(--sr-h2); } .sr-strand--3 { background: var(--sr-h3); }
.sr-strand--4 { background: var(--sr-h4); } .sr-strand--5 { background: var(--sr-h5); } .sr-strand--6 { background: var(--sr-h6); }
.sr-page { display: grid; gap: 22px; align-items: center; scroll-margin-top: calc(var(--hd-h, 64px) + 12px); }
.sr-book__stage { display: grid; gap: 72px; }
.sr-js .sr-book__stage { gap: 0; }
.sr-js .sr-page:not(.is-on) { display: none; }
.sr-page__ph { margin: 0; }
.sr-page__ph img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sr-page__ph figcaption { margin-top: 10px; font-size: var(--s-small); color: var(--s-soft); font-variant-numeric: tabular-nums; }
.sr-page__note { display: grid; gap: 16px; justify-items: start; }
.sr-page__note h3 { margin: 0; font: 400 var(--s-h3)/1 var(--s-disp); letter-spacing: -.02em; }
.sr-page__note p { margin: 0; max-width: 34ch; }
.sr-page__svc { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; color: var(--s-soft); font-size: 1rem; }
.sr-page__svc b { color: var(--s-tx); font-size: var(--s-lead); font-weight: 600; font-variant-numeric: tabular-nums; }
.sr-book__note { margin: 0; font-size: var(--s-small); color: var(--s-tx); }
@media (prefers-reduced-motion: no-preference) {
  .sr-js .sr-page.is-on .sr-page__ph img { animation: sr-swap .8s var(--sr-ease) both; }
  .sr-js .sr-page.is-on .sr-page__note > * { animation: sr-rise .7s var(--sr-ease) both; }
  .sr-js .sr-page.is-on .sr-page__note > :nth-child(2) { animation-delay: .06s; }
  .sr-js .sr-page.is-on .sr-page__note > :nth-child(3) { animation-delay: .12s; }
  .sr-js .sr-page.is-on .sr-page__note > :nth-child(4) { animation-delay: .18s; }
}
@keyframes sr-swap { from { opacity: 0; transform: scale(1.04); } }
@media (min-width: 900px) {
  .sr-book { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; min-height: 100svh; }
  .sr-book__head { grid-column: 1 / 5; }
  .sr-book__stage { grid-column: 5 / 13; }
  .sr-page { grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 3vw, 56px); align-items: end; }
  .sr-page__ph img { max-height: calc(100svh - var(--hd-h, 64px) - 210px); width: auto; max-width: 100%; }
  .sr-book__note { grid-column: 5 / 13; }
}
@media (max-width: 899px) {
  .sr-page__ph { max-width: 520px; }
  .sr-page__ph figcaption { display: none; }
  .sr-sw ul { gap: 6px; }
  .sr-sw__name { display: none; }
  .sr-sw__a { padding: 0; min-height: 44px; }
  .sr-strand { height: 76px; max-width: none; }
}

/* ── price list on the velvet field: the window of the cover beside it, prices as large as the names ── */
.sr-menu { display: grid; background: var(--sr-field); color: var(--sr-on-field); --s-soft: var(--sr-on-field-soft); }
.sr-menu__ph { margin: 0; height: 46svh; min-height: 300px; overflow: hidden; }
.sr-menu__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.sr-menu__list { padding: clamp(64px, 8vw, 128px) var(--s-m) clamp(72px, 9vw, 144px); }
.sr-menu__title { margin-bottom: 12px; }
.sr-menu__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sr-menu__day { margin: 0; padding: 48px 0 14px; font: 600 1.1875rem/1.2 var(--s-text); letter-spacing: .01em; color: var(--sr-brass-light); }
.sr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; row-gap: 3px; align-items: baseline; padding: 12px 0; font-size: 1.1875rem; line-height: 1.3; color: var(--sr-on-field); text-decoration: none; transition: color .2s, transform .3s var(--sr-ease); }
.sr-row__name { grid-column: 1; font-weight: 500; }
.sr-row__price { grid-column: 2; grid-row: 1; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sr-row__text { grid-column: 1 / -1; font-size: 1rem; line-height: 1.45; color: var(--sr-on-field-soft); }
.sr-row__dur { display: none; }
.sr-row:hover { transform: translateX(6px); }
.sr-row:hover .sr-row__name { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
@media (min-width: 900px) {
  .sr-menu { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .sr-menu__ph { order: 2; position: sticky; top: 0; height: 100svh; min-height: 0; }
  .sr-menu__list { order: 1; padding-right: clamp(32px, 5vw, 96px); }
  .sr-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 28px; }
  .sr-row__dur { display: block; grid-column: 2; grid-row: 1; color: var(--sr-on-field-soft); font-size: 1rem; }
  .sr-row__price { grid-column: 3; }
  .sr-row__text { grid-column: 1 / 3; }
}

/* ── how a visit goes: three verbs, three tall photographs ── */
.sr-verbs { padding: clamp(72px, 10vw, 160px) var(--s-m); background: var(--s-bg); color: var(--s-tx); }
.sr-verbs__title { margin-bottom: clamp(40px, 5vw, 72px); }
.sr-verbs__row { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.sr-verb__ph { margin: 0; overflow: hidden; }
.sr-verb__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--sr-ease); }
.sr-verb:hover .sr-verb__img { transform: scale(1.04); }
.sr-verb__word { margin: 22px 0 10px; font: 400 var(--s-h3)/1 var(--s-disp); letter-spacing: -.02em; }
.sr-verb__text { margin: 0; max-width: 34ch; color: var(--s-soft); }
@media (min-width: 600px) {
  .sr-verbs__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); align-items: start; }
  .sr-verb__img { aspect-ratio: 3 / 4; }
  .sr-verb__text { font-size: 1rem; }
}
@media (min-width: 900px) {
  .sr-verb:nth-child(2) { margin-top: 12vh; }
  .sr-verb:nth-child(3) { margin-top: 4vh; }
  .sr-verb__text { font-size: var(--s-body); }
}
.sr-verb:nth-child(1) .sr-verb__img { object-position: 92% 35%; }
.sr-verb:nth-child(2) .sr-verb__img { object-position: 60% 50%; }
.sr-verb:nth-child(3) .sr-verb__img { object-position: 45% 50%; }

/* ── the stylist(s): the lead portrait large, beside it her words and two pieces of work ── */
.sr-team { padding: clamp(72px, 10vw, 160px) var(--s-m); background: var(--sr-sand); }
.sr-lead { display: grid; gap: 28px; }
.sr-lead__ph { margin: 0; }
.sr-lead__ph img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sr-lead__side { display: grid; gap: 28px; align-content: start; }
.sr-person__text { display: grid; gap: 10px; justify-items: start; }
.sr-person__text h3, .sr-more h3 { margin: 0; font: 400 var(--s-h3)/1 var(--s-disp); letter-spacing: -.02em; }
.sr-person__role { margin: 0; color: var(--s-soft); font-size: 1rem; font-weight: 500; }
.sr-person__bio { margin: 6px 0 12px; max-width: 34ch; font-size: var(--s-lead); line-height: 1.4; }
.sr-person__next .next-place, .sr-more__next .next-place { display: none; }
.sr-team__work { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sr-work { margin: 0; }
.sr-work img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sr-work figcaption { margin-top: 10px; font-size: var(--s-small); line-height: 1.45; color: var(--s-tx); }
.sr-team__more { list-style: none; margin: 64px 0 0; padding: 0; display: grid; gap: 40px; }
.sr-more p { margin: 6px 0 0; max-width: 40ch; }
.sr-more__next { display: inline-block; margin-top: 10px; color: var(--s-acc); font-weight: 600; }
@media (min-width: 900px) {
  .sr-lead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .sr-lead__ph { grid-column: 1 / 7; position: sticky; top: calc(var(--hd-h, 64px) + 24px); }
  .sr-lead__ph img { max-height: calc(100svh - var(--hd-h, 64px) - 48px); }
  .sr-lead__side { grid-column: 8 / 13; gap: 40px; padding-top: 8px; }
  .sr-team__work { gap: 20px; }
  .sr-work:nth-child(2) { margin-top: 64px; }
  .sr-team__more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ── questions on the night ground, the tools beside them (above them on a phone) ── */
.sr-faq { display: grid; gap: 32px; padding: clamp(72px, 10vw, 160px) var(--s-m); background: var(--sr-night); color: var(--sr-on-field); }
.sr-faq__ph { margin: 28px 0 0; }
.sr-faq__ph img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; }
.sr-faq__text p { margin: 0 0 24px; break-inside: avoid; color: var(--sr-on-field-soft); }
.sr-faq__text b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 1.1875rem; color: var(--sr-on-field); }
@media (min-width: 900px) {
  .sr-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .sr-faq__side { grid-column: 1 / 5; }
  .sr-faq__ph img { aspect-ratio: 4 / 5; }
  .sr-faq__text { grid-column: 6 / 13; columns: 2; column-gap: 48px; padding-top: 12px; }
}

/* ── visit: the street, then the addresses on the green field ── */
.sr-visit { scroll-margin-top: var(--hd-h, 64px); }
.sr-visit__street { margin: 0; height: 64svh; min-height: 360px; overflow: hidden; }
.sr-visit__street img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.sr-visit__field { display: grid; gap: 48px; padding: clamp(56px, 7vw, 112px) var(--s-m) clamp(80px, 7vw, 104px); background: var(--s-acc); color: var(--on-accent); }
.sr-visit__say { margin: 0; max-width: 18ch; font: 400 var(--s-h3)/1.05 var(--s-disp); letter-spacing: -.02em; }
.sr-visit__places { display: grid; gap: 40px; }
.sr-place { display: grid; gap: 12px; align-content: start; }
.sr-place__name { font-weight: 600; }
.sr-place__addr { color: var(--on-accent); text-decoration: none; font: 400 var(--s-h3)/1 var(--s-disp); letter-spacing: -.025em; transition: color .25s; }
.sr-place__addr:hover { color: var(--sr-g2); }
.sr-place__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 1rem; }
.sr-place .place__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 1rem; }
.sr-place .place__nav span { color: var(--on-accent); }
.sr-place .place__nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 0; border-radius: 2px; background: var(--gold-light); color: var(--on-accent); text-decoration: none; box-shadow: none; transition: background-color .2s, transform .3s var(--sr-ease); } /* taste-skill-ignore: removes the base ring shadow */
.sr-place .place__nav a:hover { background: var(--s-bg); color: var(--s-tx); transform: translateY(-2px); }
.sr-visit__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.sr-visit__note { margin: 0; max-width: 52ch; font-size: 1rem; }
.sr-visit__note a { color: var(--on-accent); }
@media (min-width: 900px) { .sr-visit__places { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 799px) { .sr-visit__street { height: 46svh; } }

/* ── entrances: the parts of each section, once (only when plaukai.js has marked the html) ── */
@media (prefers-reduced-motion: no-preference) {
  .sr-js .sr-in { transition: opacity .9s var(--sr-ease) var(--d, 0s), transform .9s var(--sr-ease) var(--d, 0s); }
  .sr-js .sr-in:not(.is-in) { opacity: 0; transform: translateY(30px); }
}

/* ── header and footer of this design ── */
.theme-plaukai .hd--over:not(.is-solid) { color: var(--s-bg); }
.theme-plaukai .b-mark .b-gilt { color: var(--s-tx); font-family: var(--s-disp); font-weight: 500; letter-spacing: -.015em; text-transform: none; text-shadow: none; font-size: 1.75rem; line-height: 1.05; } /* taste-skill-ignore: resets the base design's shadow */
.theme-plaukai .hd--over:not(.is-solid) .b-gilt { color: var(--s-bg); }
.theme-plaukai .btn--gold, .theme-plaukai .btn--cobalt, .theme-plaukai .b-btn--gilt, .theme-plaukai .btn--accent { background: var(--s-acc); background-image: none; color: var(--on-accent); box-shadow: none; border-radius: 2px; } /* taste-skill-ignore: resets the base design's shadow */
.theme-plaukai .b-btn--gilt::after, .theme-plaukai .btn--accent::after { display: none; }
.theme-plaukai .btn, .theme-plaukai .consent { border-radius: 2px; }
.theme-plaukai .ft { background: var(--gold-deep); color: var(--chalk-2); border-top: 0; }
.theme-plaukai .b-ft__sign .b-gilt { color: var(--s-bg); font-family: var(--s-disp); font-weight: 400; letter-spacing: -.02em; text-transform: none; text-shadow: none; } /* taste-skill-ignore: resets the base design's shadow */
.theme-plaukai .b-ft__tagline { color: var(--s-bg); }
.theme-plaukai .ft .place { color: var(--s-tx); }
.page-home.theme-plaukai .b-ft__grid > .b-ft__col:has(.places) { display: none; }
.theme-plaukai h1, .theme-plaukai h2, .theme-plaukai h3 { font-family: var(--s-disp); }
.theme-plaukai .place__nav a { border-radius: 2px; box-shadow: none; } /* taste-skill-ignore: removes the base ring shadow */

/* header: the wordmark is the logo; the booking button is this design's own button */
.theme-plaukai .b-hd { font-family: var(--s-text); }
.theme-plaukai .b-book { height: 44px; padding: 0 20px; border-radius: 2px; background: var(--s-acc); color: var(--on-accent); font: 500 1rem/1 var(--s-text); letter-spacing: .02em; transition: background-color .25s, transform .3s var(--sr-ease); }
.theme-plaukai .b-book:hover, .theme-plaukai .b-book[aria-current] { background: var(--gold-deep); }
.theme-plaukai .hd--over:not(.is-solid) .b-book { background: var(--s-bg); color: var(--s-tx); }
.theme-plaukai .b-nav__link { font-family: var(--s-text); font-weight: 500; font-size: 1.0625rem; }
@media (min-width: 1040px) { .theme-plaukai .b-mark .b-gilt { font-size: 2rem; } .theme-plaukai .b-book { height: 48px; padding: 0 24px; } }
/* footer: no small grey text on the deep green */
.theme-plaukai .ft { font-family: var(--s-text); }
.theme-plaukai .b-ft__head { color: var(--sr-brass-light); font-size: .9375rem; font-weight: 600; }
.theme-plaukai .b-ft__legal { color: var(--sr-on-field-soft); font-size: .875rem; }
.theme-plaukai .b-ft__intro a, .theme-plaukai .b-ft__col a { color: var(--sr-on-field); font-size: 1.0625rem; }

/* the cover's moving picture: fades in over the photo once it plays (phone file is a portrait crop) */
.sr-cover__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.sr-cover__vid.is-on { opacity: 1; }
@media (max-width: 699px) { .sr-cover__vid { object-position: 50% 50%; } }
@media (prefers-reduced-motion: reduce) { .sr-cover__vid { display: none; } }