/* АРТмосфера — прототип лендинга
   Визуальная система синхронизирована с Brand Board.html */

:root {
  --paper: #f2ebdc;
  --paper-2: #eae0cc;
  --paper-3: #e2d6bc;
  --ink: #1a1714;
  --ink-2: #2a2520;
  --sepia: #5b4636;
  --terra: #b14e33;
  --terra-deep: #8e3d27;
  --ochre: #c68a3f;
  --olive: #7a7a55;
  --inkblue: #2e3e55;
  --line: rgba(26, 23, 20, 0.18);
  --line-strong: rgba(26, 23, 20, 0.25);
  --card-bg: rgba(255, 253, 247, 0.55);
  --grid: 8px;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, menlo, monospace;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --container: min(1120px, calc(100% - 48px));
  --container-pad: 24px;
  --header-h: 72px;

  /* Hero: подложите живописный фон — раскомментируйте или замените none */
  /* пример: --hero-art-image: url("assets/hero-art.jpg"); */
  --hero-art-image: none;
  /* Полноэкранный hero + «лист», заезжающий на видео */
  --hero-viewport-h: clamp(560px, 88vh, 940px);
  --hero-overlap-y: clamp(72px, 9vw, 112px);
  --hero-sheet-radius: clamp(40px, 5vw, 68px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero-video {
    display: none;
  }
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* бумажная фактура — как в Brand Board */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='480'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  background-size: 480px 480px;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(1200px 800px at 18% 8%, rgba(177, 78, 51, 0.06), transparent 60%),
    radial-gradient(1400px 900px at 88% 92%, rgba(198, 138, 63, 0.06), transparent 60%);
}

main,
.site-header,
.site-footer {
  position: relative;
  z-index: 1;
}

section[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 16px;
  z-index: 100;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.skip-link:focus {
  left: 8px;
  border-radius: var(--radius-sm);
}

.container {
  width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: 100%;
}

.narrow {
  max-width: 720px;
  margin-inline: auto;
}

/* ----- Header ----- */
.site-header {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: calc(var(--grid) * 3);
}

.brand-lockup {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 32px);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}

.brand-lockup__art {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--terra);
  border-bottom: 2px solid var(--terra);
  padding-bottom: 2px;
}

.brand-lockup__rest {
  font-style: italic;
  color: var(--ink);
  margin-left: 4px;
}

.brand-lockup--sm {
  font-size: 22px;
}

.brand-lockup--sm .brand-lockup__art {
  font-size: 0.95em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: calc(var(--grid) * 3);
}

.header-nav__link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.header-nav__link:hover {
  color: var(--ink);
  border-bottom-color: var(--ochre);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--card-bg);
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-sm);
}

.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--ink);
  margin-inline: 12px;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 16px var(--container-pad) 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.mobile-nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}

/* ----- Type ----- */
.mono-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia);
}

.mono-tag--sm {
  font-size: 9px;
  letter-spacing: 0.14em;
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
  margin-right: 8px;
  vertical-align: middle;
}

.dot--light {
  background: var(--ochre);
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.display__art {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  color: var(--terra);
  letter-spacing: 0.02em;
}

.display__rest {
  font-style: italic;
  color: var(--ink);
}

.kicker {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0 0 calc(var(--grid) * 2);
}

.kicker__dash {
  color: var(--sepia);
  margin-right: 6px;
}

.lead {
  font-size: 17px;
  line-height: 1.55;
  max-width: 52ch;
  margin: calc(var(--grid) * 3) 0;
  color: var(--ink-2);
}

.micro {
  font-size: 14px;
  color: var(--ink-2);
  max-width: 54ch;
  margin-top: calc(var(--grid) * 3);
}

.reg-mark {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sepia);
  opacity: 0.85;
}

.reg-mark--inline {
  margin-top: calc(var(--grid) * 2);
}

.section-meta {
  margin: 0 0 calc(var(--grid) * 2);
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.08;
  color: var(--ink);
  margin: 0 0 calc(var(--grid) * 3);
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 62ch;
  margin: calc(var(--grid) * -2) 0 calc(var(--grid) * 4);
  line-height: 1.55;
}

.section-head--center {
  text-align: center;
}

.section-head--center .section-title {
  margin-inline: auto;
}

.section-head--center .section-meta {
  justify-content: center;
}

.section-intro.prose {
  max-width: 720px;
}

.section-head--center .section-intro {
  margin-inline: auto;
  text-align: left;
}

.prose p {
  margin: 0 0 1em;
}

.prose--center {
  text-align: center;
}

.prose--center p {
  text-align: left;
}

.note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--sepia);
}

.section-footnote {
  max-width: 640px;
  margin-top: calc(var(--grid) * 5);
  font-size: 17px;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--terra-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn--ghost:hover {
  border-color: var(--terra);
  color: var(--terra-deep);
}

.btn--sm {
  padding: 10px 16px;
  font-size: 13px;
}

.btn--block {
  width: 100%;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: calc(var(--grid) * 2);
}

.cta-row {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--grid) * 4);
}

/* ----- Sections ----- */
.section {
  padding: clamp(56px, 10vw, 104px) 0;
}

.section--hero {
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.hero-canvas {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  min-height: var(--hero-viewport-h);
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  pointer-events: none;
  border: none;
  background: transparent;
}

/* Фоновые декоративные видео — без нативных контролов и плашки play.
   iOS Safari/Chromium иногда вешает кнопку поверх <video>; явно прячем. */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-enclosure,
.hero-video::-webkit-media-controls-start-playback-button,
.hero-video::-webkit-media-controls-overlay-play-button,
.section-door-bg-video::-webkit-media-controls,
.section-door-bg-video::-webkit-media-controls-enclosure,
.section-door-bg-video::-webkit-media-controls-start-playback-button,
.section-door-bg-video::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
}

.hero-canvas__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #454038;
  background-image:
    var(--hero-art-image),
    radial-gradient(ellipse 100% 88% at 16% 26%, rgba(198, 138, 63, 0.45), transparent 58%),
    radial-gradient(ellipse 72% 60% at 86% 38%, rgba(177, 78, 51, 0.32), transparent 54%),
    radial-gradient(ellipse 95% 50% at 48% 92%, rgba(46, 62, 85, 0.2), transparent 50%),
    linear-gradient(
      168deg,
      #524735 0%,
      #887560 22%,
      #b0a088 40%,
      #738667 58%,
      #8799a8 76%,
      #d4cdc1 100%
    );
  background-size: cover, cover, cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.03);
}

.hero-canvas__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 280px 280px;
}

.hero-canvas__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Тёплый графитово-сепийный слой: чуть плотнее в центре (где текст), мягкая виньетка */
  background:
    radial-gradient(
      ellipse 78% 62% at 50% 44%,
      rgba(26, 23, 20, 0.34) 0%,
      rgba(26, 23, 20, 0.16) 48%,
      rgba(26, 23, 20, 0.06) 100%
    ),
    radial-gradient(
      ellipse 118% 92% at 50% 48%,
      rgba(91, 70, 54, 0.1) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 140% 95% at 50% 115%,
      rgba(26, 23, 20, 0.22) 0%,
      transparent 55%
    ),
    linear-gradient(
      188deg,
      rgba(26, 23, 20, 0.14) 0%,
      rgba(26, 23, 20, 0.06) 38%,
      rgba(26, 23, 20, 0.1) 62%,
      rgba(26, 23, 20, 0.22) 100%
    );
}

.hero-canvas__inner {
  position: relative;
  z-index: 4;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
  padding: clamp(28px, 5vw, 56px) clamp(18px, 3.5vw, 40px)
    clamp(100px, 17vh, 180px);
}

.hero-title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.6rem, 7.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

.hero-title__art {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.03em;
  /* Чистый фирменный терракотовый, без color-mix-выбеливания и без размытого ореола.
     Тёплая контурная тень от графита даёт читаемость над движущейся кистью в видео.
     Никакого глоу — он и давал «грязный» эффект при пересечении с мазком. */
  color: var(--terra);
  text-shadow:
    0 1px 2px rgba(26, 23, 20, 0.55),
    0 3px 12px rgba(26, 23, 20, 0.32);
  -webkit-text-stroke: 0.35px rgba(26, 23, 20, 0.25);
  border-bottom: 2px solid rgba(177, 78, 51, 0.85);
  padding-bottom: 4px;
}

.hero-title__rest {
  margin-left: 0.06em;
  color: rgba(248, 243, 232, 0.97);
  text-shadow:
    0 2px 22px rgba(26, 23, 20, 0.35),
    0 1px 12px rgba(26, 23, 20, 0.28);
}

.hero-lead {
  margin: clamp(18px, 2.8vw, 26px) 0 0;
  max-width: 34rem;
  font-family: var(--sans);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.64;
  color: #f7f0e3;
  text-shadow:
    0 2px 18px rgba(26, 23, 20, 0.42),
    0 1px 8px rgba(26, 23, 20, 0.28);
}

.hero-actions--center {
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(26px, 3.8vw, 40px);
  gap: 12px 18px;
}

.btn--hero-solid {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(242, 235, 220, 0.9);
  padding: 13px 26px;
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(26, 23, 20, 0.22);
}

.btn--hero-solid:hover {
  background: color-mix(in srgb, var(--paper) 88%, var(--ochre));
}

/* Вторичная hero-кнопка: ghost-стиль. Тише по заливке, чем
   .btn--hero-solid, читается, но не конкурирует с главной CTA. */
.btn--hero-quiet {
  background: rgba(247, 240, 227, 0.08);
  color: rgba(247, 240, 227, 0.92);
  border: 1px solid rgba(247, 240, 227, 0.36);
  padding: 11px 20px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: none;
  transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

.btn--hero-quiet:hover {
  background: rgba(247, 240, 227, 0.18);
  color: rgba(247, 240, 227, 1);
  border-color: rgba(247, 240, 227, 0.6);
}

/* Контент hero — класс hero-content на том же узле, что и hero-canvas__inner (z-index выше видео). */
.hero-content {
  position: relative;
}

@media print {
  .hero-video {
    display: none !important;
  }
}

/* Бумажный «лист» поверх нижней части hero */
.post-hero-sheet {
  position: relative;
  z-index: 5;
  margin-top: calc(-1 * var(--hero-overlap-y));
  background: var(--paper);
  border-radius: var(--hero-sheet-radius) var(--hero-sheet-radius) 0 0;
  padding-top: clamp(16px, 2.5vw, 28px);
  box-shadow: 0 -16px 56px rgba(26, 23, 20, 0.07);
  isolation: isolate;
}

.post-hero-sheet > .early-strip--overlap {
  padding-top: clamp(10px, 2vw, 18px);
  padding-bottom: clamp(8px, 1.5vw, 14px);
}

.post-hero-sheet > .section--overlap-follow {
  padding-top: clamp(36px, 5.5vw, 64px);
  padding-bottom: clamp(56px, 10vw, 104px);
}

.early-strip {
  padding: clamp(14px, 2.2vw, 22px) 0 clamp(10px, 1.8vw, 16px);
}

.early-strip__inner {
  text-align: center;
}

.early-strip__line {
  margin: 0 auto;
  max-width: 52rem;
  line-height: 1.65;
  color: var(--sepia);
}

.early-strip__dash {
  color: var(--terra);
  margin-right: 6px;
}

.materials-showcase {
  margin-bottom: clamp(36px, 5.5vw, 52px);
}

.section--paper2 {
  background: var(--paper-2);
  box-shadow: inset 0 1px 0 var(--line);
}

.section--final {
  padding-bottom: clamp(64px, 12vw, 120px);
  border-top: 1px solid var(--line);
}

.section-head {
  margin-bottom: calc(var(--grid) * 5);
}

/* ----- Мокап-панель (материалы / коллаж) ----- */
.hero-panel {
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.hero-panel__top,
.hero-panel__bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sepia);
  flex-wrap: wrap;
  gap: 12px;
}

.hero-panel__bot {
  border-top: 1px solid var(--line);
  border-bottom: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hero-panel__bot strong {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}

.hero-panel__body {
  padding: 0;
}

.hero-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.ph-block {
  position: relative;
  min-height: 140px;
  background: repeating-linear-gradient(
      135deg,
      rgba(26, 23, 20, 0.06) 0,
      rgba(26, 23, 20, 0.06) 1px,
      transparent 1px,
      transparent 11px
    ),
    var(--paper-3);
  border: none;
  display: flex;
  align-items: flex-end;
  padding: 12px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ph-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 30% 30%, rgba(26, 23, 20, 0.07), transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}

.ph-block__tag {
  position: relative;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
  background: var(--paper);
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.ph-block__svg {
  position: absolute;
  right: 8%;
  top: 18%;
  width: 55%;
  height: auto;
  color: var(--ink);
  opacity: 0.5;
}

.ph-block--sketch {
  background: linear-gradient(160deg, var(--paper-2), var(--paper-3));
}

.ph-block__svg--lines {
  opacity: 0.65;
}

.ph-block--desk {
  grid-column: 1 / -1;
  min-height: 100px;
  background: linear-gradient(180deg, var(--paper-3), color-mix(in srgb, var(--ochre) 15%, var(--paper-3)));
}

/* Mini lesson */
.mini-lesson {
  grid-column: 1 / -1;
  background: var(--paper);
  display: grid;
  grid-template-rows: 160px auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mini-lesson__media {
  position: relative;
  background: repeating-linear-gradient(
      135deg,
      rgba(26, 23, 20, 0.07) 0,
      rgba(26, 23, 20, 0.07) 1px,
      transparent 1px,
      transparent 12px
    ),
    var(--paper-3);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.mini-lesson__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--terra);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
}

.mini-lesson__stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.05;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mini-lesson__stamp::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0.3;
}

.mini-lesson__stamp strong {
  color: var(--terra);
  font-size: 11px;
  display: block;
}

.mini-lesson__strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 14px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: linear-gradient(0deg, rgba(26, 23, 20, 0.65), transparent);
}

.mini-lesson__body {
  padding: 16px 18px 18px;
}

.mini-lesson__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 0;
}

.mini-lesson__title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  line-height: 1.08;
  margin: 8px 0 10px;
  color: var(--ink);
}

.mini-lesson__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
}

.mini-lesson__accent {
  color: var(--ochre);
}

/* Mini PDF */
.mini-pdf {
  grid-column: 1 / -1;
  background: var(--paper);
  padding: 18px 20px 16px;
  position: relative;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mini-pdf__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
}

.mini-pdf__brand {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 13px;
  text-transform: none;
  color: var(--ink);
}

.mini-pdf__seal {
  position: absolute;
  right: 18px;
  top: 44px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.1;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-5deg);
}

.mini-pdf__seal::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0.35;
}

.mini-pdf__seal strong {
  color: var(--terra);
  font-size: 11px;
}

.mini-pdf__center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 88px 12px 0;
}

.mini-pdf__tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin: 0;
}

.mini-pdf__rule {
  width: 48px;
  height: 1px;
  background: var(--ink);
  margin: 12px 0;
}

.mini-pdf__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 0.98;
  margin: 0;
  color: var(--ink);
}

.mini-pdf__title em {
  color: var(--terra);
  font-style: italic;
}

.mini-pdf__sub {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-2);
  max-width: 280px;
}

.mini-pdf__foot {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
}

.mini-pdf__foot strong {
  color: var(--ink);
}

/* Cards grid */
.card-grid {
  display: grid;
  gap: calc(var(--grid) * 3);
}

.card-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--line);
  padding: 26px 28px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card--ochre-top::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--ochre);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card:not(.card--ochre-top):not(.card--deep)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--terra);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.card--flat {
  background: transparent;
}

.card--deep {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.card--deep::before {
  display: none;
}

.card--deep .card__no {
  color: rgba(242, 235, 220, 0.55);
}

.card--deep .card__title {
  color: var(--paper);
}

.card__no {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
}

.card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--ink);
}

.card__title--sm {
  font-size: 20px;
}

.card__text {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
}

.card__text--on-dark {
  color: rgba(242, 235, 220, 0.82);
}

.span-3 {
  grid-column: 1 / -1;
}

/* Roadmap */
.roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  position: relative;
}

.roadmap__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: calc(var(--grid) * 2);
  padding-bottom: calc(var(--grid) * 4);
  position: relative;
}

.roadmap__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(var(--terra), rgba(177, 78, 51, 0.15));
}

.roadmap__marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--terra);
  border: 2px solid var(--paper-2);
  margin-top: 6px;
  box-shadow: 0 0 0 1px var(--line-strong);
}

.roadmap__label {
  margin: 0 0 8px;
  color: var(--terra);
}

/* Pills */
.pill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--grid) * 2);
  margin-bottom: calc(var(--grid) * 5);
}

.pill {
  border: 1px solid var(--line);
  padding: 18px 20px;
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pill__key {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.pill__val {
  font-size: 14px;
  color: var(--ink-2);
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 160px 140px;
  gap: calc(var(--grid) * 2);
}

.gallery__item {
  margin: 0;
}

.ph-tile {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper-3);
  border-radius: var(--radius-lg);
}

.ph-tile__cap {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  background: var(--paper);
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  z-index: 1;
  border-radius: var(--radius-sm);
}

.ph-tile--a {
  background: linear-gradient(145deg, var(--paper-3), color-mix(in srgb, var(--terra) 12%, var(--paper-3)));
}

.ph-tile--b {
  background: repeating-linear-gradient(
      90deg,
      rgba(26, 23, 20, 0.05) 0,
      rgba(26, 23, 20, 0.05) 1px,
      transparent 1px,
      transparent 16px
    ),
    var(--paper-2);
}

.ph-tile--c {
  grid-row: span 2;
  background: radial-gradient(circle at 70% 30%, rgba(46, 62, 85, 0.12), transparent 55%), var(--paper-3);
}

.ph-tile--d {
  background: linear-gradient(180deg, var(--paper), var(--paper-3));
}

.ph-tile--e {
  grid-column: span 2;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ochre) 18%, var(--paper-3)), var(--paper-2));
}

.ph-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

.span-2 {
  grid-column: span 2;
}

.ph-tile img,
.ph-tile video,
.mini-lesson__media img,
.mini-lesson__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mock row */
.mock-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(var(--grid) * 3);
  margin-top: calc(var(--grid) * 6);
  align-items: stretch;
}

.mock-pdf {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mock-pdf__head {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
}

.mock-pdf__seal {
  position: absolute;
  right: 16px;
  top: 48px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-8deg);
}

.mock-pdf__seal strong {
  color: var(--terra);
  font-size: 11px;
}

.mock-pdf__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 72px;
}

.mock-pdf__rule {
  width: 40px;
  height: 1px;
  background: var(--ink);
  margin: 10px 0 14px;
}

.mock-pdf__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  margin: 0;
}

.mock-pdf__title em {
  color: var(--terra);
}

.mock-pdf__foot {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sepia);
}

.mini-lesson--mock {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mini-tg {
  border: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.mini-tg__img {
  aspect-ratio: 16/10;
  position: relative;
  background: repeating-linear-gradient(
      45deg,
      rgba(26, 23, 20, 0.06) 0,
      rgba(26, 23, 20, 0.06) 1px,
      transparent 1px,
      transparent 12px
    ),
    var(--paper-3);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.mini-tg__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(26, 23, 20, 0.55), transparent 55%);
}

.mini-tg__stamp {
  position: absolute;
  right: 12px;
  top: 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.mini-tg__title {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.05;
  color: var(--paper);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.mini-tg__ch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sepia);
}

.mini-tg__av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ochre);
  display: grid;
  place-items: center;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 11px;
}

.mini-tg__body {
  padding: 12px 14px;
  font-size: 13px;
  margin: 0;
  flex: 1;
}

.mini-tg__actions {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
}

/* Steps */
.steps {
  list-style: none;
  margin: 0 0 calc(var(--grid) * 5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--grid) * 3);
}

.steps__num {
  display: block;
  margin-bottom: 10px;
  color: var(--terra);
}

.steps__item .card__text {
  margin-top: 8px;
}

/* Form */
.form-shell {
  max-width: 560px;
  margin-inline: auto;
  padding-top: 28px;
}

.form-shell__label {
  margin-bottom: 20px;
}

.application-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field label,
.field legend {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
  display: block;
  margin-bottom: 8px;
}

.field input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  border-radius: var(--radius-sm);
}

.field input:focus {
  outline: 2px solid color-mix(in srgb, var(--terra) 45%, transparent);
  outline-offset: 1px;
}

fieldset.field {
  border: none;
  padding: 0;
  margin: 0;
}

.radio-row,
.check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.radio-row label,
.check-row label {
  font-family: var(--sans);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}

.form-message {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--ochre);
  background: color-mix(in srgb, var(--ochre) 12%, var(--paper));
  font-size: 14px;
  color: var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.form-message[hidden] {
  display: none;
}

/* FAQ */
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item:last-child {
  border-bottom: none;
}

.faq__q {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 18px 40px 18px 18px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
  position: relative;
}

.faq__q::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-style: normal;
  font-size: 16px;
  color: var(--terra);
}

.faq__q[aria-expanded="true"]::after {
  content: "–";
}

.faq__a {
  padding: 0 18px 18px;
}

.faq__a p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 62ch;
}

/* Final */
.final-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.final-visual {
  min-height: 280px;
}

.final-card {
  position: relative;
  border: 1px solid var(--line);
  background: var(--paper-2);
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.final-card__paper {
  position: absolute;
  inset: 12%;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px rgba(26, 23, 20, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.final-card__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      135deg,
      rgba(26, 23, 20, 0.04) 0,
      rgba(26, 23, 20, 0.04) 1px,
      transparent 1px,
      transparent 14px
    );
  opacity: 0.7;
  border-radius: inherit;
}

.final-card__brush {
  position: absolute;
  width: 120px;
  height: 8px;
  background: linear-gradient(90deg, var(--ink), var(--sepia));
  border-radius: 2px;
  left: 18%;
  bottom: 28%;
  transform: rotate(-35deg);
  opacity: 0.85;
}

.final-card__brush::after {
  content: "";
  position: absolute;
  right: -14px;
  top: -6px;
  width: 20px;
  height: 20px;
  background: var(--ochre);
  border-radius: 2px;
}

.final-card__guide {
  position: absolute;
  right: 10%;
  bottom: 14%;
  width: 42%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
}

.final-card__t {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  margin: 8px 0 0;
}

.final-card__t em {
  color: var(--terra);
}

.stamp-ring {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  margin-top: 12px;
  position: relative;
}

.stamp-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0.35;
}

.stamp-ring strong {
  color: var(--terra);
  font-size: 11px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: calc(var(--grid) * 4) 0 calc(var(--grid) * 6);
  background: var(--paper-2);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}

.footer-tag {
  margin: 8px 0 0;
}

.footer-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 0;
}

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  :root {
    --hero-viewport-h: clamp(500px, 85vh, 860px);
  }

  .hero-title {
    font-size: clamp(2.35rem, 9vw, 3.6rem);
  }

  .card-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .span-3 {
    grid-column: 1 / -1;
  }

  .mock-row {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .ph-tile--c {
    grid-row: auto;
  }

  .span-2 {
    grid-column: span 2;
  }

  .final-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel__bot {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .mobile-nav:not([hidden]) {
    display: flex;
  }
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
  :root {
    --container-pad: 16px;
    --hero-viewport-h: clamp(420px, 82vh, 720px);
    --hero-overlap-y: clamp(48px, 12vw, 84px);
    --hero-sheet-radius: clamp(28px, 9vw, 40px);
  }

  .hero-canvas__inner {
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: clamp(80px, 14vh, 140px);
  }

  .hero-video {
    object-position: center 38%;
  }

  .hero-canvas__overlay {
    background:
      radial-gradient(
        ellipse 82% 66% at 50% 42%,
        rgba(26, 23, 20, 0.38) 0%,
        rgba(26, 23, 20, 0.18) 48%,
        rgba(26, 23, 20, 0.07) 100%
      ),
      radial-gradient(
        ellipse 118% 92% at 50% 48%,
        rgba(91, 70, 54, 0.12) 0%,
        transparent 58%
      ),
      radial-gradient(
        ellipse 145% 98% at 50% 115%,
        rgba(26, 23, 20, 0.26) 0%,
        transparent 55%
      ),
      linear-gradient(
        188deg,
        rgba(26, 23, 20, 0.16) 0%,
        rgba(26, 23, 20, 0.07) 38%,
        rgba(26, 23, 20, 0.12) 62%,
        rgba(26, 23, 20, 0.26) 100%
      );
  }

  .post-hero-sheet > .section--overlap-follow {
    padding-top: clamp(28px, 6vw, 48px);
  }

  .hero-lead {
    font-size: 0.98rem;
  }

  .hero-actions--center {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .btn--hero-solid,
  .btn--hero-quiet {
    width: 100%;
    justify-content: center;
  }

  .early-strip__line {
    font-size: 9px;
    letter-spacing: 0.12em;
  }

  .card-grid--2,
  .card-grid--3 {
    grid-template-columns: 1fr;
  }

  .pill-grid {
    grid-template-columns: 1fr;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: span 1;
  }

  .mini-pdf__center {
    padding-right: 0;
  }

  .mini-pdf__seal {
    display: none;
  }

  .hero-panel__bot {
    grid-template-columns: 1fr;
  }

  .faq__q {
    font-size: 18px;
    padding-right: 32px;
  }
}


/* =================================================================
   Visual refresh overlay (formerly preview_visual_refresh/styles.css)
   Селекторы под .refresh — патчи ниже базовых стилей.
   ================================================================= */

/* ============================================================
   АРТмосфера — Visual Refresh (preview overlay)
   Подгружается ПОВЕРХ ../styles.css.
   Hero, базовые переменные и общие классы — берутся из родителя.
   Этот файл правит ТОЛЬКО шапку и блоки ниже Hero.
   ============================================================ */

.refresh {
  /* Внутренние переменные preview, чтобы не трогать корневые */
  --refresh-ink-soft: rgba(26, 23, 20, 0.78);
  --refresh-line-dashed: rgba(26, 23, 20, 0.22);
  --refresh-section-no: rgba(26, 23, 20, 0.08);
  --refresh-overlay: linear-gradient(
    180deg,
    rgba(26, 23, 20, 0.18) 0%,
    rgba(26, 23, 20, 0.42) 55%,
    rgba(26, 23, 20, 0.72) 100%
  );
}

/* ----- Header band (тонкая полоса над шапкой) ----- */
.refresh .header-band {
  background: var(--paper-2);
  border-bottom: 1px dashed var(--refresh-line-dashed);
  position: relative;
  z-index: 51;
}

.refresh .header-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
  padding-block: 6px;
  color: var(--sepia);
}

.refresh .header-band__center {
  text-align: center;
}

/* ----- Refresh header ----- */
.refresh .site-header--refresh {
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: 1px dashed var(--refresh-line-dashed);
}

.refresh .header-nav--refresh {
  gap: 18px;
}

.refresh .header-nav__sep {
  color: var(--sepia);
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.6;
}

/* ----- Pill-buttons (без агрессивного тёмного прямоугольника в шапке) ----- */
.refresh .btn--pill {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.refresh .btn--pill:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.refresh .btn--pill-dark {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  padding: 12px 22px;
  font-size: 14px;
}

.refresh .btn--pill-dark:hover {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
}

.refresh .btn--pill-light {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(242, 235, 220, 0.9);
  box-shadow: 0 10px 32px rgba(26, 23, 20, 0.22);
  padding: 13px 26px;
  font-size: 14px;
  font-weight: 600;
}

.refresh .btn--pill-light:hover {
  background: color-mix(in srgb, var(--paper) 86%, var(--ochre));
}

/* ----- Early-strip с боковыми регистр-метками ----- */
.refresh .early-strip--refresh .early-strip__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

.refresh .early-strip__side--left {
  text-align: left;
}

.refresh .early-strip__side--right {
  text-align: right;
}

@media (max-width: 1024px) {
  .refresh .early-strip__side {
    display: none;
  }
  .refresh .early-strip--refresh .early-strip__inner {
    grid-template-columns: 1fr;
  }
}

/* ----- Section heads — журнальная нумерация ----- */
.refresh .section-head--journal {
  display: grid;
  grid-template-columns: clamp(80px, 11vw, 132px) 1fr;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 36px);
  margin-bottom: calc(var(--grid) * 5);
}

.refresh .section-head--journal > div {
  min-width: 0;
}

.refresh .section-number {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.85;
  color: var(--refresh-section-no);
  margin: 0;
  letter-spacing: -0.04em;
  user-select: none;
}

@media (max-width: 720px) {
  .refresh .section-head--journal {
    grid-template-columns: 1fr;
  }
  .refresh .section-number {
    font-size: 96px;
    margin-bottom: -16px;
  }
}

/* ----- Italic em в заголовках секций (тонкий приём из brand board) ----- */
.refresh .section-title em {
  color: var(--terra);
  font-style: italic;
}

/* ============================================================ */
/* 02. MANIFEST                                                  */
/* ============================================================ */
.refresh .section--manifest .manifest-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.refresh .section--manifest .manifest-grid__copy {
  position: relative;
}

.refresh .section--manifest .section-number {
  position: absolute;
  top: -36px;
  left: -8px;
  font-size: clamp(120px, 15vw, 200px);
  color: var(--refresh-section-no);
}

.refresh .section--manifest .section-meta {
  position: relative;
}

.refresh .section--manifest .section-title {
  position: relative;
  margin-top: clamp(60px, 8vw, 100px);
}

.refresh .numbered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.refresh .numbered-list__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--refresh-line-dashed);
}

.refresh .numbered-list__item:first-child {
  border-top: none;
  padding-top: 0;
}

.refresh .numbered-list__no {
  color: var(--terra);
  letter-spacing: 0.2em;
  padding-top: 4px;
}

.refresh .numbered-list__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--ink);
}

.refresh .numbered-list__text {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}

.refresh .outpull {
  margin-top: clamp(32px, 5vw, 56px);
  padding: 24px clamp(20px, 4vw, 36px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  background: color-mix(in srgb, var(--ochre) 9%, transparent);
}

.refresh .outpull__dash {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1;
  color: var(--terra);
}

.refresh .outpull__text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.32;
  color: var(--ink);
  max-width: 720px;
}

@media (max-width: 880px) {
  .refresh .section--manifest .manifest-grid {
    grid-template-columns: 1fr;
  }
  .refresh .section--manifest .section-number {
    position: static;
    margin: 0;
  }
  .refresh .section--manifest .section-title {
    margin-top: 8px;
  }
}

/* ============================================================ */
/* 03. ДЛЯ КОГО — 3×2, центральная клетка фото                   */
/* ============================================================ */
.refresh .for-whom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--grid) * 3);
}

.refresh .for-whom-grid__photo {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-3);
  min-height: 260px;
}

.refresh .for-whom-grid__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
}

.refresh .for-whom-grid__cap {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  margin: 0;
}

/* Тонкая охровая полоса вместо обычной terra-полоски на части карточек */
.refresh .card--plain::before {
  display: none !important;
}

.refresh .card.card--ochre-thin::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ochre);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

@media (max-width: 1024px) {
  .refresh .for-whom-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .refresh .for-whom-grid__photo {
    grid-column: 1 / -1;
    min-height: 220px;
  }
}

@media (max-width: 640px) {
  .refresh .for-whom-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* 04. ЧТО ВНУТРИ — оглавление выпуска                           */
/* ============================================================ */
.refresh .inside-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--grid) * 3);
}

.refresh .inside-grid > .card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
}

.refresh .inside-grid > .card.span-3 {
  grid-column: span 6;
}

.refresh .inside-grid > .card.card--cover {
  grid-column: span 4;
  padding: 0;
  overflow: hidden;
}

/* Cover card */
.refresh .card--cover .card-cover__media {
  margin: 0;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--paper-3);
  border-bottom: 1px solid var(--line);
}

.refresh .card--cover .card-cover__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.96);
}

.refresh .card--cover .card-cover__body {
  padding: 28px 30px;
}

.refresh .card__title--cover {
  font-size: clamp(24px, 2.6vw, 32px);
  font-style: italic;
}

/* Mockup card */
.refresh .card--mockup {
  padding: 0;
  overflow: hidden;
}

.refresh .card--mockup .mini-lesson--in-card {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  grid-template-rows: auto;
}

.refresh .card--mockup .mini-lesson__media--photo {
  position: relative;
  min-height: 180px;
  background: var(--paper-3);
  overflow: hidden;
}

.refresh .card--mockup .mini-lesson__media--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.refresh .card--mockup .card-mockup__body {
  padding: 20px 24px 24px;
}

/* Stamp card */
.refresh .card--stamp {
  position: relative;
  padding-right: 96px;
}

.refresh .card--stamp .stamp-ring--corner {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 64px;
  height: 64px;
  margin: 0;
  transform: rotate(-7deg);
}

/* PDF card */
.refresh .card--pdf {
  padding: 0;
  overflow: hidden;
}

.refresh .card--pdf .mini-pdf--in-card {
  margin: 0;
  border-radius: 0;
  border-top: none;
  min-height: 100%;
}

/* Deep card */
.refresh .card--deep {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 30px 36px;
}

.refresh .card--deep .card-deep__body {
  max-width: 60ch;
}

.refresh .card--deep .card-deep__mark {
  align-self: center;
}

.refresh .stamp-ring--light {
  color: rgba(242, 235, 220, 0.9);
  border-color: rgba(242, 235, 220, 0.85);
}

.refresh .stamp-ring--light::after {
  border-color: rgba(242, 235, 220, 0.4);
}

.refresh .stamp-ring--light strong {
  color: var(--ochre);
}

@media (max-width: 1024px) {
  .refresh .inside-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .refresh .inside-grid > .card {
    grid-column: span 1;
  }
  .refresh .inside-grid > .card.card--cover,
  .refresh .inside-grid > .card.span-3 {
    grid-column: span 2;
  }
  .refresh .card--deep {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .refresh .inside-grid {
    grid-template-columns: 1fr;
  }
  .refresh .inside-grid > .card,
  .refresh .inside-grid > .card.card--cover,
  .refresh .inside-grid > .card.span-3 {
    grid-column: span 1;
  }
}

/* ============================================================ */
/* 05. МАРШРУТ — арт-карта                                       */
/* ============================================================ */
.refresh .art-map {
  list-style: none;
  margin: 0 0 calc(var(--grid) * 4);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: 16px;
  align-items: start;
}

.refresh .art-map__step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.refresh .art-map__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-3);
}

.refresh .art-map__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
}

.refresh .art-map__stamp {
  position: absolute;
  right: 14px;
  top: 14px;
  background: var(--paper);
  margin: 0;
  width: 56px;
  height: 56px;
  transform: rotate(-6deg);
}

.refresh .art-map__body {
  padding: 0 4px;
}

.refresh .art-map__label {
  color: var(--terra);
  margin: 0 0 8px;
}

.refresh .art-map__arrow {
  align-self: center;
  color: var(--sepia);
  padding-top: clamp(60px, 12vw, 110px);
}

@media (max-width: 880px) {
  .refresh .art-map {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .refresh .art-map__arrow {
    display: none;
  }
}

/* ============================================================ */
/* 06. АТМОСФЕРА — реальные фото                                 */
/* ============================================================ */
.refresh .gallery--photo {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 200px 180px;
}

.refresh .gallery__item--photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-3);
}

.refresh .gallery__item--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(0.95);
}

/* Шум поверх плиток у нас в родителе через .ph-tile::after — не нужно: фото уже живое */
.refresh .gallery__item--photo::after {
  display: none;
}

.refresh .gallery__item--photo .ph-tile__cap {
  z-index: 2;
}

.refresh .gallery__item--c.gallery__item--photo {
  grid-row: span 2;
}

@media (max-width: 1024px) {
  .refresh .gallery--photo {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .refresh .gallery__item--c.gallery__item--photo {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .refresh .gallery--photo {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* 07. МАТЕРИАЛЫ — мокап + реальная обложка                      */
/* ============================================================ */
.refresh .materials-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(24px, 4vw, 40px);
  align-items: stretch;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.refresh .materials-showcase--compact {
  margin-bottom: 0;
}

.refresh .materials-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.refresh .materials-cover {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 1;
  min-height: 320px;
}

.refresh .materials-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.refresh .materials-cover__cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  margin: 0;
}

.refresh .materials-side__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.4;
  color: var(--sepia);
  margin: 0;
}

.refresh .card-grid--materials {
  margin-top: 0;
}

.refresh .materials-row__caption {
  display: block;
  margin: clamp(24px, 4vw, 40px) 0 16px;
  color: var(--sepia);
}

@media (max-width: 1024px) {
  .refresh .materials-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================ */
/* 08. РАННИЙ ДОСТУП — штамп                                     */
/* ============================================================ */
.refresh .early-head {
  position: relative;
}

.refresh .early-head__stamp {
  position: absolute;
  right: -8px;
  top: -8px;
  margin: 0;
  width: 64px;
  height: 64px;
  background: var(--paper);
  transform: rotate(8deg);
}

@media (max-width: 720px) {
  .refresh .early-head__stamp {
    position: static;
    margin: 0 auto 16px;
  }
}

/* ============================================================ */
/* 09. ШАГИ И ФОРМА                                              */
/* ============================================================ */
.refresh .steps--refresh {
  margin-bottom: clamp(40px, 6vw, 64px);
}

.refresh .steps--refresh .steps__item {
  position: relative;
  padding: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  overflow: hidden;
}

.refresh .steps--refresh .steps__item::before {
  display: none;
}

.refresh .steps__big-no {
  position: absolute;
  right: -6px;
  bottom: -22px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 140px;
  line-height: 1;
  color: var(--refresh-section-no);
  pointer-events: none;
  user-select: none;
}

.refresh .form-shell--refresh {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px clamp(20px, 3vw, 36px);
}

.refresh .form-shell--refresh::before {
  display: none;
}

.refresh .form-shell--refresh .form-shell__label {
  color: var(--terra);
  letter-spacing: 0.2em;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--refresh-line-dashed);
}

.refresh .form-shell--refresh .field input[type="text"] {
  background: var(--paper-2);
}

/* ============================================================ */
/* 10. FAQ — нумерация                                           */
/* ============================================================ */
.refresh .faq--refresh {
  background: var(--paper);
  border-radius: var(--radius-lg);
}

.refresh .faq--refresh .faq__q {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  gap: 16px;
  align-items: center;
  padding-block: 22px;
}

.refresh .faq--refresh .faq__no {
  color: var(--terra);
  letter-spacing: 0.2em;
  font-size: 11px;
}

.refresh .faq--refresh .faq__text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}

.refresh .faq--refresh .faq__a {
  padding-left: 80px;
  border-left: 2px solid var(--ochre);
  margin-left: 36px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .refresh .faq--refresh .faq__a {
    padding-left: 22px;
    margin-left: 18px;
  }
  .refresh .faq--refresh .faq__q {
    grid-template-columns: 36px 1fr 20px;
    gap: 10px;
    padding-block: 18px;
  }
  .refresh .faq--refresh .faq__text {
    font-size: 17px;
  }
}

/* ============================================================ */
/* 11. ФИНАЛ — открытая дверь                                    */
/* ============================================================ */
.refresh .section--final-refresh {
  border-top: none;
  padding-block: clamp(48px, 8vw, 96px);
}

.refresh .final-stage {
  position: relative;
  overflow: hidden;
  border-radius: clamp(28px, 4vw, 44px);
  min-height: clamp(420px, 60vh, 620px);
  display: grid;
  place-items: end start;
  isolation: isolate;
}

.refresh .final-stage__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

.refresh .final-stage__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.86) contrast(1.04) saturate(0.96);
}

.refresh .final-stage__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--refresh-overlay);
  pointer-events: none;
}

.refresh .final-stage__copy {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 5vw, 56px);
  max-width: 720px;
  color: var(--paper);
}

.refresh .final-stage__copy .section-meta {
  color: rgba(242, 235, 220, 0.78);
}

.refresh .final-stage__copy .section-meta .dot--light {
  background: var(--ochre);
}

.refresh .final-stage__title {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 16px 0 18px;
  color: var(--paper);
  text-shadow: 0 2px 22px rgba(26, 23, 20, 0.5);
}

.refresh .final-stage__title em {
  color: color-mix(in srgb, var(--terra) 80%, var(--paper));
  font-style: italic;
}

.refresh .final-stage__lead {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: rgba(247, 240, 227, 0.94);
  max-width: 52ch;
  margin: 0 0 24px;
  text-shadow: 0 1px 12px rgba(26, 23, 20, 0.4);
}

.refresh .final-stage__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}

.refresh .final-stage__stamp {
  width: 64px;
  height: 64px;
  margin: 0;
  border-color: rgba(242, 235, 220, 0.85);
  color: rgba(242, 235, 220, 0.9);
  transform: rotate(-6deg);
}

.refresh .final-stage__micro {
  font-size: 13px;
  color: rgba(242, 235, 220, 0.7);
  margin: 0;
}

/* ============================================================ */
/* Footer                                                        */
/* ============================================================ */
.refresh .site-footer--refresh .footer-inner {
  align-items: center;
}

.refresh .footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
  color: var(--sepia);
}

@media (max-width: 720px) {
  .refresh .footer-meta {
    justify-content: flex-start;
  }
}

/* ============================================================ */
/* Section dividers (тонкая ручная линия между крупными секциями)*/
/* ============================================================ */
.refresh .section + .section:not(.section--paper2):not(.section--hero):not(.section--final-refresh)::before {
  content: "";
  display: block;
  width: clamp(80px, 18vw, 180px);
  height: 1px;
  background: var(--line);
  margin: 0 auto clamp(40px, 6vw, 64px);
}

/* Hero и его обёртку — НЕ ТРОГАЕМ.
   Никаких селекторов ниже, которые перекрывают
   .section--hero, .hero-canvas, .hero-canvas__*, .hero-video,
   .hero-title, .hero-lead, .hero-actions, .btn--hero-solid, .btn--hero-quiet.
   Это сознательно. */


/* ============================================================ */
/* STRUCTURE REFRESH — пересборка структуры лендинга.            */
/* Применяется поверх refresh-оверлея под селектором .structure. */
/* Hero, шапка и hero-sheet — не трогаем.                        */
/* ============================================================ */

.structure {
  --structure-air: clamp(72px, 9vw, 116px);
  --structure-air-narrow: clamp(56px, 7vw, 88px);
  --structure-line: rgba(26, 23, 20, 0.16);
  --structure-line-dashed: rgba(26, 23, 20, 0.22);
}

/* --- Header band quiet ---------------------------------------- */
.structure .header-band--quiet {
  padding: 7px 0;
  background: transparent;
  border-bottom: 1px dashed var(--structure-line-dashed);
}
.structure .header-band--quiet .header-band__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  color: var(--sepia);
  font-size: 10.5px;
  letter-spacing: 0.06em;
}
.structure .header-band--quiet .header-band__right {
  text-align: right;
}
@media (max-width: 560px) {
  .structure .header-band--quiet .header-band__right { display: none; }
}

/* Sticky-шапка: убираем border, делаем тонкий dashed */
.structure .site-header--structure {
  background: rgba(242, 235, 220, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px dashed var(--structure-line-dashed);
}

/* --- Section paddings: спокойный, но собранный ритм ----------- */
/* ВАЖНО: hero исключаем — у него собственное padding: 0 в базе.  */
.structure main > .section:not(.section--hero) {
  padding-block: var(--structure-air);
}
.structure .post-hero-sheet--structure {
  /* Более явное наложение «листа» поверх Hero — мягкий полукруг */
  margin-top: calc(-1 * clamp(96px, 11vw, 144px));
  border-radius: clamp(72px, 9vw, 132px) clamp(72px, 9vw, 132px) 0 0;
  padding-top: clamp(28px, 3.4vw, 48px);
  box-shadow: 0 -22px 64px rgba(26, 23, 20, 0.09);
}
.structure .post-hero-sheet--structure .section--intro {
  /* Контент интро поднимаем ближе к скруглённому верху */
  padding-block: clamp(28px, 3.6vw, 56px) clamp(56px, 7vw, 88px);
}
.structure .section--door {
  padding-block: var(--structure-air) clamp(72px, 9vw, 112px);
}

/* Убираем «горизонтальную линию между секциями» от refresh-оверлея,
   нам важна именно пауза, а не разделитель */
.structure .section + .section:not(.section--paper2):not(.section--hero):not(.section--final-refresh)::before {
  display: none;
}

/* Дополнительно ужимаем переходы между крупными «контентными» секциями.
   Гэп между секциями = paddingBottom(prev) + paddingTop(next). Поэтому
   соседние стороны выставляем меньше, чем фасадные.                         */
.structure .section--inside-v2 { padding-block: clamp(40px, 5vw, 64px) clamp(28px, 3.6vw, 44px); }
.structure .section--inside-v2:has(+ .path-to-works-divider) {
  padding-block-end: clamp(12px, 1.8vw, 24px);
}
.structure .section--path-v2 { padding-block: clamp(32px, 4vw, 48px) clamp(36px, 4.4vw, 56px); overflow-x: clip; }
.structure .path-to-works-divider + .section--path-v2 {
  padding-block-start: clamp(16px, 2.2vw, 32px);
}
.structure .section--difference { padding-block: clamp(56px, 6.8vw, 84px); }
.structure .section--atmosphere { padding-block: clamp(36px, 4.4vw, 56px) clamp(36px, 4.4vw, 56px); }
.structure .section--for-whom-v2 { padding-block: clamp(40px, 5vw, 64px) clamp(40px, 5vw, 64px); }

/* Section-head: убираем гигантский нижний margin, делаем компактнее */
.structure .section-head--quiet { margin: 0 auto clamp(28px, 3.4vw, 44px); }
.structure .section-head--left { margin: 0; }

/* --- Section head — тихий, журнальный ------------------------- */
.structure .section-head--quiet {
  margin: 0 auto clamp(48px, 6vw, 80px);
  max-width: 760px;
  text-align: center;
  display: grid;
  gap: clamp(14px, 2vw, 22px);
}
.structure .section-head__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.structure .section-head__title em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.structure .section-head--quiet .section-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sepia);
  justify-self: center;
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* ============================================================ */
/* 01. INTRO — крупная фраза-манифест с мазком                   */
/* ============================================================ */
.structure .section--intro {
  background: transparent;
}
.structure .intro-stage {
  position: relative;
  text-align: center;
  padding: clamp(28px, 5vw, 56px) 0;
  color: var(--terra);
}
.structure .intro-stage__brush {
  position: absolute;
  top: clamp(-22px, -2vw, -8px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(280px, 60vw, 560px);
  height: clamp(48px, 7vw, 80px);
  pointer-events: none;
  z-index: 0;
}
.structure .intro-stage__meta {
  position: relative;
  z-index: 1;
  color: var(--sepia);
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.structure .intro-stage__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.structure .intro-stage__title em {
  color: var(--terra);
  font-style: italic;
}
.structure .intro-stage__lead {
  position: relative;
  z-index: 1;
  margin: clamp(20px, 3vw, 28px) auto 0;
  max-width: 32rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.65;
}

/* ============================================================ */
/* 02. ЧТО ВНУТРИ — 5 модулей                                   */
/* ============================================================ */
.structure .section--inside-v2 {
  background: linear-gradient(180deg, transparent 0%, rgba(234, 224, 204, 0.6) 32%, rgba(234, 224, 204, 0.4) 100%);
}
.structure .modules {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.structure .module {
  position: relative;
  background: rgba(255, 253, 247, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 26px);
  overflow: hidden;
  isolation: isolate;
  color: var(--terra);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}
.structure .module:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(26, 23, 20, 0.08);
}
.structure .module--cover { grid-column: span 4; }
.structure .module--mockup { grid-column: span 2; }
.structure .module--pdf { grid-column: span 3; }
.structure .module--stamp { grid-column: span 3; }
.structure .module--deep { grid-column: span 6; background: var(--ink); color: var(--ochre); border-color: var(--ink-2); }
@media (max-width: 920px) {
  .structure .modules { grid-template-columns: 1fr 1fr; }
  .structure .module--cover,
  .structure .module--mockup,
  .structure .module--pdf,
  .structure .module--stamp { grid-column: span 1; }
  .structure .module--deep { grid-column: span 2; }
}
@media (max-width: 620px) {
  .structure .modules { grid-template-columns: 1fr; }
  .structure .module--cover,
  .structure .module--mockup,
  .structure .module--pdf,
  .structure .module--stamp,
  .structure .module--deep { grid-column: span 1; }
}

.structure .module__media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(26, 23, 20, 0.1);
}
.structure .module--cover .module__media {
  aspect-ratio: 16 / 9;
}
.structure .module__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.structure .module__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--terra);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 999px;
  z-index: 2;
}
.structure .module__brush {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 22px;
  pointer-events: none;
  z-index: 2;
  color: var(--terra);
}
.structure .module__brush--ochre { color: var(--ochre); }
.structure .module__brush--inkblue { color: var(--ochre); }
.structure .module__brush svg { width: 100%; height: 100%; display: block; }
.structure .module__brush--big {
  position: absolute;
  right: -20px;
  bottom: -10px;
  width: 60%;
  height: 80px;
  left: auto;
  z-index: 0;
}

.structure .module__body {
  display: grid;
  gap: 8px;
  position: relative;
  z-index: 1;
  color: var(--ink-2);
}
.structure .module__body--center {
  align-content: center;
  min-height: 220px;
}
.structure .module__no {
  color: var(--sepia);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.structure .module__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.structure .module__title--light { color: var(--paper); }
.structure .module__text {
  margin: 0;
  color: var(--sepia);
  font-size: 15px;
  line-height: 1.6;
  max-width: 38rem;
}
.structure .module__text--light { color: rgba(242, 235, 220, 0.78); }

/* PDF-module */
.structure .module__pdf {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}
.structure .module--pdf .mini-pdf {
  margin: 0;
  width: 100%;
  max-width: 320px;
}

/* Stamp-module */
.structure .module--stamp .stamp-ring--corner {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
}

/* Deep-module (AI) */
.structure .module--deep {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 48px);
}
.structure .module--deep .module__body {
  color: var(--paper);
}
.structure .module--deep .module__no .dot--light { background: var(--ochre); }
.structure .module--deep .module__no { color: rgba(242, 235, 220, 0.7); }
.structure .module--deep .module__brush {
  position: absolute;
  left: 24px;
  bottom: 16px;
  right: auto;
  width: 320px;
  height: 56px;
  color: var(--ochre);
}
@media (max-width: 620px) {
  .structure .module--deep { grid-template-columns: 1fr; }
  .structure .module--deep .module__mark { display: none; }
}

/* ============================================================ */
/* 03. МАРШРУТ — журнальная линия из 6 шагов                    */
/* ============================================================ */
.structure .section--path-v2 {
  background: transparent;
}
.structure .trail {
  margin: 0;
  padding: clamp(20px, 3vw, 40px) 0 clamp(24px, 3vw, 40px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  align-items: start;
  gap: clamp(8px, 1.2vw, 16px);
  color: var(--terra);
}
.structure .trail__step {
  grid-column: span 1;
  display: grid;
  gap: 6px;
  text-align: center;
  color: var(--ink);
  padding: 6px 0;
}
.structure .trail__step--last { color: var(--ink); }
.structure .trail__no {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--sepia);
}
.structure .trail__verb {
  margin: 6px 0 4px;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.15;
  color: var(--ink);
}
.structure .trail__verb em {
  color: var(--terra);
  font-style: italic;
}
.structure .trail__hint {
  margin: 0;
  color: var(--sepia);
  font-size: 12.5px;
  line-height: 1.45;
}
.structure .trail__stroke {
  grid-column: span 1;
  align-self: center;
  display: block;
  height: 24px;
  color: var(--terra);
  opacity: 0.85;
}
.structure .trail__stroke svg { width: 100%; height: 100%; display: block; }
.structure .trail__footnote {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 36rem;
  text-align: center;
  color: var(--sepia);
  font-size: 14px;
  line-height: 1.65;
  font-style: italic;
}

/* ============================================================ */
/* 04. ПОЧЕМУ НЕ КУРС — 3 коротких отличия на фоновом фото         */
/* ============================================================ */
.structure .section--difference {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--ink);
  background-color: var(--paper-2);
  background-image: url("assets/images/result-section-bg-brushes.jpg");
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
}
/* ::before и ::after полностью отключены — фон задан напрямую на секции. */
.structure .section--difference::before,
.structure .section--difference::after {
  content: none;
  display: none;
}
.structure .section--difference > .container {
  position: relative;
  z-index: 2;
}
.structure .section--difference .section-head__title {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 253, 247, 0.55);
}
.structure .section--difference .section-head__title em {
  color: var(--terra);
  font-style: italic;
}
.structure .section--difference .section-meta {
  color: var(--ink-2);
}
.structure .section--difference .section-meta .dot { background: var(--terra); }
.structure .difference {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  align-items: start;
}
.structure .difference__item {
  position: relative;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 2.4vw, 32px);
  background: rgba(246, 238, 224, 0.94);
  border: 1px solid rgba(255, 253, 247, 0.72);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 10px;
  isolation: isolate;
  color: var(--terra);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 48px rgba(26, 23, 20, 0.18);
}
.structure .difference__brush {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 96px;
  height: 22px;
  color: var(--terra);
  pointer-events: none;
  z-index: 0;
}
.structure .difference__brush--ochre { color: var(--ochre); }
.structure .difference__brush--sepia { color: var(--sepia); }
.structure .difference__brush svg { width: 100%; height: 100%; display: block; }
.structure .difference__not {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--terra);
}
.structure .difference__is {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.32;
  color: var(--ink);
}
@media (max-width: 760px) {
  .structure .difference { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* 05. АТМОСФЕРА — большой фото-разворот без пилюль              */
/* ============================================================ */
.structure .section--atmosphere {
  background: transparent;
}
.structure .section-head--atmo {
  max-width: 820px;
}
.structure .section-head__title--atmo em {
  color: var(--terra);
}
.structure .atmo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: clamp(240px, 30vw, 360px) clamp(180px, 22vw, 260px);
  gap: clamp(10px, 1.4vw, 16px);
}
.structure .atmo-grid__cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.structure .atmo-grid__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
  transition: transform 0.5s ease;
}
.structure .atmo-grid__cell:hover img { transform: scale(1.02); }
.structure .atmo-grid__cap {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(255, 253, 247, 0.88);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--sepia);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Журнальный разворот 12-колоночной сетки — 2 ряда, без «дыр».
   Ряд 1: A(7) | B(5)            крупный + парный
   Ряд 2: C(4) | D(4) | E(4)     трио                                       */
.structure .atmo-grid__cell--a { grid-column: 1 / span 7; grid-row: 1; }
.structure .atmo-grid__cell--b { grid-column: 8 / span 5; grid-row: 1; }
.structure .atmo-grid__cell--c { grid-column: 1 / span 4; grid-row: 2; }
.structure .atmo-grid__cell--d { grid-column: 5 / span 4; grid-row: 2; }
.structure .atmo-grid__cell--e { grid-column: 9 / span 4; grid-row: 2; }
@media (max-width: 880px) {
  .structure .atmo-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: clamp(180px, 38vw, 260px);
  }
  .structure .atmo-grid__cell--a { grid-column: 1 / span 2; grid-row: auto; }
  .structure .atmo-grid__cell--b { grid-column: 1 / span 1; grid-row: auto; }
  .structure .atmo-grid__cell--c { grid-column: 2 / span 1; grid-row: auto; }
  .structure .atmo-grid__cell--d { grid-column: 1 / span 1; grid-row: auto; }
  .structure .atmo-grid__cell--e { grid-column: 2 / span 1; grid-row: auto; }
}
@media (max-width: 520px) {
  .structure .atmo-grid {
    grid-template-columns: 1fr;
  }
  .structure .atmo-grid__cell--a,
  .structure .atmo-grid__cell--b,
  .structure .atmo-grid__cell--c,
  .structure .atmo-grid__cell--d,
  .structure .atmo-grid__cell--e { grid-column: 1 / span 1; grid-row: auto; }
}
.structure .atmo-quote {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 38rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink);
}
.structure .atmo-quote__dash {
  display: inline-block;
  margin-right: 8px;
  color: var(--terra);
  font-style: normal;
  font-weight: 500;
}

/* ============================================================ */
/* 06. ДЛЯ КОГО — журнальный разворот: фото + список             */
/* ============================================================ */
.structure .section--for-whom-v2 {
  background: linear-gradient(180deg, rgba(234, 224, 204, 0.4) 0%, transparent 100%);
}
.structure .audience-spread {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 64px);
  /* Текстовая колонка выравнивается по верху фото — две колонки читаются
     как связанный разворот, а не как «съехавший» текст. */
  align-items: start;
}
.structure .audience-spread__copy {
  /* Микро-компенсация: верх заголовка визуально совпадает с верхом фото,
     с учётом высоты строки заголовка. */
  padding-top: clamp(2px, 0.4vw, 8px);
}
.structure .audience-spread__photo {
  position: relative;
  margin: 0;
  border-radius: clamp(36px, 5vw, 72px) clamp(20px, 2.4vw, 32px) clamp(36px, 5vw, 72px) clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  box-shadow: 0 22px 56px rgba(26, 23, 20, 0.1);
  background: var(--paper-2);
}
.structure .audience-spread__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
}
/* «Для кого»: фото студии/группы — нейтральное кадрирование,
   на широкой мобильной плитке чуть ниже центра, чтобы люди
   не «прилипали» к верхнему краю. */
.structure .audience-spread__photo--studio img {
  object-position: center center;
}
@media (max-width: 880px) {
  .structure .audience-spread__photo--studio img {
    object-position: center 42%;
  }
}
.structure .audience-spread__cap {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(255, 253, 247, 0.92);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  color: var(--sepia);
}
.structure .audience-spread__stamp {
  position: absolute;
  right: clamp(-12px, -1vw, -8px);
  top: clamp(-12px, -1vw, -8px);
  z-index: 2;
}
.structure .audience-spread__stamp .stamp-ring {
  background: var(--paper);
  border-color: var(--terra);
  color: var(--terra);
  box-shadow: 0 8px 22px rgba(26, 23, 20, 0.18);
}

.structure .audience-spread__copy { display: grid; gap: clamp(24px, 3vw, 36px); }
.structure .section-head--left {
  margin: 0;
  text-align: left;
  display: grid;
  gap: 12px;
}
.structure .section-head--left .section-meta { justify-self: start; }
.structure .section-head--left .section-head__title { text-align: left; }

.structure .audience {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}
.structure .audience__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: baseline;
  padding-bottom: clamp(12px, 1.6vw, 20px);
  border-bottom: 1px dashed var(--structure-line-dashed);
}
.structure .audience__item:last-child { border-bottom: none; padding-bottom: 0; }
.structure .audience__no {
  color: var(--sepia);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.structure .audience__text {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.4;
  color: var(--ink);
}
@media (max-width: 880px) {
  .structure .audience-spread {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 36px);
  }
  .structure .audience-spread__photo {
    aspect-ratio: 16 / 11;
    max-width: 480px;
    justify-self: start;
  }
}

/* ============================================================ */
/* 07. FAQ — quiet вариант                                       */
/* ============================================================ */
.structure .section--faq-v2 {
  background: transparent;
}
.structure .faq--quiet {
  margin: 0 auto;
  max-width: 720px;
  border-top: 1px dashed var(--structure-line-dashed);
}
.structure .faq--quiet .faq__item {
  border-bottom: 1px dashed var(--structure-line-dashed);
  background: transparent;
  border-radius: 0;
  margin: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.structure .faq--quiet .faq__q {
  padding: 22px 4px;
  background: transparent;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: baseline;
  border-radius: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.2rem);
  color: var(--ink);
  line-height: 1.35;
  cursor: pointer;
}
.structure .faq--quiet .faq__q:hover { background: rgba(255, 253, 247, 0.55); }
.structure .faq--quiet .faq__q:focus-visible {
  outline: 1px dashed var(--terra);
  outline-offset: 4px;
}
.structure .faq--quiet .faq__no { color: var(--sepia); }
.structure .faq--quiet .faq__a {
  padding: 0 4px 24px 66px;
  color: var(--sepia);
  font-size: 15px;
  line-height: 1.65;
}
.structure .faq--quiet .faq__a p { margin: 0; }

/* ============================================================ */
/* 08. ВХОД В КЛУБ — CTA + форма                                 */
/* ============================================================ */
/* Внешняя секция — позиционирующий контейнер для видео-фона */
.structure .section--door {
  position: relative;
  overflow: hidden;
  /* Фоновый градиент убираем — акварельное видео само даёт тёплый тон */
  background: transparent;
}

/* Видео — абсолютная подложка за всей секцией заявки */
.structure .section-door-bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
  background: transparent;
  border: none;
}

/* .container внутри секции поверх видео */
.structure .section--door > .container {
  position: relative;
  z-index: 2;
}

/* Большая карточка заявки — нейтральный светлый фон,
   никакой прозрачности и анимации внутри */
.structure .door {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  background: rgba(255, 253, 247, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(36px, 5vw, 64px);
}
@media (max-width: 880px) {
  .structure .door { grid-template-columns: 1fr; padding: clamp(28px, 6vw, 40px); }
}

.structure .door__copy {
  position: relative;
  isolation: isolate;
}
.structure .door__title {
  margin: clamp(14px, 1.6vw, 18px) 0 clamp(18px, 2vw, 24px);
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.structure .door__title em {
  color: var(--terra);
  font-style: italic;
}
/* Мазок — аккуратная декоративная подложка под одно слово в заголовке */
.structure .door__title-accent {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0.02em 0.1em 0 0.04em;
}
.structure .door__title-word {
  position: relative;
  z-index: 1;
  font-style: italic;
}
.structure .door__brush {
  position: absolute;
  left: -0.18em;
  right: -0.18em;
  bottom: 0.04em;
  height: 0.55em;
  color: var(--terra);
  z-index: 0;
  pointer-events: none;
}
.structure .door__brush svg {
  width: 100%;
  height: 100%;
  display: block;
}
.structure .door__lead {
  position: relative;
  z-index: 1;
  margin: 0 0 clamp(22px, 2.6vw, 30px);
  max-width: 32rem;
  color: var(--sepia);
  font-size: 15.5px;
  line-height: 1.65;
}
.structure .door__steps {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.structure .door__steps li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: baseline;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.45;
}
.structure .door__steps .mono-tag { color: var(--sepia); }

.structure .door__form {
  background: var(--paper-2, #f6eee0);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
}
.structure .door__form-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sepia);
}
.structure .door__form .field { gap: 6px; }
.structure .door__form .field input[type="text"],
.structure .door__form .field input[type="email"] {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--sans);
  background: rgba(255, 253, 247, 0.7);
}
.structure .door__form .field input:focus-visible {
  outline: 1px dashed var(--terra);
  outline-offset: 2px;
  background: #fffdf6;
}
.structure .door__form .field legend {
  font-family: var(--mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sepia);
  margin-bottom: 6px;
}
.structure .door__form .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--ink-2);
  font-size: 14px;
}
.structure .door__micro {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--sepia);
  text-align: center;
}

/* Footer — структурная версия */
.structure .site-footer--structure {
  padding-block: clamp(40px, 5vw, 64px);
  background: transparent;
  border-top: 1px dashed var(--structure-line-dashed);
}

/* ============================================================ */
/* Адаптивные мелочи                                             */
/* ============================================================ */
@media (max-width: 720px) {
  .structure .section-head--quiet { text-align: left; }
  .structure .section-head--quiet .section-meta { justify-self: start; }
  .structure .intro-stage { text-align: left; }
  .structure .intro-stage__brush { left: 0; transform: none; width: 80%; }
}

/* Совсем выключаем фонетический шум на мобайле для скорости */
@media (max-width: 520px) {
  body::after { display: none; }
}


/* ============================================================ */
/* FINAL FIXES — точечные правки (тексты, CTA, без штампов)      */
/* ============================================================ */

/* Подстраховка: если где-то остались круглые штампы в HTML — скрыть */
.structure .stamp-ring,
.structure .mini-pdf__seal,
.structure .audience-spread__stamp { display: none !important; }

/* AI-наставник: без штампа .module__mark колонка пустая —
   возвращаем модулю одну колонку для текста.                     */
.structure .module--deep {
  grid-template-columns: 1fr;
  padding: clamp(32px, 4vw, 48px) clamp(28px, 3.6vw, 48px);
}

/* Inline CTA — кнопка после крупного блока, спокойный воздух сверху */
.structure .inline-cta {
  margin-top: clamp(28px, 3.4vw, 44px);
  display: flex;
  justify-content: center;
}
.structure .inline-cta--left { justify-content: flex-start; }
.structure .inline-cta .btn--pill-dark {
  padding: 14px 32px;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Audience без caption — фото чистое */
.structure .audience-spread__photo {
  /* Сохраняем форму, но без подписей: убираем фоновый бордюр снизу */
}

/* Atmo-grid без подписей: ничего не плавает, фото чистые */
.structure .atmo-grid__cap { display: none; }

/* Difference (теперь «Твой результат»): первая строка карточки
   `difference__not` — теперь это заголовок «ЕСЛИ ТОЛЬКО НАЧИНАЕШЬ»,
   а не моно-метка. Приводим к более «карточному» виду.              */
.structure .section--difference .difference__not {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--terra);
}
.structure .section--difference .difference__is {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* PDF-мокап: без печати .mini-pdf__seal — отступы остаются ровными */
.structure .module--pdf .mini-pdf {
  padding-top: clamp(18px, 2vw, 24px);
}

/* Section-head: без мини-меток над заголовком — заголовок стоит
   сразу, без пустого верхнего гэпа от удалённой меты.              */
.structure .section-head--quiet { gap: 0; }

/* Mobile-nav: для новой длины меню (4 пункта) */
@media (max-width: 940px) {
  .structure .header-nav--refresh { gap: 14px; }
}

/* Audience — на десктопе колонка с заголовком получает менее «прижатый» вид */
.structure .audience-spread__copy { padding-top: clamp(2px, 0.4vw, 8px); }

/* Скрыть пустой trail__footnote, если случайно вернётся */
.structure .trail__footnote { display: none; }


/* ============================================================ */
/* TYPOGRAPHY RHYTHM — финальная нормализация размеров            */
/* ============================================================ */

/* Интро-блок: ширина лида подобрана так, чтобы две части
   реплики (до и после «рядом.») умещались каждая на одной строке. */
.structure .section--intro .container.narrow { max-width: min(720px, 100% - 48px); }
.structure .intro-stage__lead {
  max-width: 40rem;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.62;
}

/* Дорожная карта: горизонтальный ряд только от 1025px. Правило без медиазапроса
   с «1fr auto …» перебивало mobile и снова собирало 9 колонок → горизонтальный скролл. */
@media (min-width: 1025px) {
  .structure .trail.trail--5 {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: clamp(8px, 1.1vw, 16px);
    align-items: start;
  }
}

.structure .trail__step { padding: 6px 6px 14px; gap: 6px; position: relative; }
/* «Станция» — мягкая терракотовая точка над номером,
   отметка узла маршрута. Размер маленький, без визуального шума. */
.structure .trail__step::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--terra);
  opacity: 0.78;
}
.structure .trail__no {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  margin-bottom: 4px;
}
.structure .trail__verb {
  margin: 8px 0 10px;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1.18;
}
.structure .trail__hint {
  font-size: clamp(0.94rem, 1.05vw, 1.0625rem);
  line-height: 1.55;
  max-width: 22rem;
  margin: 0 auto;
}
/* Тонкий мазок между шагами — только в широком ряду */
@media (min-width: 1025px) {
  .structure .trail__stroke {
    display: block;
    width: clamp(24px, 2.6vw, 40px);
    height: 14px;
    align-self: start;
    margin-top: 7px;
    color: var(--terra);
    opacity: 0.55;
  }
}

@media (max-width: 1024px) {
  .structure .section--path-v2 {
    overflow-x: clip;
  }
  .structure .trail.trail--5 {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: clamp(24px, 5vw, 32px);
    max-width: min(440px, 100%);
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(8px, 3vw, 16px);
    box-sizing: border-box;
  }
  .structure .trail.trail--5 .trail__stroke {
    display: none !important;
  }
  .structure .trail.trail--5 .trail__step {
    width: 100%;
    max-width: 440px;
    min-width: 0;
    margin-inline: auto;
    text-align: center;
  }
  .structure .trail.trail--5 .trail__step::before {
    display: none;
  }
  .structure .trail.trail--5 .trail__hint {
    max-width: min(22rem, 100%);
    margin-inline: auto;
    line-height: 1.45;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .structure .trail.trail--5 {
    max-width: 100%;
    padding-inline: 20px;
  }
  .structure .trail.trail--5 .trail__step {
    max-width: 100%;
  }
  .structure .trail.trail--5 .trail__hint {
    max-width: min(280px, 100%);
  }
}

/* Inside cards: текст немного крупнее, чтобы держать ритм
   с дорожной картой. */
.structure .module__title {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
}
.structure .module__text {
  font-size: clamp(0.94rem, 1.1vw, 1.0625rem);
  line-height: 1.6;
}

/* Difference (Твой результат): выравниваем по ритму карточек */
.structure .section--difference .difference__not {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}
.structure .section--difference .difference__is {
  font-size: clamp(0.94rem, 1.1vw, 1.0625rem);
  line-height: 1.58;
}

/* Раздел «Этот клуб точно для тебя» — компактный, в один экран desktop.
   Уменьшаем заголовок, плотнее список, меньше вертикальных отступов. */
.structure .section--for-whom-v2 {
  padding-block: clamp(40px, 5vw, 64px) clamp(40px, 5vw, 64px);
}
.structure .section--for-whom-v2 .section-head__title {
  font-size: clamp(1.7rem, 2.9vw, 2.2rem);
  line-height: 1.12;
}
.structure .audience-spread {
  gap: clamp(24px, 3.4vw, 48px);
  align-items: start;
}
.structure .audience-spread__photo {
  aspect-ratio: 4 / 5.2;
}
.structure .audience-spread__copy {
  gap: clamp(16px, 2vw, 24px);
  padding-top: 0;
}
.structure .audience { gap: clamp(8px, 1.1vw, 14px); }
.structure .audience__item {
  grid-template-columns: 48px 1fr;
  gap: clamp(12px, 1.6vw, 18px);
  padding-bottom: clamp(8px, 1.1vw, 14px);
  align-items: baseline;
}
.structure .audience__no {
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.structure .audience__text {
  font-size: clamp(0.95rem, 1.35vw, 1.125rem);
  line-height: 1.4;
}
.structure .audience-spread__copy .inline-cta {
  margin-top: clamp(16px, 2.2vw, 26px);
}

/* Форма: чуть собраннее по типографике */
.structure .door__title {
  font-size: clamp(1.9rem, 3.6vw, 2.55rem);
  line-height: 1.14;
}
.structure .door__lead {
  font-size: clamp(0.94rem, 1.1vw, 1.0625rem);
  line-height: 1.62;
}

/* Section-head: единый ритм нижнего margin под все блоки */
.structure .section-head--quiet {
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.structure .section-head__title {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12;
}

/* Hero-lead: чуть шире, чтобы вторая строка
   «получать обратную связь и расти как художник» легла целиком. */
.hero-lead { max-width: 36rem; }

/* Управляемый перенос: <br class="lb-desktop"> срабатывает только
   на десктопе. На мобилке текст вьётся естественно, лишний разрыв
   не появляется. */
.lb-desktop { display: none; }
@media (min-width: 720px) {
  .lb-desktop { display: inline; }
}


/* ============================================================ */
/* CARD MEDIA — PDF-карточка: реальное фото вместо мокапа        */
/* ============================================================ */
/* Карточка .module--pdf теперь использует ту же media-схему,
   что и .module--cover / .module--mockup (figure > img). Мокап
   .mini-pdf убран из разметки, его стили остаются неиспользованными.
   Этот override задаёт пропорции и кадрирование под фото
   pdf-guides-materials-table-01.jpg. */
.structure .module--pdf .module__media--pdf {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  margin: 0;
}
.structure .module--pdf .module__media--pdf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 56%;
  display: block;
  filter: saturate(0.95) contrast(1.03);
}
/* На планшетах карточка становится квадратной — слегка
   приподнимаем фокус, чтобы лист и кружка не обрезались. */
@media (max-width: 920px) {
  .structure .module--pdf .module__media--pdf {
    aspect-ratio: 4 / 3.1;
  }
  .structure .module--pdf .module__media--pdf img {
    object-position: center 54%;
  }
}
/* Мобилка — высокая узкая карточка, держим композицию по центру. */
@media (max-width: 620px) {
  .structure .module--pdf .module__media--pdf {
    aspect-ratio: 4 / 3.4;
  }
  .structure .module--pdf .module__media--pdf img {
    object-position: center 55%;
  }
}

/* ----- Мастер-классы: фокус на людях у мольбертов + материалы ----- */
/* Кадр 4:3.2 при контейнере 4:3 теряет минимум по вертикали.
   Сдвигаем фокус чуть вверх, чтобы головы и мольберты не обрезались,
   а набор карандашей в нижнем переднем плане оставался читаемым. */
.structure .module--mockup .module__media--masterclass img {
  object-position: center 46%;
  filter: saturate(0.96) contrast(1.02);
}
/* Планшет: пропорция меняется на чуть более квадратную — балансируем. */
@media (max-width: 920px) {
  .structure .module--mockup .module__media--masterclass img {
    object-position: center 48%;
  }
}
/* Мобилка: карточка становится выше — приподнимаем фокус, чтобы
   мольберты и фигуры девушек не уходили под обрез. */
@media (max-width: 620px) {
  .structure .module--mockup .module__media--masterclass {
    aspect-ratio: 4 / 3.2;
  }
  .structure .module--mockup .module__media--masterclass img {
    object-position: center 44%;
  }
}

/* ----- Галерея «Работы участников»: портретные этюды (cell --c) ----- */
/* Кадр 909×575 (≈1.58), ячейка на десктопе ≈1.54 — обрезка
   минимальная по горизонтали. Слегка приподнимаем фокус, чтобы
   верхний ряд этюдов оказался в визуальном центре. */
.structure .atmo-grid__cell--portrait-studies img {
  object-position: center 46%;
}
@media (max-width: 880px) {
  /* На планшете ячейка становится квадратной (1 из 2 колонок) —
     контрастность обрезки растёт, центрируем чуть выше. */
  .structure .atmo-grid__cell--portrait-studies img {
    object-position: center 44%;
  }
}
@media (max-width: 520px) {
  /* Мобилка — карточка во всю ширину, естественная пропорция. */
  .structure .atmo-grid__cell--portrait-studies img {
    object-position: center 48%;
  }
}

/* ----- Карточка «Разборы с преподавателями» (module--stamp) ----- */
/* Карточка теперь содержит текст сверху и фото снизу.
   Базовый flex-column из .module даёт нужный вертикальный порядок
   и аккуратный gap между текстом и медиа. */
.structure .module--stamp {
  justify-content: space-between;
}
/* Текстовая часть прижата к верху — никаких center-вертикалок. */
.structure .module--stamp .module__body {
  align-content: start;
}
/* Фото мастерской: пропорция и фокус на людях у мольбертов. */
.structure .module--stamp .module__media--feedback {
  aspect-ratio: 4 / 3;
  margin-top: clamp(4px, 0.8vw, 10px);
}
.structure .module--stamp .module__media--feedback img {
  object-position: center 50%;
  filter: saturate(0.94) contrast(1.02);
}
@media (max-width: 920px) {
  /* Планшет: карточка становится одной колонкой из двух. */
  .structure .module--stamp .module__media--feedback {
    aspect-ratio: 4 / 3;
  }
  .structure .module--stamp .module__media--feedback img {
    object-position: center 52%;
  }
}
@media (max-width: 620px) {
  /* Мобилка: чуть выше пропорция, чтобы преподаватель и натюрморты
     в центре кадра оставались в визуальном центре. */
  .structure .module--stamp .module__media--feedback {
    aspect-ratio: 4 / 3.1;
  }
  .structure .module--stamp .module__media--feedback img {
    object-position: center 54%;
  }
}

/* ----- Галерея «Работы участников»: масляный портрет (cell --a) ----- */
/* Кадр 1024×824 (≈1.24, картина по центру), большая ячейка
   на десктопе ≈1.94 → крадётся верх/низ. Фокус — на лице и
   фактуре мазков; смещение чуть выше центра, чтобы верх рамы
   и зрачки читались, а низ ушёл естественно. */
.structure .atmo-grid__cell--oil-portrait img {
  object-position: center 42%;
}
@media (max-width: 880px) {
  /* Планшет: ячейка тянется на всю ширину 2-колоночной сетки
     с auto-высотой — фото показывается естественной пропорцией,
     лицо не обрезается. Возвращаем нейтральный центр. */
  .structure .atmo-grid__cell--oil-portrait img {
    object-position: center center;
  }
}

/* ----- Галерея «Работы участников»: рыжая модель + холст (cell --b) ----- */
/* Кадр 800×624 (≈1.28), ячейка на десктопе ≈1.39 — обрезка
   практически только по вертикали и совсем небольшая (~4%/сторону).
   Слева — холст с портретом, справа — сама модель в зеркальной
   позе. Оба лица располагаются на ~30% высоты, поэтому даём
   лёгкий апвард-бias, чтобы они оказались в визуальном центре. */
.structure .atmo-grid__cell--oil-portrait-redhead img {
  object-position: center 46%;
}
@media (max-width: 880px) {
  /* Планшет/мобилка: 2-колоночная сетка с auto-высотой — фото
     показывается естественной пропорцией, оба лица в кадре
     целиком, обрезки нет. Нейтральный центр. */
  .structure .atmo-grid__cell--oil-portrait-redhead img {
    object-position: center center;
  }
}

/* ----- Галерея «Работы участников»: натюрморт карандашами (cell --e) ----- */
/* Кадр 1024×819 (≈1.25), ячейка на десктопе ≈1.54 — обрезка
   по вертикали ~9% сверху/снизу. Сам рисунок (фрукты + бумага)
   лежит примерно в центре-низу кадра, в верхнем-левом углу —
   яркое пятно света от окна. Лёгкое смещение вниз выводит
   натюрморт в визуальный центр и приглушает блик. */
.structure .atmo-grid__cell--still-life-fruit img {
  object-position: center 54%;
}
@media (max-width: 880px) {
  /* Планшет/мобилка: ячейка раскрывается на естественную высоту
     фото, обрезки нет — возвращаем нейтральный центр. */
  .structure .atmo-grid__cell--still-life-fruit img {
    object-position: center center;
  }
}


/* ============================================================ */
/* ДЕКОРАТИВНЫЙ ПЕРЕХОД «Что внутри клуба → Твой путь»            */
/* Мягкие мазки и точки в палитре сайта — переход между секциями */
/* ============================================================ */
.path-to-works-divider {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  /* Вертикальная высота переходной зоны — замещает лишний padding
     двух соседних секций. Отступы самих секций при этом остаются. */
  height: clamp(60px, 9vw, 120px);
  /* Фоновый цвет прозрачный — видна страница сквозь divider. */
  background: transparent;
}

/* Длинная волнистая «линия маршрута» — тянется на всю ширину */
.path-to-works-divider__sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  color: var(--terra);
}

/* Крупный левый мазок — якорит левую сторону,
   намекает на движение кисти из блока «Путь» */
.path-to-works-divider__brush {
  position: absolute;
  display: block;
  color: var(--terra);
}
.path-to-works-divider__brush--left {
  left: clamp(16px, 5vw, 80px);
  top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  width: clamp(140px, 22vw, 280px);
  height: clamp(24px, 3.6vw, 44px);
}
/* Правый — поменьше, охристый, лёгкая асимметрия */
.path-to-works-divider__brush--right {
  right: clamp(16px, 7vw, 120px);
  top: 46%;
  transform: translateY(-50%) rotate(2deg);
  width: clamp(100px, 16vw, 200px);
  height: clamp(18px, 2.8vw, 34px);
  color: var(--ochre);
}

/* Точки — след краски / следы кисти */
.path-to-works-divider__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--terra);
  pointer-events: none;
}
.path-to-works-divider__dot--1 {
  width: clamp(6px, 1vw, 10px);
  height: clamp(6px, 1vw, 10px);
  left: clamp(260px, 26vw, 400px);
  top: 36%;
  opacity: 0.32;
}
.path-to-works-divider__dot--2 {
  width: clamp(4px, 0.7vw, 7px);
  height: clamp(4px, 0.7vw, 7px);
  left: clamp(300px, 30vw, 460px);
  top: 64%;
  background: var(--ochre);
  opacity: 0.38;
}
.path-to-works-divider__dot--3 {
  width: clamp(5px, 0.8vw, 9px);
  height: clamp(5px, 0.8vw, 9px);
  right: clamp(300px, 32vw, 500px);
  top: 28%;
  opacity: 0.26;
}

/* Планшет — убираем мелкие точки, упрощаем */
@media (max-width: 880px) {
  .path-to-works-divider {
    height: clamp(48px, 8vw, 80px);
  }
  .path-to-works-divider__dot--2,
  .path-to-works-divider__dot--3 { display: none; }
  .path-to-works-divider__brush--right { display: none; }
}

/* Мобилка — только тонкая волна и одна точка,
   чтобы не засорять узкий экран */
@media (max-width: 520px) {
  .path-to-works-divider {
    height: clamp(36px, 7vw, 56px);
  }
  .path-to-works-divider__brush--left { display: none; }
  .path-to-works-divider__dot--1 { display: none; }
}