/* ══════════════════════════════════════════════════════════════════
   ILLUMINATED MANOR — оформление на растровых ассетах

   1. Токены          6. Портрет            11. Ответ
   2. База            7. Свиток и крафт     12. Изразцы и подвал
   3. Слои и полосы   8. Письмо             13. Доступность
   4. Типографика     9. Порядок дня
   5. Первый экран,  10. Указ о платье
      отсчёт
   ══════════════════════════════════════════════════════════════════ */

/* ═══ 1. ТОКЕНЫ ═══ */
:root{
  --canvas-dark: #241C15;
  --canvas-deep: #17120D;

  --cream:   #F3ECD9;
  --cream-2: rgba(243,236,217,.78);
  --cream-3: rgba(243,236,217,.52);
  --ink:     #2A2118;
  --ink-2:   rgba(42,33,24,.82);
  --ink-3:   rgba(42,33,24,.58);

  --garnet:  #5A1F28;
  --minium:  #7A2618;
  --brass:   #A98F58;
  --rose-ban:#C98A78;

  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-caps:    'Forum', 'Playfair Display', Georgia, serif;
  --f-body:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --column: 660px;
  --pad:    clamp(22px, 6vw, 38px);
  --gap:    clamp(80px, 13vh, 160px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ── РАМКИ АССЕТОВ-БУМАГ ──
     cut  — какая доля края картинки считается рамкой (рисунок, рваный край);
     edge — какой толщины эта рамка на экране. Текст всегда идёт внутри неё.
     Если текст задевает орнамент — увеличьте edge.
     Если углы выглядят сплющенными или вытянутыми — подвиньте cut. */
  --scroll-cut:    24% 20% 24% 20%;
  --scroll-edge-y: clamp(128px, 34vw, 210px);   /* сверху и снизу: валики, углы */
  --scroll-edge-x: clamp(68px, 18vw, 112px);    /* слева и справа */

  --kraft-cut:  18%;
  --kraft-edge: clamp(58px, 15vw, 118px);

  --letter-cut:  16%;                            /* письмо с контактами */
  --letter-edge: clamp(48px, 12vw, 96px);

  /* ── ПОРТРЕТ: окно в раме, куда садится снимок ── */
  --win-x: 12.5%;
  --win-y: 15%;
  --win-w: 75%;
  --win-h: 75%;

  /* ── ЗАНАВЕСИ ── */
  --curtain-w: clamp(64px, 16vw, 280px);
}

/* ═══ 2. БАЗА ═══ */
*,*::before,*::after{box-sizing:border-box}

html{color-scheme:dark; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--safe-t)}

body{
  margin:0;
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
  background:var(--canvas-deep);
  color:var(--cream-2);
  font-family:var(--f-body);
  font-size:clamp(1.08rem, .7vw + .9rem, 1.3rem);
  line-height:1.85;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block}
::selection{background:rgba(169,143,88,.32); color:var(--cream)}
:focus-visible{outline:1px solid var(--brass); outline-offset:3px}

.column{max-width:var(--column); margin:0 auto; padding:0 var(--pad)}
.section{padding:var(--gap) 0; position:relative}
.screen{min-height:74vh; display:flex; align-items:center}
.center{text-align:center}

/* ═══ 3. СЛОИ И ПОЛОСЫ ═══ */
.layer-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url("assets/bg-canvas.jpg") center/cover no-repeat, var(--canvas-dark);
}
.layer-fog{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(62% 40% at 50% 8%, rgba(236,220,186,.10), transparent 70%),
    radial-gradient(120% 82% at 50% 46%, rgba(14,10,7,.2) 34%, rgba(14,10,7,.7) 100%);
}
.layer-grain{
  position:fixed; inset:0; z-index:8; pointer-events:none;
  background:url("assets/grain-canvas.png") repeat;
  background-size:520px 520px;
  opacity:.16; mix-blend-mode:overlay;
}
.leaf-frame{
  position:fixed; z-index:9; pointer-events:none;
  top:calc(var(--safe-t) + clamp(10px,2vw,18px));
  bottom:calc(var(--safe-b) + clamp(10px,2vw,18px));
  left:clamp(10px,2vw,18px); right:clamp(10px,2vw,18px);
  border:1px solid rgba(243,236,217,.22);
}
.leaf-frame::after{content:''; position:absolute; inset:4px; border:1px solid rgba(243,236,217,.08)}

.page{position:relative; z-index:3}

/* полоса с писаной картиной — лёгкое тёплое затемнение, не чёрное */
.band{
  position:relative; overflow:hidden;
  border-top:1px solid rgba(243,236,217,.12);
  border-bottom:1px solid rgba(243,236,217,.12);
}
.band::before{
  content:''; position:absolute; inset:0;
  background:var(--band-img) center/cover no-repeat;
}
.band::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at 50% 46%, rgba(34,28,20,.52), rgba(34,28,20,.18) 70%, transparent 100%),
    linear-gradient(180deg, rgba(24,19,13,.32), rgba(24,19,13,.08) 40%, rgba(24,19,13,.36));
}
.band > *{position:relative; z-index:1}
.band--herald{--band-img:url("assets/bg-band.jpg")}
.band--herald::after{                  /* под цифрами темно, кот проступает по краям */
  background:
    radial-gradient(62% 52% at 50% 48%, rgba(20,15,10,.82), rgba(20,15,10,.55) 70%, rgba(20,15,10,.4) 100%),
    linear-gradient(180deg, rgba(20,15,10,.6), rgba(20,15,10,.3) 45%, rgba(20,15,10,.66));
}
.band--transport{--band-img:url("assets/bg-transport.jpg")}
.band .lead, .band .caption, .band .title, .band .body-text{text-shadow:0 1px 16px rgba(0,0,0,.85)}

/* ═══ 4. ТИПОГРАФИКА ═══ */
.names{
  margin:clamp(28px,5.5vh,50px) 0 clamp(26px,5vh,44px);
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(3.2rem, 9vw, 6.8rem);
  line-height:1.03; letter-spacing:.14em; text-indent:.14em;
  text-transform:uppercase; color:var(--cream);
  text-shadow:0 0 60px rgba(236,220,186,.16), 0 2px 26px rgba(0,0,0,.55);
}
.names span{display:block}
.names__amp{
  display:block; margin:.06em 0 .1em;
  font-family:var(--f-body); font-style:italic; font-weight:400;
  font-size:.42em; line-height:1; letter-spacing:0; text-indent:0;
  text-transform:lowercase; color:var(--brass);
}

.title{
  margin:0 0 clamp(26px,4vw,40px);
  font-family:var(--f-caps); font-weight:400;
  font-size:clamp(1.7rem, 4.2vw, 2.5rem);
  letter-spacing:.22em; text-indent:.22em;
  text-transform:uppercase; color:var(--cream); text-align:center;
}

.lead{
  margin:0 auto clamp(26px,5vw,40px); max-width:40ch;
  font-style:italic; font-size:1.2em; line-height:1.7; color:var(--cream-2);
}

.body-text{margin:0 auto; max-width:46ch}
.body-text + .body-text{margin-top:1.1em}

.label{
  display:block; font-family:var(--f-caps);
  font-size:clamp(.74rem, 1.4vw, .86rem);
  letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; color:var(--cream-3);
}

.caption{margin:0; font-style:italic; font-size:.92rem; line-height:1.6; color:var(--cream-3)}

.js .reveal{opacity:0; transform:translateY(16px)}
.js .reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 1.5s ease, transform 1.5s cubic-bezier(.16,.84,.44,1);
}

/* ═══ 5. ПЕРВЫЙ ЭКРАН И ОТСЧЁТ ═══ */
.hero{
  position:relative; overflow:hidden; text-align:center;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 86px) 0 96px;
}
.hero__art{position:absolute; inset:0; background:url("assets/hero-painting.jpg") center/cover no-repeat, var(--canvas-dark)}
.hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(56% 42% at 50% 46%, rgba(16,12,8,.72), rgba(16,12,8,.3) 62%, rgba(16,12,8,.04) 100%),
    radial-gradient(40% 26% at 50% 40%, rgba(236,220,186,.12), transparent 70%),
    linear-gradient(180deg, rgba(16,12,8,.55), transparent 26%, transparent 56%, rgba(23,18,13,.9));
}
.hero__inner{position:relative; max-width:880px}
.mono{width:clamp(170px,38vw,260px); height:auto; margin:0 auto}

.date-arabic{
  margin:0; font-family:var(--f-caps);
  font-size:clamp(1.15rem,3.6vw,1.44rem);
  letter-spacing:.44em; text-indent:.44em; color:var(--cream);
}
.date-roman{
  margin:.5em 0 0; font-family:var(--f-caps);
  font-size:clamp(.8rem,2.4vw,.94rem);
  letter-spacing:.42em; text-indent:.42em; color:var(--brass);
}
.date-words{margin:.9em auto 0; max-width:30ch; font-style:italic; font-size:.92rem; color:var(--cream-3)}
.hero__place{
  margin:2em 0 0; font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem,3.2vw,1.35rem); letter-spacing:.06em; color:var(--cream-2);
}
.scroll-cue{
  position:absolute; left:50%; bottom:clamp(28px,5vh,52px); transform:translateX(-50%);
  width:1px; height:clamp(40px,7vh,68px);
  background:linear-gradient(180deg, rgba(243,236,217,.6), transparent);
}

/* отсчёт на изразцах */
.countdown{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,2vw,16px); max-width:560px; margin:0 auto;
}
.cd{padding:6px 2px}
.cd + .cd{border-left:1px solid rgba(243,236,217,.18)}
.cd__num{
  display:block; font-family:var(--f-display); font-weight:400;
  font-size:clamp(2.3rem,9vw,3.3rem); line-height:1.1; letter-spacing:.05em;
  color:var(--cream); font-variant-numeric:lining-nums tabular-nums;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.cd .label{margin-top:12px; font-size:.7rem; letter-spacing:.26em; text-indent:.26em; color:var(--cream-3)}

.banderole{
  width:min(520px,92%);
  margin:clamp(26px,4vw,38px) auto clamp(18px,3vw,26px);
  padding:14px 0;
  border-top:1px solid rgba(243,236,217,.22);
  border-bottom:1px solid rgba(243,236,217,.22);
}
.banderole span{
  display:block; font-family:var(--f-caps); font-size:clamp(.8rem,2.2vw,1rem);
  letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:var(--cream-2); text-shadow:0 1px 14px rgba(0,0,0,.85);
}

/* ═══ 6. ПАРАДНЫЙ ПОРТРЕТ ═══ */
.gallery{
  position:relative; overflow:hidden;
  padding-top:0;
  border-top:1px solid rgba(243,236,217,.12);
  border-bottom:1px solid rgba(243,236,217,.12);
}
.gallery::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(58% 34% at 50% 10%, rgba(236,220,186,.14), transparent 72%),
    linear-gradient(180deg, rgba(16,12,8,.3), rgba(16,12,8,.12) 44%, rgba(16,12,8,.45));
}
.gallery > *{position:relative; z-index:2}

/* ламбрекен — в потоке, всегда в своих пропорциях */
.valance{
  position:relative; z-index:4; display:block;
  width:100%; height:auto; pointer-events:none;
  margin:0 0 clamp(26px,6vw,70px);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

/* занавеси: картинка не сжимается, а обрезается — видна внутренняя часть с подбоем */
.curtain{
  position:absolute; top:0; bottom:0; z-index:3; pointer-events:none;
  width:var(--curtain-w);
  background:url("assets/curtain-left.png") right top/cover no-repeat;
  filter:drop-shadow(0 0 24px rgba(0,0,0,.5));
}
.curtain--l{left:0}
.curtain--r{right:0; transform:scaleX(-1)}

/* содержимое всегда между шторами */
.gallery__inner{
  width:min(calc(100% - 2 * var(--curtain-w) - 32px), 720px);
  margin:0 auto;
}

.portrait{position:relative; max-width:520px; margin:clamp(30px,6vw,48px) auto 0}
.portrait__mark{
  position:absolute; top:-26px; z-index:4;
  font-family:var(--f-caps); font-size:.72rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--cream-3);
}
.portrait__mark--l{left:0}
.portrait__mark--r{right:0}

.portrait__stage{position:relative; aspect-ratio:4/5}
.portrait__photo{
  position:absolute; z-index:1;
  left:var(--win-x); top:var(--win-y); width:var(--win-w); height:var(--win-h);
  object-fit:cover; object-position:center 26%;
  filter:sepia(.30) saturate(.62) contrast(1.02) brightness(.84);
}
.portrait__stage::after{
  content:''; position:absolute; z-index:2; pointer-events:none;
  left:var(--win-x); top:var(--win-y); width:var(--win-w); height:var(--win-h);
  background:
    radial-gradient(66% 54% at 50% 34%, rgba(232,210,160,.14), transparent 62%),
    radial-gradient(78% 72% at 50% 46%, transparent 32%, rgba(14,10,7,.7) 100%);
}
.portrait__frame{position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none}

/* ═══ 7. СВИТОК И КРАФТ ═══
   Обе бумаги режутся на 9 частей (border-image): края и углы ассета
   остаются как есть, растягивается только середина. Никаких заливок
   и прямоугольных теней под картинкой — тень идёт по контуру. */
.panel{position:relative; padding:clamp(6px,2vw,18px)}

.panel--scroll{
  border-style:solid; border-color:transparent;
  border-width:var(--scroll-edge-y) var(--scroll-edge-x);
  border-image-source:url("assets/paper-sage.jpg");
  border-image-slice:var(--scroll-cut) fill;
  border-image-width:var(--scroll-edge-y) var(--scroll-edge-x);
  border-image-repeat:stretch;
  filter:drop-shadow(0 26px 34px rgba(18,13,9,.7));
  color:var(--ink);
}

.panel--kraft{
  border-style:solid; border-color:transparent;
  border-width:var(--kraft-edge);
  border-image-source:url("assets/paper-kraft.png");
  border-image-slice:var(--kraft-cut) fill;
  border-image-width:var(--kraft-edge);
  border-image-repeat:round;
  filter:drop-shadow(0 24px 30px rgba(18,13,9,.68));
  color:var(--ink-2);
  overflow-wrap:break-word;
}
.panel--kraft .tl__name{color:var(--ink)}
.panel--kraft .caption,
.panel--kraft .tl__place{color:var(--ink-3)}
.panel--kraft .label{color:var(--ink-2)}

@media (max-width:520px){
  .panel--scroll, .panel--kraft, .panel--letter{margin-inline:-12px}
}

/* ═══ 8. ПИСЬМО ═══ */
.letter-sec{position:relative}
.marginalia{
  position:absolute; top:clamp(60px,10vh,120px);
  left:max(14px, calc(50% - var(--column)/2 - 96px));
  width:clamp(64px,7vw,92px); height:auto; opacity:.8; pointer-events:none;
}
@media (max-width:1060px){ .marginalia{display:none} }

.letter{margin:0; text-align:justify; hyphens:auto; line-height:1.8; font-weight:500; font-size:1.05em; color:var(--ink)}
.letter + .letter{margin-top:1.1em}
.letter:last-of-type::after{content:''; display:block; clear:both}
@media (max-width:600px){ .letter{text-align:left; hyphens:manual} }

.rubric{
  font-family:var(--f-caps); font-variant-caps:small-caps; font-weight:400;
  letter-spacing:.04em; color:var(--minium);
}
/* буквица: картинка «Д» заменяет первую букву, текст начинается вплотную к ней.
   Если между буквицей и «орогие» слишком широко или тесно — правьте второе
   значение margin (сейчас .25em). */
.versal{
  float:left; width:clamp(96px,22vw,150px); height:auto;
  margin:.28em .25em .1em -.12em;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ═══ 9. ПОРЯДОК ДНЯ ═══ */
.timeline{margin:0; padding:0; list-style:none}
.tl{display:grid; grid-template-columns:minmax(4.4em,auto) 1fr; gap:0 clamp(16px,4.5vw,30px); min-width:0}
.tl > div{min-width:0}
.tl + .tl{margin-top:clamp(24px,5vw,34px); padding-top:clamp(24px,5vw,34px); border-top:1px solid rgba(42,33,24,.18)}
.tl__time{
  font-family:var(--f-caps); font-size:clamp(1.2rem,4.2vw,1.5rem);
  letter-spacing:.08em; color:var(--garnet); line-height:1.5;
  font-variant-numeric:lining-nums tabular-nums; white-space:nowrap;
}
.tl__time--tbd{
  max-width:6.2em; padding-top:.45em; white-space:normal;
  font-size:.72rem; line-height:1.45; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}
.tl__name{margin:0; font-family:var(--f-display); font-weight:400; font-size:clamp(1.25rem,2.8vw,1.65rem); line-height:1.4}
.tl__place{margin:.3em 0 .45em; font-size:.98rem}

@media (max-width:600px){
  .panel--kraft{padding:10px clamp(8px,2.5vw,16px)}
  .tl{display:block}
  .tl__time{display:block; margin-bottom:4px; font-size:clamp(1.15rem,4.5vw,1.35rem)}
  .tl__name{font-size:clamp(1.2rem,4.5vw,1.5rem); line-height:1.35}
  .tl + .tl{margin-top:clamp(18px,4.5vw,26px); padding-top:clamp(18px,4.5vw,26px)}
}

.schedule-note{
  margin:clamp(24px,4vw,34px) 0 0; padding-top:clamp(18px,3vw,24px);
  border-top:1px solid rgba(42,33,24,.18);
  text-align:center; font-style:italic; font-size:.98rem; line-height:1.65;
  color:var(--ink-2);
}

/* ═══ 10. УКАЗ О ПЛАТЬЕ ═══ */
.dress__lead{
  margin:0 auto; max-width:30ch;
  font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.25rem,3.4vw,1.6rem); line-height:1.55; color:var(--cream);
}
.dress__swatches{width:min(560px,100%); height:auto; margin:clamp(28px,5vw,44px) auto clamp(10px,2vw,16px)}
.dress__ban{
  margin:0 0 clamp(24px,4vw,34px);
  font-family:var(--f-caps); font-size:clamp(.8rem,2vw,.94rem);
  letter-spacing:.3em; text-indent:.3em; text-transform:uppercase;
  color:var(--rose-ban);
}
.dress__joke{margin-top:1.1em}

/* ═══ 11. ОТВЕТ ═══ */
.rsvp-sec .caption{margin-bottom:clamp(30px,5vw,44px)}

.field{display:block; margin-bottom:26px}
fieldset.field{margin:0 0 26px; padding:0; border:0}
.form .label{
  margin-bottom:12px; font-family:var(--f-display); font-size:1.06rem;
  letter-spacing:.02em; text-indent:0; text-transform:none; color:var(--ink);
}
.input{
  width:100%; padding:13px 15px; border-radius:0;
  background:rgba(255,250,238,.36);
  border:1px solid rgba(42,33,24,.3);
  color:var(--ink); font-family:var(--f-body); font-size:1.02rem; line-height:1.5;
  transition:border-color .35s ease, background-color .35s ease;
}
.input::placeholder{color:rgba(42,33,24,.42); font-style:italic}
.input:focus{outline:none; border-color:rgba(90,31,40,.6); background:rgba(255,250,238,.52)}

.choice{display:flex; align-items:flex-start; gap:14px; padding:7px 0; cursor:pointer}
.choice input{position:absolute; width:1px; height:1px; opacity:0}
.mark{
  flex:0 0 auto; width:12px; height:12px; margin-top:10px;
  border:1px solid rgba(42,33,24,.5); background:rgba(255,250,238,.3);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.choice input:checked ~ .mark{background:var(--garnet); border-color:var(--garnet); box-shadow:inset 0 0 0 2px #E8DDC4}
.choice input:focus-visible ~ .mark{outline:1px solid var(--garnet); outline-offset:3px}
.choice span:last-child{font-size:1rem; line-height:1.65; color:var(--ink-2)}
.choice:hover span:last-child{color:var(--ink)}
.group[hidden]{display:none}

/* кнопка-печать: сургуч на ленте между двумя линиями */
.btn{
  display:flex; align-items:center; justify-content:center; gap:16px;
  width:100%; margin-top:10px; padding:12px 10px;
  background:transparent; border:0; border-radius:0;
  border-top:1px solid rgba(90,31,40,.32);
  border-bottom:1px solid rgba(90,31,40,.32);
  color:var(--garnet); font-family:var(--f-caps);
  font-size:1.04rem; letter-spacing:.26em; text-transform:uppercase;
  cursor:pointer; transition:color .4s ease;
}
.btn__seal{
  flex:0 0 auto; width:clamp(48px,11vw,62px); height:auto;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));
  transition:transform .6s ease;
}
.btn:hover{color:#3F121A}
.btn:hover .btn__seal{transform:rotate(-8deg)}

.form-msg{margin:18px 0 0; min-height:1.2em; font-style:italic; font-size:.92rem; color:var(--minium); text-align:center}
.thanks{text-align:center; padding:clamp(10px,3vw,26px) 0}
.thanks h3{margin:0 0 16px; font-family:var(--f-caps); font-weight:400; font-size:clamp(1.4rem,4.4vw,1.8rem); letter-spacing:.14em; color:var(--ink)}
.thanks p{margin:0; font-style:italic; color:var(--ink-3)}

/* ═══ 12. ИЗРАЗЦЫ И ПОДВАЛ ═══ */
.tile-band{
  height:clamp(54px,8vw,92px);
  background:url("assets/tiles-band.png") left center/auto 100% repeat-x;
  border-top:1px solid rgba(243,236,217,.16);
  border-bottom:1px solid rgba(243,236,217,.16);
}

.footer{
  padding:clamp(70px,11vh,120px) 0 calc(clamp(56px,9vh,92px) + var(--safe-b));
  text-align:center;
  background:linear-gradient(180deg, transparent, rgba(14,10,7,.5));
}
.banner{width:clamp(150px,30vw,220px); height:auto; margin:0 auto clamp(20px,4vw,32px)}
.sign{margin:0; font-family:var(--f-display); font-style:italic; font-size:1.3rem; line-height:1.8; color:var(--cream-2)}
.footer .label{margin-top:26px; color:rgba(243,236,217,.34)}

/* ═══ 12a. ПОТЕШНАЯ ЗАБАВА ═══ */
.game-card{
  position:relative; display:block; max-width:600px; margin:0 auto clamp(16px,3vw,24px);
  text-decoration:none; color:inherit;
  filter:drop-shadow(0 26px 34px rgba(18,13,9,.7));
}
.game-card__art{width:100%; height:auto; transition:filter .6s ease}
.game-card:hover .game-card__art{filter:brightness(1.08) saturate(1.05)}
.game-card__cta{                  /* гранатовая табличка поверх картины */
  position:absolute; left:50%; bottom:clamp(14px,4vw,28px); transform:translateX(-50%);
  padding:12px clamp(20px,5vw,34px);
  background:rgba(90,31,40,.92);
  box-shadow:inset 0 0 0 1px rgba(243,236,217,.35), inset 0 0 0 5px rgba(90,31,40,.92), inset 0 0 0 6px rgba(243,236,217,.18);
  font-family:var(--f-caps); font-size:clamp(.86rem,2.4vw,1.02rem);
  letter-spacing:.28em; text-indent:.28em; text-transform:uppercase; white-space:nowrap;
  color:var(--cream);
  transition:background-color .4s ease;
}
.game-card:hover .game-card__cta{background:rgba(110,38,49,.96)}
.game-card.no-art .game-card__cta{position:static; transform:none; display:inline-block}

/* игра поверх сайта */
.game-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(12,9,6,.94);
  display:grid; place-items:stretch;
}
.game-overlay[hidden]{display:none}
.game-overlay iframe{width:100%; height:100%; border:0; display:block}
.game-overlay__close{
  position:absolute; z-index:100;
  top:calc(env(safe-area-inset-top,0px) + 8px); right:calc(env(safe-area-inset-right,0px) + 8px);
  padding:7px 12px 6px; background:rgba(23,18,13,.88);
  border:1px solid rgba(243,236,217,.38); border-radius:0;
  color:var(--cream); font-family:var(--f-caps);
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  touch-action:manipulation;
}
@media (max-width: 600px) {
  .game-overlay__close {
    top:calc(env(safe-area-inset-top,0px) + 6px); right:calc(env(safe-area-inset-right,0px) + 6px);
    padding:6px 10px 5px; font-size:.72rem; letter-spacing:.14em;
  }
}
.game-open, .game-open body{overflow:hidden}

/* ═══ 12b. ГОНЦЫ И ВЕСТНИКИ ═══ */
.panel--letter{
  border-style:solid; border-color:transparent;
  border-width:var(--letter-edge);
  border-image-source:url("assets/paper-letter.png");
  border-image-slice:var(--letter-cut) fill;
  border-image-width:var(--letter-edge);
  border-image-repeat:round;
  filter:drop-shadow(0 24px 30px rgba(18,13,9,.68));
  color:var(--ink-2);
}
.contacts{margin:0; padding:0; list-style:none; text-align:center}
.contact{display:grid; justify-items:center; gap:4px}
.contact + .contact{margin-top:clamp(20px,4vw,28px); padding-top:clamp(20px,4vw,28px); border-top:1px solid rgba(42,33,24,.18)}
.contact .label{color:var(--ink-3)}
.contact__name{font-family:var(--f-display); font-size:clamp(1.3rem,3vw,1.6rem); line-height:1.3; color:var(--ink)}
.contact__links{font-size:1.02rem; color:var(--ink-3)}
.contact__links a{color:var(--garnet); text-decoration:none; border-bottom:1px solid rgba(90,31,40,.3); transition:border-color .3s ease}
.contact__links a:hover{border-bottom-color:var(--garnet)}
.contact .caption{color:var(--ink-3)}

/* ловушка для ботов в форме */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ═══ 13. ДОСТУПНОСТЬ И УЗКИЕ ЭКРАНЫ ═══ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1; transform:none; transition:none}
  .btn__seal{transition:none}
}
@media (max-width:420px){
  .cd .label{letter-spacing:.14em; text-indent:.14em; font-size:.62rem}
  .portrait__mark{font-size:.64rem; letter-spacing:.2em}
  .btn{letter-spacing:.18em; font-size:.94rem}
}