/* ============================================================
   MILENS. Общая тема всех страниц.
   Эстетика: рассекреченное архивное досье.
   Нативный CSS, без фреймворков и без библиотек.
   Иконок нет намеренно: в бумажном документе их роль играют
   штемпели, машинописные символы и графитные пометки.
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  --paper:#ded4bf;
  --paper-hi:#e8e0ce;
  --paper-lo:#cec2a8;
  --ink:#221d16;
  --ink-80:rgba(34,29,22,.80);
  --ink-72:rgba(34,29,22,.74);    /* минимум для мелких прописных */
  --ink-62:rgba(34,29,22,.62);
  --ink-38:rgba(34,29,22,.38);    /* только линии и рамки, не текст */
  --ink-18:rgba(34,29,22,.18);
  --line-ctl:rgba(34,29,22,.55);  /* границы кнопок и полей, 3.4:1 */
  --ink-09:rgba(34,29,22,.09);
  --bar:#191512;                  /* закрашивание */
  --bar-sheen:rgba(255,255,255,.06);
  --stamp:#9d3226;                /* единственный акцент на всём сайте */
  --stamp-wash:rgba(157,50,38,.10);
  --grain-blend:multiply;
  --grain-op:.17;
  --photo:grayscale(1) contrast(1.32) brightness(1) sepia(.24);
  --shadow:0 1px 0 rgba(255,255,255,.35), 0 18px 44px rgba(34,29,22,.13);

  /* один радиус на весь сайт: бумага не скругляется */
  --r:2px;
  --wrap:1180px;
  --gut:clamp(18px, 4.5vw, 44px);
  --sect:clamp(64px, 9vh, 116px);
  --ease:cubic-bezier(.16,1,.3,1);

  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --distress:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' seed='11'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23d)'/%3E%3C/svg%3E");
}

/* Тёмный режим держит ту же метафору: тот же документ, снятый на микрофильм.
   Бумага уходит в негатив, закрашивание становится костяным, штамп остаётся красным. */
[data-theme="film"]{
  --paper:#15130f;
  --paper-hi:#1d1a14;
  --paper-lo:#0e0c09;
  --ink:#ddd3b9;
  --ink-80:rgba(221,211,185,.80);
  --ink-72:rgba(221,211,185,.72);
  --ink-62:rgba(221,211,185,.60);
  --ink-38:rgba(221,211,185,.36);
  --ink-18:rgba(221,211,185,.17);
  --line-ctl:rgba(221,211,185,.52);
  --ink-09:rgba(221,211,185,.08);
  --bar:#e6dcc3;
  --bar-sheen:rgba(0,0,0,.10);
  --stamp:#d9614e;              /* ярче, чтобы мелкий текст проходил по контрасту */
  --stamp-wash:rgba(217,97,78,.13);
  --grain-blend:screen;
  --grain-op:.09;
  --photo:grayscale(1) contrast(1.25) brightness(.68) sepia(.12);
  --shadow:0 1px 0 rgba(255,255,255,.05), 0 18px 44px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size:clamp(14px,.5vw + 12.6px,15.5px);
  line-height:1.62;
  overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
}

img{max-width:100%; display:block}
button{font:inherit; color:inherit}
a{color:inherit}

:focus-visible{outline:2px solid var(--stamp); outline-offset:3px}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; text-decoration:none;
}
.skip:focus{left:8px; top:8px}

/* ---------- 2. МАТЕРИАЛ БУМАГИ ---------- */
.grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background-image:var(--noise);
  background-size:220px 220px;
  opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);
}
.vignette{
  position:fixed; inset:0; z-index:89; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%, transparent 52%, var(--paper-lo) 100%);
  opacity:.55;
}
/* дырокол по левому краю подшивки */
.punches{position:fixed; left:20px; top:0; height:100%; z-index:88; pointer-events:none}
.punches i{
  position:absolute; left:0; width:15px; height:15px; border-radius:50%;
  background:var(--paper-lo);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.18);
}
.punches i:nth-child(1){top:22%}
.punches i:nth-child(2){top:50%}
.punches i:nth-child(3){top:78%}
@media (max-width:1120px){ .punches{display:none} }

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

/* поле формы слева, как на бланке. Отступ подобран так,
   чтобы линия шла правее отверстий дырокола и левее текста. */
@media (min-width:1200px){
  .sheet{position:relative}
  .sheet::before{
    content:"";
    position:absolute; left:calc(50% - var(--wrap)/2 + 26px); top:0; bottom:0;
    width:1px; background:var(--stamp); opacity:.22;
  }
}

/* Колонтитул листа. Это не надзаголовок секции, а бегущая шапка документа:
   тянется во всю ширину листа и отбита от заголовка большим отступом. */
.folio{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-72);
  display:flex; gap:14px; align-items:center;
  padding-top:14px;
  margin-bottom:clamp(26px,4.4vw,54px);
}
.folio i{flex:1; height:1px; background:var(--ink-18); font-style:normal}
.folio b{font-weight:400; color:var(--ink-72)}

.perf{
  height:1px; border:0; margin:0;
  background:repeating-linear-gradient(90deg,var(--ink-18) 0 7px,transparent 7px 15px);
}

/* ---------- 3. ТИПОГРАФИКА ---------- */
h1,h2,h3{
  font-family:Oswald, "Arial Narrow", Impact, sans-serif;
  font-weight:600; text-transform:uppercase;
  letter-spacing:.005em; margin:0;
  /* выравнивает длину строк в заголовке, чтобы последняя не была огрызком */
  text-wrap:balance;
}
h1,h2,h3{overflow-wrap:break-word}
h1{font-size:clamp(2.05rem,6.1vw,4.15rem); line-height:1.02}
h2{font-size:clamp(1.55rem,3.9vw,2.75rem); line-height:1.06}
h3{font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.15}
p{margin:0}
/* убирает висячее слово на последней строке абзаца.
   Там, где браузер этого не умеет, то же самое делает скрипт неразрывными пробелами. */
p,li,figcaption,.leg__cap{text-wrap:pretty}
/* перенос в заголовке обложки мешает на узких экранах */
@media (max-width:600px){ .brk{display:none} }
.lede{max-width:62ch; color:var(--ink-80)}
/* Каждое предложение своей строкой: перенос идёт по смыслу, а не по случайному слову. */
.lines > span{display:block}
.lines > span + span{margin-top:.1em}
/* ширину такому абзацу задаёт контейнер, а не мера в ch */
.lines{max-width:none}
.note{font-size:12.5px; line-height:1.55; color:var(--ink-80)}
.sr{
  position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.mono-lbl{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-72)}

/* графитные пометки на полях */
.pen{
  font-family:Caveat, "Segoe Script", cursive;
  font-size:clamp(20px,2.2vw,26px); line-height:1.15;
  color:var(--ink-72);
  transform:rotate(-3.2deg);
  display:inline-block;
}

/* ---------- 4. ШТЕМПЕЛИ ---------- */
.stamp{
  display:inline-block;
  font-family:Oswald, "Arial Narrow", sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--stamp);
  border:3px solid currentColor;
  padding:.32em .62em .26em;
  line-height:1.02;
  opacity:.88;
  -webkit-mask-image:var(--distress); mask-image:var(--distress);
  -webkit-mask-size:180px 180px; mask-size:180px 180px;
}
.stamp--lg{font-size:clamp(15px,2.5vw,26px); border-width:4px}
.stamp--sm{font-size:11px; border-width:2px; letter-spacing:.12em; opacity:1}

.stamp-round{
  width:clamp(108px,15vw,138px); aspect-ratio:1;
  border:3px double var(--stamp); border-radius:50%;
  color:var(--stamp);
  display:grid; place-content:center; text-align:center;
  font-family:Oswald, sans-serif; font-weight:600; text-transform:uppercase;
  font-size:clamp(10.5px,1.25vw,12.5px); letter-spacing:.09em; line-height:1.24;
  padding:12px; opacity:.9;
  -webkit-mask-image:var(--distress); mask-image:var(--distress);
  -webkit-mask-size:180px 180px; mask-size:180px 180px;
}

/* ---------- 5. ЗАКРАШИВАНИЕ ---------- */
.rd{position:relative; display:inline-block; color:inherit; white-space:nowrap}
.rd > span{position:relative; z-index:0}
.rd::after{
  content:"";
  position:absolute; left:-.22em; right:-.22em; top:-.06em; bottom:-.02em;
  background:var(--bar);
  background-image:linear-gradient(92deg,transparent,var(--bar-sheen) 30%,transparent 62%);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .34s var(--ease);
  z-index:1;
}
.rd.on::after{transform:scaleX(1)}
.rd.on{color:transparent}

/* ---------- 6. КНОПКИ ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap;
  font-family:Oswald, sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.09em;
  font-size:clamp(13px,1.2vw,15px);
  padding:.82em 1.5em .74em;
  border-radius:var(--r);
  text-decoration:none; cursor:pointer;
  border:2px solid var(--ink);
  transition:transform .16s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn--solid{background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--stamp-wash)}
.btn--solid:hover{background:var(--stamp); border-color:var(--stamp); color:#f6efe0}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-ctl)}
.btn--ghost:hover{border-color:var(--ink); background:var(--ink-09)}
.btn:active{transform:translateY(1px)}
.btn--sm{font-size:12px; padding:.6em 1.05em .54em; border-width:1.5px}

/* ---------- 7. ШАПКА ---------- */
.hdr{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border-bottom:1px solid var(--ink-18);
}
@supports not (backdrop-filter:blur(2px)){ .hdr{background:var(--paper)} }
.hdr__in{height:68px; display:flex; align-items:center; gap:clamp(14px,2.4vw,32px)}
.brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; flex:0 0 auto}
.brand__mark{
  font-family:Oswald,sans-serif; font-weight:700; font-size:21px;
  letter-spacing:.13em; color:var(--stamp);
  border:2.5px solid currentColor; padding:1px 7px 0;
  -webkit-mask-image:var(--distress); mask-image:var(--distress);
  -webkit-mask-size:180px 180px; mask-size:180px 180px;
}
.brand__sub{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-72)}

.nav{display:flex; gap:clamp(12px,1.9vw,26px); margin-left:auto}
.nav a{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-80); padding-block:6px;
  border-bottom:1px solid transparent; transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--ink); border-color:var(--stamp)}

.hdr__act{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.tglt{
  display:inline-flex; align-items:center; justify-content:center; min-height:36px;
  background:none; border:1px solid var(--line-ctl); border-radius:var(--r);
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  padding:6px 10px; cursor:pointer; color:var(--ink-80);
  transition:border-color .2s,color .2s;
}
.tglt:hover{border-color:var(--ink-38); color:var(--ink)}

.burger{
  display:none; background:none; border:1px solid var(--line-ctl); border-radius:var(--r);
  padding:9px 12px; cursor:pointer; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-80);
}
@media (max-width:960px){
  .nav{display:none}
  .hdr__act{margin-left:auto}
  .burger{display:block}
  .hdr__act .tglt{display:none}
}
@media (max-width:520px){
  .hdr__act .btn{display:none}
  .brand__sub{display:none}
}

.mnu{display:none; border-top:1px solid var(--ink-18); background:var(--paper)}
.mnu.open{display:block}
.mnu{max-height:calc(100dvh - 68px); overflow-y:auto}
.mnu .wrap{padding-bottom:20px}
.mnu ul{list-style:none; margin:0; padding:6px 0 16px}
.mnu li + li{border-top:1px dashed var(--ink-18)}
.mnu ul a{
  display:block; padding:15px 2px; text-decoration:none;
  font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:15px;
}
.mnu .btn{width:100%}
.mnu .tglt{margin-top:12px; width:100%}

/* ---------- 8. СЕКЦИИ ---------- */
.sect{padding-block:var(--sect)}
section[id],#main{scroll-margin-top:84px}
.sect__head{display:grid; gap:14px; max-width:70ch; margin-bottom:clamp(28px,3.6vw,44px)}

/* ---------- 9. ПОДВАЛ ---------- */
.ftr{border-top:1px solid var(--ink-18); padding-block:clamp(38px,5vw,60px) 34px; background:var(--paper-lo)}
.ftr__grid{display:grid; gap:clamp(26px,4vw,44px); grid-template-columns:1fr}
@media (min-width:760px){
  .ftr__grid{grid-template-columns:repeat(3,1fr)}
  .ftr__brand{grid-column:1 / -1; margin-bottom:clamp(6px,1.6vw,18px)}
}
.ftr__tag{max-width:none}
@media (min-width:760px){ .ftr__tag{white-space:nowrap} }
.ftr h3{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-72);
  margin:0 0 12px; font-weight:400; font-family:inherit;
}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ftr a{display:inline-block; padding-block:3px; font-size:13px; text-decoration:none; color:var(--ink-80)}
.ftr a:hover{color:var(--stamp)}
.ftr__end{
  margin-top:clamp(30px,4vw,46px); padding-top:20px; border-top:1px dashed var(--ink-18);
  display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:space-between;
}

/* ---------- 10. ПОЯВЛЕНИЕ ---------- */
.rise{opacity:0; transform:translateY(22px)}
@media (prefers-reduced-motion:no-preference){
  .rise{transition:opacity .6s var(--ease), transform .6s var(--ease)}
}
.rise.in{opacity:1; transform:none}

/* ============================================================
   ГЛАВНАЯ СТРАНИЦА
   ============================================================ */

/* ---------- Обложка ---------- */
.hero{padding-block:clamp(26px,4.6vh,44px) var(--sect)}
.hero__grid{display:grid; gap:clamp(26px,4vw,54px); grid-template-columns:1fr; align-items:start}
@media (min-width:1040px){ .hero__grid{grid-template-columns:1.2fr .8fr; align-items:center} }
.hero__txt{display:grid; gap:clamp(18px,2.4vw,26px); order:1}
.hero__vis{order:2; position:relative}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px}

/* архивный снимок */
.photo{
  position:relative;
  max-width:460px; margin-inline:auto;
  padding:11px 11px 46px;
  background:var(--paper-hi);
  box-shadow:var(--shadow);
  transform:rotate(-1.6deg);
  border:1px solid var(--ink-18);
}
.photo__img{position:relative; overflow:hidden; background:var(--paper-lo)}
.photo__img img{width:100%; height:auto; filter:var(--photo)}
/* полиграфическая точка поверх снимка */
.photo__img::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.34) 21%, transparent 23%);
  background-size:3px 3px; mix-blend-mode:multiply; opacity:.55;
}
[data-theme="film"] .photo__img::after{mix-blend-mode:screen; opacity:.22}
.photo__bar{
  position:absolute; left:8%; right:26%; top:17%; height:11%;
  background:var(--bar); z-index:2; transform:rotate(-1.2deg);
}
.photo__cap{
  position:absolute; left:14px; right:14px; bottom:13px;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-72);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px;
}
.clip{
  position:absolute; top:-16px; left:34px; width:20px; height:52px;
  border:2.5px solid var(--ink-38); border-radius:11px;
  border-bottom-color:transparent; z-index:3; transform:rotate(8deg);
}
.photo .stamp{position:absolute; right:-14px; bottom:14px; transform:rotate(-9deg); z-index:4}
@media (max-width:430px){ .photo .stamp{right:2px} }
.hero__pen{position:absolute; left:-4px; bottom:-26px}
@media (max-width:1039px){ .hero__pen{position:static; display:block; margin-top:16px} }

/* ---------- Совместимость ---------- */
.compat{padding-block:clamp(26px,4vw,38px)}
.compat__in{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
.compat__k{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-72); margin-right:6px;
}
.tag{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line-ctl); border-radius:var(--r);
  padding:6px 11px 5px; font-size:12.5px;
}
.tag em{color:var(--stamp); font-style:normal; letter-spacing:-.04em}

/* ---------- Живая слежка ---------- */
.dossier{
  position:relative;
  background:var(--paper-hi); border:1px solid var(--ink-18);
  box-shadow:var(--shadow); padding:clamp(20px,3.4vw,38px);
}
.dossier__rows{display:grid; gap:6px clamp(26px,3.4vw,52px); margin-block:clamp(14px,2vw,22px)}
@media (min-width:860px){ .dossier__rows{grid-template-columns:1fr 1fr} }

/* Строка бланка: подпись, точечная выноска, вписанное значение.
   Длинное значение переносится на свою строку, как в настоящей машинописи. */
.row{display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px; padding-block:9px}
.row__k{flex:0 0 auto; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-72)}
.row .lead{flex:1 1 32px; min-width:22px; align-self:center; border-bottom:1px dotted var(--ink-38)}
.rv{
  appearance:none; background:none; border:0; padding:0;
  font:inherit; font-size:13.5px; text-align:left;
  padding-block:2px;
  color:var(--ink); cursor:crosshair;
  flex:0 1 auto; min-width:0; max-width:100%;
}
.rv .rd{white-space:normal; max-width:100%}
/* при наведении маркер только касается строки, не закрывая её целиком */
.rv:hover .rd::after{transform:scaleX(.13)}
.rv[aria-pressed="true"]:hover .rd::after{transform:scaleX(1)}

.scope{max-width:82ch; margin-top:18px}

.dossier__act{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:clamp(16px,2vw,24px)}
.dossier .stamp--lg{
  position:absolute; right:clamp(12px,3vw,40px); top:clamp(-14px,-1vw,-10px);
  transform:rotate(6deg) scale(.55); opacity:0; pointer-events:none;
  transition:transform .42s cubic-bezier(.2,1.5,.4,1), opacity .22s;
}
.dossier.sealed .stamp--lg{transform:rotate(-7deg) scale(1); opacity:.88}

/* ---------- Маршрут ---------- */
.route{display:grid; gap:clamp(22px,3vw,30px); grid-template-columns:1fr}
@media (min-width:840px){ .route{grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,26px)} }
.leg{display:grid; justify-items:center; text-align:center; gap:12px; position:relative}
.leg:nth-child(1) .stamp-round{transform:rotate(-4deg)}
.leg:nth-child(2) .stamp-round{transform:rotate(3deg)}
.leg:nth-child(3) .stamp-round{transform:rotate(-2deg)}
.leg:nth-child(4) .stamp-round{transform:rotate(5deg)}
.leg__cap{font-size:12.5px; color:var(--ink-80); max-width:26ch; line-height:1.5}
.leg::after{
  content:""; position:absolute;
  background-image:repeating-linear-gradient(90deg,var(--ink-38) 0 5px,transparent 5px 12px);
}
@media (min-width:840px){
  .leg::after{left:78%; right:-22%; top:calc(clamp(108px,15vw,138px)/2); height:1px}
  .leg:last-child::after{display:none}
}
@media (max-width:839px){
  .leg::after{
    left:50%; bottom:-33px; height:22px; width:1px;
    background-image:repeating-linear-gradient(180deg,var(--ink-38) 0 5px,transparent 5px 12px);
  }
  .leg:last-child::after{display:none}
  .route{gap:46px}
}

/* ---------- Картотека узлов ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(22px,3vw,32px)}
.chip{
  display:inline-flex; align-items:center; min-height:40px;
  background:none; border:1px solid var(--line-ctl); border-radius:var(--r);
  padding:8px 14px 7px; cursor:pointer;
  font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-80);
  transition:border-color .2s,color .2s,background-color .2s;
}
.chip:hover{border-color:var(--ink-38); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}

.cards{display:grid; gap:clamp(14px,1.8vw,22px); grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
.card{
  position:relative;
  background:var(--paper-hi); border:1px solid var(--ink-18);
  box-shadow:var(--shadow); padding:16px 16px 14px;
  display:grid; gap:8px; align-content:start;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:nth-child(4n+1){transform:rotate(-1.1deg)}
.card:nth-child(4n+2){transform:rotate(.7deg)}
.card:nth-child(4n+3){transform:rotate(1.3deg)}
.card:nth-child(4n+4){transform:rotate(-.5deg)}
.card:hover{transform:rotate(0deg) translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.35), 0 24px 50px rgba(34,29,22,.2)}
.card[hidden]{display:none}
.card__top{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.card__code{font-size:10.5px; letter-spacing:.18em; color:var(--ink-72); flex:0 0 auto}
.card h3{font-size:1.16rem}
.card__city{font-size:12.5px; color:var(--ink-80); margin-top:-4px}
.card__meta{font-size:12px; color:var(--ink-80); padding-top:6px; border-top:1px dotted var(--ink-18)}
.card__photo{overflow:hidden; margin:-16px -16px 4px; position:relative; background:var(--paper-lo)}
.card__photo img{width:100%; height:104px; object-fit:cover; filter:var(--photo)}
.card__photo::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(0,0,0,.34) 21%, transparent 23%);
  background-size:3px 3px; mix-blend-mode:multiply; opacity:.5;
}
[data-theme="film"] .card__photo::after{mix-blend-mode:screen; opacity:.2}

/* ---------- Формы допуска ---------- */
.pick{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:1px solid var(--line-ctl); border-radius:var(--r);
  padding:11px 16px 10px; cursor:pointer;
  font-family:Oswald,sans-serif; text-transform:uppercase; letter-spacing:.09em; font-size:14px;
  color:var(--ink-80);
  transition:border-color .2s,color .2s,background-color .2s;
}
.pick:hover{border-color:var(--ink-38); color:var(--ink)}
.pick[aria-pressed="true"]{border-color:var(--ink); color:var(--ink); background:var(--ink-09)}
.pick b{font-family:"IBM Plex Mono",monospace; font-weight:500; color:var(--stamp); letter-spacing:-.04em}
.picks{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(22px,3vw,32px)}

.terms{display:grid; gap:clamp(26px,3vw,32px) clamp(14px,1.8vw,22px); grid-template-columns:1fr}
@media (min-width:620px){ .terms{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .terms{grid-template-columns:repeat(4,1fr)} }
.term{
  position:relative;
  background:var(--paper-hi); border:1px solid var(--ink-18);
  box-shadow:var(--shadow); padding:clamp(18px,2.2vw,24px);
  display:grid; gap:9px; align-content:start;
}
.term--main{border:2px solid var(--ink)}
.term__name{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-72)}
.term__total{
  font-family:Oswald,sans-serif; font-weight:700;
  font-size:clamp(2rem,4.4vw,2.9rem); line-height:.96;
}
.term__per{font-size:12.5px; color:var(--ink-80)}
.term__save{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--stamp);
  min-height:1.4em;
}
.term .btn{margin-top:4px}
.term .stamp{position:absolute; right:14px; top:-13px; transform:rotate(-6deg)}
.term--main{padding-top:clamp(24px,2.8vw,30px)}

.incl{
  margin-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--ink-18); padding-top:clamp(18px,2.4vw,26px);
  display:grid; gap:10px clamp(24px,4vw,56px); grid-template-columns:1fr;
}
@media (min-width:700px){ .incl{grid-template-columns:1fr 1fr} }
.incl ul{margin:0; padding:0; display:grid; gap:10px}
.incl li{list-style:none; display:flex; gap:10px; font-size:13.5px}
.incl .tick{color:var(--stamp); font-weight:600; flex:0 0 auto; letter-spacing:-.04em}

.trial{
  margin-top:clamp(24px,3vw,34px);
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
  border:1px dashed var(--stamp); background:var(--stamp-wash);
  padding:clamp(16px,2.4vw,24px);
}
.trial p{max-width:52ch}

/* ---------- Вопросы ---------- */
.qa{border-top:1px solid var(--ink-18)}
.qa__item{border-bottom:1px dashed var(--ink-18)}
.qa__q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:baseline; gap:16px; text-align:left;
  padding:20px 2px; color:var(--ink);
  font-family:Oswald,sans-serif; font-weight:500; text-transform:uppercase;
  font-size:clamp(14px,1.7vw,18px); letter-spacing:.03em;
}
.qa__q:hover{color:var(--stamp)}
.qa__sign{margin-left:auto; flex:0 0 auto; font-size:20px; line-height:1; color:var(--ink-72); transition:transform .3s var(--ease)}
.qa__item.open .qa__sign{transform:rotate(45deg)}
.qa__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s var(--ease)}
.qa__item.open .qa__a{grid-template-rows:1fr}
/* visibility убирает свёрнутый ответ и из экранного диктора, не ломая анимацию */
.qa__a > div{overflow:hidden; visibility:hidden; transition:visibility 0s linear .38s}
.qa__item.open .qa__a > div{visibility:visible; transition-delay:0s}
.qa__a p{padding:0 2px 22px; max-width:62ch; color:var(--ink-80)}

/* ---------- Финал ---------- */
.final{text-align:center; padding-block:clamp(72px,11vh,132px)}
.final__in{display:grid; justify-items:center; gap:clamp(20px,3vw,30px)}
.final h2{font-size:clamp(1.85rem,5.6vw,4rem); line-height:1.02; max-width:16ch}
.final .stamp--lg{transform:rotate(-5deg) scale(.6); opacity:0; transition:transform .5s cubic-bezier(.2,1.5,.4,1), opacity .25s}
.final.in .stamp--lg{transform:rotate(-5deg) scale(1); opacity:.88}

/* ============================================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ
   ============================================================ */
.doc{padding-block:clamp(30px,5vh,54px) var(--sect)}
.doc__head{display:grid; gap:16px; margin-bottom:clamp(30px,4.4vw,50px)}
.doc__head h1{font-size:clamp(1.85rem,5.2vw,3.4rem); max-width:18ch}
.doc__sub{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-72)}

.doc__body{max-width:74ch}
.doc__body h2{
  font-size:clamp(1.15rem,2.3vw,1.55rem);
  margin:clamp(34px,4.4vw,52px) 0 14px;
  display:flex; align-items:baseline; gap:12px;
}
.doc__body h2 span{
  flex:0 0 auto; color:var(--stamp);
  font-family:"IBM Plex Mono",monospace; font-weight:500; font-size:.7em;
}
.doc__body p{margin-bottom:14px; color:var(--ink-80)}
.doc__body p b{color:var(--ink); font-weight:600; margin-right:4px; white-space:nowrap}
.doc__body ul{margin:0 0 18px; padding:0; display:grid; gap:8px}
.doc__body li{list-style:none; display:flex; gap:11px; color:var(--ink-80); font-size:14px}
.doc__body li::before{content:"-"; color:var(--stamp); flex:0 0 auto}

.tldr{
  background:var(--paper-hi); border:1px solid var(--ink-18);
  box-shadow:var(--shadow); padding:clamp(20px,3vw,30px);
  margin-bottom:clamp(26px,3.6vw,40px);
}
.tldr .mono-lbl{margin-bottom:10px}
.tldr p{color:var(--ink-80)}

.doc__end{
  margin-top:clamp(34px,4.6vw,56px); padding-top:24px;
  border-top:1px dashed var(--ink-18);
  display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
}
.doc__end .pen{flex:0 0 auto}
.doc__back{margin-bottom:clamp(20px,2.8vw,30px)}
.doc__links{display:flex; flex-wrap:wrap; gap:10px}

/* ============================================================
   ОТКЛЮЧЕНИЕ ДВИЖЕНИЯ
   Блок стоит в самом конце файла намеренно: специфичность у него
   такая же, как у правил выше, и выигрывает он только порядком.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1; transform:none}
  body,
  .btn, .card, .chip, .pick, .tglt, .burger, .nav a,
  .rd::after, .qa__a, .qa__a > div, .qa__sign,
  .dossier .stamp--lg, .final .stamp--lg{
    transition:none;
  }
}