/* =============================================================================
 * LIOKS · three proposal variants
 * Loaded AFTER the host inline stylesheet. Scope: body[data-design="…"]
 * PROSTOR = photographic premium · TATTOO = old-school poster · PRIVAT = editorial
 * No pure #000/#fff, no purple-blue, no glass, no equal icon grids, no 3px stripe.
 * Real room photographs carry the surface; red is never just a flat fill.
 * ============================================================================= */

/* ─── SHARED OVERRIDES (all three variants) ─────────────────────────────────── */
body[data-design] {
  --ink:        #15090b;
  --surface:    #1c0d10;
  --text:       #f7f3ed;
  --muted:      #c4b6b1;
  --line:       rgba(247, 243, 237, 0.14);
  --btn:        #c61620;
  --text-red:   #ff5b62;
  background: var(--ink);
}
body[data-design] .site-header {
  background: linear-gradient(180deg, rgba(21,9,11,.96), rgba(21,9,11,.88) 70%, rgba(21,9,11,0));
  border-bottom: 1px solid rgba(228, 27, 35, 0.55);
}
body[data-design] .poster,
body[data-design] .gym-poster {
  display: none;
}
body[data-design] .step-no {
  -webkit-text-stroke-color: currentColor;
  color: transparent;
}
body[data-design] .reveal { transition: opacity 360ms cubic-bezier(.22,1,.36,1), transform 360ms cubic-bezier(.22,1,.36,1); }

/* Note: host variant-shell.css owns .ink-art absolute positioning/rotation, */
/*        hides .poster/.gym-poster/.scribble/.hero-visual corner brackets.  */
/*        We only retune per-variant position scales and opacity.           */

/* =============================================================================
 * 1. PROSTOR · photographic premium
 * Full-bleed gym16 hero, deep red/black scrim, asymmetric photo/text rhythm.
 * ============================================================================= */
body[data-design="prostor"] {
  --ink:        #15090b;
  --surface:    #1c0d10;
  --red:        #e41b23;
  --btn:        #c61620;
  --text-red:   #ff5b62;
  --muted:      #c4b6b1;
  --line:       rgba(247, 243, 237, 0.14);
}

body[data-design="prostor"] .hero {
  position: relative;
  padding: 0;
  background: #0c0608;
  overflow: hidden;
}
body[data-design="prostor"] .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "visual" "copy";
  align-items: stretch;
  min-height: clamp(560px, 92svh, 880px);
  gap: 0;
}
body[data-design="prostor"] .hero-visual {
  grid-area: visual;
  position: absolute;
  inset: 0;
  min-width: 0;
}
body[data-design="prostor"] .hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 38%;
  height: clamp(560px, 92svh, 880px);
  
}
body[data-design="prostor"] .hero-visual::before,
body[data-design="prostor"] .hero-visual::after {
  border-color: rgba(228, 27, 35, 0.7);
  width: 1.5rem;
  height: 1.5rem;
}
body[data-design="prostor"] .hero-visual::before { top: 1.4rem; left: 1.4rem; }
body[data-design="prostor"] .hero-visual::after  { top: 1.4rem; right: 1.4rem; }

body[data-design="prostor"] .strongman {
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  width: clamp(110px, 14vw, 168px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
body[data-design="prostor"] .scribble {
  position: absolute;
  left: 1.4rem;
  bottom: 1.4rem;
  background: rgba(21,9,11,.78);

  padding: 0.45rem 0.8rem 0.2rem;
  font-size: clamp(1.4rem, 2vw, 1.95rem);
}
body[data-design="prostor"] .hero-copy {
  grid-area: copy;
  position: relative;
  z-index: 3;
  align-self: end;
  max-width: 36rem;
  margin: 0 var(--pad) clamp(2.5rem, 7vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.5rem, 3vw, 2.4rem);
  background: linear-gradient(135deg, rgba(21,9,11,.92) 0%, rgba(138,15,23,.78) 100%);

  color: var(--text);
}
body[data-design="prostor"] .hero-copy .kicker { color: var(--text-red); }
body[data-design="prostor"] .hero-copy h1 { color: var(--text); }
body[data-design="prostor"] .hero-copy .lede { color: rgba(247,243,237,.92); }
body[data-design="prostor"] .hero-copy .rule { background: var(--text); height: 2px; }

/* red tattoo bird behind hero copy */
body[data-design="prostor"] .ink-hero {
  position: absolute;
  z-index: 1;
  left: -3vw;
  bottom: -4vw;
  width: clamp(220px, 38vw, 520px);
  opacity: .32;

}

/* GYM section · full width red, room photos */
body[data-design="prostor"] .gym {
  background: linear-gradient(180deg, #2a0a0e 0%, #6f0e15 100%);
  color: #fff5ec;
  padding: clamp(4rem, 8vw, 6rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="prostor"] .gym .label { color: #ffc9cb; }
body[data-design="prostor"] .gym .accent { color: #fff5ec; }
body[data-design="prostor"] .gym .wrap { position: relative; z-index: 1; }
body[data-design="prostor"] .gym h2 { color: #fff5ec; max-width: 22ch; }
body[data-design="prostor"] .gym .spread { gap: 1.5rem; }
body[data-design="prostor"] .gym .spread-copy { color: rgba(255,245,236,.9); max-width: 38rem; }
body[data-design="prostor"] .gym .spread-copy p { color: rgba(255,245,236,.9); }
body[data-design="prostor"] .gym .spread-main img { box-shadow: 0 18px 48px rgba(0,0,0,.4); }
body[data-design="prostor"] .gym .spread-side img { box-shadow: 0 14px 40px rgba(0,0,0,.35); }
body[data-design="prostor"] .gym .btn {
  background: #fff5ec; color: #6f0e15; border-color: #fff5ec;
}
body[data-design="prostor"] .gym .btn:hover { background: #111013; color: #fff5ec; border-color: #111013; }
body[data-design="prostor"] .ink-gym {
  position: absolute;
  z-index: 0;
  right: -4vw;
  top: -2vw;
  width: clamp(260px, 32vw, 480px);
  opacity: .18;
}

/* BAND · training · asymmetric photo/copy, bottom-strip tabs */
body[data-design="prostor"] .band {
  background: var(--surface);
  background-image:
    radial-gradient(1200px 600px at 0% 0%, rgba(228,27,35,.12), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(228,27,35,.08), transparent 60%);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}
body[data-design="prostor"] .band-head { max-width: 42rem; }
body[data-design="prostor"] .band .label { color: var(--text-red); }
body[data-design="prostor"] .tablist {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: .5rem 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
}
body[data-design="prostor"] .tab {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  min-height: 88px;
  padding: 1rem 1.1rem;
}
body[data-design="prostor"] .tab:last-child { border-right: 0; }
body[data-design="prostor"] .tab[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(228,27,35,.0), rgba(228,27,35,.18));
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--red);
}
body[data-design="prostor"] .panel-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
body[data-design="prostor"] .panel-photo img {
  aspect-ratio: 3/4;
  object-position: 50% 30%;
}
body[data-design="prostor"] .panel-copy h3 { font-size: clamp(2rem, 3.6vw, 3rem); }
body[data-design="prostor"] .panel-copy p { color: rgba(247,243,237,.78); }
body[data-design="prostor"] .ink-train {
  position: absolute;
  z-index: 0;
  left: -5vw;
  top: 30%;
  width: clamp(220px, 30vw, 420px);
  opacity: .14;
  pointer-events: none;
}

/* GALLERY · mosaic */
body[data-design="prostor"] .gallery {
  background: linear-gradient(180deg, var(--surface) 0%, #15090b 100%);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
}
body[data-design="prostor"] .gallery .label { color: var(--text-red); }
body[data-design="prostor"] .gallery-head p { color: var(--muted); max-width: 42rem; }
body[data-design="prostor"] .mosaic { gap: .65rem; }
body[data-design="prostor"] .mosaic a { position: relative; }
body[data-design="prostor"] .mosaic a::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(228,27,35,0) 60%, rgba(228,27,35,.25));
  opacity: 0; transition: opacity 220ms cubic-bezier(.22,1,.36,1);
}
body[data-design="prostor"] .mosaic a:hover::after { opacity: 1; }

/* OPEN GYM · photo beside steps */
body[data-design="prostor"] .open {
  background:
    linear-gradient(180deg, rgba(21,9,11,.85), rgba(21,9,11,.92)),
    url("../assets/gym-19-1600.webp") center/cover no-repeat;
  color: var(--text);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="prostor"] .open .label { color: var(--text-red); }
body[data-design="prostor"] .open .step-no { color: transparent; -webkit-text-stroke: 1.5px #ffb1b4; }
body[data-design="prostor"] .steps p { color: rgba(247,243,237,.78); }
body[data-design="prostor"] .open .cafe { gap: clamp(1.5rem, 4vw, 3.5rem); }
body[data-design="prostor"] .open .cafe figure img {
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  border: 1px solid rgba(228,27,35,.3);
}
body[data-design="prostor"] .offer dt { color: var(--text-red); }
body[data-design="prostor"] .offer div { border-top-color: rgba(247,243,237,.18); }
body[data-design="prostor"] .ink-open {
  position: absolute;
  z-index: 0;
  right: -6vw;
  bottom: -4vw;
  width: clamp(280px, 36vw, 520px);
  opacity: .22;
}

/* CONTACT · red-drenched field with eagle/rose silhouette */
body[data-design="prostor"] .contact {
  background:
    radial-gradient(900px 600px at 100% 0%, rgba(228,27,35,.45), transparent 60%),
    linear-gradient(180deg, #6f0e15 0%, #2a0a0e 100%);
  color: #fff5ec;
  padding: clamp(4rem, 8vw, 6.5rem) 0 5rem;
  border-top: 0;
  position: relative;
  overflow: hidden;
}
body[data-design="prostor"] .contact .label { color: #ffc9cb; }
body[data-design="prostor"] .contact h2 { color: #fff5ec; max-width: 18ch; }
body[data-design="prostor"] .contact-list a,
body[data-design="prostor"] .contact-list .place {
  border-bottom-color: rgba(255,245,236,.22);
}
body[data-design="prostor"] .contact-list a .lbl,
body[data-design="prostor"] .contact-list .place .lbl { color: rgba(255,245,236,.7); }
body[data-design="prostor"] .contact-list a:hover .big { color: #fff5ec; }
body[data-design="prostor"] .contact .big { color: #fff5ec; }
body[data-design="prostor"] .contact-note { color: rgba(255,245,236,.78); }
body[data-design="prostor"] .contact .btn {
  background: #fff5ec; color: #6f0e15; border-color: #fff5ec;
}
body[data-design="prostor"] .contact .btn:hover { background: #111013; color: #fff5ec; border-color: #111013; }
body[data-design="prostor"] .contact .text-link { color: #fff5ec; }
body[data-design="prostor"] .ink-contact {
  position: absolute;
  z-index: 0;
  left: -4vw;
  bottom: -6vw;
  width: clamp(360px, 42vw, 620px);
  opacity: .28;
}
body[data-design="prostor"] .site-footer {
  background: #0c0608;
  border-top: 1px solid rgba(228,27,35,.4);
}
body[data-design="prostor"] .legal a { color: rgba(255,245,236,.6); }
body[data-design="prostor"] .legal a:hover { color: #fff5ec; }

/* PROSTOR mobile */
@media (max-width: 899px) {
  body[data-design="prostor"] .hero-grid {
    grid-template-areas: "visual" "copy";
    min-height: 0;
  }
  body[data-design="prostor"] .hero-visual {
    position: relative;
    inset: auto;
    height: clamp(320px, 60vh, 520px);
  }
  body[data-design="prostor"] .hero-photo { height: 100%; }
  body[data-design="prostor"] .hero-copy {
    margin: 0 var(--pad) var(--pad);
    padding: 1.4rem;
  }
  body[data-design="prostor"] .panel-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-design="prostor"] .panel-photo img { aspect-ratio: 16/10; }
}

/* =============================================================================
 * 2. TATTOO · poster old-school gym DNA
 * Hero rich RED, gym03 mural on right, LARGE strongman, bird silhouette left.
 * ============================================================================= */
body[data-design="tattoo"] {
  --ink:        #170a0d;
  --surface:    #220d11;
  --red:        #b01825;
  --btn:        #c61620;
  --text-red:   #ffd0a8;
  --muted:      #d6b9b3;
  --line:       rgba(247, 243, 237, 0.18);
}

body[data-design="tattoo"] body { background: var(--ink); }

body[data-design="tattoo"] .site-header {
  background: linear-gradient(180deg, rgba(176,24,37,.96), rgba(176,24,37,.85) 70%, rgba(176,24,37,0));
  border-bottom: 0;
}
body[data-design="tattoo"] .site-nav a { color: #fff5ec; }
body[data-design="tattoo"] .site-nav a:hover { color: #1a0907; }
body[data-design="tattoo"] .site-header .btn-book {
  background: #1a0907; color: #ffd0a8; border-color: #1a0907;
}
body[data-design="tattoo"] .site-header .btn-book:hover { background: #fff5ec; color: #1a0907; }

/* HERO · rich red, mural photo on right */
body[data-design="tattoo"] .hero {
  position: relative;
  padding: 0;
  background:
    radial-gradient(800px 500px at 0% 0%, rgba(255,235,200,.10), transparent 60%),
    linear-gradient(135deg, #b01825 0%, #6f0e15 100%);
  overflow: hidden;
  color: #fff5ec;
}
body[data-design="tattoo"] .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  gap: 0;
  min-height: clamp(620px, 96svh, 920px);
}
body[data-design="tattoo"] .hero-copy {
  position: relative;
  z-index: 3;
  padding: clamp(2rem, 5vw, 4rem) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 40rem;
}
body[data-design="tattoo"] .hero-copy .kicker {
  color: #ffd0a8;
  font-family: "Over the Rainbow", cursive;
}
body[data-design="tattoo"] .hero-copy h1 {
  color: #fff5ec;
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
body[data-design="tattoo"] .hero-copy .rule { background: #ffd0a8; height: 3px; width: 5rem; }
body[data-design="tattoo"] .hero-copy .lede { color: rgba(255,245,236,.92); }
body[data-design="tattoo"] .hero-copy .btn {
  background: #1a0907; color: #ffd0a8; border-color: #1a0907;
}
body[data-design="tattoo"] .hero-copy .btn:hover { background: #fff5ec; color: #1a0907; border-color: #fff5ec; }
body[data-design="tattoo"] .hero-copy .text-link { color: #1a0907; font-weight: 800; }

/* bird silhouette fills left field */
body[data-design="tattoo"] .ink-hero {
  position: absolute;
  z-index: 1;
  left: -6vw;
  top: 8%;
  width: clamp(280px, 42vw, 620px);
  opacity: .55;
  mix-blend-mode: multiply;
}

/* mural photo right with LARGE strongman overlay */
body[data-design="tattoo"] .hero-visual {
  position: relative;
  min-width: 0;
  background: #15090b;
}
body[data-design="tattoo"] .hero-visual::before,
body[data-design="tattoo"] .hero-visual::after {
  width: 1.6rem;
  height: 1.6rem;
  border-color: #ffd0a8;
}
body[data-design="tattoo"] .hero-visual::before { top: 1rem; left: 1rem; }
body[data-design="tattoo"] .hero-visual::after  { top: 1rem; right: 1rem; }
body[data-design="tattoo"] .hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: clamp(420px, 80svh, 820px);
  object-fit: cover;
  object-position: 50% 38%;
  
}
body[data-design="tattoo"] .strongman {
  position: absolute;
  z-index: 4;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(.5rem, 2vw, 1.5rem);
  width: clamp(220px, 30vw, 420px);
  height: auto;
  filter: drop-shadow(0 8px 28px rgba(0,0,0,.55));
  pointer-events: none;
}
body[data-design="tattoo"] .scribble {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(26,9,7,.86);
  color: #ffd0a8;

  padding: .45rem .8rem .2rem;
  font-size: clamp(1.4rem, 2vw, 1.95rem);
}

/* GYM section · warm near-black red */
body[data-design="tattoo"] .gym {
  background: linear-gradient(180deg, #220d11 0%, #6f0e15 100%);
  color: #fff5ec;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="tattoo"] .gym .label { color: #ffd0a8; }
body[data-design="tattoo"] .gym h2 { color: #fff5ec; }
body[data-design="tattoo"] .gym .accent { color: #ffd0a8; }
body[data-design="tattoo"] .gym .spread-copy { color: rgba(255,245,236,.9); }
body[data-design="tattoo"] .gym .spread-copy p { color: rgba(255,245,236,.9); }
body[data-design="tattoo"] .gym .btn {
  background: #fff5ec; color: #1a0907; border-color: #fff5ec;
}
body[data-design="tattoo"] .gym .btn:hover { background: #1a0907; color: #ffd0a8; border-color: #1a0907; }
body[data-design="tattoo"] .ink-gym {
  position: absolute;
  z-index: 0;
  right: -5vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 38vw, 540px);
  opacity: .22;
  mix-blend-mode: screen;
}

/* BAND · training · dark cherry with large ghost bird */
body[data-design="tattoo"] .band {
  background: #170a0d;
  background-image:
    radial-gradient(1000px 600px at 0% 100%, rgba(228,27,35,.18), transparent 60%);
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="tattoo"] .band .label { color: var(--text-red); }
body[data-design="tattoo"] .band-head h2 { color: #fff5ec; }
body[data-design="tattoo"] .tablist { gap: .5rem; }
body[data-design="tattoo"] .tab {
  background: rgba(34,13,17,.6);
  border: 1px solid rgba(228,27,35,.35);
}
body[data-design="tattoo"] .tab[aria-selected="true"] {
  background: linear-gradient(180deg, #b01825 0%, #6f0e15 100%);
  border-color: #b01825;
  color: #fff5ec;
  box-shadow: none;
}
body[data-design="tattoo"] .tab[aria-selected="true"] .tab-kicker { color: #ffd0a8; }
body[data-design="tattoo"] .panel-copy h3 { color: #fff5ec; }
body[data-design="tattoo"] .panel-copy p { color: rgba(247,243,237,.78); }
body[data-design="tattoo"] .panel-photo img {
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
body[data-design="tattoo"] .ink-train {
  position: absolute;
  z-index: 0;
  right: -8vw;
  top: 5%;
  width: clamp(360px, 46vw, 640px);
  opacity: .28;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* GALLERY · red textured with pale readable heading */
body[data-design="tattoo"] .gallery {
  background:
    linear-gradient(180deg, rgba(176,24,37,.12), rgba(176,24,37,.04)),
    #220d11;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="tattoo"] .gallery .label { color: #ffd0a8; }
body[data-design="tattoo"] .gallery-head h2 { color: #fff5ec; }
body[data-design="tattoo"] .gallery-head p { color: rgba(255,245,236,.7); }
body[data-design="tattoo"] .mosaic a {
  border: 1px solid rgba(228,27,35,.35);
  box-shadow: 0 14px 36px rgba(0,0,0,.4);
  transition: transform 220ms cubic-bezier(.22,1,.36,1);
}
body[data-design="tattoo"] .mosaic a:hover { transform: translateY(-4px); }
body[data-design="tattoo"] .ink-gym { /* re-used — birds visible at every red surface */ }

/* OPEN GYM · rich near-black red photograph background */
body[data-design="tattoo"] .open {
  background:
    linear-gradient(180deg, rgba(21,9,11,.88), rgba(21,9,11,.95)),
    url("../assets/gym-17-1600.webp") center/cover no-repeat;
  color: #fff5ec;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="tattoo"] .open .label { color: #ffd0a8; }
body[data-design="tattoo"] .open h2 { color: #fff5ec; }
body[data-design="tattoo"] .open .open-lead { color: rgba(255,245,236,.88); }
body[data-design="tattoo"] .step-no { -webkit-text-stroke-color: #ffd0a8; color: transparent; }
body[data-design="tattoo"] .steps h3 { color: #fff5ec; }
body[data-design="tattoo"] .steps p { color: rgba(255,245,236,.7); }
body[data-design="tattoo"] .open .cafe figure img {
  border: 1px solid rgba(228,27,35,.4);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
body[data-design="tattoo"] .offer dt { color: #ffd0a8; }
body[data-design="tattoo"] .open .btn {
  background: #b01825; color: #fff5ec; border-color: #b01825;
}
body[data-design="tattoo"] .open .btn:hover { background: #fff5ec; color: #1a0907; border-color: #fff5ec; }
body[data-design="tattoo"] .ink-open {
  position: absolute;
  z-index: 0;
  left: -6vw;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 38vw, 540px);
  opacity: .22;
  mix-blend-mode: multiply;
}

/* CONTACT · compact large typography */
body[data-design="tattoo"] .contact {
  background: #170a0d;
  border-top: 4px solid #b01825;
  color: #fff5ec;
  padding: clamp(4rem, 8vw, 6.5rem) 0 5rem;
  position: relative;
  overflow: hidden;
}
body[data-design="tattoo"] .contact .label { color: #ffd0a8; }
body[data-design="tattoo"] .contact h2 {
  color: #fff5ec;
  font-size: clamp(2.5rem, 5.6vw, 5.4rem);
  letter-spacing: -0.04em;
  max-width: 16ch;
}
body[data-design="tattoo"] .contact .big {
  color: #fff5ec;
  font-weight: 900;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
}
body[data-design="tattoo"] .contact .lbl { color: rgba(255,245,236,.6); }
body[data-design="tattoo"] .contact-list a, body[data-design="tattoo"] .contact-list .place {
  border-bottom-color: rgba(228,27,35,.35);
}
body[data-design="tattoo"] .contact-list a:hover .big { color: #ffd0a8; }
body[data-design="tattoo"] .contact .btn {
  background: #b01825; color: #fff5ec; border-color: #b01825;
}
body[data-design="tattoo"] .contact .btn:hover { background: #fff5ec; color: #1a0907; border-color: #fff5ec; }
body[data-design="tattoo"] .ink-contact {
  position: absolute;
  z-index: 0;
  right: -4vw;
  bottom: -8vw;
  width: clamp(360px, 42vw, 620px);
  opacity: .35;
}
body[data-design="tattoo"] .site-footer {
  background: #0c0608;
  border-top: 1px solid rgba(228,27,35,.4);
}

/* TATTOO mobile */
@media (max-width: 899px) {
  body[data-design="tattoo"] .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "copy";
    min-height: 0;
  }
  body[data-design="tattoo"] .hero-visual { order: 1; height: clamp(360px, 60vh, 540px); }
  body[data-design="tattoo"] .hero-copy { order: 2; padding: 1.6rem var(--pad) 2.5rem; }
  body[data-design="tattoo"] .hero-photo { min-height: 100%; }
  body[data-design="tattoo"] .strongman { width: clamp(160px, 36vw, 240px); right: .8rem; bottom: .6rem; }
}

/* =============================================================================
 * 3. PRIVAT · quiet editorial showroom
 * Asymmetric hero (gym20 + gym10 detail), dark cherry photo-backed, fine red highlights.
 * ============================================================================= */
body[data-design="privat"] {
  --ink:        #1a0d0e;
  --surface:    #221216;
  --red:        #c81520;
  --btn:        #c61620;
  --text-red:   #ff8a8e;
  --muted:      #c8b6b3;
  --line:       rgba(247, 243, 237, 0.14);
}

body[data-design="privat"] .site-header {
  background: linear-gradient(180deg, rgba(26,13,14,.95), rgba(26,13,14,.78) 70%, rgba(26,13,14,0));
  border-bottom: 1px solid rgba(200,21,32,.45);
}
body[data-design="privat"] .site-nav a:hover { color: var(--text-red); }
body[data-design="privat"] .site-header .btn-book {
  background: var(--red); color: #fff5ec; border-color: var(--red);
}
body[data-design="privat"] .site-header .btn-book:hover { background: #fff5ec; color: var(--red); border-color: #fff5ec; }

/* HERO · editorial asymmetric, gym20 + gym10 detail, photo-backed scrim */
body[data-design="privat"] .hero {
  position: relative;
  padding: 0;
  background: #0e0708;
  overflow: hidden;
  color: #fff5ec;
}
body[data-design="privat"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/gym-20-1600.webp") center/cover no-repeat;
  filter: brightness(.55);
  z-index: 0;
}
body[data-design="privat"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,13,14,.5) 0%, rgba(26,13,14,.82) 70%, #1a0d0e 100%);
  z-index: 1;
}
body[data-design="privat"] .hero .wrap { position: relative; z-index: 3; }
body[data-design="privat"] .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 3vw, 3rem);
  min-height: clamp(580px, 88svh, 820px);
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(2.5rem, 6vw, 5rem);
}
body[data-design="privat"] .hero-copy {
  max-width: 36rem;
  position: relative;
  z-index: 2;
  padding: 0 var(--pad);
}
body[data-design="privat"] .hero-copy .kicker {
  color: var(--text-red);
  font-family: "Over the Rainbow", cursive;
  margin-bottom: 1rem;
}
body[data-design="privat"] .hero-copy h1 {
  color: #fff5ec;
  font-weight: 900;
  font-size: clamp(2.8rem, 6.4vw, 5.8rem);
  letter-spacing: -0.04em;
  margin-bottom: 1.25rem;
}
body[data-design="privat"] .hero-copy .rule { background: var(--red); height: 2px; width: 4rem; }
body[data-design="privat"] .hero-copy .lede {
  color: rgba(255,245,236,.9);
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  max-width: 32rem;
}
body[data-design="privat"] .hero-copy .btn {
  background: var(--red); color: #fff5ec; border-color: var(--red);
}
body[data-design="privat"] .hero-copy .btn:hover { background: #fff5ec; color: var(--red); border-color: #fff5ec; }
body[data-design="privat"] .hero-copy .text-link { color: #fff5ec; }
body[data-design="privat"] .hero-copy .text-link:hover { color: var(--text-red); }

body[data-design="privat"] .hero-visual {
  position: relative;
  min-width: 0;
  z-index: 2;
  padding-right: var(--pad);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}
body[data-design="privat"] .hero-visual::before,
body[data-design="privat"] .hero-visual::after { display: none; }
body[data-design="privat"] .hero-photo {
  display: block;
  width: 100%;
  height: clamp(380px, 56vh, 600px);
  object-fit: cover;
  object-position: 50% 40%;
  box-shadow: 0 28px 64px rgba(0,0,0,.55);
  border: 1px solid rgba(200,21,32,.35);
}
body[data-design="privat"] .hero-detail {
  display: block;
  position: absolute;
  z-index: 3;
  right: var(--pad);
  bottom: clamp(1rem, 3vw, 2rem);
  width: clamp(150px, 22vw, 260px);
  aspect-ratio: 3/4;
  border: 4px solid #fff5ec;
  box-shadow: 0 22px 50px rgba(0,0,0,.55);
  overflow: hidden;
}
body[data-design="privat"] .hero-detail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body[data-design="privat"] .strongman {
  position: absolute;
  z-index: 4;
  right: clamp(8rem, 18vw, 14rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: clamp(80px, 10vw, 140px);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
body[data-design="privat"] .scribble {
  position: absolute;
  left: var(--pad);
  bottom: clamp(1rem, 3vw, 2rem);
  background: rgba(26,13,14,.78);
  color: var(--text-red);

  padding: .35rem .65rem .15rem;
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
}

body[data-design="privat"] .ink-hero {
  position: absolute;
  z-index: 1;
  left: -8vw;
  bottom: -10vw;
  width: clamp(380px, 50vw, 720px);
  opacity: .14;
}

/* GYM section · separate full width red header + paired photographs */
body[data-design="privat"] .gym {
  background: linear-gradient(180deg, #b01825 0%, #6f0e15 100%);
  color: #fff5ec;
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="privat"] .gym .label { color: #ffd0a8; }
body[data-design="privat"] .gym h2 { color: #fff5ec; max-width: 22ch; }
body[data-design="privat"] .gym .accent { color: #ffd0a8; }
body[data-design="privat"] .gym .spread-copy p { color: rgba(255,245,236,.9); }
body[data-design="privat"] .gym .spread-main img { box-shadow: 0 22px 56px rgba(0,0,0,.45); }
body[data-design="privat"] .gym .spread-side img { box-shadow: 0 18px 48px rgba(0,0,0,.4); }
body[data-design="privat"] .gym .btn {
  background: #fff5ec; color: #6f0e15; border-color: #fff5ec;
}
body[data-design="privat"] .gym .btn:hover { background: #1a0d0e; color: #fff5ec; border-color: #1a0d0e; }
body[data-design="privat"] .ink-gym {
  position: absolute;
  z-index: 0;
  right: -8vw;
  bottom: -4vw;
  width: clamp(280px, 32vw, 480px);
  opacity: .14;
}

/* BAND · training · reversed photo order, more spacing */
body[data-design="privat"] .band {
  background: var(--surface);
  padding: clamp(5rem, 9vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="privat"] .band .label { color: var(--text-red); }
body[data-design="privat"] .band-head { max-width: 44rem; margin-bottom: 2.5rem; }
body[data-design="privat"] .band-head h2 { font-weight: 900; }
body[data-design="privat"] .band-head p { color: var(--muted); font-size: 1.1rem; max-width: 36rem; }
body[data-design="privat"] .tablist { gap: .35rem; margin-bottom: 2.5rem; }
body[data-design="privat"] .tab {
  background: transparent;
  border: 1px solid rgba(200,21,32,.25);
}
body[data-design="privat"] .tab[aria-selected="true"] {
  background: var(--red); color: #fff5ec; border-color: var(--red);
}
body[data-design="privat"] .tab[aria-selected="true"] .tab-kicker { color: rgba(255,245,236,.85); }
body[data-design="privat"] .panel-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
/* PRIVAT reverses photo order: photo left, copy right */
body[data-design="privat"] .panel-grid > .panel-photo { order: 1; }
body[data-design="privat"] .panel-grid > .panel-copy { order: 2; }
body[data-design="privat"] .panel-photo img {
  aspect-ratio: 4/5;
  box-shadow: 0 24px 56px rgba(0,0,0,.45);
}
body[data-design="privat"] .panel-copy h3 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em;
}
body[data-design="privat"] .panel-copy p { color: rgba(247,243,237,.78); font-size: 1.05rem; }
body[data-design="privat"] .ink-train {
  position: absolute;
  z-index: 0;
  right: -10vw;
  bottom: -4vw;
  width: clamp(280px, 36vw, 520px);
  opacity: .10;
}

/* GALLERY · horizontal generous contact-sheet */
body[data-design="privat"] .gallery {
  background: linear-gradient(180deg, var(--surface) 0%, #15090b 100%);
  padding: clamp(4.5rem, 9vw, 7rem) 0;
}
body[data-design="privat"] .gallery .label { color: var(--text-red); }
body[data-design="privat"] .gallery-head { max-width: 44rem; margin-bottom: 2.5rem; }
body[data-design="privat"] .gallery-head p { color: var(--muted); font-size: 1.05rem; }
body[data-design="privat"] .mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(160px, 18vw, 220px);
  gap: .6rem;
}
body[data-design="privat"] .mosaic a {
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200,21,32,.18);
  transition: transform 240ms cubic-bezier(.22,1,.36,1), border-color 240ms cubic-bezier(.22,1,.36,1);
}
body[data-design="privat"] .mosaic a:hover { border-color: var(--red); }
body[data-design="privat"] .mosaic img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 320ms cubic-bezier(.22,1,.36,1);
}
body[data-design="privat"] .mosaic a:hover img { transform: scale(1.04); }
body[data-design="privat"] .mosaic a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
body[data-design="privat"] .mosaic a:nth-child(2) { grid-column: span 2; }
body[data-design="privat"] .mosaic a:nth-child(3) { grid-column: span 2; }
body[data-design="privat"] .mosaic a:nth-child(4) { grid-column: span 3; }
body[data-design="privat"] .mosaic a:nth-child(5) { grid-column: span 3; }
body[data-design="privat"] .mosaic a:nth-child(6) { grid-column: span 6; grid-row: span 1; }

/* OPEN GYM · warm dark red with sculptural large numbers, cafe split */
body[data-design="privat"] .open {
  background:
    radial-gradient(900px 600px at 100% 100%, rgba(228,27,35,.35), transparent 60%),
    linear-gradient(180deg, #3a0d12 0%, #6f0e15 100%);
  color: #fff5ec;
  padding: clamp(5rem, 9vw, 7rem) 0;
  position: relative;
  overflow: hidden;
}
body[data-design="privat"] .open .label { color: var(--text-red); }
body[data-design="privat"] .open h2 { color: #fff5ec; }
body[data-design="privat"] .open .open-lead { color: rgba(255,245,236,.85); max-width: 44rem; }
body[data-design="privat"] .step-no {
  font-family: Poppins, sans-serif;
  font-weight: 900;
  font-size: clamp(4rem, 8vw, 7rem);
  color: #fff5ec;
  -webkit-text-stroke: 0;
  line-height: 1;
  margin-bottom: .8rem;
  opacity: .92;
}
body[data-design="privat"] .steps h3 { color: #fff5ec; font-size: clamp(1.4rem, 2vw, 1.7rem); }
body[data-design="privat"] .steps p { color: rgba(255,245,236,.78); }
body[data-design="privat"] .open .cafe {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
body[data-design="privat"] .open .cafe figure img {
  box-shadow: 0 24px 56px rgba(0,0,0,.45);
  border: 1px solid rgba(200,21,32,.3);
}
body[data-design="privat"] .offer dt { color: var(--text-red); }
body[data-design="privat"] .offer div { border-top-color: rgba(255,245,236,.22); padding-block: 1.1rem; }
body[data-design="privat"] .open .btn {
  background: #fff5ec; color: #6f0e15; border-color: #fff5ec;
}
body[data-design="privat"] .open .btn:hover { background: var(--red); color: #fff5ec; border-color: var(--red); }
body[data-design="privat"] .ink-open {
  position: absolute;
  z-index: 0;
  left: -6vw;
  bottom: -4vw;
  width: clamp(280px, 36vw, 520px);
  opacity: .14;
}

/* CONTACT · photo-backed with readable opaque scrim */
body[data-design="privat"] .contact {
  background:
    linear-gradient(180deg, rgba(26,13,14,.94), rgba(26,13,14,.96)),
    url("../assets/gym-16-1600.webp") center/cover no-repeat;
  color: #fff5ec;
  padding: clamp(4.5rem, 9vw, 7rem) 0 5rem;
  border-top: 0;
  position: relative;
  overflow: hidden;
}
body[data-design="privat"] .contact .label { color: var(--text-red); }
body[data-design="privat"] .contact h2 { color: #fff5ec; max-width: 18ch; }
body[data-design="privat"] .contact .big { color: #fff5ec; }
body[data-design="privat"] .contact-list a, body[data-design="privat"] .contact-list .place {
  border-bottom-color: rgba(255,245,236,.22);
}
body[data-design="privat"] .contact .lbl { color: rgba(255,245,236,.6); }
body[data-design="privat"] .contact-note { color: rgba(255,245,236,.78); }
body[data-design="privat"] .contact .btn {
  background: var(--red); color: #fff5ec; border-color: var(--red);
}
body[data-design="privat"] .contact .btn:hover { background: #fff5ec; color: var(--red); border-color: #fff5ec; }
body[data-design="privat"] .contact .text-link { color: #fff5ec; }
body[data-design="privat"] .ink-contact {
  position: absolute;
  z-index: 0;
  right: -6vw;
  bottom: -10vw;
  width: clamp(360px, 42vw, 620px);
  opacity: .22;
}
body[data-design="privat"] .site-footer {
  background: #0c0608;
  border-top: 1px solid rgba(200,21,32,.4);
}

/* PRIVAT mobile */
@media (max-width: 899px) {
  body[data-design="privat"] .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "visual" "copy";
    min-height: 0;
    padding-top: 0;
  }
  body[data-design="privat"] .hero-visual { grid-area: visual; padding: 0; }
  body[data-design="privat"] .hero-copy { grid-area: copy; padding: 1.4rem var(--pad) 2.4rem; }
  body[data-design="privat"] .hero-photo { height: clamp(320px, 56vh, 480px); }
  body[data-design="privat"] .hero-detail {
    right: var(--pad);
    bottom: -1.5rem;
    width: 38vw;
    min-width: 140px;
  }
  body[data-design="privat"] .strongman { right: clamp(7rem, 38vw, 10rem); width: 70px; }
  body[data-design="privat"] .panel-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-design="privat"] .panel-grid > .panel-photo { order: 0; }
  body[data-design="privat"] .panel-grid > .panel-copy { order: 1; }
  body[data-design="privat"] .panel-photo img { aspect-ratio: 16/10; }
  body[data-design="privat"] .open .cafe { grid-template-columns: minmax(0, 1fr); }
  body[data-design="privat"] .mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 140px;
  }
  body[data-design="privat"] .mosaic a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  body[data-design="privat"] .mosaic a:nth-child(2) { grid-column: span 1; }
  body[data-design="privat"] .mosaic a:nth-child(3) { grid-column: span 1; }
  body[data-design="privat"] .mosaic a:nth-child(4) { grid-column: span 1; }
  body[data-design="privat"] .mosaic a:nth-child(5) { grid-column: span 1; }
  body[data-design="privat"] .mosaic a:nth-child(6) { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 380px) {
  body[data-design="privat"] .hero-detail { width: 36vw; }
  body[data-design="privat"] .mosaic { grid-auto-rows: 120px; }
}

/* =============================================================================
 * REDUCED MOTION · applied per variant too
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  body[data-design] .reveal,
  body[data-design] .mosaic img,
  body[data-design] .mosaic a,
  body[data-design] .btn { transition: none !important; }
}

/* CSS scroll-driven reveal (subtle) — no scroll listener */
@supports (animation-timeline: view()) {
  body[data-design] .mosaic img {
    animation: subtle-rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 18%;
  }
  @keyframes subtle-rise {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
  }
}



/* Host visual acceptance corrections */
body[data-design] .site-header { background: #1b0d11; }
body[data-design="tattoo"] .site-header { background: #ad1926; }
body[data-design="tattoo"] .hero-copy .text-link { color: #fff5ec; }
body[data-design="tattoo"] .hero-photo { filter: none; }
body[data-design="prostor"] .hero .wrap { width: 100%; }
body[data-design="prostor"] .hero-grid { grid-template-areas: "copy"; min-height: min(800px,calc(100svh - 94px)); }
body[data-design="prostor"] .hero-visual { grid-area: auto; z-index: 0; }
body[data-design="prostor"] .hero-photo { height: 100%; object-position: 55% 46%; }
body[data-design="prostor"] .hero-visual::after { display: block; content: ""; inset: 0; width: auto; height: auto; border: 0; background: linear-gradient(90deg,rgba(29,8,15,.91) 0%,rgba(47,10,19,.76) 30%,rgba(47,10,19,.13) 68%,transparent 100%); z-index: 1; }
body[data-design="prostor"] .hero-copy { grid-area: copy; background: none; border: 0; max-width: 42rem; margin-inline: max(var(--pad),calc((100% - 1328px)/2)); margin-bottom: 3.5rem; padding: 1.5rem 0; }
body[data-design="prostor"] .hero-copy h1 { font-size: clamp(3.5rem,6vw,5.5rem); }
body[data-design="prostor"] .strongman { z-index: 2; right: max(1.5rem,calc((100% - 1328px)/2)); bottom: 1.4rem; top: auto; }
body[data-design="prostor"] .ink-hero { z-index: 1; top: 26%; bottom: auto; left: -8rem; opacity: .26; filter: none; }
body[data-design="prostor"] .panel-grid { align-items: center; }
body[data-design="prostor"] .panel-photo img { aspect-ratio: 4/4.2; }
body[data-design="prostor"] .ink-train { top: 22%; left: -4rem; opacity: .2; }
body[data-design="tattoo"] .panel-photo img { aspect-ratio: 4/4.2; }
body[data-design="tattoo"] .band { background-color: #241014; }
body[data-design="tattoo"] .gallery { background: linear-gradient(145deg,#771522,#45131b); }
body[data-design="privat"] .hero-detail { border-width: 2px; }
body[data-design="privat"] .panel-photo img { aspect-ratio: 4/4.2; }
body[data-design="privat"] .band { background: linear-gradient(135deg,#36151d,#25131a); }
body[data-design] .hero-photo { filter: none; }
@media(max-width:899px) {
 body[data-design="prostor"] .hero-grid { grid-template-areas: "visual" "copy"; min-height: 0; }
 body[data-design="prostor"] .hero-visual { grid-area: visual; position: relative; inset: auto; }
 body[data-design="prostor"] .hero-visual::after { display: none; }
 body[data-design="prostor"] .hero-copy { margin: 0; padding: 1.5rem var(--pad) 2rem; max-width: none; }
 body[data-design="prostor"] .hero { background: linear-gradient(135deg,#39101c,#200c13); }
 body[data-design="prostor"] .ink-hero { top: auto; bottom: 0; left: -8rem; opacity: .25; }
 body[data-design="tattoo"] .hero-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "copy" "visual"; min-height: 0; }
 body[data-design="tattoo"] .hero-copy { grid-area: copy; padding: 1.6rem var(--pad) 2rem; }
 body[data-design="tattoo"] .hero-visual { grid-area: visual; }
 body[data-design="privat"] .hero-copy { padding-top: 2.8rem; }
 body[data-design="privat"] .hero-detail { bottom: -1rem; }
}
@media(max-width:600px) {
 body[data-design="prostor"] .hero-visual { height: clamp(280px,39svh,330px); }
 body[data-design="tattoo"] .hero-visual { height: clamp(280px,39svh,330px); }
 body[data-design="tattoo"] .hero-photo { height: 100%; min-height: 0; }
 body[data-design="privat"] .hero-photo { height: clamp(250px,33svh,280px); }
 body[data-design="privat"] .hero-copy { padding-top: 2rem; }
 body[data-design] .hero-copy h1 { font-size: clamp(2.5rem,10.8vw,3rem); }
 body[data-design] .hero-copy .kicker { font-size: 1.95rem; margin-bottom: .8rem; }
 body[data-design] .hero-copy .lede { font-size: 1rem; line-height: 1.5; }
 body[data-design] .hero-actions { gap: .5rem .85rem; margin-top: 1rem; }
 body[data-design] .hero-actions .btn { padding-inline: .85rem; font-size: .92rem; }
 body[data-design] .hero-actions .text-link { font-size: .92rem; }
 body[data-design="tattoo"] .strongman { width: 138px; right: .6rem; bottom: .4rem; }
 body[data-design="tattoo"] .ink-hero { top: -4rem; left: -7rem; width: 28rem; opacity: .44; }
 body[data-design="privat"] .hero-copy h1 { font-size: clamp(2.35rem,10vw,2.7rem); }
 body[data-design="privat"] .hero-detail { width: 110px; min-width: 0; }
 body[data-design="privat"] .strongman { width: 75px; right: 7.5rem; }
}
/* Three different section compositions, beyond the hero. */
body[data-design] .contact-photo { margin: 0; overflow: hidden; }
body[data-design] .contact-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-design] .mosaic a { grid-column: auto; grid-row: auto; }
body[data-design="privat"] .mosaic a:nth-child(n) { grid-column: auto; grid-row: auto; }
body[data-design] .spread-side { min-height: 0; }
body[data-design] .spread-side img { position: static; }
body[data-design="prostor"] .mosaic { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 240px; }
body[data-design="tattoo"] .mosaic { grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: 250px; }
body[data-design="tattoo"] .mosaic a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
body[data-design="tattoo"] .mosaic a:nth-child(6) { grid-column: span 2; }
body[data-design="privat"] .mosaic { grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 240px; }
body[data-design="privat"] .mosaic a:nth-child(1) { grid-column: span 2; }
body[data-design="privat"] .mosaic a:nth-child(6) { grid-column: span 3; }
body[data-design="tattoo"] .strongman { width: clamp(145px,15vw,220px); }
body[data-design="privat"] .hero-detail { width: clamp(130px,14vw,190px); }
@media(min-width:900px) {
 body[data-design="prostor"] .gym .spread { grid-template-columns: minmax(0,1fr) 280px; grid-template-areas: "main main" "copy side"; align-items: center; }
 body[data-design="prostor"] .spread-main img { height: 440px; object-fit: cover; }
 body[data-design="prostor"] .spread-side img { height: 220px; object-fit: cover; }
 body[data-design="prostor"] .spread-copy { padding: 1rem 0; }
 body[data-design="tattoo"] .gym .wrap { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); column-gap: 3rem; }
 body[data-design="tattoo"] .gym .label, body[data-design="tattoo"] .gym h2 { grid-column: 1; }
 body[data-design="tattoo"] .gym .spread { display: contents; }
 body[data-design="tattoo"] .spread-copy { grid-column: 1; grid-row: 3; align-self: start; padding: 0; }
 body[data-design="tattoo"] .spread-main { grid-column: 2; grid-row: 1 / span 3; }
 body[data-design="tattoo"] .spread-main img { height: 520px; object-fit: cover; }
 body[data-design="tattoo"] .spread-side { grid-column: 1 / span 2; grid-row: 4; margin-top: 2rem; }
 body[data-design="tattoo"] .spread-side img { height: 300px; width: 100%; object-fit: cover; }
 body[data-design="privat"] .gym .spread { grid-template-columns: 320px minmax(0,1fr); grid-template-areas: "side main" "copy copy"; }
 body[data-design="privat"] .spread-main img, body[data-design="privat"] .spread-side img { height: 470px; width: 100%; object-fit: cover; }
 body[data-design="privat"] .spread-copy { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; max-width: none; align-items: center; padding: 2rem 0 0; }
 body[data-design="privat"] .spread-copy p { margin: 0; }
 body[data-design="prostor"] .contact .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); column-gap: 4rem; }
 body[data-design="prostor"] .contact .wrap > :not(.contact-photo) { grid-column: 1; }
 body[data-design="prostor"] .contact-photo { grid-column: 2; grid-row: 1 / span 5; }
 body[data-design="prostor"] .contact-photo img { object-position: 60% 50%; }
 body[data-design="tattoo"] .contact { background: linear-gradient(130deg,#66121f,#37121a); }
 body[data-design="tattoo"] .contact .wrap { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1fr); column-gap: 4rem; }
 body[data-design="tattoo"] .contact .wrap > :not(.contact-photo) { grid-column: 2; }
 body[data-design="tattoo"] .contact-photo { grid-column: 1; grid-row: 1 / span 5; }
 body[data-design="tattoo"] .contact h2 { font-size: clamp(2.5rem,4.8vw,4.5rem); }
 body[data-design="privat"] .contact { background: #35151c; }
 body[data-design="privat"] .contact h2 { max-width: 20ch; margin-inline: auto; text-align: center; }
 body[data-design="privat"] .contact .label { text-align: center; }
 body[data-design="privat"] .contact-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; max-width: none; }
 body[data-design="privat"] .contact-list .big { font-size: clamp(1.3rem,2.4vw,2.1rem); }
 body[data-design="privat"] .contact-photo { height: 270px; margin-top: 2rem; }
 body[data-design="privat"] .contact-note { max-width: none; }
}
@media(max-width:899px) {
 body[data-design] .mosaic { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 200px; }
 body[data-design] .mosaic a { grid-column: auto !important; grid-row: auto !important; }
 body[data-design] .contact-photo { height: 260px; margin-top: 1.8rem; }
 body[data-design="privat"] .hero-detail { width: 110px; }
 body[data-design="tattoo"] .strongman { width: 138px; }
}
@media(max-width:440px) {
 body[data-design] .mosaic { grid-auto-rows: 160px; }
}