/* Базовые стили — телефон и планшет: элементы идут обычным потоком.
   От 1100px включается раскладка по макету Figma (1440px): каждый .abs стоит
   в координатах --x/--y из макета, всё масштабируется через --u = 1 px макета. */
:root{--ink:#000;--dark:#282320;--cream:#f7eee1;--muted:#898989;--violet:#491faf}
*{box-sizing:border-box;letter-spacing:.04em}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff url("assets/paper.webp") center top/1024px auto repeat-y;color:var(--ink);font:400 14px/1.366 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
p,h1,h2,h3,figure,ol{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
.page{max-width:980px;margin:0 auto;padding:0 20px 36px;overflow-x:clip}

.hero{display:flex;flex-direction:column;padding-top:28px}
.hero-name{align-self:center;white-space:pre}
.hero-tag{margin:56px 0 0 16%}
.hero-city{align-self:flex-end;margin:28px 8% 0 0}
.hero-photo{margin-top:36px;aspect-ratio:1308/541;border:.7px solid var(--ink);overflow:hidden}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-date{align-self:center;margin-top:18px;letter-spacing:.08em}

.kicker{white-space:pre}
.title{margin-top:10px;font-size:28px;font-weight:500;line-height:1.2}

.about{position:relative;margin-top:96px}
.about-text{margin-top:28px;font-size:15px;line-height:1.35}
.about-text span{display:block;padding-left:calc(var(--i) * .2px)}
.about-text .gap{height:1.35em}
.stamp{width:120px;margin:-24px 0 0 auto;rotate:-8.11deg}

.rules{margin-top:90px;display:flex;flex-direction:column;align-items:center;gap:18px}
.rules-hint{order:-1;text-align:center}
.rules-hint span{display:block;font-size:11px;font-weight:300}
.rules-hint b{display:block;font-weight:400;font-size:15px}
.rules-bike{width:min(306px,100%);aspect-ratio:2;object-fit:cover;border:.7px solid var(--ink)}
.rules-canal{width:min(306px,100%);aspect-ratio:1;object-fit:cover}
.notes{list-style:none;padding:0;max-width:320px;display:grid;gap:10px;color:var(--violet);font-size:12px;font-weight:600;text-align:center}
.rules-help{max-width:340px;font-size:12px;text-align:center}

.gifts{margin-top:100px}
.gift-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 14px;margin-top:40px}
.gift{display:flex;flex-direction:column;align-items:center;text-align:center}
.gift-num{margin-bottom:6px;font-size:12px;letter-spacing:.01em}
.gift-photo{width:100%;aspect-ratio:1;padding:2.5%;border:.7px solid var(--ink);overflow:hidden}
/* в макете фото подарков наложены режимом linear burn; assets/gift.webp заранее подготовлен так,
   что multiply поверх бумаги даёт тот же результат (linear burn в CSS есть только в Safari) */
.gift-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 39.3%;mix-blend-mode:multiply}
.gift-info{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;margin-top:12px}
.gift-info h3{width:100%;font-size:15px;font-weight:400;line-height:1.375;letter-spacing:.01em}
.gift-desc{flex:1;width:100%;margin-top:4px;font-size:11px;font-weight:200;line-height:1.4}
.gift-meta{display:flex;justify-content:space-between;width:100%;margin-top:10px;font-size:12px;letter-spacing:.01em;white-space:nowrap}
.gift-meta>*{letter-spacing:inherit}
.gift-meta a{font-weight:200}
.reserve{width:100%;margin-top:10px;padding:9px 6px;border:.5px solid var(--ink);border-radius:100px;background:transparent;color:var(--ink);font:400 11px/1.366 Manrope,Arial,sans-serif;letter-spacing:.04em;cursor:pointer;transition:background-color .2s,color .2s}
.reserve:not(:disabled):hover{background:rgba(40,35,32,.08)}
.reserve.is-own{background:var(--dark);color:var(--cream)}
.reserve.is-own:hover{background:#3d3531}
.reserve:disabled{border-color:var(--muted);color:rgba(137,137,137,.6);text-decoration:line-through;cursor:not-allowed}
.reserve:focus-visible,.box-button:focus-visible{outline:1px solid var(--violet);outline-offset:2px}
/* кнопку, которую только что занял или освободил кто-то другой, дважды обводит волна */
.reserve.is-changed{animation:reserve-changed 1.2s ease-out 2}
@keyframes reserve-changed{from{box-shadow:0 0 0 0 rgba(73,31,175,.5)}to{box-shadow:0 0 0 12px rgba(73,31,175,0)}}
@media (prefers-reduced-motion:reduce){.reserve.is-changed{animation:none}}

.fallback{margin-top:100px;display:flex;flex-direction:column;align-items:center;gap:28px}
.fallback-text{font-size:15px;font-weight:300;line-height:1.389;text-align:center}
.fallback-dog{width:120px}

.contacts{margin-top:90px}
.contacts-note{margin-top:12px}
.contact-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;margin-top:28px}
.box{display:flex;flex-direction:column;gap:10px;padding:24px;border:.7px solid var(--ink)}
.box-title{font-size:14px;font-weight:400}
.pickup-label{margin-top:14px;font-size:12px}
.pickup-address{font-size:17px}
.dots{display:block;width:100%;height:1px;background:url("assets/dots.svg") left center/100% 1px no-repeat}
.pickup-note{margin-top:24px;font-size:12px;line-height:1.333}
/* В макете фото карты наложено в режиме multiply на бумагу. Карта — контейнер (а значит
   изолированный слой), поэтому multiply делаем внутри неё: фото × цвет бумаги под картой. */
.bank-card{--c:calc(100cqw / 347);container-type:inline-size;position:relative;width:100%;max-width:347px;aspect-ratio:347/222;margin-top:6px;border:.5px solid var(--ink);border-radius:4px;overflow:hidden;color:#fff}
.bank-card::before,.bank-card::after{content:"";position:absolute;inset:0}
.bank-card::before{background:url("assets/card.webp") 69.75% 0/127.74% 100.07% no-repeat}
.bank-card::after{background:#eee7dd;mix-blend-mode:multiply}
.bank-card>.abs{position:absolute;z-index:1;left:calc(var(--x) * var(--c));top:calc(var(--y) * var(--c));font-weight:600;font-size:calc(13 * var(--c));letter-spacing:.16em;white-space:pre}
.bank-card>.bank-system{transform:translateX(-100%)}
.bank-card>.bank-number{font-weight:500;font-size:calc(20 * var(--c));letter-spacing:.08em}
.bank-card>.bank-holder{font-size:calc(16 * var(--c))}
.box-button{display:block;padding:10px 8px;border:.5px solid var(--ink);background:transparent;color:var(--ink);font:400 11px/1.366 Manrope,Arial,sans-serif;letter-spacing:.04em;text-align:center;text-decoration:none;cursor:pointer}
.bank-copy{width:100%;max-width:347px;margin-top:4px}
.tg-handle{font-size:26px;font-weight:500;letter-spacing:.1em;text-decoration:none}
.tg-channel{font-size:21px;font-weight:500;letter-spacing:.1em}
.tg-buttons{display:flex;gap:12px;margin-top:12px}
.tg-button{flex:1}
.site-footer{display:flex;justify-content:space-between;margin-top:60px}
.site-footer a{text-decoration:none}

/* Фоны на пробу: ?bg=1 … ?bg=7 в адресе, прозрачность — &op=0…100 (скрипт в <head> ставит
   html[data-bg] и --bg-op). Фон лежит отдельным слоем под страницей, под ним белый — как слой в Figma.
   Штукатурка и вельвет — крупные пятна, растянутые на ширину, и поверх мелкая фактура в родном разрешении.
   Фото подарков на них лежат на подложке цвета бумаги из макета, чтобы multiply не смешивал их с фоном. */
html[data-bg]{background:#fff}
html[data-bg] body,html[data-bg] .page{background:none}
html[data-bg] body{position:relative}
html[data-bg] body::before{content:"";position:absolute;inset:0;z-index:-1;opacity:var(--bg-op,1);pointer-events:none}
html[data-bg="1"] body::before{background:url("assets/bg/plaster-grain.webp") 0 0/450px auto,url("assets/bg/plaster.webp") center top/100% auto repeat-y,#b0b09a;background-blend-mode:overlay,normal}
html[data-bg="2"] body::before{background:#d6c7b4 url("assets/bg/stars-beige.svg") 0 0/668px auto}
/* на телефоне в кадр попадает одно созвездие из плитки, на десктопе — оба */
html[data-bg="3"] body::before{background:#f7f8f3 url("assets/bg/stars-white.svg") 75% top/900px auto}
html[data-bg="4"] body::before{background:url("assets/bg/velvet-grain.webp") 0 0/198px auto,url("assets/bg/velvet.webp") center top/100% auto repeat-y,#c6cb95;background-blend-mode:overlay,normal}
/* Тени листьев — бесшовная высокая плитка, собранная из копий фото (bg/build3.py): листья едут вместе
   со страницей. На телефоне плитка шириной 1000px (листья как на исходном фото), на десктопе — во всю ширину. */
html[data-bg="5"] body::before{background:url("assets/bg/leaf-pink-grain.webp") 0 0/192px auto,url("assets/bg/leaf-pink.webp") center top/1000px auto,#d2ac9a;background-blend-mode:overlay,normal}
html[data-bg="6"] body::before{background:url("assets/bg/leaf-dark-grain.webp") 0 0/144px auto,url("assets/bg/leaf-dark.webp") center top/1000px auto,#795b51;background-blend-mode:overlay,normal}
html[data-bg="7"] body::before{background:#f0e7db url("assets/bg/kiss.webp") 0 0/643px auto}
html[data-bg] .gift-photo{background:#ede4d6 content-box}
/* светлые текст и линии для тёмного фона (data-ink ставит скрипт в <head>) */
html[data-ink="light"]{--ink:#f7eee1;--violet:#d4c4ff;--muted:#b9a99f}
html[data-ink="light"] .fallback-dog,html[data-ink="light"] .dots{filter:invert(.95)}
html[data-ink="light"] .reserve:not(:disabled):hover{background:rgba(247,238,225,.12)}
html[data-ink="light"] .reserve.is-own{background:var(--cream);color:var(--dark)}
html[data-ink="light"] .reserve.is-own:hover{background:#fff}
html[data-ink="light"] .reserve:disabled{color:rgba(247,238,225,.55)}
.toast{position:fixed;left:50%;bottom:24px;z-index:3;width:max-content;max-width:min(calc(100vw - 32px),460px);padding:11px 18px;border-radius:22px;line-height:1.4;text-align:center;background:var(--dark);color:var(--cream);font-size:12px;opacity:0;transform:translate(-50%,100px);transition:.25s;pointer-events:none}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

@media (min-width:640px){
  .page{padding:0 40px 40px}
  .hero-name,.hero-tag,.hero-city,.hero-date,.kicker,.site-footer{font-size:16px}
  .title{font-size:34px}
  .about-text{font-size:18px}
  .about-text span{padding-left:calc(var(--i) * .5px)}
  .stamp{width:150px}
  .gift-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 28px}
  .fallback-text{font-size:17px}
}

@media (min-width:1100px){
  body,.page{background:#fff url("assets/paper.webp") center top/100vw auto repeat-y}
  html[data-bg="3"] body::before{background-position:center top;background-size:1500px auto}
  html[data-bg="7"] body::before{background-size:858px auto}
  html[data-bg="5"] body::before{background-size:192px auto,100% auto}
  html[data-bg="6"] body::before{background-size:144px auto,100% auto}
  /* средние подписи «как это работает» лежат на светлом небе фото канала — им оставляем тёмный фиолетовый */
  html[data-ink="light"] .notes li:nth-child(2),html[data-ink="light"] .notes li:nth-child(3){color:#491faf}
  /* --scale уменьшает весь макет; не уже 1100px, чтобы мелкий текст оставался читаемым. */
  .page{--scale:.7;container-type:inline-size;width:max(calc(100% * var(--scale)),min(100%,1100px));max-width:calc(1920px * var(--scale));padding:0;overflow:visible}
  /* --dy — сдвиг секции по вертикали относительно макета (после правок блоки стали другой высоты) */
  .stage{--u:calc(100cqw / 1440);--dy:0;position:relative;height:calc(11246 * var(--u))}
  .hero,.about,.rules,.gifts,.fallback,.contacts{display:block;margin:0;padding:0}
  .abs{position:absolute;left:calc(var(--x) * var(--u));top:calc((var(--y) + var(--dy)) * var(--u));margin:0}
  .anchor-end{text-align:right;white-space:nowrap;transform:translateX(-100%)}
  .gifts{--dy:108}
  .fallback,.contacts,.site-footer{--dy:-212}
  .box>*{--dy:0}

  .hero-name,.hero-tag,.hero-city,.hero-date,.kicker,.site-footer{font-size:calc(16 * var(--u));white-space:pre}
  .hero-photo{width:calc(1308 * var(--u));height:calc(541 * var(--u))}
  .title{font-size:calc(36 * var(--u));line-height:1.361;white-space:nowrap}

  /* --f уменьшает текст «о списке» вместе с отступами лесенки, центр блока остаётся на 720 */
  .about-text{--f:.85;left:calc((720 - 426 * var(--f)) * var(--u));width:calc(852 * var(--f) * var(--u));font-size:calc(20 * var(--f) * var(--u))}
  .about-text span{padding-left:calc(var(--i) * var(--f) * var(--u));white-space:nowrap}
  .stamp{width:calc(180.3 * var(--u));height:calc(163.7 * var(--u))}

  /* Блок «как это работает» целиком увеличен в --k раз относительно точки (--ox, --oy) макета
     и поднят на --shift вслед за укоротившимся текстом «о списке». */
  .rules{--k:1.5;--ox:720;--oy:2772;--shift:-162;position:absolute;width:100%;left:calc(var(--ox) * (1 - var(--k)) * var(--u));top:calc((var(--oy) * (1 - var(--k)) + var(--shift)) * var(--u))}
  .rules>*{--u:calc(100cqw / 1440 * var(--k))}
  .rules-bike{width:calc(306 * var(--u));height:calc(153 * var(--u))}
  .rules-hint{text-align:left;white-space:nowrap}
  .rules-hint span{font-size:max(calc(6.5 * var(--u)),7px)}
  .rules-hint b{font-size:max(calc(10 * var(--u)),8.5px)}
  .rules-canal{width:calc(306 * var(--u));height:calc(306 * var(--u))}
  .notes{display:block;max-width:none;text-align:left}
  .notes li{display:contents}
  .note{font-size:max(calc(8 * var(--u)),7px);line-height:1.375;white-space:pre}
  .rules-help{max-width:none;font-size:max(calc(10 * var(--u)),8.5px);line-height:1;letter-spacing:.06em;white-space:pre;transform:translateX(-50%)}

  .gift-list{display:block;margin:0}
  .gift{display:contents}
  /* Текст карточки ставится от фото с одинаковым отступом --gap. --lead — расстояние от верха строки
     заголовка до верха строчных букв: по фото выравниваются сами буквы, а не строка. */
  .gift{--gap:20;--lead:8.7}
  .gift-num{position:absolute;left:calc((var(--ix) + var(--is) / 2) * var(--u));top:calc((var(--iy) + var(--dy) - 22) * var(--u));margin:0;font-size:calc(13 * var(--u));transform:translateX(-50%)}
  .gift-photo{position:absolute;left:calc(var(--ix) * var(--u));top:calc((var(--iy) + var(--dy)) * var(--u));width:calc(var(--is) * var(--u));height:calc(var(--is) * var(--u));padding:calc(var(--is) * .025 * var(--u))}
  .gift-info{position:absolute;width:calc(var(--tw) * var(--u));margin:0;align-items:flex-start;text-align:left}
  .gift-info h3{font-size:calc(17 * var(--u))}
  .gift-desc{width:calc(var(--dw) * var(--u));margin-top:calc(4 * var(--u));font-size:max(calc(11 * var(--u)),9.5px);white-space:pre-line}
  /* кнопка и строка с ценой — ровно в ширину фото */
  .gift-meta{width:calc(var(--is) * var(--u));margin-top:calc(11 * var(--u));font-size:max(calc(13 * var(--u)),11px)}
  .reserve{width:calc(var(--is) * var(--u));margin-top:calc(11 * var(--u));padding:calc(8 * var(--u));font-size:max(calc(11 * var(--u)),9.5px)}
  .gift--right .gift-info{left:calc((var(--ix) + var(--is) + var(--gap)) * var(--u))}
  .gift--left .gift-info{left:calc((var(--ix) - var(--gap) - var(--tw)) * var(--u))}
  .gift--top .gift-info{top:calc((var(--iy) + var(--dy) - var(--lead)) * var(--u))}
  .gift--bottom .gift-info{top:calc((var(--iy) + var(--dy) + var(--is)) * var(--u));transform:translateY(-100%)}
  .gift--below .gift-info{top:calc((var(--iy) + var(--dy) + var(--is) + var(--gap) - var(--lead)) * var(--u))}
  .gift--center .gift-info{left:calc((var(--ix) + (var(--is) - var(--tw)) / 2) * var(--u));align-items:center;text-align:center}
  .gift--end .gift-info{left:calc((var(--ix) + var(--is) - var(--tw)) * var(--u))}
  .gift--left .gift-info,.gift--end .gift-info{align-items:flex-end;text-align:right}

  .fallback-text{width:calc(978 * var(--u));font-size:calc(18 * var(--u));white-space:pre;transform:translateX(-50%)}
  .fallback-dog{width:calc(158 * var(--u));height:calc(152 * var(--u))}

  .contacts-note{font-size:calc(14 * var(--u))}
  .contact-boxes{display:block;margin:0}
  .box{display:block;width:calc(398 * var(--u));height:calc(380 * var(--u));padding:0}
  .box-title{font-size:calc(14 * var(--u))}
  .pickup-label{font-size:calc(12 * var(--u))}
  .pickup-address{width:calc(345 * var(--u));font-size:calc(18 * var(--u))}
  .dots{width:calc(348 * var(--u))}
  .pickup-note{width:calc(308 * var(--u));font-size:calc(12 * var(--u))}
  .bank-card{width:calc(347 * var(--u));max-width:none}
  .box-button{padding:calc(10 * var(--u)) calc(8 * var(--u));font-size:max(calc(10 * var(--u)),8.5px)}
  .bank-copy{width:calc(347 * var(--u));max-width:none}
  .tg-handle{font-size:calc(30 * var(--u));white-space:nowrap}
  .tg-channel{font-size:calc(24 * var(--u));white-space:nowrap}
  .tg-about{width:calc(308 * var(--u));font-size:calc(14 * var(--u));line-height:1.357;white-space:pre-line}
  .tg-buttons{display:block;margin:0}
  .tg-button{width:calc(155 * var(--u))}
  .site-footer{display:block;margin:0}
}