/* 7K · 7k060.buzz · шаблон "stamp" — филателия и почта. namespace .stm */

:root{
  --stmCream:#f5f0e6;
  --stmPaper:#fffdf7;
  --stmInk:#201c17;
  --stmBlue:#26408b;
  --stmWax:#c9184a;
  --stmMute:#6b6154;
  --stmLine:#ddd2bd;
  --stmPerfStep:18px;
  --stmPerfR:9px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--stmCream);
  color:var(--stmInk);
  font-family:"Scada","Trebuchet MS",Arial,sans-serif;
  font-size:17px;
  line-height:1.66;
  overflow-x:hidden;
}
h1,h2,h3{font-family:"Yeseva One",Georgia,"Times New Roman",serif;font-weight:400;line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1.05em}
a{color:var(--stmBlue)}
img,svg{max-width:100%}

.stmSkip{position:absolute;left:-9999px;top:0;background:var(--stmBlue);color:#fff;padding:10px 16px;z-index:50}
.stmSkip:focus{left:8px;top:8px}

/* ── шапка: почтовая лента ───────────────────────────── */
.stmTop{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px clamp(12px,3vw,34px);
  background:var(--stmPaper);
  border-bottom:2px solid var(--stmBlue);
  box-shadow:0 1px 0 var(--stmLine);
  position:sticky;top:0;z-index:30;
}
.stmLogo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--stmInk)}
.stmLogoText{font-family:"Yeseva One",Georgia,serif;font-size:22px;line-height:1;display:flex;flex-direction:column;gap:3px}
.stmLogoText small{font-family:"Scada",Arial,sans-serif;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--stmMute)}
.stmNav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.stmNav a{
  text-decoration:none;color:var(--stmBlue);font-size:13.5px;letter-spacing:.04em;
  padding:5px 9px;border:1px dashed var(--stmLine);border-radius:2px;
}
.stmNav a:hover{border-color:var(--stmBlue);background:#eef1fa}

.stmBtn{
  display:inline-block;text-decoration:none;text-align:center;
  background:var(--stmWax);color:#fffdf7;
  font-size:15px;letter-spacing:.03em;
  padding:12px 22px;border-radius:2px;
  border:1px solid #a4143c;
  box-shadow:2px 2px 0 rgba(32,28,23,.22);
}
.stmBtn:hover{background:#ad1440}
.stmBtnTop{padding:9px 16px;font-size:14px}
.stmBtnGhost{background:transparent;color:var(--stmBlue);border:2px solid var(--stmBlue);box-shadow:none}
.stmBtnGhost:hover{background:#e9edf8;color:var(--stmBlue)}

/* ── лист-марка ──────────────────────────────────────── */
main{display:block;padding:clamp(18px,3vw,38px) clamp(10px,3vw,34px) 10px;max-width:1180px;margin:0 auto}
.stmSection,.stmHero{margin:0 0 clamp(26px,4vw,48px)}

.stmSheet{
  position:relative;
  background:var(--stmPaper);
  filter:drop-shadow(3px 4px 0 rgba(38,64,139,.10));
}
.stmSheet::before,.stmSheet::after{
  content:"";position:absolute;left:0;right:0;height:var(--stmPerfStep);pointer-events:none;z-index:2;
  background:radial-gradient(circle var(--stmPerfR) at var(--stmPerfR) var(--stmPerfR),var(--stmCream) 88%,transparent 89%) 0 0/var(--stmPerfStep) var(--stmPerfStep) repeat-x;
}
.stmSheet::before{top:calc(var(--stmPerfR) * -1)}
.stmSheet::after{bottom:calc(var(--stmPerfR) * -1)}

.stmPerf{position:relative;padding:clamp(26px,3.4vw,44px) clamp(18px,3vw,42px)}
.stmPerf::before,.stmPerf::after{
  content:"";position:absolute;top:0;bottom:0;width:var(--stmPerfStep);pointer-events:none;z-index:2;
  background:radial-gradient(circle var(--stmPerfR) at var(--stmPerfR) var(--stmPerfR),var(--stmCream) 88%,transparent 89%) 0 0/var(--stmPerfStep) var(--stmPerfStep) repeat-y;
}
.stmPerf::before{left:calc(var(--stmPerfR) * -1)}
.stmPerf::after{right:calc(var(--stmPerfR) * -1)}

/* рамка внутри марки */
.stmPerf>*{position:relative;z-index:3}

/* шапка марки: номинал слева, штемпель справа */
.stmMarkHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:10px}
.stmDenom{
  font-family:"Yeseva One",Georgia,serif;
  font-size:clamp(28px,5vw,46px);line-height:1;color:var(--stmWax);
  border-bottom:3px double var(--stmWax);padding-bottom:6px;
}
.stmPostmark{flex:none;opacity:.85;transform:rotate(-7deg)}

.stmSlug{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stmMute);margin-bottom:12px}
.stmH1{font-size:clamp(27px,4.3vw,47px);margin-bottom:16px}
.stmLead{font-size:clamp(16px,1.6vw,19px);max-width:62ch}
.stmSection h2{font-size:clamp(23px,3.1vw,34px);margin-bottom:14px;padding-bottom:10px;border-bottom:1px dashed var(--stmLine)}
.stmSection h3{font-size:clamp(17px,2vw,21px);color:var(--stmBlue);margin-top:1.3em}

.stmActions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 26px}

.stmTicker{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;margin:0;background:var(--stmLine);border:1px solid var(--stmLine)}
.stmTicker>div{background:var(--stmPaper);padding:12px 14px}
.stmTicker dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stmMute)}
.stmTicker dd{margin:4px 0 0;font-family:"Yeseva One",Georgia,serif;font-size:19px;color:var(--stmBlue)}

/* ── ступени пакета ──────────────────────────────────── */
.stmGrid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:18px 0 6px}
.stmStep{border:1px solid var(--stmLine);border-top:4px solid var(--stmBlue);padding:16px 16px 4px;background:#fffef9}
.stmStepNum{font-family:"Yeseva One",Georgia,serif;font-size:26px;color:var(--stmWax);display:block;line-height:1}
.stmStep h3{font-size:16.5px;margin:6px 0 8px;color:var(--stmInk)}
.stmStep p{font-size:14.5px;line-height:1.55;color:#4a4238}

/* ── кляссер 3×4 ─────────────────────────────────────── */
.stmAlbumGrid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 8px;
  padding:14px;background:#efe7d6;border:1px solid var(--stmLine);
}
.stmMini{
  background:var(--stmPaper);border:1px dashed var(--stmBlue);
  padding:12px 12px 10px;position:relative;min-height:112px;
}
.stmMiniNum{font-family:"Yeseva One",Georgia,serif;font-size:21px;color:var(--stmWax);line-height:1}
.stmMini h3{font-size:15px;margin:6px 0 5px;color:var(--stmInk)}
.stmMini p{font-size:12.5px;margin:0;color:var(--stmMute);line-height:1.45}

/* ── VIP: 6 марок возрастающего номинала ─────────────── */
.stmVip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:20px 0 8px;align-items:end}
.stmVipMark{
  background:var(--stmPaper);border:2px solid var(--stmBlue);
  padding:14px 12px 10px;position:relative;
}
.stmVipMark:nth-child(1){border-color:#b9c2dc}
.stmVipMark:nth-child(2){border-color:#93a1c9}
.stmVipMark:nth-child(3){border-color:#6d80b7}
.stmVipMark:nth-child(4){border-color:#4b62a2}
.stmVipMark:nth-child(5){border-color:var(--stmBlue)}
.stmVipMark:nth-child(6){border-color:var(--stmWax)}
.stmVipDenom{display:block;font-family:"Yeseva One",Georgia,serif;line-height:1;color:var(--stmWax)}
.stmVipMark:nth-child(1) .stmVipDenom{font-size:22px}
.stmVipMark:nth-child(2) .stmVipDenom{font-size:25px}
.stmVipMark:nth-child(3) .stmVipDenom{font-size:28px}
.stmVipMark:nth-child(4) .stmVipDenom{font-size:31px}
.stmVipMark:nth-child(5) .stmVipDenom{font-size:34px}
.stmVipMark:nth-child(6) .stmVipDenom{font-size:38px}
.stmVipMark h3{font-size:15.5px;margin:8px 0 6px;color:var(--stmBlue)}
.stmVipMark p{font-size:12.5px;line-height:1.45;margin:0;color:#4a4238}

/* ── касса: бланк перевода ───────────────────────────── */
.stmForm{margin:18px 0 8px;border:1px solid var(--stmBlue);padding:16px clamp(12px,2vw,20px);background:#fffef9}
.stmFormRow{display:grid;grid-template-columns:1.1fr 1.3fr 1.6fr;gap:10px 18px;padding:10px 0;align-items:baseline}
.stmFormRow+.stmFormRow{border-top:1px dotted var(--stmLine)}
.stmFormLabel{font-family:"Yeseva One",Georgia,serif;font-size:16px;color:var(--stmBlue)}
.stmFormVal{font-size:14.5px;color:#403931;border-bottom:1px dashed #b7ab94;padding-bottom:3px}

/* ── live ────────────────────────────────────────────── */
.stmLiveGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:18px 0 8px}
.stmLiveCard{border:1px solid var(--stmLine);border-left:5px solid var(--stmWax);padding:14px 16px 4px;background:#fffef9}
.stmLiveCard h3{margin:0 0 8px;font-size:17px}
.stmLiveCard p{font-size:14.5px;line-height:1.55;color:#4a4238}

/* ── доверие ─────────────────────────────────────────── */
.stmFacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--stmLine);border:1px solid var(--stmLine);margin:18px 0 6px}
.stmFact{background:var(--stmPaper);padding:12px 14px}
.stmFact span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--stmMute)}
.stmFact p{margin:4px 0 0;font-size:15px;color:var(--stmBlue)}

/* ── письма ──────────────────────────────────────────── */
.stmLetters{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;margin:18px 0 6px}
.stmLetter{
  background:#fffef9;border:1px solid var(--stmLine);padding:16px 16px 12px;
  background-image:repeating-linear-gradient(45deg,#c9184a 0 9px,transparent 9px 18px,#26408b 18px 27px,transparent 27px 36px);
  background-size:100% 6px;background-repeat:no-repeat;background-position:0 0;
}
.stmLetter p{font-size:14.8px;line-height:1.6;margin:10px 0 12px;color:#403931}
.stmLetter footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px dotted var(--stmLine);padding-top:8px}
.stmLetterName{font-family:"Yeseva One",Georgia,serif;font-size:17px;color:var(--stmBlue)}
.stmLetterMeta{font-size:12.5px;color:var(--stmMute);letter-spacing:.06em}

/* ── FAQ ─────────────────────────────────────────────── */
.stmFaqList{margin-top:16px}
.stmFaqList details{border:1px solid var(--stmLine);background:#fffef9;margin-bottom:8px}
.stmFaqList summary{
  cursor:pointer;list-style:none;padding:13px 16px;
  font-family:"Yeseva One",Georgia,serif;font-size:16.5px;color:var(--stmBlue);
  display:flex;justify-content:space-between;gap:12px;align-items:center;
}
.stmFaqList summary::-webkit-details-marker{display:none}
.stmFaqList summary::after{content:"✳";color:var(--stmWax);font-size:15px;flex:none}
.stmFaqList details[open] summary{border-bottom:1px dashed var(--stmLine)}
.stmFaqList details[open] summary::after{content:"✦"}
.stmFaqList p{margin:0;padding:12px 16px 14px;font-size:15px;color:#403931}

/* ── заметка ─────────────────────────────────────────── */
.stmNoteSection .stmSheet{background:#f8f2e4}
.stmNoteSection .stmPerf::before,.stmNoteSection .stmPerf::after,
.stmNoteSection .stmSheet::before,.stmNoteSection .stmSheet::after{--stmCream:#f5f0e6}
.stmNoteHead{font-family:"Yeseva One",Georgia,serif;font-size:21px;color:var(--stmBlue);margin-bottom:12px;letter-spacing:.01em}
.stmNoteSection p{font-size:14.8px;line-height:1.62;color:#453d33}
.stmAge{border-left:4px solid var(--stmWax);padding-left:14px}

/* ── подвал ──────────────────────────────────────────── */
.stmFoot{background:var(--stmPaper);border-top:2px dashed var(--stmBlue);margin-top:26px}
.stmFootInner{max-width:1180px;margin:0 auto;padding:26px clamp(14px,3vw,34px) 34px;display:grid;grid-template-columns:1fr 2fr 1fr;gap:22px;align-items:start}
.stmFootBrand{display:flex;align-items:center;gap:10px}
.stmFootBrand p{margin:0;font-family:"Yeseva One",Georgia,serif;font-size:15px;line-height:1.35}
.stmFootLegal{font-size:13.5px;color:var(--stmMute);margin:0}
.stmFootActions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.stmFootLink{font-size:13.5px;color:var(--stmBlue)}

/* ── адаптив ─────────────────────────────────────────── */
@media (max-width:900px){
  .stmVip{grid-template-columns:repeat(3,1fr)}
  .stmFormRow{grid-template-columns:1fr 1fr}
  .stmFormLabel{grid-column:1 / -1}
  .stmFootInner{grid-template-columns:1fr;gap:16px}
}
@media (max-width:680px){
  body{font-size:16px}
  .stmTop{padding:10px 12px;gap:10px}
  .stmNav{display:none}
  .stmBtnTop{margin-left:auto}
  .stmLogoText{font-size:19px}
  main{padding:14px 12px 6px}
  .stmAlbumGrid{grid-template-columns:repeat(2,1fr);padding:10px;gap:9px}
  .stmVip{grid-template-columns:repeat(2,1fr)}
  .stmFormRow{grid-template-columns:1fr}
  .stmPostmark{width:62px;height:62px}
  .stmActions .stmBtn{flex:1 1 100%}
  :root{--stmPerfStep:14px;--stmPerfR:7px}
}
@media (max-width:420px){
  .stmAlbumGrid{grid-template-columns:1fr}
  .stmMini{min-height:0}
  .stmDenom{font-size:26px}
}