@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/lettrage/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/lettrage/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/lettrage/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/lettrage/syne-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/lettrage/syne-latin-800-normal.woff2") format("woff2");
}

:root {
  --k-base: #010d0d;
  --k-action: #54f7f0;
  --k-spot-deep: #2af4f5;
  --k-canvas: #011514;
  --k-surface-2: #072322;
  --k-body: #ffffff;
  --k-muted: #c2c1c1;
  --k-hairline: rgba(255, 255, 255, 0.13);
  --k-line-strong: rgba(255, 255, 255, 0.28);
  --k-grad-1: #ccfbfd;
  --k-blend-b: #7bf4f8;
  --k-warn-band: #c1272d;

  --g-hair: 6px;
  --g-tiny: 14px;
  --g-snug: 20px;
  --g-base: 32px;
  --g-wide: 48px;
  --g-roomy: 72px;
  --g-vast: 112px;
  --g-huge: 160px;

  --r-hair: 2px;
  --r-tiny: 4px;
  --r-snug: 10px;
  --r-base: 16px;
  --r-wide: 28px;
  --r-roomy: 36px;
  --r-vast: 44px;
  --r-huge: 56px;
  --r-stadium: 9999px;
  --r-round-full: 50%;

  --f-banner: "Syne", "Trebuchet MS", sans-serif;
  --f-prose: "Inter", "Helvetica Neue", Arial, sans-serif;

  --z-display-1: 30px;
  --z-head: 24px;
  --z-sub: 20px;
  --z-display-4: 17px;
  --z-h5: 15px;
  --z-xs-2: 13px;
  --z-reading: 16px;
  --z-small: 13px;
  --z-legal: 11px;

  --l-dense: 1.15;
  --l-normal: 1.55;
  --l-open: 1.7;

  --e-snug: 0;
  --e-default: 0;
  --e-loose: 0.02em;

  --w-base: 400;
  --w-mid: 500;
  --w-heavy: 700;

  --d-hair: 0 1px 2px rgba(0, 0, 0, 0.28);
  --d-tiny: 0 2px 4px rgba(0, 0, 0, 0.32);
  --d-snug: 0 4px 10px rgba(0, 0, 0, 0.36);
  --d-base: 0 10px 28px rgba(0, 0, 0, 0.42);
  --d-wide: 0 20px 48px rgba(0, 0, 0, 0.48);
  --d-roomy: 0 26px 60px rgba(0, 0, 0, 0.52);
  --d-vast: 0 32px 72px rgba(0, 0, 0, 0.56);
  --d-huge: 0 40px 96px rgba(0, 0, 0, 0.6);

  --t-short: 214ms;
  --t-steady: 400ms;
  --t-gentle: 692ms;
  --x-land: cubic-bezier(0.29, 0.93, 0.51, 1);
  --x-in: cubic-bezier(0.49, 0.01, 0.71, 0.07);
  --x-in-out: cubic-bezier(0.54, 0.04, 0.46, 0.99);
  --x-elastic: cubic-bezier(0.34, 1.5, 0.65, 1);

  --v-outer: 1260px;
  --v-readable: 1260px;
  --v-tight: 520px;
  --v-pad-lg: 48px;
  --v-inset-tablet: 32px;
  --v-padding-mobile: 16px;

  --b-thin: 1px;
  --b-base: 2px;
  --b-bold: 3px;

  --h-size-desktop: 58px;
  --h-short: 56px;

  --pad-side: var(--v-padding-mobile);
  --band: var(--g-base);
}

@media (min-width: 600px) {
  :root {
    --z-display-1: 40px;
    --z-head: 28px;
    --z-sub: 22px;
    --z-display-4: 18px;
    --z-reading: 17px;
    --z-small: 14px;
    --z-legal: 12px;
    --pad-side: var(--v-inset-tablet);
  }
}

@media (min-width: 900px) {
  :root {
    --z-display-1: 52px;
    --z-head: 32px;
    --z-sub: 24px;
    --z-display-4: 19px;
    --z-h5: 16px;
    --z-xs-2: 14px;
    --pad-side: var(--v-pad-lg);
    --band: var(--g-wide);
  }
}

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

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 140px;
}

body {
  margin: 0;
  background: var(--k-canvas);
  color: var(--k-body);
  font-family: var(--f-prose);
  font-size: var(--z-reading);
  font-weight: var(--w-base);
  line-height: var(--l-normal);
  letter-spacing: var(--e-default);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: anywhere;
  margin: 0;
  letter-spacing: var(--e-snug);
}

h1 {
  font-family: var(--f-banner);
  font-size: var(--z-display-1);
  font-weight: var(--w-heavy);
  line-height: var(--l-dense);
}

h2 {
  font-family: var(--f-banner);
  font-size: var(--z-head);
  font-weight: var(--w-heavy);
  line-height: var(--l-dense);
}

h3 {
  font-family: var(--f-prose);
  font-size: var(--z-sub);
  font-weight: var(--w-mid);
  line-height: var(--l-dense);
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
}

a {
  color: var(--k-action);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--k-grad-1);
}

:focus-visible {
  outline: var(--b-base) solid var(--k-action);
  outline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
}

.saut-href {
  position: fixed;
  top: -220px;
  left: var(--g-tiny);
  z-index: 240;
  padding: var(--g-tiny) var(--g-snug);
  border-radius: var(--r-snug);
  background: var(--k-action);
  color: var(--k-base);
  font-weight: var(--w-heavy);
  transition: top var(--t-short) var(--x-land);
}

.saut-href:focus {
  top: var(--g-tiny);
  color: var(--k-base);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.chambre-guts,
.bandeau-guts,
.vitrail-guts,
.mur-guts,
.pavillon-guts,
.trumeau-guts,
.socle-guts,
.etiquette-guts,
.registre-guts,
.corniche-guts,
.vestiaire-guts,
.borne-guts,
.marque-guts,
.vestibule-guts,
.terrasse-guts,
.pilier-guts,
.paroi-guts,
.placard-guts,
.classeur-guts {
  width: 100%;
  max-width: calc(var(--v-outer) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad-side);
}

/* ── шапка HEAD-BANNER ───────────────────────────────────────────────── */
.chambre {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--k-base);
  transition: box-shadow var(--t-steady) var(--x-land);
}

.chambre.is-shrunk {
  box-shadow: var(--d-base);
}

.chambre-crest > .chambre-guts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-tiny);
  padding-block: var(--g-hair);
  transition: padding-block var(--t-steady) var(--x-land);
}

.chambre.is-shrunk .chambre-crest > .chambre-guts {
  padding-block: 2px;
}

.chambre-lead {
  display: none;
  flex: 1 1 0;
  color: var(--k-muted);
  font-size: var(--z-legal);
  letter-spacing: var(--e-loose);
  text-transform: uppercase;
}

.chambre-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: var(--g-hair) var(--g-tiny);
  border: var(--b-thin) solid var(--k-hairline);
  border-radius: var(--r-stadium);
  background: radial-gradient(120% 140% at 50% 20%, rgba(84, 247, 240, 0.16), rgba(1, 21, 20, 0) 72%);
  transition: border-color var(--t-short) var(--x-land);
}

.chambre-badge:hover {
  border-color: var(--k-action);
}

.chambre-badge img {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 40px;
  transition: height var(--t-steady) var(--x-land);
}

.chambre.is-shrunk .chambre-badge img {
  height: 32px;
}

.chambre-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--g-hair);
}

.chambre-push {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: var(--g-snug);
  border-radius: var(--r-base);
  font-family: var(--f-banner);
  font-size: var(--z-xs-2);
  font-weight: var(--w-heavy);
  white-space: nowrap;
}

.chambre-lever {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--g-hair);
  min-height: 44px;
  padding-inline: var(--g-tiny);
  border: 0;
  border-radius: var(--r-base);
  background: rgba(84, 247, 240, 0.14);
  color: var(--k-body);
  font-size: var(--z-small);
  font-weight: var(--w-mid);
  cursor: pointer;
  transition: background var(--t-short) var(--x-land);
}

.chambre-lever:hover {
  background: rgba(84, 247, 240, 0.26);
  color: var(--k-body);
}

.chambre-lever-bars {
  position: relative;
  display: block;
  width: 18px;
  height: var(--b-base);
  background: var(--k-action);
}

.chambre-lever-bars::before,
.chambre-lever-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: var(--b-base);
  background: var(--k-action);
}

.chambre-lever-bars::before {
  top: -6px;
}

.chambre-lever-bars::after {
  top: 6px;
}

.chambre-lever-word {
  display: none;
}

.chambre-strip {
  display: none;
  border-block-start: var(--b-thin) solid var(--k-hairline);
}

.chambre-strip > .chambre-guts {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding-block: var(--g-hair);
}

.chambre.is-shrunk .chambre-strip > .chambre-guts {
  min-height: 46px;
  padding-block: 2px;
}

.chambre-links {
  max-width: 100%;
}

.chambre-queue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px var(--g-hair);
  list-style: none;
}

.chambre-one {
  display: flex;
  align-items: center;
}

.chambre-one + .chambre-one::before {
  content: "/";
  margin-inline-end: var(--g-hair);
  color: var(--k-line-strong);
  font-size: var(--z-xs-2);
}

.chambre-href {
  display: inline-block;
  padding-block: var(--g-hair);
  color: var(--k-body);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: transform var(--t-short) var(--x-land), color var(--t-short) var(--x-land);
}

.chambre-href:hover,
.chambre-href:focus-visible {
  transform: translateY(-2px);
  color: var(--k-action);
}

.chambre-href.is-here {
  color: var(--k-action);
  font-weight: var(--w-heavy);
}

.chambre-slide {
  display: none;
  border-block-start: var(--b-thin) solid var(--k-hairline);
  background: var(--k-canvas);
}

.chambre-slide.is-open {
  display: block;
}

.chambre-stack {
  display: flex;
  flex-direction: column;
  gap: var(--g-hair);
  max-height: 62vh;
  overflow-y: auto;
  padding: var(--g-tiny) var(--pad-side) var(--g-snug);
  list-style: none;
}

.chambre-stack .chambre-href {
  display: block;
  padding-block: var(--g-hair);
  font-size: var(--z-reading);
}

/* ── плашка 18+ ──────────────────────────────────────────────────────── */
.bandeau-rg {
  padding: var(--g-hair) var(--pad-side);
  background: var(--k-warn-band);
  color: var(--k-body);
  font-size: var(--z-legal);
  line-height: var(--l-normal);
  text-align: center;
}

.bandeau-href {
  color: var(--k-body);
  text-decoration: underline;
}

.bandeau-href:hover,
.bandeau-href:focus-visible {
  color: var(--k-body);
  text-decoration: none;
}

/* ── хлебные крошки BREAD-02 ─────────────────────────────────────────── */
.vitrail {
  padding-block: var(--g-snug) 0;
}

.vitrail-queue {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-hair);
  list-style: none;
}

.vitrail-href,
.vitrail-here {
  display: inline-block;
  padding: var(--g-hair) var(--g-tiny);
  border-radius: var(--r-stadium);
  font-size: var(--z-legal);
  letter-spacing: var(--e-loose);
  text-transform: uppercase;
}

.vitrail-href {
  background: var(--k-surface-2);
  color: var(--k-muted);
  transition: background var(--t-short) var(--x-land), color var(--t-short) var(--x-land);
}

.vitrail-href:hover,
.vitrail-href:focus-visible {
  background: var(--k-action);
  color: var(--k-base);
}

.vitrail-here {
  background: rgba(84, 247, 240, 0.18);
  color: var(--k-body);
}

/* ── первый экран HERO-10 ────────────────────────────────────────────── */
.mur {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 160px);
  padding-block: var(--g-roomy);
  overflow: clip;
  background: radial-gradient(120% 70% at 12% 0%, rgba(123, 244, 248, 0.14), rgba(1, 21, 20, 0) 62%), var(--k-canvas);
}

.mur-glyphe {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--v-padding-mobile);
  z-index: 0;
  color: var(--k-body);
  opacity: 0.055;
  font-family: var(--f-banner);
  font-size: 46vh;
  font-weight: 800;
  line-height: 0.8;
  pointer-events: none;
  transform: translateY(-50%);
  user-select: none;
}

.mur-guts {
  position: relative;
  z-index: 1;
}

.mur-matter {
  max-width: 720px;
}

.mur-chip {
  display: inline-block;
  margin-block-end: var(--g-tiny);
  padding: var(--g-hair) var(--g-tiny);
  border: var(--b-thin) solid var(--k-line-strong);
  border-radius: var(--r-stadium);
  color: var(--k-action);
  font-size: var(--z-legal);
  letter-spacing: var(--e-loose);
  text-transform: uppercase;
}

.mur-lead {
  max-width: var(--v-tight);
  margin-block-start: var(--g-snug);
  color: var(--k-muted);
  font-size: var(--z-display-4);
  line-height: var(--l-open);
}

.mur-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-tiny);
  margin-block-start: var(--g-base);
}

.mur-href {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--g-snug);
  border: var(--b-thin) solid var(--k-line-strong);
  border-radius: var(--r-base);
  color: var(--k-body);
  font-size: var(--z-small);
  font-weight: var(--w-mid);
  transition: border-color var(--t-short) var(--x-land), color var(--t-short) var(--x-land);
}

.mur-href:hover,
.mur-href:focus-visible {
  border-color: var(--k-action);
  color: var(--k-action);
}

.mur-extra {
  max-width: var(--v-tight);
  margin-block-start: var(--g-tiny);
  color: var(--k-muted);
  font-size: var(--z-small);
}

/* ── шапка страницы PHEAD-07 ─────────────────────────────────────────── */
.pavillon {
  padding-block: var(--band);
}

.pavillon-guts {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--g-tiny) var(--g-snug);
}

.pavillon-index {
  color: var(--k-action);
  font-family: var(--f-banner);
  font-size: var(--z-display-1);
  font-weight: 800;
  line-height: var(--l-dense);
}

/* ── проза PROSE-23 ──────────────────────────────────────────────────── */
.trumeau {
  padding-block: var(--band);
}

.trumeau h2 {
  margin-block-start: 0;
}

.trumeau-text {
  margin-block-start: var(--g-snug);
  font-size: var(--z-reading);
  line-height: var(--l-open);
}

.trumeau-text-open {
  padding: var(--g-snug) var(--g-snug) var(--g-snug) var(--g-base);
  border-left: var(--b-thin) solid var(--k-action);
  border-inline-start: var(--b-thin) solid var(--k-action);
  border-radius: 0 var(--r-snug) var(--r-snug) 0;
  background: rgba(84, 247, 240, 0.07);
  color: var(--k-body);
}

.trumeau-href {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--t-short) var(--x-land);
}

.trumeau-href:hover,
.trumeau-href:focus-visible {
  background-size: 100% 1px;
}

.trumeau-steps,
.trumeau-points {
  margin-block-start: var(--g-snug);
  padding-inline-start: var(--g-base);
  line-height: var(--l-open);
}

.trumeau-steps li,
.trumeau-points li {
  margin-block-start: var(--g-hair);
}

.trumeau-steps li::marker {
  color: var(--k-action);
  font-weight: var(--w-heavy);
}

.trumeau-points li::marker {
  color: var(--k-action);
}

.trumeau-frame {
  width: min(100%, 380px);
  margin: var(--g-base) 0 0;
}

.trumeau-frame img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--b-thin) solid var(--k-hairline);
  border-radius: var(--r-base);
}

/* ── карточки GRID-08 ────────────────────────────────────────────────── */
.socle {
  padding-block: var(--band);
}

.socle-queue {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-snug);
  margin-block-start: var(--g-base);
  list-style: none;
}

.socle-tile {
  padding: var(--g-snug);
  border-block-start: var(--b-bold) solid var(--k-action);
  border-radius: 0 0 var(--r-base) var(--r-base);
  background: var(--k-surface-2);
  box-shadow: var(--d-snug);
  transition: transform var(--t-steady) var(--x-land), box-shadow var(--t-steady) var(--x-land);
}

.socle-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--d-base);
}

.socle-sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-block-end: var(--g-tiny);
  border-radius: var(--r-snug);
  background: rgba(84, 247, 240, 0.12);
}

.socle-sign svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--k-action);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.socle-top {
  font-family: var(--f-prose);
  font-size: var(--z-display-4);
  font-weight: var(--w-heavy);
}

.socle-text {
  margin-block-start: var(--g-hair);
  color: var(--k-muted);
  font-size: var(--z-small);
  line-height: var(--l-open);
}

/* ── таблица TABLE-04 ────────────────────────────────────────────────── */
.etiquette {
  padding-block: var(--band);
}

.etiquette-rail {
  margin-block-start: var(--g-base);
  overflow-x: auto;
  border-radius: var(--r-base);
}

.etiquette table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--z-small);
}

.etiquette th,
.etiquette td {
  padding: var(--g-tiny);
  border-block-end: var(--b-thin) solid var(--k-hairline);
  text-align: start;
  vertical-align: top;
}

.etiquette thead th {
  background: rgba(0, 0, 0, 0.32);
  color: var(--k-body);
  font-weight: var(--w-heavy);
  white-space: nowrap;
}

.etiquette thead th.etiquette-first {
  background: var(--k-base);
}

.etiquette td {
  color: var(--k-muted);
}

.etiquette td.etiquette-first {
  border-inline-end: var(--b-bold) solid var(--k-action);
  background: var(--k-base);
  color: var(--k-body);
  font-weight: var(--w-heavy);
}

/* ── отзывы REV-03 ───────────────────────────────────────────────────── */
.registre {
  padding-block: var(--band);
}

.registre-rail {
  margin-block-start: var(--g-base);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.registre-queue {
  display: flex;
  gap: var(--g-snug);
  padding-block-end: var(--g-tiny);
  list-style: none;
}

.registre-tile {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: var(--g-tiny);
  width: min(82vw, 340px);
  min-height: 240px;
  padding: var(--g-snug);
  border: var(--b-thin) solid var(--k-hairline);
  border-radius: var(--r-base);
  background: var(--k-surface-2);
  scroll-snap-align: start;
}

.registre-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--g-hair);
}

.registre-who {
  font-weight: var(--w-heavy);
}

.registre-on {
  color: var(--k-muted);
  font-size: var(--z-legal);
}

.registre-score {
  display: flex;
  align-items: center;
  gap: var(--g-hair);
}

.registre-figure {
  color: var(--k-action);
  font-size: var(--z-small);
  font-weight: var(--w-heavy);
}

.registre-gauge {
  display: block;
  width: 60%;
  height: var(--b-tall, 4px);
  border-radius: var(--r-stadium);
  background: rgba(194, 193, 193, 0.24);
}

.registre-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-stadium);
  background: var(--k-action);
}

.registre-text {
  color: var(--k-muted);
  font-size: var(--z-small);
  line-height: var(--l-open);
}

.registre-pips {
  display: flex;
  justify-content: center;
  gap: var(--g-hair);
  margin-block-start: var(--g-tiny);
  list-style: none;
}

.registre-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-round-full);
  background: rgba(194, 193, 193, 0.3);
  transition: background var(--t-short) var(--x-land);
}

.registre-dot.is-here {
  background: var(--k-action);
}

/* ── вопросы FAQ-05 ──────────────────────────────────────────────────── */
.corniche {
  padding-block: var(--band);
}

.corniche-queue {
  margin-block-start: var(--g-base);
  list-style: none;
}

.corniche-one {
  border-block-end: var(--b-thin) solid var(--k-hairline);
}

.corniche-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-tiny);
  padding-block: var(--g-snug);
  cursor: pointer;
  list-style: none;
}

.corniche-ask::-webkit-details-marker {
  display: none;
}

.corniche-ask h3 {
  font-size: var(--z-h5);
  font-weight: var(--w-heavy);
}

.corniche-ask::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-inline-end: var(--b-base) solid var(--k-action);
  border-block-end: var(--b-base) solid var(--k-action);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-short) var(--x-land);
}

.corniche-fold[open] .corniche-ask::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.corniche-ask:hover h3 {
  color: var(--k-action);
}

.corniche-matter {
  padding-block-end: var(--g-snug);
  color: var(--k-muted);
  line-height: var(--l-open);
}

.corniche-fold[open] .corniche-matter {
  animation: corniche-unfurl var(--t-steady) var(--x-land) both;
}

@keyframes corniche-unfurl {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ── призыв CTA-08 ───────────────────────────────────────────────────── */
.vestiaire {
  padding-block: var(--band);
  background: var(--k-base);
  text-align: center;
}

.vestiaire-top {
  font-size: var(--z-display-1);
  letter-spacing: var(--e-snug);
  text-transform: uppercase;
}

.vestiaire-text {
  max-width: var(--v-tight);
  margin: var(--g-snug) auto 0;
  color: var(--k-muted);
  font-size: var(--z-h5);
  line-height: var(--l-normal);
}

.vestiaire-push {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin-block-start: var(--g-base);
  padding-inline: var(--g-base);
  border-radius: var(--r-base);
  font-family: var(--f-banner);
  font-size: var(--z-display-4);
  font-weight: var(--w-heavy);
}

.vestiaire-extra {
  margin-block-start: var(--g-tiny);
  color: var(--k-muted);
  font-size: var(--z-small);
}

/* ── врезка с офферной кнопкой ───────────────────────────────────────── */
.borne {
  padding-block: var(--g-snug);
}

.borne-guts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-tiny);
}

.borne-text {
  flex: 1 1 260px;
  color: var(--k-body);
  font-size: var(--z-small);
}

.borne-push {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--g-snug);
  border-radius: var(--r-base);
  font-family: var(--f-banner);
  font-size: var(--z-h5);
  font-weight: var(--w-heavy);
}

/* ── подпись автора BYLINE-07 ────────────────────────────────────────── */
.marque {
  padding-block: var(--band);
}

.marque-tile {
  padding: var(--g-snug);
  border: var(--b-thin) solid var(--k-hairline);
  border-radius: var(--r-base);
  background: var(--k-surface-2);
  box-shadow: var(--d-snug);
}

.marque-line {
  display: flex;
  align-items: flex-start;
  gap: var(--g-tiny);
}

.marque-portrait {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: var(--r-round-full);
  object-fit: cover;
  object-position: center top;
}

.marque-chip-lead {
  color: var(--k-muted);
  font-size: var(--z-legal);
  letter-spacing: var(--e-loose);
  text-transform: uppercase;
}

.marque-who {
  font-family: var(--f-banner);
  font-size: var(--z-display-4);
  font-weight: var(--w-heavy);
}

.marque-job {
  color: var(--k-muted);
  font-size: var(--z-small);
}

.marque-extra {
  margin-block-start: var(--g-hair);
  color: var(--k-muted);
  font-size: var(--z-legal);
}

.marque-text {
  margin-block-start: var(--g-tiny);
  line-height: var(--l-open);
}

.marque-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-hair);
  margin-block-start: var(--g-tiny);
}

.marque-chip {
  padding: var(--g-hair) var(--g-tiny);
  border-radius: var(--r-stadium);
  background: var(--k-base);
  color: var(--k-muted);
  font-size: var(--z-legal);
  letter-spacing: var(--e-loose);
  text-transform: uppercase;
}

.marque-more {
  display: inline-block;
  margin-block-start: var(--g-tiny);
  font-size: var(--z-small);
  font-weight: var(--w-mid);
  text-decoration: underline;
}

/* ── карточка автора AUTH-02 ─────────────────────────────────────────── */
.vestibule {
  padding-block: var(--band);
  text-align: center;
}

.vestibule-portrait {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto var(--g-snug);
  border-radius: var(--r-round-full);
  object-fit: cover;
  object-position: center top;
}

.vestibule-job {
  color: var(--k-action);
  font-size: var(--z-small);
  letter-spacing: var(--e-loose);
  text-transform: uppercase;
}

.vestibule-text {
  max-width: 640px;
  margin: var(--g-tiny) auto 0;
  line-height: var(--l-open);
}

.vestibule-queue {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g-hair);
  margin-block-start: var(--g-snug);
  list-style: none;
}

.vestibule-chip {
  padding: var(--g-hair) var(--g-tiny);
  border: var(--b-thin) solid var(--k-hairline);
  border-radius: var(--r-stadium);
  color: var(--k-muted);
  font-size: var(--z-legal);
}

/* ── форма FORM-02 ───────────────────────────────────────────────────── */
.terrasse {
  padding-block: var(--band);
}

.terrasse-guts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-base);
}

.terrasse-column {
  padding: var(--g-snug);
  border-radius: var(--r-base);
  background: var(--k-surface-2);
}

.terrasse-text {
  margin-block-start: var(--g-tiny);
  color: var(--k-muted);
  line-height: var(--l-open);
}

.terrasse-queue {
  margin-block-start: var(--g-tiny);
  list-style: none;
}

.terrasse-one {
  margin-block-start: var(--g-hair);
  color: var(--k-muted);
  font-size: var(--z-small);
}

.terrasse-href {
  text-decoration: underline;
}

.terrasse-sheet {
  padding: var(--g-snug);
  border: var(--b-thin) solid var(--k-hairline);
  border-radius: var(--r-base);
}

.terrasse-entry {
  display: block;
  margin-block-end: var(--g-tiny);
}

.terrasse-chip {
  display: block;
  margin-block-end: var(--g-hair);
  font-size: var(--z-small);
  font-weight: var(--w-mid);
}

.terrasse-sheet input,
.terrasse-sheet textarea {
  width: 100%;
  padding: var(--g-tiny);
  border: var(--b-thin) solid var(--k-line-strong);
  border-radius: var(--r-base);
  background: var(--k-canvas);
  color: var(--k-body);
  font: inherit;
}

.terrasse-sheet input:focus,
.terrasse-sheet textarea:focus {
  border-color: var(--k-action);
  outline: none;
}

.terrasse-press {
  min-height: 48px;
  padding-inline: var(--g-snug);
  border: 0;
  border-radius: var(--r-base);
  background: var(--k-action);
  color: var(--k-base);
  font-family: var(--f-banner);
  font-weight: var(--w-heavy);
  cursor: pointer;
  transition: background var(--t-short) var(--x-land);
}

.terrasse-press:hover {
  background: var(--k-grad-1);
  color: var(--k-base);
}

.terrasse-done {
  margin-block-start: var(--g-tiny);
  padding: var(--g-tiny);
  border-radius: var(--r-snug);
  background: rgba(84, 247, 240, 0.14);
  color: var(--k-body);
  font-size: var(--z-small);
}

/* ── юридические страницы LEGAL-02 ───────────────────────────────────── */
.pilier {
  padding-block: var(--band);
}

.pilier-lead {
  font-size: var(--z-display-4);
  line-height: var(--l-open);
}

.pilier-extra {
  margin-block-start: var(--g-hair);
  color: var(--k-muted);
  font-size: var(--z-small);
}

.pilier-matter {
  counter-reset: pilier-part;
  margin-block-start: var(--g-base);
}

.pilier-one {
  counter-increment: pilier-part;
  margin-block-start: var(--g-base);
}

.pilier-one h3::before {
  content: counter(pilier-part) ". ";
  margin-inline-end: var(--g-hair);
  color: var(--k-action);
  font-family: var(--f-banner);
  font-weight: var(--w-heavy);
}

.pilier-text {
  margin-block-start: var(--g-tiny);
  padding-inline-start: var(--g-snug);
  color: var(--k-muted);
  line-height: var(--l-open);
}

.pilier-aide {
  margin-block-start: var(--g-base);
  padding: var(--g-snug);
  border-radius: var(--r-base);
  background: var(--k-surface-2);
}

.pilier-queue {
  margin-block-start: var(--g-tiny);
  list-style: none;
}

.pilier-line {
  margin-block-start: var(--g-hair);
  color: var(--k-muted);
  font-size: var(--z-small);
}

.pilier-warn {
  margin-block-start: var(--g-base);
  color: var(--k-muted);
  font-size: var(--z-small);
  line-height: var(--l-open);
}

/* ── страница 404 ERR-02 ─────────────────────────────────────────────── */
.paroi {
  padding-block: var(--g-roomy);
}

.paroi-guts {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--g-base);
}

.paroi-text {
  margin-block-start: var(--g-snug);
  color: var(--k-muted);
  line-height: var(--l-open);
}

.paroi-press {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-block-start: var(--g-snug);
  padding-inline: var(--g-snug);
  border-radius: var(--r-base);
  background: var(--k-action);
  color: var(--k-base);
  font-family: var(--f-banner);
  font-weight: var(--w-heavy);
  transition: background var(--t-short) var(--x-land);
}

.paroi-press:hover,
.paroi-press:focus-visible {
  background: var(--k-grad-1);
  color: var(--k-base);
}

.paroi-sign {
  align-self: start;
  background: linear-gradient(135deg, var(--k-action), var(--k-blend-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--f-banner);
  font-size: clamp(110px, 24vw, 260px);
  font-weight: 800;
  line-height: var(--l-dense);
}

/* ── подвал FOOT-10 ──────────────────────────────────────────────────── */
.classeur {
  padding-block: var(--g-roomy) var(--g-base);
  background: var(--k-base);
}

.classeur-crest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-snug);
  padding-block-end: var(--g-snug);
  border-block-end: var(--b-thin) solid var(--k-hairline);
}

.classeur-badge img {
  display: block;
  width: auto;
  height: 44px;
}

.classeur-lead {
  flex: 1 1 280px;
  color: var(--k-muted);
  line-height: var(--l-open);
}

.classeur-plan {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g-base);
  padding-block: var(--g-base);
  border-block-end: var(--b-thin) solid var(--k-hairline);
}

.classeur-band {
  color: var(--k-body);
  font-size: var(--z-h5);
  letter-spacing: var(--e-loose);
  text-transform: uppercase;
}

.classeur-queue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g-hair) var(--g-tiny);
  margin-block-start: var(--g-tiny);
  list-style: none;
}

.classeur-column-thin .classeur-queue {
  grid-template-columns: 1fr;
}

.classeur-href {
  color: var(--k-muted);
  font-size: var(--z-small);
  transition: color var(--t-short) var(--x-land);
}

.classeur-href:hover,
.classeur-href:focus-visible {
  color: var(--k-action);
}

.classeur-warn {
  padding-block: var(--g-snug);
  border-block-end: var(--b-thin) solid var(--k-hairline);
  color: var(--k-muted);
  font-size: var(--z-legal);
  line-height: var(--l-open);
}

.classeur-mark {
  padding-block-start: var(--g-snug);
  color: var(--k-muted);
  font-size: var(--z-legal);
}

/* ── куки COOK-06 ────────────────────────────────────────────────────── */
.placard {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 200;
  padding-block: var(--g-tiny);
  border-block-start: var(--b-thin) solid var(--k-line-strong);
  background: var(--k-base);
  box-shadow: var(--d-wide);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-steady) var(--x-land), visibility var(--t-steady) var(--x-land);
}

.placard.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.placard-guts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-tiny);
}

.placard-say {
  flex: 1 1 240px;
  font-size: var(--z-small);
  line-height: 1.35;
}

.placard-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-hair);
}

.placard-href {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--g-hair);
  font-size: var(--z-legal);
  text-decoration: underline;
}

.placard-skip,
.placard-approve {
  min-height: 40px;
  padding-inline: var(--g-tiny);
  border-radius: var(--r-snug);
  font-size: var(--z-small);
  font-weight: var(--w-mid);
  cursor: pointer;
}

.placard-skip {
  border: var(--b-thin) solid var(--k-line-strong);
  background: transparent;
  color: var(--k-body);
  transition: border-color var(--t-short) var(--x-land);
}

.placard-skip:hover {
  border-color: var(--k-action);
  color: var(--k-body);
}

.placard-approve {
  border: 0;
  background: var(--k-action);
  color: var(--k-base);
  transition: background var(--t-short) var(--x-land);
}

.placard-approve:hover {
  background: var(--k-grad-1);
  color: var(--k-base);
}

/* ── осиротевшие роли: раскладка вспомогательных обёрток ─────────────── */
.matiere {
  display: block;
}

.mur-push,
.paroi-matter,
.marque-matter,
.classeur-column,
.classeur-one,
.vitrail-one {
  min-width: 0;
}

.mur-push {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.marque-matter {
  display: block;
}

.marque-href {
  color: var(--k-body);
  transition: color var(--t-short) var(--x-land);
}

.marque-href:hover,
.marque-href:focus-visible {
  color: var(--k-action);
}

.paroi-matter {
  display: block;
}

.classeur-column {
  display: block;
}

.classeur-one {
  display: block;
}

.vitrail-one {
  display: flex;
  align-items: center;
}

/* ── появление секций ────────────────────────────────────────────────── */
[data-step] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-gentle) var(--x-land), transform var(--t-gentle) var(--x-land);
}

[data-step].on-screen {
  opacity: 1;
  transform: none;
}

@media (max-width: 899px) {
  .chambre-crest > .chambre-guts {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--g-hair);
  }

  .chambre-bar {
    flex: 1 1 100%;
    justify-content: space-between;
  }

  .chambre-push {
    flex: 0 0 auto;
  }
}

@media (max-width: 599px) {
  .chambre-push {
    flex: 1 1 auto;
  }
}

/* ── планшет ─────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .socle-queue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .classeur-plan {
    grid-template-columns: 2fr 1fr;
  }

  .paroi-guts {
    grid-template-columns: 1.2fr 1fr;
  }

  .chambre-lever-word {
    display: inline;
  }
}

/* ── десктоп ─────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .chambre-lead {
    display: block;
  }

  .chambre-crest > .chambre-guts {
    padding-block: var(--g-tiny);
  }

  .chambre-badge img {
    height: 60px;
  }

  .chambre.is-shrunk .chambre-badge img {
    height: 44px;
  }

  .chambre-bar {
    flex: 1 1 0;
    justify-content: flex-end;
    gap: var(--g-tiny);
  }

  .chambre-queue {
    gap: 2px var(--g-hair);
  }

  .chambre-href {
    font-size: 13px;
  }

  .chambre-one + .chambre-one::before {
    content: none;
  }

  .mur-glyphe {
    inset-inline-start: max(var(--v-pad-lg), calc((100vw - var(--v-outer)) / 2));
    font-size: 58vh;
  }

  .mur-matter {
    max-width: none;
    padding-inline-start: 20%;
  }

  .pavillon-guts {
    gap: var(--g-snug) var(--g-base);
  }

  .socle-queue {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .terrasse-guts {
    grid-template-columns: 1fr 2fr;
  }

  .trumeau-frame {
    float: inline-end;
    width: 340px;
    margin: var(--g-hair) 0 var(--g-snug) var(--g-base);
  }

  .trumeau-guts::after {
    content: "";
    display: block;
    clear: both;
  }

  .classeur-queue {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .chambre-strip {
    display: block;
  }

  .chambre-lever {
    display: none;
  }

  .chambre-slide {
    display: none !important;
  }
}

@media (min-width: 1240px) {
  .chambre-queue {
    gap: 2px var(--g-tiny);
  }

  .chambre-href {
    font-size: 14px;
  }

  .chambre-one + .chambre-one::before {
    margin-inline-end: var(--g-tiny);
  }
}

/* ── узкие экраны: куки-лист компактнее ──────────────────────────────── */
@media (max-width: 720px) {
  .placard-guts {
    gap: var(--g-hair);
  }

  .placard-say {
    font-size: var(--z-legal);
    line-height: 1.35;
  }

  .placard-bar {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: flex-end;
  }

  .placard-skip,
  .placard-approve,
  .placard-href {
    min-height: 36px;
    font-size: var(--z-legal);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-step] {
    opacity: 1;
    transform: none;
  }
}
.arcade-pick{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--g-snug);min-height:48px;border-radius:var(--r-base);font-weight:var(--w-heavy)}
.arcade-pick{
  background:#7C3AED;color:#FFFFFF;text-decoration:none;
  transition:background var(--t-steady) var(--x-land);}
.arcade-pick.arcade-pick{color:#FFFFFF;text-decoration:none;}
.arcade-pick:hover{background:#6D28D9;color:#FFFFFF;animation:none}
.arcade-pick.arcade-pick:hover{color:#FFFFFF;text-decoration:none}
.arcade-pick:hover::after{animation:none}
.arcade-pick:active{background:#5B21B6;color:#FFFFFF}
.arcade-pick:focus-visible{outline:3px solid #010D0D;outline-offset:3px}
.arcade-pick{animation:arcade-ripple 1.67s var(--x-in-out) infinite}
@keyframes arcade-ripple{0%{transform:translateY(0)}25.150%{transform:translateY(-2px)}61.078%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.arcade-pick,.arcade-pick::after{animation:none!important;transition:none!important}}

@media (max-width: 1010px) {
  .chambre-strip,
  .chambre-links,
  .chambre-queue { display: none !important; }
  .chambre-lever { display: flex !important; }
}

/* nojs guard 28.09.2026: без JS контент виден */
html.no-js [data-step],
html.no-js .mur-glyphe{opacity:1!important;transform:none!important;visibility:visible!important;clip-path:none!important}