/* Two independent visual directions. The interaction and content remain shared. */

/* 02 — Ночной журнал: a quiet editorial composition. */
body[data-theme="editorial"] {
  --bg: #0c121b;
  --surface: #111c29;
  --surface2: #152335;
  --ink: #edf0ef;
  --muted: #a7b3c0;
  --accent: #afc4d5;
  --line: rgba(174, 195, 216, .22);
  background: radial-gradient(ellipse at 9% 16%, #1b2b3e 0, transparent 40%), #0c121b;
}
body[data-theme="editorial"] .site-shell {
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(400px, 1.65fr);
  column-gap: 48px;
  row-gap: 18px;
  width: min(1120px, calc(100% - 80px));
  max-width: 1120px;
  padding: 40px 0 26px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-theme="editorial"] .hero {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 28px;
  position: relative;
  margin: 0;
  padding: 10px 30px 20px 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
body[data-theme="editorial"] .clock-block { text-align: left; }
body[data-theme="editorial"] .clock { margin: 0; }
body[data-theme="editorial"] .clock-city {
  margin-top: 9px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
body[data-theme="editorial"] .clock-slogan {
  max-width: 220px;
  margin: 9px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
}
body[data-theme="editorial"] .intro { text-align: left; max-width: 100%; }
body[data-theme="editorial"] .eyebrow {
  color: var(--accent);
  letter-spacing: .2em;
  font-size: 10px;
  line-height: 1.7;
}
body[data-theme="editorial"] h1 {
  color: #f3f1ed;
  font-family: var(--serif);
  font-size: clamp(32px, 3.5vw, 47px);
  line-height: 1.07;
  font-weight: 400;
  letter-spacing: -.045em;
  margin: 12px 0 16px;
}
body[data-theme="editorial"] h1 .handle {
  display: block;
  color: var(--accent);
  font-family: var(--sans);
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 450;
  letter-spacing: -.04em;
  margin-top: 16px;
}
body[data-theme="editorial"] .intro-text {
  max-width: 250px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
body[data-theme="editorial"] .language-button {
  position: absolute;
  top: 8px;
  right: 28px;
  border-color: var(--line);
  border-radius: 3px;
  background: rgba(255,255,255,.035);
  color: var(--ink);
}
body[data-theme="editorial"] .site-shell > main,
body[data-theme="editorial"] .site-shell > .offers {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
}
body[data-theme="editorial"] .offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
body[data-theme="editorial"] .disclosure.offer {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-theme="editorial"] .offer > summary {
  min-height: 76px;
  padding: 13px 4px;
  gap: 16px;
  border-radius: 0;
}
body[data-theme="editorial"] .offer[open] { background: rgba(154, 192, 221, .035); }
body[data-theme="editorial"] .service-icon {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  border-radius: 4px;
  color: var(--accent);
  border-color: rgba(174,195,216,.22);
  background: rgba(166,197,222,.055);
  box-shadow: none;
}
body[data-theme="editorial"] .summary-copy strong { font-size: 15px; font-weight: 550; }
body[data-theme="editorial"] .summary-copy span { font-size: 11px; color: var(--muted); }
body[data-theme="editorial"] .plus { border: 0; background: transparent; color: var(--accent); }
body[data-theme="editorial"] .offer .panel { padding: 0 12px 19px 55px; }
body[data-theme="editorial"] .description { color: #c2cbd4; font-size: 13px; line-height: 1.7; }
body[data-theme="editorial"] .external-link {
  border-radius: 3px;
  color: #0d1926;
  background: #c5d5e0;
  border-color: #c5d5e0;
  box-shadow: none;
}
body[data-theme="editorial"] .external-link:hover { background: #e1eaf0; }
body[data-theme="editorial"] .actions {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}
body[data-theme="editorial"] .actions .disclosure {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255,255,255,.02);
  box-shadow: none;
}
body[data-theme="editorial"] .actions .disclosure > summary { min-height: 47px; padding: 10px 15px; }
body[data-theme="editorial"] .actions .contact { background: #1c3043; border-color: #3b566e; }
body[data-theme="editorial"] .site-shell > footer {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
  padding: 0;
  border: 0;
}
body[data-theme="editorial"] .about { border-radius: 0; border-color: var(--line); background: transparent; }
body[data-theme="editorial"] .about > summary { color: var(--muted); }
body[data-theme="editorial"] input,
body[data-theme="editorial"] textarea { background: #0c1724; border-color: #41546a; color: var(--ink); border-radius: 4px; }

/* 03 — Закрытый салон: a restrained, symmetrical club invitation. */
body[data-theme="salon"] {
  display: flow-root;
  --bg: #090e0c;
  --surface: #13221b;
  --surface2: #1c2d23;
  --ink: #f4ecd8;
  --muted: #b9b5a3;
  --accent: #d6b578;
  --line: rgba(211,178,117,.25);
  background: radial-gradient(ellipse at 50% -10%, #2b3d2e, transparent 64%), #090e0c;
}
body[data-theme="salon"] .site-shell {
  display: block;
  width: min(940px, calc(100% - 60px));
  max-width: 940px;
  padding: 30px 38px 20px;
  margin: 24px auto;
  border: 1px solid rgba(214,181,120,.38);
  border-radius: 28px;
  background: linear-gradient(125deg, rgba(42,59,43,.5), transparent 48%), #112018;
  box-shadow: 0 30px 100px rgba(0,0,0,.4), inset 0 0 0 6px #0f1c16, inset 0 0 0 7px rgba(214,181,120,.13);
}
body[data-theme="salon"] .hero {
  display: grid;
  grid-template-columns: 145px 1fr 145px;
  align-items: center;
  column-gap: 16px;
  position: relative;
  margin: 0 0 23px;
  padding: 0 0 23px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
body[data-theme="salon"] .clock-block { grid-column: 1; text-align: center; }
body[data-theme="salon"] .clock { margin: 0 auto; }
body[data-theme="salon"] .clock-city {
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-top: 7px;
}
body[data-theme="salon"] .clock-slogan {
  color: #cabf9e;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.35;
  font-style: italic;
  margin: 6px auto 0;
  max-width: 145px;
}
body[data-theme="salon"] .intro { grid-column: 2; text-align: center; }
body[data-theme="salon"] .eyebrow { color: var(--accent); font-size: 9px; letter-spacing: .2em; }
body[data-theme="salon"] h1 {
  font-family: var(--serif);
  font-size: clamp(29px, 3vw, 39px);
  line-height: 1.12;
  color: #f1e7cc;
  letter-spacing: -.025em;
  font-weight: 400;
  margin: 12px 0;
}
body[data-theme="salon"] h1 .handle {
  display: block;
  margin-top: 10px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 19px;
  letter-spacing: -.035em;
  font-weight: 450;
}
body[data-theme="salon"] .intro-text { color: var(--muted); max-width: 320px; margin: 0 auto; font-size: 12px; line-height: 1.6; }
body[data-theme="salon"] .language-button {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 43px;
  height: 43px;
  padding: 0;
  color: var(--accent);
  background: #17271d;
}
body[data-theme="salon"] .offers { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
body[data-theme="salon"] .disclosure.offer {
  border-radius: 11px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(216,190,136,.045), transparent), #14251c;
  box-shadow: inset 0 1px 0 rgba(249,228,179,.045);
}
body[data-theme="salon"] .offer > summary { min-height: 82px; padding: 15px 17px; gap: 13px; }
body[data-theme="salon"] .offer[open] { border-color: rgba(214,181,120,.6); background: #1a2d22; }
body[data-theme="salon"] .service-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  color: var(--accent);
  background: #27382a;
  border: 1px solid rgba(216,181,120,.22);
  box-shadow: none;
}
body[data-theme="salon"] .summary-copy strong { font-size: 14px; font-weight: 550; color: var(--ink); }
body[data-theme="salon"] .summary-copy span { color: var(--muted); font-size: 10.5px; }
body[data-theme="salon"] .plus { color: var(--accent); background: none; border: 0; }
body[data-theme="salon"] .offer .panel { padding: 0 18px 18px; }
body[data-theme="salon"] .description { color: #cec9b9; font-size: 13px; line-height: 1.65; }
body[data-theme="salon"] .external-link {
  background: linear-gradient(110deg, #dcc38d, #b89760);
  color: #172016;
  border-color: #c1a36e;
  border-radius: 7px;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
}
body[data-theme="salon"] .external-link:hover { background: #ead4a4; }
body[data-theme="salon"] .actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 17px; }
body[data-theme="salon"] .actions .disclosure { border-radius: 8px; border: 1px solid var(--line); box-shadow: none; background: #13231b; }
body[data-theme="salon"] .actions .disclosure > summary { min-height: 48px; padding: 10px 18px; }
body[data-theme="salon"] .actions .contact { background: linear-gradient(110deg, #49352d, #38241f); border-color: #88684c; }
body[data-theme="salon"] .site-shell > footer { margin-top: 15px; padding-top: 0; border: 0; }
body[data-theme="salon"] .about { border-radius: 0; border-color: var(--line); background: transparent; }
body[data-theme="salon"] .about > summary { text-align: center; justify-content: center; color: #c6ba9b; }
body[data-theme="salon"] input,
body[data-theme="salon"] textarea { background: #0d1c14; border-color: #776c50; border-radius: 6px; color: var(--ink); }

@media (min-width: 800px) {
  body[data-theme="salon"] .offer[open] { grid-column: 1 / -1; }
}

@media (max-width: 799px) {
  body[data-theme="editorial"] .site-shell,
  body[data-theme="salon"] .site-shell {
    display: block;
    width: calc(100% - 32px);
    max-width: 560px;
  }
  body[data-theme="editorial"] .site-shell { padding: 18px 0 14px; }
  body[data-theme="editorial"] .hero {
    display: grid;
    grid-template-columns: 103px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 0 0 12px;
    margin: 0;
    border: 0;
  }
  body[data-theme="editorial"] .clock-block { text-align: center; }
  body[data-theme="editorial"] .clock { margin: 0 auto; }
  body[data-theme="editorial"] .clock-city { font-size: 8px; margin-top: 5px; letter-spacing: .14em; }
  body[data-theme="editorial"] .clock-slogan { font-size: 11px; line-height: 1.35; margin: 5px 0 0; white-space: nowrap; }
  body[data-theme="editorial"] .intro { padding-top: 19px; }
  body[data-theme="editorial"] .eyebrow { font-size: 8px; letter-spacing: .13em; }
  body[data-theme="editorial"] h1 { font-size: 27px; line-height: 1.04; margin: 7px 0; }
  body[data-theme="editorial"] h1 .handle { font-size: 15px; margin-top: 9px; }
  body[data-theme="editorial"] .intro-text { font-size: 10.5px; line-height: 1.45; margin: 6px 0 0; }
  body[data-theme="editorial"] .language-button { top: 0; right: 0; height: 27px; min-height: 27px; padding: 2px 8px; font-size: 10px; }
  body[data-theme="editorial"] .offer > summary { min-height: 60px; padding: 9px 2px; gap: 12px; }
  body[data-theme="editorial"] .summary-copy strong { font-size: 13px; line-height: 1.3; }
  body[data-theme="editorial"] .summary-copy span { font-size: 10px; line-height: 1.35; }
  body[data-theme="editorial"] .service-icon { width: 31px; height: 31px; flex-basis: 31px; }
  body[data-theme="editorial"] .offer .panel { padding: 0 4px 15px 45px; }
  body[data-theme="editorial"] .actions { margin-top: 10px; gap: 7px; }
  body[data-theme="editorial"] .actions .disclosure > summary { min-height: 45px; padding: 10px 12px; }
  body[data-theme="editorial"] .site-shell > footer { margin-top: 10px; }

  body[data-theme="salon"] .site-shell {
    padding: 14px 14px 10px;
    margin: 14px auto;
    border-radius: 18px;
    box-shadow: 0 20px 65px rgba(0,0,0,.3), inset 0 0 0 4px #0f1c16, inset 0 0 0 5px rgba(214,181,120,.12);
  }
  body[data-theme="salon"] .hero {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 9px;
  }
  body[data-theme="salon"] .intro { text-align: left; padding-top: 19px; }
  body[data-theme="salon"] .clock-city { font-size: 8px; margin-top: 4px; }
  body[data-theme="salon"] .clock-slogan { font-size: 10.5px; line-height: 1.3; margin-top: 5px; white-space: nowrap; }
  body[data-theme="salon"] .eyebrow { font-size: 8px; letter-spacing: .11em; }
  body[data-theme="salon"] h1 { font-size: 25px; line-height: 1.05; margin: 7px 0 6px; }
  body[data-theme="salon"] h1 .handle { font-size: 14px; margin-top: 8px; }
  body[data-theme="salon"] .intro-text { font-size: 10px; line-height: 1.4; }
  body[data-theme="salon"] .language-button { width: 29px; height: 29px; min-height: 29px; top: -3px; right: -1px; font-size: 9px; }
  body[data-theme="salon"] .offers { grid-template-columns: 1fr; gap: 5px; }
  body[data-theme="salon"] .offer > summary { min-height: 54px; padding: 8px 11px; gap: 10px; }
  body[data-theme="salon"] .summary-copy strong { font-size: 12.5px; line-height: 1.3; }
  body[data-theme="salon"] .summary-copy span { font-size: 9.5px; line-height: 1.35; }
  body[data-theme="salon"] .service-icon { width: 29px; height: 29px; flex-basis: 29px; }
  body[data-theme="salon"] .offer .panel { padding: 0 13px 13px; }
  body[data-theme="salon"] .actions { gap: 6px; margin-top: 10px; }
  body[data-theme="salon"] .actions .disclosure > summary { min-height: 44px; padding: 8px 11px; }
  body[data-theme="salon"] .site-shell > footer { margin-top: 9px; }
}

@media (max-width: 359px) {
  body[data-theme="editorial"] .site-shell,
  body[data-theme="salon"] .site-shell { width: calc(100% - 20px); }
  body[data-theme="editorial"] .hero { grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
  body[data-theme="salon"] .hero { grid-template-columns: 82px minmax(0, 1fr); gap: 8px; }
  body[data-theme="editorial"] h1 { font-size: 24px; }
  body[data-theme="salon"] h1 { font-size: 22px; }
  body[data-theme="editorial"] h1 .handle,
  body[data-theme="salon"] h1 .handle { font-size: 12px; }
  body[data-theme="salon"] .summary-copy strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-theme="editorial"] *,
  body[data-theme="salon"] * { scroll-behavior: auto; }
}