/* Цена слова: стол при свече, бланк на пергаменте, печать в сургуч, стена обязательств на сцене. */
:root {
  --night: #0d0806;
  --walnut: #2b1a10;
  --amber: #e2ad6a;
  --amber-dim: #a7794a;
  --parchment: #e9dbbd;
  --ink: #2a1a10;
  --ink-soft: #6e5442;
  --ink-line: rgba(42, 26, 16, .38);
  --wax: #8c1f18;
  --wax-deep: #5e120d;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --serif: "Literata", "PT Serif", Georgia, serif;
  --script: "Marck Script", "Literata", cursive;
  --display: "Old Standard TT", "Literata", serif;
  --seal: clamp(104px, 22vw, 150px);
}

* { box-sizing: border-box; }
html { background: var(--night); color-scheme: dark; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font: 400 18px/1.6 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- звук ---------- */
.sound {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 30;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 14px 10px 12px;
  font: 400 14px/1 var(--serif); color: var(--amber);
  background: rgba(13, 8, 6, .55); border: 0; border-radius: 4px; cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound .horn { fill: currentColor; stroke: none; }
.sound .mute { display: none; }
.sound[aria-pressed="false"] { color: var(--amber-dim); }
.sound[aria-pressed="false"] .wave { display: none; }
.sound[aria-pressed="false"] .mute { display: inline; }
@media (hover: hover) and (pointer: fine) { .sound:hover { background: rgba(13, 8, 6, .8); } }

/* ---------- стол ---------- */
.desk {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 16px 56px;
}
.desk-bg {
  position: absolute; inset: 0; z-index: -1;
  background: url(img/desk.webp) center / cover no-repeat, var(--night);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.85) 80%, rgba(0,0,0,.6) 87%, rgba(0,0,0,.3) 94%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 72%, rgba(0,0,0,.85) 80%, rgba(0,0,0,.6) 87%, rgba(0,0,0,.3) 94%, transparent 100%);
}
@media (max-width: 700px) { .desk-bg { background-image: url(img/desk-m.webp); background-position: 20% center; } }

.sheet {
  position: relative;
  width: min(760px, 100%);
  padding: clamp(28px, 6vw, 60px) clamp(22px, 6vw, 64px) clamp(24px, 4vw, 40px);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255, 236, 196, .35), transparent 60%),
    radial-gradient(140% 120% at 100% 100%, rgba(78, 44, 18, .32), transparent 55%),
    url(img/paper.webp) center / 512px repeat,
    var(--parchment);
  clip-path: var(--deckle, none);
  transform: rotate(-.5deg);
  filter: drop-shadow(-10px 16px 14px rgba(8, 4, 2, .55));
}
.sheet-head h1 {
  margin: 0;
  font: italic 400 clamp(52px, 10vw, 92px)/1.05 var(--display);
  letter-spacing: .01em;
  color: var(--ink);
}
/* киноварный инициал, как в грамотах */
.initial { color: var(--wax); font-size: 1.18em; line-height: 0; }
.sheet-head p {
  margin: 10px 0 0;
  font: italic 400 clamp(15px, 2.4vw, 17px)/1.4 var(--serif);
  color: var(--ink-soft);
}

.vow-text {
  margin: clamp(22px, 4vw, 34px) 0 0;
  font: 400 clamp(19px, 2.9vw, 24px)/2.05 var(--serif);
  text-wrap: pretty;
}
.field {
  display: inline;
  padding: 0 2px 2px;
  font-style: italic; font-weight: 500;
  color: #4a1c0e;
  background-image: radial-gradient(circle, var(--ink-line) 1.1px, transparent 1.4px);
  background-size: 7px 3px;
  background-repeat: repeat-x;
  background-position: 0 100%;
  border-radius: 2px;
  outline: none;
  caret-color: var(--wax);
  transition: background-color 160ms ease;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  word-break: break-word;
}
.field:empty::before {
  content: attr(data-ph);
  font-weight: 400;
  color: rgba(110, 84, 66, .62);
}
.field:focus, .field:focus-visible { background-color: rgba(255, 238, 200, .55); outline: none; }
.field.miss { background-color: rgba(140, 31, 24, .14); }
.field-date {
  font: italic 500 1em/1 var(--serif);
  color: #4a1c0e;
  border: 0; padding: 0 2px 2px; margin: 0;
  width: 7.4em; min-height: 0;
  background-color: transparent;
  color-scheme: light;
  -webkit-appearance: none; appearance: none;
}
.field-date::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sheet-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-top: clamp(22px, 4vw, 34px);
}
.sign { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sign-name {
  min-height: 1.3em;
  font: 400 clamp(30px, 6vw, 42px)/1.3 var(--script);
  color: #33150b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 4px;
}
.sign-line {
  display: block;
  padding-top: 4px;
  border-top: 1.5px solid var(--ink-line);
  border-radius: 1px;
  max-width: 280px;
  font: italic 400 14px/1.4 var(--serif);
  color: var(--ink-soft);
}

.mp {
  position: relative; flex: none;
  width: var(--seal); height: var(--seal);
  display: grid; place-items: center;
}
.mp-mark {
  display: grid; place-items: center;
  width: 72%; height: 72%;
  border: 1.5px dashed var(--ink-line); border-radius: 50%;
  font: italic 500 18px/1 var(--serif); color: var(--ink-soft);
  transition: opacity 200ms ease;
}
.seal {
  position: absolute; inset: -8%;
  visibility: hidden;
}
.seal img {
  width: 100%; height: 100%; display: block;
  filter: saturate(.82) brightness(.78) contrast(1.08) drop-shadow(-2px 3px 2px rgba(60, 10, 6, .45));
}
.seal-text {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0;
}
.seal-text text {
  text-anchor: middle; dominant-baseline: central;
  fill: #2c0402;
  font-family: var(--serif);
}
/* оттиск: тёмная выемка, светлая кромка снизу справа (свет сверху слева) */
.seal-text .emboss {
  filter: drop-shadow(1px 1.2px 0 rgba(255, 160, 135, .7)) drop-shadow(-.6px -.7px .3px rgba(10, 0, 0, .6));
}
.seal-big { font-size: 28px; font-weight: 700; letter-spacing: .01em; }
.seal-date { font-size: 13px; font-style: italic; font-weight: 600; }
.sealed .seal { visibility: visible; }
.sealed .seal-text { opacity: 1; }
.sealed .mp-mark { opacity: 0; }

.act {
  width: min(760px, 100%);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 30px;
}
/* кнопка: застывший сургуч с оттиском печати слева */
.give {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 64px;
  padding: 10px 34px 12px 12px;
  color: #f4dfbd;
  background:
    radial-gradient(90% 70% at 30% 18%, rgba(255, 170, 140, .38), transparent 55%),
    radial-gradient(120% 90% at 80% 110%, rgba(40, 4, 2, .55), transparent 60%),
    var(--wax);
  border: 0;
  border-radius: 34px 46px 38px 52px / 30px 36px 40px 34px;
  box-shadow:
    inset 0 2px 1px rgba(255, 190, 165, .35),
    inset 0 -3px 4px rgba(45, 4, 2, .55),
    -2px 3px 4px rgba(20, 3, 2, .55);
  cursor: pointer;
  transition: transform 140ms var(--ease-out), filter 160ms ease;
}
.give-seal {
  width: 46px; height: 46px; flex: none;
  filter: saturate(.8) brightness(.7) contrast(1.15);
  transform: rotate(-8deg);
  transition: transform 260ms var(--ease-out);
}
.give-label {
  font: italic 400 clamp(25px, 3.4vw, 29px)/1 var(--display);
  letter-spacing: .02em;
  text-shadow: 0 -1px 0 rgba(40, 4, 2, .7), 0 1px 0 rgba(255, 190, 160, .22);
}
@media (hover: hover) and (pointer: fine) {
  .give:hover { filter: brightness(1.08); }
  .give:hover .give-seal { transform: rotate(14deg); }
}
.give:active { transform: scale(.97); }
.give:disabled { cursor: progress; filter: saturate(.7) brightness(.85); }
.status { margin: 0; min-height: 1.4em; font: italic 400 17px/1.4 var(--serif); color: var(--amber); flex: 1 1 260px; }
.status.err { color: #f0a08c; }

/* ---------- рука, искры ---------- */
.hand {
  position: fixed; left: 0; top: 0; z-index: 40;
  width: 300px; pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
.hand img { width: 100%; height: auto; display: block; filter: drop-shadow(-14px 18px 16px rgba(5, 2, 1, .55)); }
.cine { position: fixed; inset: 0; z-index: 50; background: #050302; cursor: pointer; }
.cine[hidden] { display: none; }
.cine video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 39; pointer-events: none; }

/* ---------- стена ---------- */
.wall {
  position: relative; isolation: isolate;
  min-height: 100svh;
  padding: 96px 16px 72px;
}
.wall-bg {
  position: absolute; inset: 0; z-index: -1;
  background: url(img/cover.webp) 72% top / cover no-repeat;
  opacity: .62;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.6) 16%, #000 26%, #000 70%, rgba(0,0,0,.6) 86%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.6) 16%, #000 26%, #000 70%, rgba(0,0,0,.6) 86%, transparent 100%);
}
.wall-in { width: min(1180px, 100%); margin: 0 auto; }
.wall h2 {
  margin: 0;
  font: italic 400 clamp(40px, 7vw, 72px)/1.05 var(--display);
  letter-spacing: .01em;
  color: var(--parchment);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}
.wall-lead { margin: 12px 0 0; max-width: 34em; font: italic 400 clamp(17px, 2.4vw, 20px)/1.5 var(--serif); color: var(--amber); }
.wall-empty { margin: 40px 0 0; font: italic 400 20px/1.5 var(--serif); color: var(--parchment); }

.cards {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 34px 26px;
  align-items: start;
}
.card {
  position: relative;
  padding: 26px 24px 30px;
  color: var(--ink);
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(255, 236, 196, .3), transparent 60%),
    url(img/paper.webp) center / 512px repeat,
    var(--parchment);
  border-radius: 2px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: -4px 6px 8px rgba(5, 2, 1, .5);
}
.card-name {
  margin: 0 64px 8px 0;
  font: 400 32px/1.15 var(--script);
  color: #33150b;
  overflow-wrap: anywhere;
}
.card dl { margin: 0; font-size: 16px; line-height: 1.45; }
.card dt { margin-top: 10px; font: italic 400 14px/1.3 var(--serif); color: var(--ink-soft); }
.card dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.card-seal {
  position: absolute; top: -18px; right: -14px;
  width: 86px; height: 86px;
  filter: saturate(.82) brightness(.78) contrast(1.08) drop-shadow(-2px 3px 2px rgba(40, 6, 4, .5));
  transform: rotate(14deg);
}
.card-time { margin: 14px 0 0; font: italic 400 13px/1.3 var(--serif); color: var(--ink-soft); }
.card.landing { visibility: hidden; }

.next {
  display: inline-block; margin-top: 48px;
  font: italic 400 19px/1.4 var(--serif); color: var(--amber);
  text-decoration: none;
  transition: color 160ms ease;
}
.next::after { content: " ↑"; font-style: normal; }
@media (hover: hover) and (pointer: fine) { .next:hover { color: var(--parchment); } }

@media (max-width: 520px) {
  body { font-size: 17px; }
  .sound { position: absolute; }
  .sign-name { white-space: normal; font-size: 28px; line-height: 1.15; }
  .desk { padding-top: 64px; justify-content: flex-start; }
  .sheet { transform: none; }
  .sheet-foot { gap: 12px; }
  .give { width: 100%; }
  .card-seal { width: 72px; height: 72px; top: -14px; right: -8px; }
}