/* suitup-vpn.com — палитра и шрифты приложения SuitUp (Fabric.swift, Lettering), 26.10.2026 */
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/PlayfairDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: italic; font-display: swap; src: url("/assets/fonts/PlayfairDisplay-MediumItalic.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/PlayfairDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("/assets/fonts/Manrope-Regular.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("/assets/fonts/Manrope-Medium.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("/assets/fonts/Manrope-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("/assets/fonts/Manrope-Bold.woff2") format("woff2"); }

:root {
  --onyx: #030303; --ink: #0A0A0B; --charcoal: #131314; --felt: #1E1E20;
  --ivory: #F3EEE4; --linen: #EFEAE0; --sand: #A8A296; --ash: #8F8A81;
  --gold: #E2B259; --champagne: #F0CD85; --brass: #D4B27A; --saffron: #D4A04A; --garnet: #E07A6C;
  --serif: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Manrope", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --foil: linear-gradient(115deg, #B8893A 0%, #F0CD85 28%, #E2B259 46%, #9E7430 64%, #F0CD85 86%, #C99A48 100%);
  --wrap: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--onyx); color: var(--linen); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--champagne); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
em { font-style: italic; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ivory); margin: 0; letter-spacing: -0.01em; }
h1 em, h2 em { color: var(--gold); }
.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 10px; left: 10px; z-index: 50; background: var(--ivory); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.eyebrow { font: 600 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; }

/* шапка */
.top { position: sticky; top: 0; z-index: 20; background: rgba(3,3,3,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(239,234,224,.07); }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ivory); font: 600 24px/1 var(--serif); }
.mark img { width: 32px; height: 32px; border-radius: 8px; }
.mark em, .foot-word em { font-style: normal; color: var(--gold); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { color: var(--sand); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.nav a:hover, .nav a[aria-current] { color: var(--ivory); }

/* кнопка магазина (без логотипа Apple — на самодельной кнопке он запрещён) */
.store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 168px; padding: 10px 22px 11px; border-radius: 14px; background: var(--ivory); color: var(--ink); text-decoration: none; line-height: 1.1; border: 1px solid var(--ivory); transition: transform .2s, background .2s; }
.store:hover { color: var(--ink); background: var(--champagne); transform: translateY(-1px); }
.store-small { font: 500 11px/1.2 var(--sans); letter-spacing: .04em; }
.store-big { font: 600 20px/1.15 var(--serif); }
.store-soon { background: transparent; color: var(--linen); border-color: rgba(226,178,89,.55); cursor: default; }
.store-soon .store-small { color: var(--gold); }
.store-compact { min-width: 0; padding: 7px 16px 8px; border-radius: 11px; }
.store-compact .store-small { font-size: 9.5px; }
.store-compact .store-big { font-size: 15px; }
.top .store-compact { margin-left: 4px; }
.text-link { color: var(--linen); font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(226,178,89,.6); padding-bottom: 3px; }
.text-link:hover { color: var(--gold); }

/* первый экран: смокинг приложения */
.hero { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; min-height: calc(100vh - 66px); min-height: calc(100svh - 66px); }
.hero h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.02em; }
.lede { font-size: 19px; color: var(--sand); max-width: 30em; margin: 26px 0 34px; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.dress { margin: 0; justify-self: center; width: 100%; max-width: 470px; }
.dress-board { position: relative; aspect-ratio: 393 / 404; }
.tux { position: absolute; inset: 0; width: 100%; height: 100%; }
.tux-gilded { opacity: 0; transition: opacity .7s ease; }
.dress-board::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(to top, var(--onyx), rgba(3,3,3,0)); pointer-events: none; }
.halo { position: absolute; left: 29%; top: 6.9%; width: 40.7%; height: 19.8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,205,133,.55), rgba(226,178,89,.18) 55%, rgba(226,178,89,0)); filter: blur(10px); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.stud { position: absolute; left: 49.6%; width: 2.6%; aspect-ratio: 1; margin: -1.3% 0 0 -1.3%; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px 3px rgba(226,178,89,.85), 0 0 22px 6px rgba(226,178,89,.35); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.stud-1 { top: 32.1%; } .stud-2 { top: 50.1%; } .stud-3 { top: 68.7%; }
.bow { position: absolute; left: 32.6%; top: 6.7%; width: 33.6%; height: 19.8%; border: 0; padding: 0; background: transparent; border-radius: 40%; cursor: pointer; }
.bow:focus-visible { outline-offset: -2px; }
.bow::after { content: ""; position: absolute; inset: -6px; border-radius: 44%; border: 1px dashed rgba(226,178,89,.0); transition: border-color .3s; }
.dress[data-look="bare"] .bow::after { animation: beckon 2.8s ease-in-out 1.2s infinite; }
@keyframes beckon { 0%, 100% { border-color: rgba(226,178,89,0); } 50% { border-color: rgba(226,178,89,.55); } }
.dress[data-lit="1"] .stud-3, .dress[data-lit="2"] .stud-3, .dress[data-lit="3"] .stud-3,
.dress[data-lit="2"] .stud-2, .dress[data-lit="3"] .stud-2,
.dress[data-lit="3"] .stud-1 { opacity: 1; }
.dress[data-look="buttoning"] .halo { opacity: .35; }
.dress[data-look="dressed"] .halo { opacity: 1; }
.dress[data-look="dressed"] .tux-gilded { opacity: 1; }

.placard { position: relative; margin-top: -4%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 16px; background: rgba(255,255,255,.04); font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--ash); transition: color .4s, background .4s; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: box-shadow .4s; }
.headline { margin-top: 14px; font: 500 38px/1.1 var(--serif); color: var(--ivory); font-variant-numeric: tabular-nums; }
.caption { margin-top: 14px; font-size: 13px; color: var(--ash); }
.dress[data-look="buttoning"] .pill { color: var(--brass); background: rgba(226,178,89,.05); }
.dress[data-look="dressed"] .pill { color: var(--gold); background: rgba(226,178,89,.1); }
.dress[data-look="dressed"] .dot { box-shadow: 0 0 4px 1px rgba(226,178,89,.9); }

/* приглашение */
.invite { padding: 80px 24px 110px; background: radial-gradient(ellipse at 50% 40%, var(--charcoal), var(--onyx) 70%); }
.card { position: relative; max-width: 680px; margin: 0 auto; padding: 64px 56px 56px; text-align: center; color: #1B1A18; border-radius: 4px;
  background: repeating-linear-gradient(93deg, rgba(0,0,0,.012) 0 2px, rgba(255,255,255,.02) 2px 5px), linear-gradient(160deg, #F7F3EA, var(--ivory) 55%, #E9E2D3);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 2px 0 rgba(255,255,255,.4) inset; }
.card::before { content: ""; position: absolute; inset: 14px; border: 2px solid transparent; border-radius: 2px; background: var(--foil) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.card::after { content: ""; position: absolute; inset: 21px; border: 1px solid rgba(158,116,48,.45); pointer-events: none; }
.card-corner { position: absolute; width: 22px; height: 22px; background: var(--foil); -webkit-mask: radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px 11.5px, transparent 12px); mask: radial-gradient(circle at 100% 100%, transparent 10px, #000 10.5px 11.5px, transparent 12px); }
.card-corner.tl { top: 26px; left: 26px; }
.card-corner.tr { top: 26px; right: 26px; transform: scaleX(-1); }
.card-corner.bl { bottom: 26px; left: 26px; transform: scaleY(-1); }
.card-corner.br { bottom: 26px; right: 26px; transform: scale(-1); }
.card-kicker { margin: 0 0 22px; font: 600 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #8A6A2E; }
.card h2 { color: #141311; font-size: clamp(28px, 4vw, 42px); line-height: 1.18; }
.card h2 em { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc { font-variant: small-caps; letter-spacing: .06em; }
.card-where { font: italic 500 18px/1.5 var(--serif); color: #4A4740; margin: 22px 0 30px; }
.card-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 34px; border-top: 1px solid rgba(20,19,17,.15); border-bottom: 1px solid rgba(20,19,17,.15); }
.card-terms div { padding: 16px 10px; }
.card-terms div + div { border-left: 1px solid rgba(20,19,17,.15); }
.card-terms dt { font: 600 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #8A6A2E; margin-bottom: 8px; }
.card-terms dd { margin: 0; font: 500 16px/1.3 var(--serif); color: #1B1A18; }
.card-rsvp { font: italic 500 15px/1 var(--serif); letter-spacing: .2em; color: #4A4740; margin: 0 0 14px; }
.card .store { background: #141311; color: var(--ivory); border-color: #141311; }
.card .store:hover { background: #2A2824; }
.card .store-soon { background: transparent; color: #1B1A18; border-color: rgba(138,106,46,.6); }
.card .store-soon .store-small { color: #8A6A2E; }

/* разделы */
.sec-head { max-width: 700px; margin: 0 auto 56px; text-align: center; }
.sec-head h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; }
.sec-sub { color: var(--ash); margin: 16px 0 0; }
.fitting { max-width: var(--wrap); margin: 0 auto; padding: 110px 24px 90px; }
.fits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fit { position: relative; padding: 34px 30px 36px; background: linear-gradient(180deg, var(--charcoal), var(--ink)); border: 1px solid rgba(239,234,224,.06); border-radius: 22px; overflow: hidden; }
.fit img, .fit-bow { width: 132px; height: 132px; margin: 0 0 22px -6px; }
.fit img { mix-blend-mode: lighten; border-radius: 50%; }
.fit-bow { display: block; background: url("/assets/img/bowtie.webp") center / 100% auto no-repeat; filter: drop-shadow(0 6px 22px rgba(226,178,89,.35)); }
.fit-no { position: absolute; top: 26px; right: 30px; font: italic 500 22px/1 var(--serif); color: rgba(226,178,89,.55); }
.fit h3 { font-size: 26px; margin-bottom: 12px; }
.fit p { margin: 0; color: var(--sand); font-size: 16px; }
.fit-extra { text-align: center; color: var(--sand); margin: 40px 0 0; font-size: 16px; }
.fit-extra span { font: italic 500 17px var(--serif); color: var(--gold); margin-right: 6px; }
.fit-extra strong { color: var(--ivory); font-weight: 600; }

/* у входа: гардеробные номерки */
.door { padding: 100px 24px 110px; background: linear-gradient(180deg, var(--onyx), var(--ink) 30%, var(--ink) 70%, var(--onyx)); }
.tickets { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.ticket { position: relative; padding: 30px 26px 26px 26px; color: #1B1A18; border-radius: 4px;
  background: radial-gradient(circle at 0 50%, var(--ink) 9px, transparent 9.5px), radial-gradient(circle at 100% 50%, var(--ink) 9px, transparent 9.5px), linear-gradient(170deg, #F7F3EA, var(--ivory) 55%, #E9E2D3);
  box-shadow: 0 22px 30px -18px rgba(0,0,0,.95); transition: transform .3s; }
.ticket::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(158,116,48,.4); border-radius: 2px; pointer-events: none; }
.ticket:hover { transform: translateY(-4px) rotate(-.4deg); }
.ticket-no { display: inline-block; font: italic 500 15px/1 var(--serif); color: #8A6A2E; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px dashed rgba(138,106,46,.5); font-variant-numeric: lining-nums; }
.ticket h3 { color: #141311; font-size: 22px; line-height: 1.2; margin-bottom: 10px; }
.ticket p { margin: 0; font-size: 15.5px; color: #3A3731; }
.ticket a { color: #7A5A1E; }

/* сдержанность */
.discretion { padding: 110px 24px; }
.disc-in { max-width: 980px; margin: 0 auto; }
.disc-in h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; margin-bottom: 50px; }
.disc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-top: 34px; border-top: 1px solid rgba(226,178,89,.25); }
.disc-cols h3 { font-size: 22px; margin-bottom: 16px; }
.ticks, .dashes { list-style: none; margin: 0; padding: 0; }
.ticks li, .dashes li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px solid rgba(239,234,224,.06); color: var(--sand); }
.ticks li { text-decoration: line-through; text-decoration-color: rgba(226,178,89,.7); text-decoration-thickness: 1px; }
.ticks li::before { content: "\2715"; position: absolute; left: 2px; top: 9px; color: var(--gold); font-size: 13px; }
.dashes li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 14px; height: 1px; background: var(--gold); }
.disc-foot { margin: 34px 0 0; color: var(--ash); font-size: 15px; }

/* юр-страницы: лист плотной бумаги */
.paper { position: relative; max-width: 820px; margin: 56px auto 100px; padding: 70px 72px 64px; color: #23211D; font-size: 16.5px; line-height: 1.7; border-radius: 4px;
  background: repeating-linear-gradient(93deg, rgba(0,0,0,.012) 0 2px, rgba(255,255,255,.02) 2px 5px), linear-gradient(170deg, #F7F3EA, var(--ivory) 50%, #ECE5D6);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.95); }
.paper::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(158,116,48,.45); pointer-events: none; }
.paper a { color: #7A5A1E; }
.paper a:hover { color: #4A3610; }
.paper .eyebrow { color: #8A6A2E; }
.paper h1 { color: #141311; font-size: clamp(36px, 5vw, 54px); line-height: 1.05; }
.paper-head { text-align: center; padding-bottom: 30px; margin-bottom: 34px; border-bottom: 1px solid rgba(20,19,17,.14); }
.paper-date { margin: 14px 0 0; font: italic 500 16px/1.4 var(--serif); color: #5E5A51; }
.paper-lead { font-size: 17.5px; }
.paper h2 { color: #141311; font-size: 24px; margin: 40px 0 12px; display: flex; align-items: baseline; gap: 14px; }
.paper h2 span { flex: none; min-width: 32px; font-variant-numeric: lining-nums; font: italic 500 20px/1 var(--serif); color: #8A6A2E; }
.paper p { margin: 0 0 14px; }
.paper strong { color: #141311; }
.paper .dashes li { color: #33302A; border-bottom-color: rgba(20,19,17,.08); }
.paper .dashes li::before { background: #8A6A2E; }
.ledger { margin: 0; }
.ledger div { display: grid; grid-template-columns: 190px 1fr; gap: 22px; padding: 16px 0; border-bottom: 1px solid rgba(20,19,17,.1); }
.ledger dt { font: 500 18px/1.35 var(--serif); color: #141311; }
.ledger dd { margin: 0; }
.paper-addr { font-style: normal; padding: 18px 22px; border-left: 2px solid #B8893A; background: rgba(184,137,58,.07); margin-bottom: 14px; }

/* 404 */
.lost { max-width: 760px; margin: 0 auto; padding: 140px 24px 160px; text-align: center; }
.lost h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.05; margin-bottom: 20px; }
.lost p { color: var(--sand); margin: 0 0 30px; }

/* подвал */
.foot { position: relative; margin-top: 40px; background: var(--ink); border-top: 1px solid rgba(239,234,224,.06); overflow: hidden; }
.foot-sky { position: absolute; right: 0; bottom: 0; width: min(760px, 90%); height: auto; opacity: .9; pointer-events: none; }
.foot-in { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 60px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.foot-word { font: 600 30px/1 var(--serif); color: var(--ivory); }
.foot-brand p { color: var(--sand); margin: 14px 0 0; font-size: 15px; }
.foot-brand strong { color: var(--linen); font-weight: 600; }
.foot-nav { display: flex; flex-direction: column; gap: 10px; }
.foot-h { font: italic 500 17px/1 var(--serif); color: var(--gold); margin-bottom: 6px; }
.foot-nav a { color: var(--sand); text-decoration: none; font-size: 15px; }
.foot-nav a:hover, .foot-nav a[aria-current] { color: var(--ivory); }
.foot-legal { grid-column: 1 / -1; margin: 20px 0 0; padding-top: 22px; border-top: 1px solid rgba(239,234,224,.06); color: var(--ash); font-size: 13px; }

/* ширины */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; gap: 30px; text-align: center; }
  .lede { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .fits { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .tickets { grid-template-columns: 1fr 1fr; max-width: 640px; }
}
@media (max-width: 760px) {
  .nav a:not([href="/support"]) { display: none; }
  .top-in { gap: 16px; padding: 12px 18px; }
  .card { padding: 54px 30px 46px; }
  .card-terms { grid-template-columns: 1fr; }
  .card-terms div + div { border-left: 0; border-top: 1px solid rgba(20,19,17,.15); }
  .disc-cols { grid-template-columns: 1fr; }
  .tickets { grid-template-columns: 1fr; max-width: 440px; }
  .paper { margin: 24px 12px 70px; padding: 48px 26px 40px; }
  .ledger div { grid-template-columns: 1fr; gap: 6px; }
  .foot-in { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .top .store-compact { display: none; }
  .headline { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}