/* Vitrine V14 — сайты-примеры. Цвета и шрифты темы — css/themes.css (--s-*). Сначала телефон. */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:76px; }
body { margin:0; background:#1F1714; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
h1, h2, h3, p, figure, dl, dd, ul { margin:0; }
ul { padding:0; list-style:none; }
a { color:inherit; }
:focus-visible { outline:2.5px solid currentColor; outline-offset:3px; }

/* полоса Vitrine */
.rib { display:flex; align-items:center; gap:14px; min-height:52px; padding:6px max(14px, env(safe-area-inset-left)); background:#1F1714; color:#F7F0EC; font:500 14px/1.3 'Instrument Sans', system-ui, sans-serif; }
.rib-back { display:inline-flex; align-items:center; gap:7px; min-height:44px; text-decoration:none; font-weight:700; font-stretch:75%; font-size:20px; letter-spacing:-0.02em; }
.rib-back svg { width:22px; height:22px; color:#F19A82; }
.rib-t { flex:1; min-width:0; display:flex; align-items:center; gap:10px; color:#CDBFB8; }
.rib-tag { flex:none; padding:3px 9px; border-radius:999px; background:#3A2D28; color:#F7F0EC; font-size:12px; font-weight:600; letter-spacing:.04em; }
.rib-long { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rib-cta { flex:none; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; background:#CC3D22; color:#fff; text-decoration:none; font-weight:600; }
@media (max-width: 620px) { .rib-long { display:none; } .rib-t { flex:1; } }

/* каркас */
.s { background:var(--s-bg); color:var(--s-ink); font-family:var(--s-body); font-size:17px; line-height:1.55; }
.s-nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:24px; padding:12px clamp(20px, 5vw, 64px); background:color-mix(in srgb, var(--s-bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.s-logo { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:clamp(22px, 2.2vw, 28px); line-height:1; text-decoration:none; margin-right:auto; white-space:nowrap; }
.s-nav nav { display:flex; gap:28px; font-size:15px; }
.s-nav nav a { text-decoration:none; color:var(--s-mute); padding:10px 0; }
.s-nav nav a:hover { color:var(--s-ink); }
.s-btn { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 28px; border-radius:var(--s-rad); background:var(--s-acc); color:var(--s-acc-ink); font-weight:600; font-size:16.5px; text-decoration:none; text-align:center; line-height:1.2; transition:transform .25s ease, box-shadow .25s ease; }
.s-btn:hover { transform:translateY(-1px); box-shadow:0 10px 24px -14px var(--s-acc); }
.s-btn.is-pinged { box-shadow:0 0 0 6px color-mix(in srgb, var(--s-acc) 25%, transparent); }
.s-btn-sm { min-height:42px; padding:0 18px; font-size:14.5px; }
.s-btn-line { background:transparent; color:var(--s-ink); box-shadow:inset 0 0 0 1.5px var(--s-ink); }
.s-link { display:inline-flex; align-items:center; min-height:44px; font-weight:500; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; }
.s-ctas { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }

.s-kicker { font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--s-mute); }
.s-h1 { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:clamp(42px, 6.4vw, 92px); line-height:.98; text-wrap:balance; }
.s-intro { font-size:clamp(17px, 1.4vw, 19px); color:var(--s-mute); max-width:30em; }
.s-h2 { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:clamp(34px, 4vw, 56px); line-height:1; margin-bottom:clamp(24px, 3vw, 40px); }

/* первый экран: текст + фото */
.s-hero { position:relative; max-width:1280px; margin:0 auto; padding:clamp(20px, 3vw, 48px) clamp(20px, 5vw, 64px) clamp(40px, 5vw, 72px); display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:clamp(28px, 5vw, 80px); align-items:center; }
.s-hero-txt { display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.s-hero-img { position:relative; }
.s-hero-img img { width:100%; aspect-ratio:4 / 5; object-fit:cover; border-radius:var(--s-img-rad); }
.s-badge { position:absolute; left:-18px; bottom:28px; padding:12px 18px; border-radius:var(--s-rad); background:var(--s-surf); color:var(--s-ink); font-size:15px; box-shadow:0 18px 36px -20px rgba(0,0,0,.45); }
.s-badge b { font-weight:700; }

/* первый экран на всю ширину */
.h-full .s-hero { max-width:none; min-height:min(92svh, 860px); padding:0; display:flex; align-items:flex-end; color:#fff; }
.s-hero-bg { position:absolute; inset:0; }
.s-hero-bg img { width:100%; height:100%; object-fit:cover; }
.h-full .s-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.62) 100%), linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,0) 70%); }
.h-full .s-hero-txt { position:relative; z-index:1; width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(20px, 5vw, 64px) clamp(36px, 5vw, 72px); }
.h-full .s-kicker, .h-full .s-intro { color:rgba(255,255,255,.86); }
.h-full .s-h1 { max-width:13ch; }
.h-full .s-hero .s-btn { background:#fff; color:#111; }
.h-full .s-hero .s-link { color:#fff; }

/* первый экран «указатель» (тату) */
.h-index .s-hero { display:block; }
.s-giant { font-family:var(--s-disp); font-weight:800; text-transform:uppercase; letter-spacing:-0.04em; font-size:clamp(64px, 15vw, 232px); line-height:.82; margin-bottom:clamp(24px, 3vw, 44px); }
.s-hero-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 64px); align-items:end; }
.h-index .s-h1 { font-size:clamp(28px, 3vw, 42px); }

/* факты */
.s-facts { max-width:1280px; margin:0 auto; padding:0 clamp(20px, 5vw, 64px); display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.s-facts div { padding:22px 0; border-top:1.5px solid var(--s-ink); font-size:16px; font-weight:500; }
.s-facts div + div { padding-left:24px; }
.s-facts span { display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--s-mute); margin-bottom:4px; }

.s-sec { max-width:1280px; margin:0 auto; padding:clamp(64px, 8vw, 120px) clamp(20px, 5vw, 64px) 0; }

/* услуги и цены */
.s-menu li { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:22px 0; border-top:1px solid var(--s-line); }
.s-menu li:last-child { border-bottom:1px solid var(--s-line); }
.s-svc h3 { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:clamp(22px, 2.2vw, 30px); line-height:1.1; }
.s-svc p { margin-top:6px; color:var(--s-mute); font-size:15.5px; }
.s-meta { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; }
.s-meta span { font-size:13.5px; color:var(--s-mute); }
.s-meta b { font-size:clamp(18px, 1.6vw, 22px); font-weight:700; white-space:nowrap; }

/* работы */
.s-gal { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(10px, 1.4vw, 20px); }
.s-gal figure { min-width:0; }
.s-gal img { width:100%; aspect-ratio:3 / 4; object-fit:cover; }
.s-gal figcaption { margin-top:10px; font-size:14px; color:var(--s-mute); display:flex; gap:10px; }
.s-gal figcaption i { font-style:normal; display:none; }

/* о мастере */
.s-about { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1fr); gap:clamp(28px, 5vw, 80px); align-items:center; }
.s-about img { width:100%; aspect-ratio:3 / 4; object-fit:cover; }
.s-about-p { font-size:clamp(19px, 1.7vw, 24px); line-height:1.45; }
.s-sign { margin-top:20px; font-family:var(--s-disp); font-weight:var(--s-disp-w); font-size:28px; }

/* перед визитом */
.s-know dl { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(24px, 4vw, 64px); }
.s-know dl div { padding:22px 0; border-top:1px solid var(--s-line); }
.s-know dt { font-weight:700; font-size:18px; }
.s-know dd { margin-top:4px; color:var(--s-mute); }

/* визит */
.s-visit { padding-bottom:clamp(64px, 8vw, 120px); }
.s-addr { font-family:var(--s-disp); font-weight:var(--s-disp-w); text-transform:var(--s-disp-tr); letter-spacing:var(--s-disp-ls); font-size:clamp(26px, 3vw, 40px); line-height:1.15; max-width:24ch; }
.s-hours { margin-top:12px; color:var(--s-mute); font-size:18px; }
.s-visit .s-ctas { margin-top:28px; }
.s-ig { margin-top:24px; color:var(--s-mute); font-size:15px; }
.s-ig a { color:var(--s-ink); font-weight:600; }
.s-foot { display:flex; flex-wrap:wrap; gap:8px 28px; align-items:center; padding:26px clamp(20px, 5vw, 64px) calc(26px + env(safe-area-inset-bottom)); border-top:1px solid var(--s-line); font-size:14px; color:var(--s-mute); }
.s-foot-n { color:var(--s-ink); font-weight:600; }
.s-made { margin-left:auto; }
.s-sticky { display:none; }

/* ---------- темы ---------- */
.t-lashes .s-h1, .t-lashes .s-h2, .t-lashes .s-addr { font-style:italic; }
.t-lashes .s-hero-img img, .t-hair .s-hero-img img { border-radius:999px 999px 18px 18px; }
.t-lashes .s-gal img { border-radius:999px 999px 6px 6px; }
.t-lashes .s-about img, .t-hair .s-about img { border-radius:999px 999px 18px 18px; }

.t-makeup .s-kicker { letter-spacing:.32em; }
.t-makeup .s-h1 { font-weight:500; }
.t-makeup .s-svc h3 { font-weight:500; }
.t-makeup .s-gal { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.t-makeup .s-gal figure:nth-child(3n+2) { margin-top:clamp(24px, 4vw, 64px); }
.t-makeup .s-btn { letter-spacing:.06em; text-transform:uppercase; font-size:14px; }

.t-nails .s-hero-img img { border-radius:32px; transform:rotate(2.5deg); }
.t-nails .s-badge { border-radius:999px; background:var(--s-acc); color:#fff; transform:rotate(-3deg); }
.t-nails .s-gal img, .t-nails .s-about img { border-radius:24px; }
.t-nails .s-menu li { border:0; margin-bottom:10px; padding:20px 22px; border-radius:22px; background:var(--s-surf); }
.t-nails .s-menu li:last-child { border:0; }
.t-nails .s-facts div { border-top-width:3px; }

.t-hair .s-gal img { border-radius:18px; }
.t-hair .s-h1 { letter-spacing:-0.02em; }

.s.t-tattoo { font-size:15.5px; }
.t-tattoo .s-kicker, .t-tattoo .s-facts span { font-family:var(--s-body); letter-spacing:.06em; }
.t-tattoo .s-hero-img img { aspect-ratio:4 / 3; filter:grayscale(.15) contrast(1.05); }
.t-tattoo .s-gal { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px; }
.t-tattoo .s-gal figcaption i { display:inline; font-weight:700; color:var(--s-ink); }
.t-tattoo .s-menu li { border-top:1.5px solid var(--s-ink); }
.t-tattoo .s-svc h3 { font-size:clamp(18px, 1.7vw, 22px); }
.t-tattoo .s-btn { text-transform:uppercase; letter-spacing:.06em; font-size:14px; }
.t-tattoo .s-sign { text-transform:uppercase; }

.t-cakes .s-hero-img img, .t-cakes .s-gal img, .t-cakes .s-about img { border-radius:40px; }
.t-cakes .s-badge { background:var(--s-soft); }
.t-cakes .s-facts div { border-top-color:var(--s-acc); }
.t-cakes .s-h2 em, .t-cakes .s-h1 { font-style:normal; }

.t-photo .s-h1 { font-size:clamp(44px, 7vw, 108px); line-height:.95; letter-spacing:.02em; }
.t-photo .s-h2 { letter-spacing:.04em; }
.t-photo .s-gal { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.t-photo .s-gal figure:first-child { grid-column:1 / -1; }
.t-photo .s-gal figure:first-child img { aspect-ratio:16 / 9; }
.t-photo .s-svc h3 { letter-spacing:.06em; }

/* ---------- телефон ---------- */
@media (max-width: 860px) {
  .s-nav nav { display:none; }
  .s-hero, .s-hero-row, .s-about { grid-template-columns:1fr; }
  .s-hero-img { max-width:520px; }
  .s-badge { left:12px; bottom:16px; }
  .s-facts { grid-template-columns:1fr; }
  .s-facts div + div { padding-left:0; border-top-width:1px; }
  .s-gal { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .t-tattoo .s-gal, .t-makeup .s-gal { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .t-makeup .s-gal figure:nth-child(3n+2) { margin-top:0; }
  .t-makeup .s-gal figure:nth-child(even) { margin-top:28px; }
  .s-know dl { grid-template-columns:1fr; }
  .s-sticky { position:fixed; z-index:30; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); display:flex; box-shadow:0 14px 30px -12px rgba(0,0,0,.45); opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .3s ease, transform .35s ease; }
  .s-sticky.is-on { opacity:1; transform:none; pointer-events:auto; }
  .s-foot { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
  .s-made { margin-left:0; }
  .s-menu li { gap:16px; }
  .h-full .s-hero { min-height:88svh; }
}
@media (max-width: 420px) {
  .s-btn { padding:0 22px; }
  .s-ctas .s-btn { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; }
}