/* The line drawing and softer shapes for Inana Yoga. */
.site-yoga .yoga-hero { isolation: auto; background: var(--background); }
html[data-theme="dark"] .site-yoga .yoga-hero {
  background: radial-gradient(ellipse at 74% 42%, #173465 0%, #10254f 46%, var(--background) 80%);
}
.site-yoga .yoga-hero::before { content: none; }
.site-yoga .yoga-hero::after { content: none; }
.site-yoga .wordmark { display: inline-flex; align-items: center; gap: .38em; }
.site-yoga .brand-rosette {
  display: inline-block;
  flex: none;
  width: .95em;
  aspect-ratio: 1;
  background: var(--gold);
  -webkit-mask: url("./inana-rosette.svg") center / contain no-repeat;
  mask: url("./inana-rosette.svg") center / contain no-repeat;
}
.site-yoga .eyebrow, .site-yoga .offer-card .number { color: var(--gold); }
.site-yoga .offer-card .number { display: flex; align-items: center; gap: 12px; }
.site-yoga .offer-symbol { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.site-yoga .offer-moon { transform: translate(4px, -4px); }
.site-yoga .primary-nav a[href="#philosophie"] { color: var(--gold); }
.site-yoga .primary-nav a[href="#philosophie"]:hover { color: #d38cab; }
.site-yoga .primary-nav a[href="#philosophie"]:focus-visible { color: #d38cab; }
html[data-theme="dark"] .site-yoga .primary-nav a[href="#philosophie"]:is(:hover, :focus-visible) { color: #b9ceff; }
.site-yoga .hero-note::before { background: var(--gold); }
.site-yoga .offer-section .lead { max-width: 720px; }
.site-yoga .theme-toggle, .site-yoga .language-link { border-color: var(--gold-line); }
.site-yoga .button-secondary { border-color: var(--gold-line); }
.site-yoga .yoga-hero .button-primary { min-width: 173px; }
html:not([data-theme="dark"]) .site-yoga .yoga-hero .button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 36%, transparent),
    0 6px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}
.site-yoga .offer-card {
  --offer-glow: var(--petal);
  border-color: var(--gold-line);
  border-radius: 26px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
html[data-theme="dark"] .site-yoga .offer-card { --offer-glow: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .site-yoga .offer-card:hover {
    border-color: var(--offer-glow);
    background-color: color-mix(in srgb, var(--surface) 94%, var(--offer-glow));
    box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 8%, transparent),
      0 0 0 1px color-mix(in srgb, var(--offer-glow) 70%, transparent),
      0 0 25px 5px color-mix(in srgb, var(--offer-glow) 38%, transparent);
  }
}
.site-yoga .portrait-main, .site-yoga .portrait-detail { outline: 1px solid var(--gold-line); outline-offset: 4px; }
html:not([data-theme="dark"]) .site-yoga .portrait-main,
html:not([data-theme="dark"]) .site-yoga .portrait-detail { border-color: #e5c2d4; }
html[data-theme="dark"] .site-yoga .button-primary { background: var(--gold); border-color: var(--gold); color: var(--background); }
html[data-theme="dark"] .site-yoga .contact-section .button-primary { background: #fff; border-color: #fff; color: var(--background); }
html[data-theme="dark"] .site-yoga .yoga-hero .button-primary {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 36%, transparent),
    0 6px 18px color-mix(in srgb, var(--gold) 22%, transparent);
}
.site-yoga .portrait-main, .site-yoga .portrait-detail { border-radius: 50% 50% 24px 24px / 45% 45% 24px 24px; }
.site-yoga .portrait-detail { aspect-ratio: 2 / 3; border-radius: 50% 50% 12px 12px / 45% 45% 12px 12px; }
.site-yoga .yoga-hero .container {
  z-index: 2;
  min-height: 540px;
  padding-right: min(42vw, 455px);
}
.site-yoga .inana-visual {
  position: absolute;
  top: -38px;
  right: 24px;
  width: min(42%, 455px);
  pointer-events: none;
}
.site-yoga .inana-atmosphere {
  position: absolute;
  top: -16%;
  left: -22%;
  width: 144%;
  height: 132%;
  background: url("./inana-atmosphere-day.svg") center / 100% 100% no-repeat;
}
html[data-theme="dark"] .site-yoga .inana-atmosphere {
  background-image: url("./inana-atmosphere-night.svg");
  top: -10%;
  left: -48%;
  width: 180%;
  height: 120%;
}
.site-yoga .inana-figure {
  position: relative;
  width: 100%;
  margin: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.site-yoga .inana-figure::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./inana-backdrop-day-light-medium-dark.svg") center / 100% 100% no-repeat;
}
html[data-theme="dark"] .site-yoga .inana-figure::before {
  background-image: url("./inana-backdrop-night.svg");
}
.site-yoga .inana-line-art {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--drawing-ink);
  -webkit-mask-image: linear-gradient(#fff 0 0), url("./inana-selected-restored.png");
  mask-image: linear-gradient(#fff 0 0), url("./inana-selected-restored.png");
  -webkit-mask-size: 100% 100%, contain;
  mask-size: 100% 100%, contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mask-mode: alpha, luminance;
}
.site-yoga .inana-line-art::after {
  content: "";
  position: absolute;
  left: 54.5%;
  top: 2.6%;
  width: 14%;
  height: 10%;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
@media (max-width: 760px) {
  .site-yoga .yoga-hero .container { min-height: 0; padding-right: 0; }
  .site-yoga .inana-visual {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 390px);
    margin: 45px auto -75px;
  }
  .site-yoga .inana-atmosphere {
    top: -11%;
    left: -12%;
    width: 124%;
    height: 122%;
  }
  html[data-theme="dark"] .site-yoga .inana-atmosphere {
    top: -11%;
    left: -12%;
    width: 124%;
    height: 83%;
  }
}