/* Солнечный отпечаток — Hero Rising. v2 (lab/print-opus): главная + мир Активации.
   Общая таблица стилей для всех страниц волны B — см. ART-BIBLE.md.
   Хлопковая бумага, чернила процесса, светочувствительный слой. Никакого ночного неба.
   У каждого мира своя химия печати (data-process на <html>, по умолчанию vandyke —
   сепия Ван Дейка): токены ниже, по процессу; в страницах цвета берутся только
   из токенов, вписанных синих нет. Прозрачности — через тройки: rgba(var(--ink-rgb), .3). */

:root {
  --paper: #f3ede2;
  --paper-2: #eae2d2;
  --ink: #573d29;
  --ink-2: #6a5545;
  --ink-3: rgba(87, 61, 41, .62);
  --rule: rgba(87, 61, 41, .16);
  --deep: #49311e;
  --deep-2: #5a3d27;
  --deep-3: #6e4c32;
  --wash: #896447;
  --ink-deep: #18110c;
  --white: #f2f0ef;
  --white-2: rgba(242, 240, 239, .78);
  --sens: #e0d18f;
  --sens-hi: #ede0a8;
  --slate-ink: #5a5551;
  --ink-rgb: 87, 61, 41;
  --deep-rgb: 73, 49, 30;
  --white-rgb: 242, 240, 239;
  --wash-rgb: 159, 123, 96;
  --shade-rgb: 27, 18, 11;
  --glow-rgb: 251, 246, 242;
  --halo-rgb: 236, 218, 204;
  --mist-rgb: 243, 238, 235;
  --fog-rgb: 226, 218, 212;
  --drop-rgb: 87, 64, 47;
  --dew-rgb: 250, 248, 246;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .290 0 0 0 0 .212 0 0 0 0 .149 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --cut: #1a1e14;

  /* метки трёх путей — цвет мира; одни и те же в любой химии, AA (≥4.6:1) на любой бумаге и на своём -soft.
     Канон цветов книг (владелец 23.10): Земля — зелёный мох, Сердце — коралл, Жемчужина — перламутровая бирюза;
     те же значения в приложении (HR.Tome, PrintProcess) */
  --world-earth: #3f6a28;
  --world-earth-soft: #dfe9cf;
  --world-heart: #a74234;
  --world-heart-soft: #f7dcd2;
  --world-pearl: #2b6366;
  --world-pearl-soft: #d8e9e7;

  --f-display: 'Prata', 'Times New Roman', serif;
  --f-text: 'Literata', Georgia, serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --f-hand: 'Bad Script', 'Segoe Script', cursive;

  --gut: clamp(20px, 5.6vw, 92px);
  --ease: cubic-bezier(.55, .02, .2, 1);
  color-scheme: light;
}

/* Процессы (химии) печати: <html data-process="…">. Без атрибута — vandyke (:root выше).
   Тот же атрибут на любом элементе даёт ему химию другого мира (обложки книг на общих страницах:
   Земля — мох, Сердце — коралл, Жемчужина — перламутровая бирюза); обложки полки кабинета рисует общий
   /account.js без атрибута, поэтому их классы перечислены прямо в блоках ниже.
   Значения: lab/print-opus/ART-BIBLE.md, раздел «Процессы»; шейдер — PROCESSES в cyanotype.js. */
[data-process="chlorophyll"],
.account-volume--earth .account-volume-cover { /* Земля: зелёный мох (23.10: зеленее, меньше оливы — не путать с Жемчужиной) */
  --paper: #f0f1e2;
  --paper-2: #e6e8d3;
  --ink: #33501c;
  --ink-2: #566b42;
  --ink-3: rgba(51, 80, 28, .62);
  --rule: rgba(51, 80, 28, .16);
  --deep: #253e14;
  --deep-2: #2e4b1b;
  --deep-3: #3b6224;
  --wash: #4f7735;
  --ink-deep: #10190a;
  --white: #f2f3f1;
  --white-2: rgba(242, 243, 241, .78);
  --sens: #e0db94;
  --sens-hi: #ede6ad;
  --slate-ink: #5e665a;
  --ink-rgb: 51, 80, 28;
  --deep-rgb: 37, 62, 20;
  --white-rgb: 242, 243, 241;
  --wash-rgb: 128, 171, 103;
  --shade-rgb: 17, 28, 10;
  --glow-rgb: 246, 252, 243;
  --halo-rgb: 220, 240, 207;
  --mist-rgb: 240, 244, 237;
  --fog-rgb: 220, 230, 215;
  --drop-rgb: 79, 114, 57;
  --dew-rgb: 248, 251, 247;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .314 0 0 0 0 .11 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-process="gum"],
.account-volume--heart .account-volume-cover { /* Сердце: рассвет, коралл, абрикос. Тёмные (--deep*) — светлый тёплый коралл:
   белый текст на них ≥5.3:1, на бумаге ≥5:1 (владелец 22.10: «светлее и теплее пробы Б») */
  --paper: #f6ece4;
  --paper-2: #ede1d4;
  --ink: #74372d;
  --ink-2: #7e5b54;
  --ink-3: rgba(116, 55, 45, .62);
  --rule: rgba(116, 55, 45, .16);
  --deep: #8a3a2b;
  --deep-2: #96402f;
  --deep-3: #a64a33;
  --wash: #ad5238;
  --ink-deep: #190d0b;
  --white: #f5f3f2;
  --white-2: rgba(245, 243, 242, .78);
  --sens: #f2dba8;
  --sens-hi: #f7e6c2;
  --slate-ink: #6b615f;
  --ink-rgb: 116, 55, 45;
  --deep-rgb: 138, 58, 43;
  --white-rgb: 245, 243, 242;
  --wash-rgb: 232, 150, 112;
  --shade-rgb: 28, 13, 10;
  --glow-rgb: 252, 246, 244;
  --halo-rgb: 242, 218, 213;
  --mist-rgb: 246, 240, 239;
  --fog-rgb: 233, 223, 221;
  --drop-rgb: 145, 84, 71;
  --dew-rgb: 251, 248, 248;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .396 0 0 0 0 .220 0 0 0 0 .184 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-process="platinum"],
.account-volume--pearl .account-volume-cover { /* Жемчужина: перламутр — светлая жемчужная бумага, бирюзовые чернила
   (23.10 владелец: вместо золота платинотипии — золото сливалось с мхом Земли и сепией общих страниц; id процесса прежний) */
  --paper: #f1f3ee;
  --paper-2: #e5eae3;
  --ink: #234749;
  --ink-2: #4c6566;
  --ink-3: rgba(35, 71, 73, .62);
  --rule: rgba(35, 71, 73, .16);
  --deep: #1c3f42;
  --deep-2: #234d50;
  --deep-3: #2b5f62;
  --wash: #36706f;
  --ink-deep: #0b1717;
  --white: #f1f4f3;
  --white-2: rgba(241, 244, 243, .78);
  --sens: #ebdba8;
  --sens-hi: #f2e8bd;
  --slate-ink: #535a59;
  --ink-rgb: 35, 71, 73;
  --deep-rgb: 28, 63, 66;
  --white-rgb: 241, 244, 243;
  --wash-rgb: 127, 169, 170;
  --shade-rgb: 10, 24, 25;
  --glow-rgb: 244, 250, 250;
  --halo-rgb: 211, 234, 233;
  --mist-rgb: 238, 244, 243;
  --fog-rgb: 220, 228, 227;
  --drop-rgb: 58, 95, 97;
  --dew-rgb: 246, 250, 250;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .137 0 0 0 0 .278 0 0 0 0 .286 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-process="cyanotype"] { /* в запасе: прежняя прусская синь */
  --paper: #f2eee4;
  --paper-2: #e9e3d4;
  --ink: #173a69;
  --ink-2: #4a6187;
  --ink-3: rgba(23, 58, 105, .55);
  --rule: rgba(23, 58, 105, .16);
  --deep: #0d2b5a;
  --deep-2: #12386f;
  --deep-3: #1a4a86;
  --wash: #2e66a6;
  --ink-deep: #070f1d;
  --white: #eef3f1;
  --white-2: rgba(238, 243, 241, .78);
  --sens: #dcd67b;
  --sens-hi: #e6e194;
  --slate-ink: #4e5b5d;
  --ink-rgb: 23, 58, 105;
  --deep-rgb: 13, 43, 90;
  --white-rgb: 238, 243, 241;
  --wash-rgb: 70, 120, 185;
  --shade-rgb: 4, 14, 34;
  --glow-rgb: 238, 246, 255;
  --halo-rgb: 190, 215, 250;
  --mist-rgb: 232, 240, 246;
  --fog-rgb: 206, 220, 232;
  --drop-rgb: 30, 62, 104;
  --dew-rgb: 244, 249, 252;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .2 0 0 0 0 .35 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background-color: var(--paper);
  /* зерно и волокна хлопковой бумаги — шум SVG, без картинок */
  background-image:
    var(--grain),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .2' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .38 0 0 0 .12 -.03'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  color: var(--ink);
  font: 400 18px/1.62 var(--f-text);
  font-optical-sizing: auto;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--deep); color: var(--white); padding: 10px 14px;
  font: 500 12px/1 var(--f-mono); text-decoration: none; letter-spacing: .08em;
}
.skip:focus { top: 12px; }

.print-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ════════════ Табл. I — первый экран ════════════ */
.hero {
  position: relative;
  min-height: max(620px, 100svh);
  height: 100svh;
  max-height: 1080px;
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
}
.hero-print { position: absolute; inset: 0; background: var(--deep); z-index: -1; }
html.dev .hero-print { background: var(--sens); }
.hero .ink { color: var(--white); }

/* фазы проявки: текст — вырезанный из чёрной бумаги трафарет */
html.dev .hero[data-phase="objects"] .ink { color: var(--cut); text-shadow: .5px 1.5px 1.5px rgba(16, 20, 8, .32); }
html.dev .hero[data-phase="lift"] .ink { color: var(--sens-hi); text-shadow: 0 6px 10px rgba(16, 20, 8, 0); transition: color .55s ease, text-shadow .55s ease; }
html.dev .hero[data-phase="wash"] .ink,
html.dev .hero[data-phase="done"] .ink { color: var(--white); transition: color .7s ease var(--wd, 0s), text-shadow .7s ease var(--wd, 0s); }
.hero[data-phase="done"] .ink, html:not(.dev) .hero .ink { text-shadow: 0 0 .7px rgba(var(--glow-rgb), .55), 0 0 14px rgba(var(--halo-rgb), .14); }

.hero-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 30px var(--gut) 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  font: 400 19px/1 var(--f-display); letter-spacing: .02em; text-decoration: none;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid currentColor; position: relative; flex: none;
}
.brand-mark::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: currentColor; opacity: .9; }
.nav-links { display: flex; gap: 30px; align-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.nav-links a { text-decoration: none; padding: 8px 0; }
.nav-links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-cta { border-bottom: 1px solid currentColor; }

.hero-copy {
  position: absolute; z-index: 2;
  left: var(--gut);
  top: clamp(118px, 21vh, 210px);
  width: min(860px, 56vw);
}
.kicker { font: 500 11px/1.4 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 26px; }
.hero h1 {
  font: 400 clamp(38px, 4.7vw, 72px)/1.03 var(--f-display);
  letter-spacing: -.012em;
  margin: 0 0 34px;
}
.hero h1 .l1, .hero h1 .l2 { display: block; }
.lead { font-size: clamp(16.5px, 1.32vw, 19.5px); line-height: 1.58; max-width: 31.5em; }
.lead + .lead { margin-top: 12px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 38px; }
.cta-note { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .92; }

/* трафарет: карточка с вырезанными буквами */
.stencil {
  --bg: var(--white); --fg: var(--deep);
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 19px 30px 18px 28px;
  background: var(--bg); color: var(--fg);
  font: 600 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  clip-path: polygon(0 3%, 99.2% 0, 100% 96%, .6% 100%);
  transition: background-color .6s ease var(--wd, 0s), color .6s ease var(--wd, 0s), transform .25s var(--ease);
}
.stencil::after { content: '→'; font-family: var(--f-text); font-weight: 400; letter-spacing: 0; font-size: 18px; transition: transform .3s var(--ease); }
.stencil:hover { transform: translateY(-2px); }
.stencil:hover::after { transform: translateX(5px); }
/* clip-path срезает всё, что снаружи карточки, и внешнюю рамку фокуса тоже: рисуем её внутри */
.stencil:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
html.dev .hero[data-phase="objects"] .stencil { --bg: var(--cut); --fg: var(--sens); box-shadow: none; filter: drop-shadow(1px 3px 2px rgba(16, 20, 8, .35)); }
html.dev .hero[data-phase="lift"] .stencil { --bg: var(--sens-hi); --fg: var(--slate-ink); transition: background-color .5s, color .5s, filter .5s; }

.hud {
  position: absolute; z-index: 2; left: var(--gut); bottom: 28px; max-width: 46vw;
  display: grid; gap: 10px; justify-items: start;
  font: 500 10px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
}
.steps { display: flex; gap: 22px; }
.steps li { display: flex; align-items: center; gap: 8px; opacity: .74; transition: opacity .4s; }
.steps li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; }
.steps li.on { opacity: 1; }
.steps li.on::before { background: currentColor; }
.plate-cap { text-transform: none; letter-spacing: .03em; font-size: 10.5px; opacity: .8; }
.plate-cap span { letter-spacing: .16em; text-transform: uppercase; margin-right: .4em; }
.replay {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 500 10px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}
.hud-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 30px; }

/* ════════════ общие секции на бумаге ════════════ */
.sec { position: relative; max-width: 1480px; margin: 0 auto; padding: clamp(84px, 11vw, 168px) var(--gut) 0; }
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px clamp(32px, 6vw, 96px); align-items: end;
}
.sec-no {
  grid-column: 1 / -1;
  font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: center; gap: 16px;
}
.sec-no::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.sec-head h2 { font: 400 clamp(34px, 4.3vw, 64px)/1.05 var(--f-display); letter-spacing: -.01em; text-wrap: balance; }
.sec-lead { display: grid; gap: 14px; color: var(--ink); max-width: 36em; }
.sec-lead p { text-wrap: pretty; }
.sec-hint {
  grid-column: 2; display: flex; align-items: center; gap: 12px;
  font: 500 11px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.hint-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sens); box-shadow: 0 0 0 1px rgba(26, 30, 20, .35); flex: none; }
.aside-note { font-style: italic; color: var(--ink-2); font-size: 16px; }

/* ════════════ I. Тень: полоски-трафареты ════════════ */
.slips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.slip {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  width: 100%; min-height: 278px;
  padding: 30px 30px 26px; border: 0; margin: 0;
  background: var(--sens); text-align: left; cursor: pointer;
  isolation: isolate; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform .35s var(--ease);
}
.slip > * { position: relative; z-index: 1; }
.slip > .print-canvas { position: absolute; z-index: 0; }
.slip:hover:not([aria-pressed="true"]) { transform: translateY(-3px) rotate(-.35deg); }
.slip:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.slip-phrase {
  display: block; max-width: min(15.5em, 66%);
  font: italic 400 clamp(19px, 1.55vw, 22px)/1.34 var(--f-text);
  color: var(--cut); text-shadow: .4px 1px 1px rgba(16, 20, 8, .25);
  transition: color .5s ease, text-shadow .5s ease;
}
.slip-cue {
  position: absolute; left: 30px; bottom: 24px;
  font: 600 10.5px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cut);
  display: inline-flex; gap: 10px; align-items: center; transition: opacity .3s;
}
.slip-cue::after { content: '→'; font: 400 16px/1 var(--f-text); letter-spacing: 0; transition: transform .3s var(--ease); }
.slip:hover .slip-cue::after { transform: translateX(5px); }
.slip-gift { position: relative; margin-top: auto; padding-top: 18px; max-width: 66%; display: grid; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s .9s; color: var(--white); }
.g-word { font: 400 32px/1.1 var(--f-hand); letter-spacing: .005em; }
.g-line { font: italic 400 15px/1.4 var(--f-text); color: var(--white-2); max-width: 22em; }
.g-key { font: 500 9.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--white-2); margin-top: 4px; }

.slip[data-phase="lift"] .slip-phrase { color: var(--sens-hi); text-shadow: none; }
.slip[data-phase="lift"] .slip-cue,
.slip[data-phase="wash"] .slip-cue,
.slip[data-phase="done"] .slip-cue { opacity: 0; }
.slip[data-phase="wash"] .slip-phrase,
.slip[data-phase="done"] .slip-phrase { color: var(--white); text-shadow: 0 0 .6px rgba(var(--glow-rgb), .5); transition-delay: var(--wd, .3s); }
.slip[data-phase="done"] { cursor: default; }
.slip[data-phase="done"] .slip-gift { opacity: 1; visibility: visible; transition: opacity 1s ease .1s, visibility 0s; }
.slips-after {
  margin-top: 30px; max-width: 46em; min-height: 1.6em;
  font: italic 400 18px/1.6 var(--f-text); color: var(--ink);
  opacity: 0; transform: translateY(6px); transition: opacity .8s ease, transform .8s ease;
}
.slips-after.on { opacity: 1; transform: none; }
.slips-after a { font: 600 11px/1 var(--f-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; margin-left: 6px; }

/* ════════════ II. Контактный лист ════════════ */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 4vw, 64px); margin-top: 56px; align-items: start; }
.sheet-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 9px; counter-reset: k; }
.tile {
  --d: 0s;
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  border: 0; padding: 9px 9px 8px; margin: 0; cursor: pointer; overflow: hidden;
  background: var(--sens); color: var(--cut); text-align: left;
  -webkit-mask: var(--brush) center / 100% 100% no-repeat;
  mask: var(--brush) center / 100% 100% no-repeat;
  -webkit-tap-highlight-color: transparent;
}
.tile::before { /* промывка: вода сверху вниз */
  content: ''; position: absolute; inset: -8% 0 0; z-index: 0;
  background: linear-gradient(to bottom, var(--deep) 0%, var(--deep-2) 70%, var(--wash) 92%, rgba(var(--wash-rgb), 0) 100%);
  transform: translateY(-104%); transition: transform 1.1s var(--ease) var(--d);
  filter: brightness(var(--tone, 1));
}
.tile.washed::before { transform: translateY(0); }
.tile > span { position: relative; z-index: 1; display: block; }
.t-n { font: 500 10px/1 var(--f-mono); letter-spacing: .08em; opacity: .8; transition: color .5s ease calc(var(--d) + .45s); }
.t-w { position: absolute !important; left: 9px; right: 7px; bottom: 9px; font: italic 400 12.5px/1.15 var(--f-text); hyphens: auto; overflow-wrap: anywhere; }
.t-gi { opacity: 0; color: var(--white); transition: opacity .6s ease calc(var(--d) + .55s); }
.t-sh { transition: opacity .4s ease calc(var(--d) + .3s); }
.tile.washed { color: var(--white); }
.tile.washed .t-n { color: var(--white); }
.tile.washed .t-sh { opacity: 0; }
.tile.washed .t-gi { opacity: 1; }
.tile:hover, .tile:focus-visible, .tile.sel { z-index: 2; }
.tile:hover::after, .tile:focus-visible::after, .tile.sel::after {
  content: ''; position: absolute; inset: 3px; border: 1.5px solid currentColor; z-index: 2; pointer-events: none;
}
.tile:focus-visible { outline: none; }

.loupe { position: sticky; top: 90px; display: grid; gap: 18px; justify-items: center; }
.loupe-lens {
  width: 300px; height: 300px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: 8px; padding: 30px;
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 55%), var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 -14px 30px rgba(var(--ink-rgb), .08), 0 18px 40px -22px rgba(var(--deep-rgb), .45);
  position: relative;
}
.loupe-lens::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed var(--rule); }
.lp-n { font: 400 64px/1 var(--f-display); color: var(--deep); }
.lp-title { font: italic 400 15px/1.35 var(--f-text); color: var(--ink-2); max-width: 15em; margin: 0 auto; }
.lp-pair { display: flex; justify-content: center; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.lp-sh { font: italic 400 17px/1.3 var(--f-text); color: var(--ink-2); }
.lp-gi { font: 400 25px/1.2 var(--f-hand); color: var(--deep); }
.lp-si { font: 500 17px/1.3 var(--f-text); color: var(--ink-2); } /* сиддхи — канон наравне с тенью и даром (23.10) */
.lp-arrow { color: var(--ink-3); }
.loupe-cap { font: 500 10px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: center; max-width: 27em; }

/* ════════════ III. Двойная экспозиция ════════════ */
.process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: 64px; counter-reset: s; }
.process li { border-top: 1px solid var(--rule); padding-top: 26px; }
.pr-print { position: relative; aspect-ratio: 12 / 5; margin-bottom: 22px; background: var(--paper-2); }
html.js .pr-print { background: transparent; }
.pr-print .plate-labels li { font-size: 15px; opacity: 1; transform: translate(-50%, -50%); }
.process h3 { font: 400 28px/1.15 var(--f-display); margin-bottom: 12px; display: flex; align-items: baseline; gap: 14px; }
.process h3 span { font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-2); }
.process p { max-width: 24em; text-wrap: pretty; }
.footnote {
  margin-top: 72px; display: grid; grid-template-columns: auto minmax(0, 40em); gap: 8px 36px; align-items: baseline;
  padding: 28px 0 0; border-top: 1px solid var(--rule); color: var(--ink-2);
}
.fn-year { font: 400 54px/1 var(--f-display); color: var(--deep); }
.footnote p:last-child { font-style: italic; font-size: 17px; }

/* ════════════ IV. Три мира ════════════ */
.world {
  display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(64px, 8vw, 120px);
}
.world.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); }
.world.flip .plate, .world.flip .pl { order: 2; }
.plate { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); }
html.js .plate { background: transparent; }
.plate-labels li {
  position: absolute; white-space: nowrap; pointer-events: none;
  font: 400 clamp(17px, 1.45vw, 22px)/1 var(--f-hand); color: var(--white);
  text-shadow: 0 0 .6px rgba(var(--glow-rgb), .6), 0 0 10px rgba(var(--halo-rgb), .2);
  opacity: 0; transform: translate(-50%, -50%) translateY(4px); transition: opacity .9s ease var(--ld, 0s), transform .9s ease var(--ld, 0s);
}
.plate-labels li[data-a="l"] { transform: translate(0, -50%) translateY(4px); }
.plate-labels li[data-a="r"] { transform: translate(-100%, -50%) translateY(4px); }
.plate[data-phase="done"] .plate-labels li { opacity: 1; transform: translate(-50%, -50%); }
.plate[data-phase="done"] .plate-labels li[data-a="l"] { transform: translate(0, -50%); }
.plate[data-phase="done"] .plate-labels li[data-a="r"] { transform: translate(-100%, -50%); }
.plate-labels.mono li { font: 500 clamp(9.5px, .82vw, 11.5px)/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; }
.plate-labels li.pearl-l { font: 400 clamp(18px, 1.5vw, 23px)/1 var(--f-hand); letter-spacing: 0; text-transform: none; }
.plate-no { position: absolute; left: 0; top: calc(100% + 12px); font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.w-book { font: 500 11px/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; }
.world h3 { font: 400 clamp(36px, 3.6vw, 54px)/1.04 var(--f-display); margin-bottom: 20px; text-wrap: balance; }
.world-text > p:not(.w-book):not(.w-spheres) { max-width: 30em; text-wrap: pretty; }
.w-spheres { margin-top: 22px; font: 400 21px/1.45 var(--f-hand); color: var(--deep); }
.w-link {
  display: inline-flex; gap: 10px; margin-top: 28px; padding-bottom: 6px;
  font: 600 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}
.w-link span { transition: transform .3s var(--ease); }
.w-link:hover span { transform: translateX(5px); }
.prices {
  margin-top: clamp(64px, 8vw, 110px); text-align: center;
  font: 500 11px/1.8 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}

/* ════════════ V. Ваш лист ════════════ */
.yours { padding-bottom: 0; }
.your-sheet {
  position: relative; min-height: clamp(560px, 46vw, 680px);
  display: flex; align-items: center; background: var(--sens);
  isolation: isolate;
}
html.js .your-sheet { background: transparent; }
.your-sheet .print-canvas { z-index: -1; }
.your-copy { position: relative; padding: clamp(40px, 5vw, 80px); width: min(700px, 56%); color: var(--cut); }
.your-copy .ink { color: var(--cut); }
.your-copy .sec-no { color: var(--cut); opacity: .75; margin-bottom: 26px; }
.your-copy .sec-no::after { background: rgba(26, 30, 20, .25); }
.your-copy h2 { font: 400 clamp(36px, 4.2vw, 62px)/1.04 var(--f-display); margin-bottom: 22px; letter-spacing: -.01em; text-wrap: balance; }
.your-lead { font-size: 19px; max-width: 24em; }
.stencil.dark { --bg: var(--cut); --fg: var(--sens-hi); filter: drop-shadow(1px 3px 2px rgba(16, 20, 8, .3)); }
.stencil.dark:hover { --fg: #fff8b8; }
.after { margin: 34px auto 0; text-align: center; font-style: italic; color: var(--ink-2); max-width: 40em; }
.after a { color: var(--ink); text-underline-offset: 4px; }

.foot {
  margin-top: clamp(96px, 12vw, 170px); padding: 56px var(--gut) 64px;
  border-top: 1px solid var(--rule); text-align: center; color: var(--ink-2);
  display: grid; gap: 10px; justify-items: center;
}
.foot-brand { font: 400 22px/1 var(--f-display); color: var(--deep); }
.foot-line { font-size: 16px; }
.foot-note { font: italic 400 15px/1.5 var(--f-text); max-width: 34em; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 14px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.foot-links a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.foot-links a:hover { border-color: currentColor; }

/* ════════════ IV. Три проявителя ════════════ */
.devs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.devs li { display: grid; gap: 4px; align-content: start; padding: 18px 22px 20px 0; }
.devs li + li { border-left: 1px solid var(--rule); padding-left: 24px; }
.dv-w { font: 400 32px/1.15 var(--f-hand); color: var(--deep); }
.dv-a { font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.dv-b { font: italic 400 15.5px/1.4 var(--f-text); color: var(--ink-2); }

/* лист-образец: общая рамка трёх проявителей */
.pl { position: relative; aspect-ratio: 4 / 3; isolation: isolate; }
.pl > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-copy { position: absolute; z-index: 2; left: clamp(22px, 2.8vw, 42px); top: clamp(22px, 2.8vw, 40px); width: min(58%, 27em); display: grid; gap: 12px; align-content: start; pointer-events: none; }
.pl-tag { font: 500 10px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.pl-phrase { font: italic 400 clamp(20px, 1.7vw, 25px)/1.32 var(--f-text); text-wrap: pretty; }
.pl-gift { display: grid; gap: 5px; margin-top: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease, visibility 0s .9s; }
.pl-gift.on { opacity: 1; visibility: visible; transform: none; transition: opacity 1.1s ease .1s, transform 1.1s ease .1s, visibility 0s; }
.pl-gift .g-word { font: 400 clamp(28px, 2.4vw, 36px)/1.1 var(--f-hand); }
.pl-gift .g-line { font: italic 400 15.5px/1.42 var(--f-text); max-width: 24em; }
.pl-gift .g-key { font: 500 9.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }
.pl-act {
  position: absolute; z-index: 3; left: clamp(22px, 2.8vw, 42px); bottom: clamp(20px, 2.4vw, 30px);
  display: inline-flex; align-items: center; gap: 12px; border: 0; cursor: pointer;
  padding: 15px 22px 14px; background: var(--white); color: var(--deep);
  font: 600 11.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(0 4%, 99.2% 0, 100% 95%, .7% 100%);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .25s var(--ease), background-color .5s, color .5s;
}
.pl-act::after { content: '→'; font: 400 16px/1 var(--f-text); letter-spacing: 0; transition: transform .3s var(--ease); }
.pl-act:hover { transform: translateY(-2px); }
.pl-act:hover::after { transform: translateX(4px); }
.pl-act:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
.pl-hint { position: absolute; z-index: 3; right: clamp(18px, 2.4vw, 30px); bottom: clamp(24px, 2.6vw, 34px); font: italic 400 14px/1.3 var(--f-text); color: var(--white-2); pointer-events: none; transition: opacity .6s; }
.pl[data-phase="done"] .pl-hint { opacity: 0; }

/* солнечная бумага: текст — трафарет, потом скрытая форма, потом свет */
.pl-print { background: var(--sens); }
html.js .pl-print { background: transparent; }
.pl-print .pl-copy { color: var(--white); }
.pl-print[data-phase="objects"] .pl-copy > .pl-tag,
.pl-print[data-phase="objects"] .pl-phrase { color: var(--cut); text-shadow: .5px 1.5px 1.5px rgba(16, 20, 8, .3); }
.pl-print[data-phase="lift"] .pl-copy > .pl-tag,
.pl-print[data-phase="lift"] .pl-phrase { color: var(--sens-hi); text-shadow: none; transition: color .6s ease, text-shadow .6s ease; }
.pl-print[data-phase="wash"] .pl-copy > .pl-tag,
.pl-print[data-phase="wash"] .pl-phrase,
.pl-print[data-phase="done"] .pl-copy > .pl-tag,
.pl-print[data-phase="done"] .pl-phrase { color: var(--white); text-shadow: 0 0 .6px rgba(var(--glow-rgb), .5); transition: color .7s ease var(--wd, .2s); }
.pl-print[data-phase="faded"] .pl-copy > .pl-tag,
.pl-print[data-phase="faded"] .pl-phrase,
.pl-print[data-phase="wet"] .pl-copy > .pl-tag,
.pl-print[data-phase="wet"] .pl-phrase { color: var(--white); text-shadow: 0 1px 2px rgba(var(--deep-rgb), .45); }
.pl-print .g-line, .pl-print .g-key { color: var(--white-2); }
.pl-print[data-phase="objects"] .pl-act,
.pl-print[data-phase="lift"] .pl-act { background: var(--cut); color: var(--sens-hi); filter: drop-shadow(1px 3px 2px rgba(16, 20, 8, .3)); }
.pl-print[data-phase="wash"] .pl-act { opacity: .55; pointer-events: none; }

/* стекло на тёмной бумаге процесса: туман — тень, прозрачный след — дар */
.pl-glass {
  background-color: var(--deep-2);
  background-image:
    radial-gradient(120% 90% at 30% 20%, rgba(var(--wash-rgb), .35), rgba(var(--deep-rgb), 0) 60%),
    linear-gradient(170deg, var(--deep-3), var(--deep) 70%);
  box-shadow: inset 0 0 0 1px rgba(var(--white-rgb), .16), inset 0 0 60px rgba(var(--shade-rgb), .45), 0 20px 40px -26px rgba(var(--deep-rgb), .55);
  cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.pl-glass::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .07) 43%, rgba(255, 255, 255, 0) 52%),
              linear-gradient(118deg, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, .04) 60%, rgba(255, 255, 255, 0) 64%); }
.pl-glass > canvas.fog { z-index: 1; }
.pl-glass .pl-copy { color: var(--white); text-shadow: 0 1px 3px rgba(var(--shade-rgb), .55); transition: color .5s ease, text-shadow .5s ease; }
.pl-glass.fogged .pl-copy { color: var(--deep); text-shadow: 0 0 8px rgba(var(--mist-rgb), .9); }
.pl-glass.fogged .g-line, .pl-glass.fogged .g-key { color: var(--ink); }
.pl-glass.fogged .pl-hint { opacity: 0; }
.pl-glass .g-line, .pl-glass .g-key { color: var(--white-2); }

/* бумага на просвет: лист с рваным краем, свет приходит сзади */
.pl-sheet { cursor: default; }
.pl-sheet > canvas.wm { z-index: 1; filter: drop-shadow(0 14px 22px rgba(var(--deep-rgb), .16)); transition: filter 1.2s ease; }
.wm-glow { position: absolute; inset: -6%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(255, 238, 200, .45) 55%, rgba(255, 238, 200, 0));
  opacity: 0; transition: opacity 1.3s ease; }
.pl-sheet[data-lit] .wm-glow { opacity: .9; }
.pl-sheet[data-lit] > canvas.wm { filter: drop-shadow(0 0 26px rgba(255, 236, 190, .55)); }
.pl-sheet .pl-copy { color: var(--deep); }
.pl-sheet .pl-tag, .pl-sheet .g-key { color: var(--ink-2); }
.pl-sheet .g-word { color: var(--deep); }
.pl-sheet .g-line { color: var(--ink); }
.pl-sheet .pl-act { background: var(--deep); color: var(--white); }
.pl-sheet .pl-act[aria-pressed="true"] { background: var(--paper); color: var(--deep); box-shadow: inset 0 0 0 1px var(--deep); }

/* ════════════ V. Билет ════════════ */
.your-copy h2 .h-2 { display: block; }
.stub { position: absolute; right: 0; top: 0; bottom: 0; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0;
  border-left: 2px dashed rgba(26, 30, 20, .32); font: 500 10px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--cut); }
.stub span { writing-mode: vertical-rl; transform: rotate(180deg); opacity: .75; }

/* ════════════ Мир Активации (lab/print-opus/fire/) ════════════ */
.fire-hero .hero-print .plate-labels li { font-size: clamp(16px, 1.3vw, 21px); }
.fire-hero[data-phase="done"] .plate-labels li { opacity: 1; transform: translate(-50%, -50%); }
.cta-quiet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: underline 1px; text-underline-offset: 7px; }
.sphere { margin-top: clamp(72px, 9vw, 140px); }
.sp-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 28px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--rule); margin-bottom: 30px; }
.sp-no { font: 500 11px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.sp-head h2 { font: 400 clamp(34px, 3.8vw, 56px)/1.04 var(--f-display); letter-spacing: -.01em; }
.sp-desc { font: italic 400 18px/1.4 var(--f-text); color: var(--ink-2); text-align: right; }
.sp-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.sphere.flip .sp-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
.sphere.flip .pl { order: 2; }
.fire-pl { aspect-ratio: 16 / 11; }
.sp-text { display: grid; gap: 18px; padding-top: 6px; }
.sp-text p { text-wrap: pretty; }
.sp-text b { font: 600 10.5px/1.6 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 4px; color: var(--ink-2); }
.sp-more { display: grid; gap: 8px; padding-left: 0; }
.sp-more li { font: italic 400 17px/1.45 var(--f-text); color: var(--ink); padding-left: 18px; position: relative; }
.sp-more li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--sens); box-shadow: 0 0 0 1px rgba(26, 30, 20, .35); }
.sp-key { font: 500 10.5px/1.7 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 14px; }
/* темнота: ящик стола задвигается и выдвигается */
.pl-dark { position: absolute; inset: 0; z-index: 4; background: var(--ink-deep); clip-path: inset(0 100% 0 0); transition: clip-path .85s var(--ease); display: grid; place-items: center; pointer-events: none; }
.pl-dark.in { clip-path: inset(0 0 0 0); }
.pl-meter { position: absolute; z-index: 5; right: clamp(18px, 2.4vw, 30px); top: clamp(18px, 2.4vw, 28px); font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--white); opacity: 0; transition: opacity .4s; text-shadow: 0 1px 2px rgba(var(--shade-rgb), .5); }
.pl-meter.on { opacity: 1; }
.pl-dark .pl-meter { position: static; opacity: 1; color: rgba(var(--white-rgb), .7); }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); margin-top: 48px; }
.book-grid h3 { font: 400 26px/1.15 var(--f-display); margin: 0 0 12px; }
.book-grid h3 + * { margin-bottom: 26px; }
.book-grid ul { display: grid; gap: 10px; }
.book-grid li { padding-left: 18px; position: relative; text-wrap: pretty; }
.book-grid li::before { content: '—'; position: absolute; left: 0; color: var(--ink-3); }
.note-fine { font: italic 400 15.5px/1.5 var(--f-text); color: var(--ink-2); }
.next-worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.next-worlds a { display: grid; gap: 6px; padding: 24px 26px; text-decoration: none; border: 1px solid var(--rule); transition: border-color .3s, transform .3s var(--ease); }
.next-worlds a:hover { border-color: var(--ink); transform: translateY(-2px); }
.nw-dev { font: 400 28px/1.1 var(--f-hand); color: var(--deep); }
.nw-name { font: 400 26px/1.1 var(--f-display); }
.nw-book { font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }

/* ════════════ невысокий экран ноутбука ════════════ */
@media (min-width: 761px) and (max-height: 820px) {
  .hero-copy { top: clamp(96px, 15vh, 140px); }
  .lead-2 { display: none; }
  .hero h1 { margin-bottom: 26px; }
  .cta-row { margin-top: 30px; }
}
@media (min-width: 761px) and (max-height: 700px) {
  .plate-cap { display: none; }
  .kicker { margin-bottom: 18px; }
}
/* ════════════ портретная ориентация: образцы внизу, подпись процесса уходит после проявки ════════════ */
@media (max-aspect-ratio: 1/1) {
  .hero-copy { top: clamp(92px, 12vh, 150px); width: auto; right: var(--gut); max-width: 680px; }
  .hud { transition: opacity 1.2s ease 1.5s; }
  .hero[data-phase="done"] .hud { opacity: 0; pointer-events: none; }
}

/* ════════════ планшет ════════════ */
@media (max-width: 1100px) {
  .slips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; }
  .loupe { position: sticky; top: auto; bottom: 12px; z-index: 5; }
  .loupe-lens { width: auto; height: auto; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 26px; text-align: left; }
  .loupe-lens::before { inset: 5px; border-radius: 999px; }
  .lp-n { font-size: 34px; }
  .lp-title { display: none; }
  .lp-pair { margin: 0; }
  .loupe-cap { order: -1; }
}

/* ════════════ телефон ════════════ */
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .hero { height: 100svh; min-height: 640px; }
  .hero-nav { padding-top: 20px; }
  .brand { font-size: 17px; }
  /* на телефоне в шапке остаются только «Книги и цены» и «Рассчитать профиль» (CLARITY §3) */
  .nav-links li:not(.nl-keep) { display: none; }
  .nav-links { gap: 12px; font-size: 10px; letter-spacing: .08em; font-stretch: 75%; }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .hero-copy { top: 92px; width: auto; right: var(--gut); }
  .kicker { margin-bottom: 16px; font-size: 10px; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.04; margin-bottom: 18px; }
  .lead { font-size: 15.5px; line-height: 1.5; }
  .lead-2 { display: none; }
  .cta-row { margin-top: 24px; gap: 12px; }
  .stencil { padding: 17px 22px 16px; font-size: 12px; }
  .hud { bottom: 16px; max-width: none; right: var(--gut); }
  .plate-cap { display: none; }
  .steps { gap: 14px; }
  .replay { display: none; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-hint { grid-column: 1; }
  .slips { grid-template-columns: 1fr; margin-top: 36px; gap: 14px; }
  .slip { min-height: 236px; padding: 24px 22px 22px; }
  .slip-cue { left: 22px; bottom: 20px; }
  .slip-gift { max-width: 70%; padding-top: 14px; }
  .g-word { font-size: 28px; }
  .sheet-grid { gap: 5px; }
  .tile { padding: 5px; }
  .t-n { font-size: 9px; }
  .t-w { display: none !important; }
  .loupe-lens { gap: 12px; padding: 12px 18px; }
  .lp-n { font-size: 28px; }
  .lp-gi { font-size: 21px; }
  .lp-sh, .lp-si { font-size: 15px; }
  .loupe-cap { font-size: 9px; }
  .process { grid-template-columns: 1fr; margin-top: 40px; }
  .footnote { grid-template-columns: 1fr; }
  .world, .world.flip { grid-template-columns: 1fr; }
  .world.flip .plate, .world.flip .pl { order: 0; }
  .plate { aspect-ratio: 4 / 5; }
  .your-sheet { min-height: 720px; align-items: flex-end; }
  .your-copy { width: 100%; padding: 28px 22px 34px; }
  .your-lead { font-size: 17px; }
}

@media (max-width: 1100px) {
  .sp-body, .sphere.flip .sp-body { grid-template-columns: 1fr; }
  .sphere.flip .pl { order: 0; }
}
@media (max-width: 760px) {
  .devs { grid-template-columns: 1fr; }
  .devs li + li { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; }
  .devs li { padding: 14px 0 16px; grid-template-columns: auto 1fr; column-gap: 16px; }
  .dv-w { grid-row: span 2; font-size: 28px; min-width: 4.3em; }
  .pl, .fire-pl { aspect-ratio: auto; height: clamp(500px, 138vw, 600px); }
  .pl-copy { width: auto; right: 20px; left: 20px; top: 20px; }
  .pl-phrase { font-size: 19.5px; }
  .pl-act { left: 20px; bottom: 18px; padding: 17px 18px 16px; font-size: 11px; }
  .pl-hint { display: none; }
  .stub { display: none; }
  .sp-head { grid-template-columns: 1fr; }
  .sp-desc { text-align: left; }
  .book-grid, .next-worlds { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   Ясность · телефон · покупка — правила в CLARITY.md
   ════════════════════════════════════════════════════════════════════ */

/* — якоря не прячутся под липкой полосой — */
main [id], footer [id] { scroll-margin-top: 76px; }

/* — шапка: на планшете прячется необязательный пункт (.nl-opt); имя бренда — отдельным span,
     чтобы на самом узком экране остался один знак — */
@media (min-width: 761px) and (max-width: 1000px) {
  .nav-links { gap: 18px; }
  .nav-links .nl-opt { display: none; }
}
@media (max-width: 370px) { .hero-nav .brand-name { display: none; } }

/* — липкая полоса после первого экрана: «Книги и цены» + «Рассчитать профиль» всегда под рукой.
     position: sticky, без JS; стоит в потоке сразу после первого экрана — */
.dock {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 8px clamp(16px, 2.2vw, 30px);
  min-height: 60px; padding: 8px var(--gut);
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 22px -22px rgba(var(--deep-rgb), .55);
}
.dock .brand { margin-right: auto; min-height: 44px; color: var(--deep); font-size: 18px; }
.dock-link {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none;
  font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.dock-link:hover { text-decoration: underline; text-underline-offset: 6px; }
.dock-cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 17px; white-space: nowrap;
  background: var(--deep); color: var(--white); text-decoration: none;
  font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(0 4%, 99.2% 0, 100% 95%, .7% 100%);
}
.dock-cta::after { content: '→'; font: 400 15px/1 var(--f-text); letter-spacing: 0; transition: transform .3s var(--ease); }
.dock-cta:hover::after { transform: translateX(4px); }
.dock-cta:focus-visible { outline: 2px solid var(--white); outline-offset: -5px; }

/* — первый экран: образная строка — вторым слоем, под кнопкой — */
.cta-row .cta-quiet { margin-left: 4px; }
.hero-motto {
  position: relative; margin-top: 34px; padding-left: 48px; max-width: 30em;
  font: 400 clamp(19px, 1.75vw, 26px)/1.28 var(--f-display); letter-spacing: -.005em;
}
.hero-motto::before { content: ''; position: absolute; left: 0; top: .66em; width: 34px; height: 1px; background: currentColor; opacity: .7; }
/* фраза переносится только между предложениями */
.hero-motto span { display: inline-block; }

/* — подпись к Табл. I: пояснение образа живёт на втором экране — */
.plate-caption { padding-top: clamp(56px, 7vw, 96px); }
.pc-text { display: grid; gap: 12px; max-width: 44em; margin-top: 22px; }
.pc-text p:first-child { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; text-wrap: pretty; }
.pc-text p + p { font-style: italic; color: var(--ink-2); }

/* — текст слоями: тезис + до трёх пунктов видны сразу, «Читать полностью» раскрывает исходный текст — */
.thesis { font-size: clamp(18px, 1.35vw, 20px); line-height: 1.52; max-width: 32em; text-wrap: pretty; }
.points { display: grid; gap: 8px; }
.points li { position: relative; padding-left: 20px; max-width: 34em; text-wrap: pretty; }
.points li::before {
  content: ''; position: absolute; left: 0; top: .66em; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sens); box-shadow: 0 0 0 1px rgba(26, 30, 20, .35);
}
.more > summary {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0;
  list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 600 11px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--deep);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: '+'; flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid currentColor; border-radius: 50%;
  font: 400 16px/1 var(--f-text); letter-spacing: 0;
}
.more[open] > summary::before { content: '−'; }
.more > summary span { border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.more > summary:hover span { border-bottom-width: 2px; padding-bottom: 2px; }
.more > summary:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; }
.more .more-close, .more[open] .more-open { display: none; }
.more[open] .more-close { display: inline; }
.more-body { display: grid; gap: 18px; padding: 12px 0 4px; }
.more-body h3 { font: 400 24px/1.15 var(--f-display); margin-top: 8px; }
.more-body .pearl-fact { grid-template-columns: 1fr; margin-top: 6px; }

/* — главная, три мира: строка книги и цены — */
.w-price { margin-top: 16px; color: var(--ink-2); font-size: 16.5px; }
.w-price b { font: 400 21px/1.2 var(--f-display); color: var(--deep); }
.world-text .more { margin-top: 14px; }

/* — 64: инструменты под контактным листом — */
.contact-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 28px; }
.kfind { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.kfind label { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.kfind input {
  width: 4.6em; min-height: 46px; padding: 8px 10px 6px; margin: 0;
  border: 1px solid var(--rule); border-bottom: 1.5px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--deep); font: 400 22px/1 var(--f-display);
  -moz-appearance: textfield; appearance: textfield;
}
.kfind input::-webkit-outer-spin-button, .kfind input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kfind input:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.kfind button {
  min-height: 46px; padding: 0 18px; border: 0; cursor: pointer;
  background: var(--deep); color: var(--white);
  font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.kfind button:focus-visible { outline: 2px solid var(--white); outline-offset: -5px; }
.lp-lib {
  display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--deep);
  font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor;
}
.lp-lib[hidden] { display: none; }

/* — книги и цены (главная) — */
.offer-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.offer-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px 24px 26px; border: 1px solid var(--rule); background: var(--paper);
}
.offer-card.free { background: var(--deep); color: var(--white); border-color: var(--deep); }
.oc-k { font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.offer-card.free .oc-k, .offer-card.free .cta-note { color: var(--white-2); }
.oc-name { font: 400 clamp(26px, 2.15vw, 32px)/1.08 var(--f-display); }
.oc-world { font: italic 400 15.5px/1.42 var(--f-text); color: var(--ink-2); }
.oc-spheres { font: 400 19px/1.35 var(--f-hand); color: var(--deep); }
.oc-what { font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.oc-price { margin-top: auto; padding-top: 12px; font: 400 clamp(30px, 2.5vw, 40px)/1 var(--f-display); color: var(--deep); white-space: nowrap; }
.oc-price small, .buy-price small {
  font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  vertical-align: .6em; margin-right: 6px;
}
.offer-card.free .oc-price { color: var(--white); }
.offer-card .stencil { margin-top: 6px; padding: 16px 18px 15px 17px; gap: 10px; font-size: 11.5px; letter-spacing: .13em; white-space: nowrap; }
.oc-link {
  display: inline-flex; gap: 10px; align-items: center; min-height: 40px; text-decoration: none;
  font: 600 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; border-bottom: 1.5px solid currentColor;
}
.oc-link span { transition: transform .3s var(--ease); }
.oc-link:hover span { transform: translateX(4px); }
.buy-path {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.2fr); gap: 18px clamp(28px, 4vw, 64px);
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--rule);
}
.bp-h { font: 400 clamp(24px, 2.1vw, 30px)/1.15 var(--f-display); }
.steps-buy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px clamp(22px, 3vw, 40px); }
.steps-buy li { display: grid; gap: 6px; align-content: start; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
.sb-n { font: 600 10.5px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.offer-soon { margin-top: 34px; max-width: 52em; font: italic 400 16.5px/1.6 var(--f-text); color: var(--ink-2); }
.offer-soon a { color: var(--ink); text-underline-offset: 4px; }

/* — блок книги мира: одинаковый на трёх мирах — */
.buy {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(28px, 4.5vw, 72px);
  margin-top: clamp(44px, 5vw, 64px); padding: clamp(24px, 3vw, 44px);
  background: var(--paper-2); border: 1px solid var(--rule);
}
.buy-head {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: end;
  padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.buy-k { grid-column: 1 / -1; font: 500 10.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.buy-name { font: 400 clamp(32px, 3.2vw, 48px)/1.05 var(--f-display); letter-spacing: -.01em; }
.buy-world { grid-column: 1; font: italic 400 16.5px/1.42 var(--f-text); color: var(--ink-2); }
.buy-price { grid-column: 2; grid-row: 2 / span 2; align-self: center; font: 400 clamp(34px, 3.2vw, 48px)/1 var(--f-display); color: var(--deep); white-space: nowrap; }
.buy-sub { font: 600 10.5px/1.5 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.buy-in ul { display: grid; gap: 10px; }
.buy-in li { position: relative; padding-left: 18px; text-wrap: pretty; }
.buy-in li::before { content: '—'; position: absolute; left: 0; color: var(--ink-3); }
.buy .steps-buy { grid-template-columns: 1fr; gap: 14px; }
.buy-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.stencil.solid { --bg: var(--deep); --fg: var(--white); }
.stencil.solid:focus-visible { outline-color: var(--white); }
.book-note { margin-top: 36px; max-width: 46em; }
.book-note h3 { font: 400 22px/1.2 var(--f-display); margin-bottom: 8px; }
.book-grid.after-buy { margin-top: 40px; }

/* — подвал: продукты с ценами на каждой странице — */
.foot { display: block; text-align: left; }
.foot-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .8fr); gap: 40px clamp(32px, 5vw, 80px);
}
.foot-about { display: grid; gap: 10px; align-content: start; }
.foot-h { font: 600 10.5px/1.5 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.price-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 9px 0; border-bottom: 1px dotted rgba(var(--ink-rgb), .3); }
.price-list a, .price-list .pn { color: var(--ink); text-decoration: none; font-size: 16.5px; }
.price-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.price-list b { margin-left: auto; font: 500 11px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--deep); white-space: nowrap; }
.foot-pay { margin-top: 14px; font: italic 400 15px/1.5 var(--f-text); color: var(--ink-2); max-width: 34em; }
.foot-nav ul { display: grid; gap: 2px; }
.foot-nav a {
  display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--ink);
  font: 500 10.5px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 1100px) {
  .offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buy-path { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-about { grid-column: 1 / -1; }
}

/* ════════════ телефон: проектируется первым (390×844) ════════════ */
@media (max-width: 760px) {
  .dock { min-height: 56px; gap: 6px 14px; padding: 6px 16px; }
  .dock .brand { font-size: 16px; }
  .dock-link, .dock-cta { font-size: 10.5px; letter-spacing: .1em; font-stretch: 75%; }
  .dock-cta { padding: 0 13px 0 12px; gap: 8px; }
  .dock-acc { display: none; }
  .hero-motto { margin-top: 22px; font-size: 19px; padding-left: 36px; }
  .hero-motto::before { width: 24px; }
  .thesis { font-size: 17.5px; }
  .more > summary { font-size: 10.5px; }
  /* 64: не сетка 8×8, а лента плёнки — листается вбок, кадр 104 px со словом */
  .contact { gap: 16px; margin-top: 30px; }
  .sheet-grid {
    position: relative; display: flex; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 14px; scroll-padding-inline: var(--gut);
    scrollbar-width: none;
  }
  .sheet-grid::-webkit-scrollbar { display: none; }
  .sheet-grid > li { flex: 0 0 104px; scroll-snap-align: start; }
  .tile { padding: 9px; }
  .t-n { font-size: 11px; }
  .t-w { display: block !important; font-size: 13px; }
  .loupe { position: static; }
  .lp-n { font-size: 30px; }
  .loupe-cap { font-size: 10px; }
  .contact-tools { margin-top: 18px; gap: 12px 24px; }
  .offer-list { grid-template-columns: 1fr; margin-top: 36px; gap: 12px; }
  .offer-card { padding: 22px 20px; }
  /* книга на телефоне — короткая строка прейскуранта: цена ярлыком справа вверху, название во всю ширину;
     сферы уже перечислены в «Трёх мирах» */
  .offer-card:not(.free) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: baseline; padding: 18px 20px 16px; }
  .offer-card:not(.free) > * { grid-column: 1 / -1; }
  .offer-card:not(.free) .oc-k { grid-column: 1; grid-row: 1; letter-spacing: .1em; font-stretch: 75%; white-space: nowrap; }
  .offer-card:not(.free) .oc-price { grid-column: 2; grid-row: 1; margin: 0; padding: 0; font-size: 24px; }
  .offer-card:not(.free) .oc-spheres { display: none; }
  .offer-card:not(.free) .oc-link { justify-self: start; }
  /* тихие ссылки: видимая линия остаётся тонкой, а нажимается полоса 44 px */
  .cta-quiet, .w-link, .oc-link, .price-list a, .lp-lib { position: relative; }
  .w-link::before, .oc-link::before, .lp-lib::before { content: ''; position: absolute; inset: -13px -6px; }
  .price-list a::before { content: ''; position: absolute; inset: -9px -4px; }
  .foot-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .foot-nav a { min-height: 44px; }
  .steps-buy { grid-template-columns: 1fr; gap: 14px; }
  .buy { grid-template-columns: 1fr; padding: 24px 20px 26px; gap: 24px; }
  .buy-head { grid-template-columns: 1fr; }
  .buy-price { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 420px) { .dock .brand-name { display: none; } }

/* ════════════ спокойная версия ════════════ */
html.js:not(.dev) .pl-print .pl-act, html.js:not(.dev) .pl-glass .pl-act, html.js:not(.dev) .pl-hint { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .slip:hover:not([aria-pressed="true"]) { transform: none; }
}