/* Hallmark · genre: editorial · macrostructure: narrative workflow, spatial · theme: custom «Калька и киноварь» (light paper · condensed sans · warm cinnabar) · enrichment: real-time 3D model · nav: N9 edge-aligned · footer: copyright only */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--color-paper);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-still) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; min-width: 0; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--space-edge);
  top: calc(-1 * var(--space-9));
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: 600;
}
.skip:focus { top: var(--space-3); }

/* ---------- шапка ---------- */

.head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  padding: var(--space-3) var(--space-edge);
}
.head__mark {
  display: inline-flex;
  margin-right: auto;
  padding-block: var(--space-2);
  color: var(--color-ink);
}
.mark { display: block; width: 102px; height: 22px; }
.mark__type { fill: currentColor; }
.mark__point { fill: var(--color-accent); }

.head__nav { display: none; gap: var(--space-5); }
.head__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: var(--rule-meja);
  text-underline-offset: 6px;
  text-decoration-color: var(--color-paper-clear);
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
.head__nav a:hover { text-decoration-color: var(--color-accent); }
@media (min-width: 768px) {
  .head__nav { display: flex; }
  .mark { width: 120px; height: 26px; }
}

.motion {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-none);
  background: var(--color-kalka);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.motion__box {
  width: 12px;
  height: 12px;
  border: var(--rule-meja) solid currentColor;
}
.motion:hover { border-color: var(--color-ink); }
.motion:active { transform: translateY(1px); }
.motion:disabled { opacity: 0.5; cursor: not-allowed; }
.motion[aria-pressed="true"] .motion__box {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
html:not(.js) .motion,
.no-3d .motion { display: none; }

/* ---------- сцена ---------- */

.journey { position: relative; }

.stage { display: none; }
.has-3d .stage {
  display: block;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  overflow: hidden;
  pointer-events: none;
}
.stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity var(--dur-long) var(--ease-out);
}
.is-ready .stage__canvas { opacity: 1; }

/* Подложка под текст: на узком экране снизу, на широком слева. */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, var(--color-paper) 0%, var(--color-paper) 16%, var(--color-paper-clear) 56%);
}

/* Подпись и этапы на кальке: читаются и над светлым макетом, и над тёмным разрезом. */
.stage__key {
  position: absolute;
  z-index: 1;
  top: calc(64px + var(--space-2));
  right: var(--space-edge);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}
.stage__note {
  padding: var(--space-1) var(--space-2);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-kalka);
  color: var(--color-ink-2);
  font-size: var(--text-small);
  line-height: 1.35;
  white-space: nowrap;
}

.rail { display: none; }

/* ---------- такты ---------- */

.beats { position: relative; z-index: 1; }
/* Пустые поля тактов пропускают клик к этапам на кальке, текст и кнопки остаются живыми. */
.has-3d .beats { pointer-events: none; }
.has-3d .hero,
.has-3d .cap { pointer-events: auto; }

.beat { padding: var(--space-8) var(--space-edge); }
.beat--hero { padding-top: calc(64px + var(--space-8)); }

.has-3d .beat {
  display: grid;
  align-content: end;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(64px + var(--space-6)) var(--space-edge) calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
}
.has-3d .beat--cap {
  min-height: 120vh;
  min-height: 120svh;
  scroll-margin-top: -20svh;
}

.hero { min-width: 0; }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.005em;
}
.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-5);
  font-size: var(--text-lead);
  line-height: 1.45;
}
.hero__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.act {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-none);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.act:hover { background: var(--color-accent); }
.act:active { transform: translateY(1px); }

.tel {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: var(--rule-meja);
  text-underline-offset: 6px;
  text-decoration-color: var(--color-accent);
}
.tel:hover { color: var(--color-accent-ink); }

/* на мобильном шапка без навигации — прямой путь к направлениям из первого экрана */
.hero__dirs {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: var(--rule-meja);
  text-underline-offset: 6px;
  text-decoration-color: var(--color-ink-2);
}
.hero__dirs:hover { text-decoration-color: var(--color-accent); }
@media (min-width: 768px) {
  .hero__dirs { display: none; }
}

.cap {
  min-width: 0;
  max-width: 40rem;
  padding-top: var(--space-5);
  border-top: var(--rule-meja) solid var(--color-ink);
}
.has-3d .cap {
  padding: var(--space-5);
  background: var(--color-kalka);
}
.cap__title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 0.95;
}
.cap__text { margin-top: var(--space-4); }
.cap__legend {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-small);
  line-height: 1.45;
}

.key {
  display: inline-block;
  width: 1.5em;
  height: 0.8em;
  margin-right: var(--space-2);
  vertical-align: -0.05em;
}
.key + .key, * + .key { margin-left: var(--space-2); }
.cap__legend > .key:first-child { margin-left: 0; }
.key--line { height: 0; vertical-align: 0.3em; border-top: 2px solid var(--color-accent); }
.key--hatch { background: repeating-linear-gradient(45deg, var(--color-amber) 0 2px, var(--color-paper-clear) 2px 5px); }
.key--frame { border: var(--rule-meja) dashed var(--color-amber-ink); }
.key--solid { border: var(--rule-hair) solid var(--color-ink-2); background: var(--color-paper); }

/* ---------- план для режима без 3D ---------- */

.plan { margin-top: var(--space-7); }
.has-3d .plan { display: none; }
.plan__svg { display: block; width: 100%; max-width: 44rem; height: auto; }
.plan__cap { margin-top: var(--space-3); color: var(--color-ink-2); font-size: var(--text-small); }
.plan__board { fill: var(--color-paper-2); }
.plan__pads rect { fill: var(--color-paper); }
.plan__ctx rect { fill: var(--color-paper-2); stroke: var(--color-ink-2); stroke-width: 0.6; }
.plan__zone { fill: url(#plan-hatch); }
.plan__hatch-line { stroke: var(--color-amber); stroke-width: 1.6; }
.plan__limit * { fill: none; stroke: var(--color-amber-ink); stroke-width: 1.1; stroke-dasharray: 4 3; }
.plan__new > * { fill: var(--color-ink-2); }
.plan__kept > * { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 1; }
.plan__parcel { fill: none; stroke: var(--color-accent); stroke-width: 2.4; stroke-linejoin: miter; }
.plan__pins circle { fill: var(--color-accent); }

/* ---------- широкий экран: модель справа, текст слева ---------- */

@media (min-aspect-ratio: 21/20) and (min-width: 700px) {
  .stage::after {
    background: linear-gradient(90deg, var(--color-paper) 0%, var(--color-paper) 10%, var(--color-paper-clear) 48%);
  }
  .stage__key {
    top: auto;
    bottom: var(--space-5);
    flex-direction: column-reverse;
  }

  .has-3d .beat { align-content: center; }
  .has-3d .beat--hero { align-content: end; padding-bottom: var(--space-9); }
  .has-3d .beat--cap {
    min-height: 110vh;
    min-height: 110svh;
    scroll-margin-top: -5svh;
  }
  .hero { max-width: min(46rem, 50vw); }
  .hero__title { font-size: var(--text-display-wide); }
  .has-3d .cap { max-width: min(30rem, 40vw); }

  .no-3d .beat--hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: end;
  }
  .no-3d .plan { margin-top: 0; }
}

@media (min-aspect-ratio: 21/20) and (min-width: 1024px) {
  .has-3d .rail {
    display: block;
    pointer-events: auto;
  }
  .rail ol {
    display: flex;
    gap: var(--space-5);
    margin: 0;
    padding: 0 var(--space-4);
    border: var(--rule-hair) solid var(--color-rule);
    background: var(--color-kalka);
    list-style: none;
  }
  .rail a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--color-ink-2);
    font-size: var(--text-small);
    font-weight: 600;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--color-paper-clear);
    transition: color var(--dur-micro) var(--ease-out);
  }
  .rail a:hover { color: var(--color-ink); }
  .rail a[aria-current="step"] {
    color: var(--color-ink);
    box-shadow: inset 0 -2px 0 var(--color-accent);
  }
}

/* ---------- шесть направлений ---------- */

.dirs {
  position: relative;
  z-index: 1;
  padding: var(--space-section) var(--space-edge);
  background: var(--color-paper);
}
.dirs__title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 0.95;
}
.dirs__lead {
  max-width: 38rem;
  margin-top: var(--space-4);
  font-size: var(--text-lead);
  line-height: 1.45;
}
.dirs__list {
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-meja) solid var(--color-ink);
}
.dir {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.dir__name {
  font-family: var(--font-display);
  font-size: var(--text-sub);
  font-weight: 800;
  line-height: 1;
}
.dir__text { max-width: 40rem; }
.dir__owner {
  color: var(--color-ink-2);
  font-size: var(--text-small);
  font-weight: 600;
}
@media (min-width: 900px) {
  .dir {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 2fr);
    gap: var(--space-6);
    align-items: baseline;
    padding: var(--space-6) 0;
  }
  .dir__owner { text-align: right; }
}

/* ---------- обращение и подвал ---------- */

.contact,
.foot {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.contact :focus-visible,
.foot :focus-visible { outline-color: var(--color-focus-on-dark); }

.contact {
  position: relative;
  z-index: 1;
  padding: var(--space-section) var(--space-edge) var(--space-8);
}
.contact__title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 0.95;
}
.contact__text {
  max-width: 34rem;
  margin-top: var(--space-4);
  color: var(--color-on-ink-2);
  font-size: var(--text-lead);
  line-height: 1.45;
}
.phone {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.14em;
  text-decoration-color: var(--color-accent-on-dark);
  font-variant-numeric: tabular-nums;
}
.phone:hover { color: var(--color-accent-on-dark); }

.foot {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-edge) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  border-top: var(--rule-hair) solid var(--color-ink-2);
}
.foot__copy { color: var(--color-on-ink-2); font-size: var(--text-small); }

/* ---------- узкие экраны ---------- */

@media (max-width: 420px) {
  .has-3d .cap { padding: var(--space-4); }
}
@media (max-width: 360px) {
  :root { --space-edge: 1rem; }
  .motion { padding: 0 var(--space-3); }
  .phone { font-size: var(--text-sub); }
}

/* ---------- без движения ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 150ms !important;
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
  }
}
.is-still .stage__canvas { transition-duration: 150ms; }

/* Owner contact correction; no working phone inferred. */
.demo-label{display:block;font-family:var(--font-body);font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.02em;color:var(--color-accent);text-transform:uppercase;margin-top:6px}.phone{display:inline-block}.hero__acts .tel{font-size:18px}

/* Readable first frame: model occupies its own visual field. */
.hero__title{overflow-wrap:normal;line-height:.99;max-width:100%}
.hero__acts .tel{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;white-space:normal;text-decoration:none;gap:0;line-height:1.2}
.hero__acts .demo-label{margin-top:4px;font-size:12px}
@media(min-aspect-ratio:21/20) and (min-width:700px){.hero{max-width:40vw}.hero__title{font-size:clamp(52px,5.5vw,86px)}.hero__lead{max-width:36rem}.hero__acts{gap:16px 24px}.stage::after{background:linear-gradient(90deg,var(--color-paper) 0%,var(--color-paper) 16%,var(--color-paper-clear) 52%)}}
@media(max-width:699px){.hero__title{font-size:clamp(40px,11.4vw,62px)}.hero__lead{font-size:16px;line-height:1.4}.hero__acts{margin-top:20px;gap:12px 20px}.has-3d .beat--hero{padding-top:48svh}.hero__acts .tel{min-height:40px}}

@media(max-width:699px) and (max-height:680px){.has-3d .beat--hero{padding-top:38svh;padding-bottom:24px}.hero__title{font-size:36px;line-height:.98}.hero__lead{margin-top:14px;font-size:15px;line-height:1.3}.hero__acts{margin-top:14px;gap:8px 16px}.hero__acts .tel{font-size:16px;min-height:34px}}

@media(min-aspect-ratio:21/20) and (min-width:700px){.cap__title{font-size:clamp(40px,4vw,52px);overflow-wrap:normal;hyphens:none;line-height:1.02}}

@media(max-width:699px){.stage__key{top:64px;left:16px;right:auto;max-width:calc(100% - 32px)}.stage__note{font-size:11px}}