/* «Я в творчестве» — musical-poetic workshop atmosphere */

:root {
  --cr-deep: #0c0a12;
  --cr-mid: #16121f;
  --cr-panel: rgba(28, 22, 40, 0.88);
  --cr-gold: #c9a962;
  --cr-gold-bright: #e8c97a;
  --cr-gold-soft: rgba(201, 169, 98, 0.14);
  --cr-gold-line: rgba(201, 169, 98, 0.28);
  --cr-ink: #f3ebe0;
  --cr-muted: rgba(232, 220, 200, 0.72);
  --cr-faint: rgba(210, 195, 170, 0.5);
  --cr-glow: 0 0 28px rgba(201, 169, 98, 0.18);
}

.cr-page {
  position: relative;
  overflow-x: hidden;
  color: var(--cr-ink);
  background:
    radial-gradient(ellipse 80% 50% at 15% -10%, rgba(201, 169, 98, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 15%, rgba(120, 90, 160, 0.1), transparent 50%),
    radial-gradient(ellipse 45% 35% at 50% 100%, rgba(201, 169, 98, 0.06), transparent 55%),
    linear-gradient(180deg, #0c0a12 0%, #12101a 45%, #0c0a12 100%);
}

/* Soft staff hint across the page */
.cr-page::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.45;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(201, 169, 98, 0.035) 31px,
      rgba(201, 169, 98, 0.035) 32px
    );
}

.cr-page > *:not(.cr-notes) { position: relative; z-index: 1; }

/* Header / footer on dark canvas */
.cr-page .site-header {
  background: rgba(12, 10, 18, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cr-gold-line);
}

.cr-page .site-header__brand,
.cr-page .site-nav__link { color: var(--cr-ink); }
.cr-page .site-nav__link:hover { color: var(--cr-gold-bright); }
.cr-page .site-nav__link[aria-current="page"] { color: var(--cr-gold-bright); }
.cr-page .site-nav-toggle { color: var(--cr-ink); }

.cr-page .site-lang {
  border-color: var(--cr-gold-line);
  background: rgba(12, 10, 18, 0.55);
}

.cr-page .site-lang__current {
  color: var(--cr-deep);
  background: linear-gradient(135deg, var(--cr-gold-bright), var(--cr-gold));
  font-weight: var(--font-weight-semibold, 600);
}

.cr-page .site-lang__link--switch {
  color: var(--cr-ink);
  opacity: 0.9;
}

.cr-page .site-lang__link--switch:hover {
  color: var(--cr-deep);
  background: rgba(232, 201, 122, 0.85);
}

.cr-page .site-footer {
  background: var(--cr-deep);
  border-top: 1px solid var(--cr-gold-line);
  color: var(--cr-faint);
}

.cr-page .site-footer__brand,
.cr-page .site-footer__tagline,
.cr-page .site-footer__link { color: var(--cr-faint); }
.cr-page .site-footer__link:hover { color: var(--cr-gold-bright); }

.cr-page .lr-btn--primary {
  background: linear-gradient(135deg, var(--cr-gold-bright), var(--cr-gold));
  color: var(--cr-deep);
  border-color: transparent;
  box-shadow: var(--cr-glow);
}

.cr-page .lr-btn--primary:hover {
  background: linear-gradient(135deg, #f0d9a0, var(--cr-gold-bright));
  color: var(--cr-deep);
}

/* ——— Floating notes across the page ——— */
.cr-notes {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.cr-notes__glyph {
  position: absolute;
  color: var(--cr-gold);
  font-family: Georgia, "Times New Roman", serif;
  opacity: 0;
  animation: cr-note-drift ease-in-out infinite;
  text-shadow: 0 0 20px rgba(201, 169, 98, 0.32);
  line-height: 1;
  user-select: none;
}

.cr-notes__glyph--1 {
  top: 6%;
  left: 6%;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  animation-duration: 22s;
  animation-delay: 0s;
}

.cr-notes__glyph--2 {
  top: 14%;
  right: 8%;
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  animation-duration: 26s;
  animation-delay: -5s;
}

.cr-notes__glyph--3 {
  top: 28%;
  left: 12%;
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  animation-duration: 24s;
  animation-delay: -11s;
}

.cr-notes__glyph--4 {
  top: 42%;
  right: 5%;
  font-size: clamp(2rem, 4vw, 3rem);
  animation-duration: 28s;
  animation-delay: -3s;
}

.cr-notes__glyph--5 {
  top: 56%;
  left: 4%;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  animation-duration: 23s;
  animation-delay: -14s;
}

.cr-notes__glyph--6 {
  top: 68%;
  right: 14%;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  animation-duration: 25s;
  animation-delay: -8s;
}

.cr-notes__glyph--7 {
  top: 82%;
  left: 18%;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  animation-duration: 27s;
  animation-delay: -17s;
}

.cr-notes__glyph--8 {
  top: 92%;
  right: 7%;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  animation-duration: 21s;
  animation-delay: -9s;
}

@keyframes cr-note-drift {
  0%, 100% {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
  18% {
    opacity: 0.22;
    transform: translateY(0) scale(1);
  }
  48% {
    opacity: 0.34;
    transform: translateY(-8px) scale(1.03);
  }
  72% {
    opacity: 0.16;
    transform: translateY(-2px) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-notes__glyph {
    animation: none;
    opacity: 0.14;
  }
}

/* ——— Hero ——— */
.cr-hero {
  position: relative;
  padding: clamp(3rem, 8vw, 5.5rem) var(--section-padding-x) clamp(2.5rem, 6vw, 4rem);
  max-width: var(--container-default);
  margin-inline: auto;
}

.cr-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 768px) {
  .cr-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.cr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-gold-bright);
  margin-bottom: var(--space-3);
}

.cr-eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cr-gold));
}

.cr-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 7vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg, #fff8ec 0%, var(--cr-gold-bright) 48%, var(--cr-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cr-hero__quote {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: var(--leading-relaxed);
  color: var(--cr-ink);
  padding-left: var(--space-4);
  border-left: 2px solid var(--cr-gold);
  margin-bottom: var(--space-5);
  font-style: italic;
  max-width: 36rem;
}

.cr-hero__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--cr-muted);
  max-width: 36rem;
  margin-bottom: var(--space-5);
}

.cr-hero__outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  list-style: none;
  padding: 0;
}

.cr-hero__outcomes li {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 0.4em 0.85em;
  border-radius: var(--radius-full, 999px);
  color: var(--cr-gold-bright);
  background: rgba(201, 169, 98, 0.1);
  border: 1px solid var(--cr-gold-line);
}

.cr-hero__outcomes li:nth-child(even) {
  color: #f0d9a0;
  border-color: rgba(232, 201, 122, 0.35);
  background: rgba(232, 201, 122, 0.08);
}

/* Decorative studio mark */
.cr-studio {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-xl);
  border: 1px solid var(--cr-gold-line);
  background:
    radial-gradient(ellipse 70% 60% at 30% 25%, rgba(201, 169, 98, 0.12), transparent 60%),
    linear-gradient(155deg, rgba(32, 26, 46, 0.95), rgba(16, 12, 24, 0.92));
  box-shadow: var(--cr-glow), inset 0 1px 0 rgba(232, 201, 122, 0.08);
  min-height: 260px;
  display: grid;
  place-items: center;
}

.cr-studio__art {
  width: 100%;
  max-width: 20rem;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(201, 169, 98, 0.2));
}

/* ——— Sections ——— */
.cr-section {
  padding: clamp(2.5rem, 6vw, 4rem) var(--section-padding-x);
}

.cr-section--alt {
  background:
    linear-gradient(180deg, transparent, rgba(201, 169, 98, 0.04), transparent),
    var(--color-bg-secondary);
  border-block: 1px solid rgba(201, 169, 98, 0.1);
}

.cr-section__inner {
  max-width: var(--container-default);
  margin-inline: auto;
}

.cr-section__header {
  margin-bottom: var(--space-8);
  max-width: 40rem;
}

.cr-section__header--center {
  margin-inline: auto;
  text-align: center;
}

#format .cr-section__header {
  margin-bottom: var(--space-6);
}

#format .cr-section__title {
  margin-bottom: 0;
}

.cr-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 4.5vw, 2.5rem);
  font-weight: 400;
  color: var(--cr-ink);
  margin-bottom: var(--space-3);
  letter-spacing: 0.01em;
}

.cr-section__header--center .cr-section__title {
  background: linear-gradient(135deg, #fff8ec, var(--cr-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cr-section__lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--cr-muted);
}

/* ——— Что объединяет мастерские ——— */
.cr-unites {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .cr-unites { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .cr-unites { grid-template-columns: repeat(6, 1fr); }
  .cr-unite:nth-child(1),
  .cr-unite:nth-child(2),
  .cr-unite:nth-child(3) { grid-column: span 2; }
  .cr-unite:nth-child(4) { grid-column: 2 / span 2; }
  .cr-unite:nth-child(5) { grid-column: 4 / span 2; }
}

.cr-unite {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cr-gold-line);
  background: var(--cr-panel);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cr-muted);
  position: relative;
  padding-top: var(--space-6);
  backdrop-filter: blur(6px);
}

.cr-unite::before {
  content: "";
  position: absolute;
  top: var(--space-4);
  left: var(--space-5);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr-gold);
  box-shadow: 0 0 10px rgba(201, 169, 98, 0.45);
}

.cr-unite:nth-child(even)::before {
  background: var(--cr-gold-bright);
}

/* ——— Author routes ——— */
.cr-routes {
  display: grid;
  gap: var(--space-8);
}

.cr-route {
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border-radius: var(--radius-xl);
  border: 1px solid var(--cr-gold-line);
  background:
    linear-gradient(145deg, rgba(36, 28, 52, 0.95), rgba(18, 14, 28, 0.92));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  scroll-margin-top: 5rem;
}

.cr-route__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cr-route__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  font-weight: 400;
  color: var(--cr-ink);
  margin: 0;
}

.cr-route__badge {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  padding: 0.35em 0.75em;
  border-radius: var(--radius-full, 999px);
  color: var(--cr-gold-bright);
  background: var(--cr-gold-soft);
  border: 1px solid rgba(201, 169, 98, 0.35);
  white-space: nowrap;
}

.cr-route__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.cr-route__badges--start {
  justify-content: flex-start;
  margin-bottom: var(--space-3);
}

.cr-route__outcome {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(201, 169, 98, 0.08);
  border: 1px solid rgba(201, 169, 98, 0.28);
}

.cr-route__outcome-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cr-gold-bright);
  margin-bottom: var(--space-2);
}

.cr-route__outcome-text {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
  line-height: 1.35;
  color: var(--cr-ink);
  margin: 0;
}

.cr-route__outcome-text em {
  font-style: normal;
  color: var(--cr-gold-bright);
}

.cr-routes-overview {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .cr-routes-overview { grid-template-columns: repeat(3, 1fr); }
}

.cr-route-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cr-gold-line);
  background: rgba(28, 22, 40, 0.85);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  min-height: 100%;
}

.cr-route-card:hover {
  border-color: var(--cr-gold);
  box-shadow: var(--cr-glow);
  transform: translateY(-2px);
}

.cr-route-card__num {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cr-faint);
  margin-bottom: var(--space-2);
}

.cr-route-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--cr-ink);
  margin-bottom: var(--space-3);
}

.cr-route-card__outcome {
  flex: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--cr-muted);
  margin-bottom: var(--space-4);
}

.cr-route-card__outcome strong {
  display: block;
  font-size: var(--text-base);
  color: var(--cr-gold-bright);
  margin-bottom: var(--space-1);
}

.cr-route-card__cta {
  font-size: var(--text-sm);
  color: var(--cr-gold);
  font-weight: 500;
}

.cr-route--group {
  border-color: rgba(201, 169, 98, 0.32);
  background:
    linear-gradient(160deg, rgba(40, 32, 56, 0.98), rgba(20, 16, 30, 0.95));
}

.cr-route__subs {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px dashed rgba(201, 169, 98, 0.25);
}

.cr-subroute {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(12, 10, 18, 0.55);
  border: 1px solid rgba(201, 169, 98, 0.16);
  scroll-margin-top: 5rem;
}

.cr-subroute__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  color: var(--cr-ink);
  margin-bottom: var(--space-3);
}

.cr-subroute .cr-route__subtitle {
  margin-bottom: var(--space-3);
}

.cr-routes__nav--sub {
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
  border-left: 2px solid var(--cr-gold-soft);
}

.cr-route__subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--cr-gold-bright);
  margin-bottom: var(--space-4);
  font-weight: 500;
}

.cr-route__pitch {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--cr-ink);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(201, 169, 98, 0.12), rgba(120, 90, 160, 0.1));
  border-left: 3px solid var(--cr-gold);
}

.cr-route__steps-title {
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cr-faint);
  margin-bottom: var(--space-3);
}

.cr-route__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .cr-route__steps { grid-template-columns: 1fr 1fr; }
}

.cr-route__steps li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cr-muted);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(12, 10, 18, 0.45);
  border: 1px solid rgba(201, 169, 98, 0.14);
  position: relative;
  padding-left: 2.25rem;
}

.cr-route__steps li::before {
  content: "✎";
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  font-size: 0.85rem;
  color: var(--cr-gold);
  opacity: 0.9;
}

.cr-route__note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--cr-faint);
  line-height: var(--leading-relaxed);
}

.cr-routes__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.cr-routes__link {
  font-size: var(--text-sm);
  padding: 0.4em 0.85em;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--cr-gold-line);
  color: var(--cr-gold-bright);
  text-decoration: none;
  background: rgba(201, 169, 98, 0.08);
  transition: border-color 0.2s, background 0.2s;
}

.cr-routes__link:hover {
  border-color: var(--cr-gold);
  background: var(--cr-gold-soft);
}

/* ——— Format ——— */
.cr-format {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .cr-format { grid-template-columns: 1fr 1fr; }
}

.cr-format__card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cr-gold-line);
  background: var(--cr-panel);
}

.cr-format__card h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: 500;
  margin-bottom: var(--space-4);
  color: var(--cr-gold-bright);
}

.cr-format__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}

.cr-format__list li {
  font-size: var(--text-base);
  color: var(--cr-muted);
  padding-left: 1.1rem;
  position: relative;
}

.cr-format__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--cr-gold);
}

/* ——— LMS teaser ——— */
.cr-lms {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--cr-gold-line);
  background: linear-gradient(135deg, rgba(201, 169, 98, 0.1), rgba(28, 22, 40, 0.9));
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.cr-lms p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cr-muted);
  margin: 0;
}

/* ——— CTA ——— */
.cr-cta {
  padding: clamp(3rem, 8vw, 4.5rem) var(--section-padding-x);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(201, 169, 98, 0.18), transparent 60%),
    linear-gradient(180deg, #16121f, #0c0a12);
  border-top: 1px solid var(--cr-gold-line);
  color: var(--cr-ink);
}

.cr-cta__inner {
  max-width: 32rem;
  margin-inline: auto;
}

.cr-cta__title {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  font-weight: 400;
  margin-bottom: var(--space-4);
  color: var(--cr-gold-bright);
}

.cr-cta__text {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--cr-muted);
  margin-bottom: var(--space-6);
}

.cr-cta .lr-btn--primary {
  background: linear-gradient(135deg, var(--cr-gold-bright), var(--cr-gold));
  color: var(--cr-deep);
  border-color: transparent;
}

.cr-cta .lr-btn--primary:hover {
  background: linear-gradient(135deg, #f0d9a0, var(--cr-gold-bright));
  color: var(--cr-deep);
}