/* ============================================================
   dossier — макет «досье / личное дело»
   namespace: .ds-*
   Скоросшиватель: язычки-вкладки сверху, линия подшивки слева
   с пробитыми отверстиями, машинописная моноширинная подача
   заголовков, содержимое — графы «поле — значение», штампы-печати
   на CSS-поворотах.
   Палитра и шрифты подставляются генератором.
   ============================================================ */

:root{
  --ds-bg:#0f0e0c;
  --ds-surf:#191712;
  --ds-acc:#b9975b;
  --ds-acc2:#6f9ab0;
  --ds-tx:#eeeade;
  --ds-mu:#9d9584;
  --ds-line:rgba(238,234,222,0.22);
  --ds-hair:rgba(238,234,222,0.11);
  --ds-glow:rgba(185,151,91,0.34);
  --ds-head:"PT Mono";
  --ds-body:"Vollkorn";
  --ds-bind:56px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--ds-bg);color:var(--ds-tx);
  font-family:var(--ds-body),Georgia,serif;
  font-size:15.5px;line-height:1.66;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
h1,h2,h3{
  font-family:var(--ds-head),ui-monospace,"Consolas",monospace;
  font-weight:700;line-height:1.22;margin:0;letter-spacing:-.01em;
}
p{margin:0}
dl,dt,dd{margin:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--ds-acc);color:var(--ds-bg)}

/* --- машинописные акценты (замена <b>/<strong>) --------------- */
.ds-t{font-family:var(--ds-head),monospace;color:var(--ds-acc);font-variant-numeric:tabular-nums}
.ds-t2{font-family:var(--ds-head),monospace;color:var(--ds-acc2);font-variant-numeric:tabular-nums}
.ds-mu{color:var(--ds-mu)}

/* --- обложка дела --------------------------------------------- */
.ds-cover{
  position:sticky;top:0;z-index:40;background:var(--ds-bg);
  border-bottom:2px solid var(--ds-line);
}
.ds-cover-in{max-width:1120px;margin:0 auto;padding:9px 18px 0}
.ds-cover-row{display:flex;align-items:center;gap:12px;min-height:52px}
.ds-mark{
  display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;
  font-family:var(--ds-head),monospace;font-weight:700;font-size:16px;
  letter-spacing:.06em;text-transform:uppercase;
}
.ds-mark svg{display:block;width:26px;height:26px}
.ds-mark em{font-style:normal;color:var(--ds-acc)}
.ds-case{
  margin-left:auto;font-family:var(--ds-head),monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ds-mu);
  display:inline-flex;align-items:center;min-height:44px;
}

/* --- язычки-вкладки ------------------------------------------- */
.ds-tabs{
  display:flex;gap:3px;overflow-x:auto;padding:0 0 0;margin-top:4px;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.ds-tabs::-webkit-scrollbar{display:none}
.ds-tab{
  flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding:0 15px;background:var(--ds-surf);
  border:1px solid var(--ds-line);border-bottom:0;
  border-radius:9px 9px 0 0;
  font-family:var(--ds-head),monospace;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-mu);white-space:nowrap;
  transform:translateY(1px);
}
.ds-tab:hover{color:var(--ds-tx);border-color:var(--ds-acc2)}
.ds-tab-hot{
  background:var(--ds-acc);color:var(--ds-bg);border-color:var(--ds-acc);
  font-weight:700;
}

/* --- каркас: подшивка слева ----------------------------------- */
.ds-file{
  max-width:1120px;margin:0 auto;padding:0 18px 0 calc(18px + var(--ds-bind));
  position:relative;
}
.ds-file::before{
  content:"";position:absolute;left:18px;top:0;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--ds-line) 0 14px,transparent 14px 22px);
}
.ds-file::after{
  content:"";position:absolute;left:8px;top:70px;width:22px;height:100%;
  background-image:radial-gradient(circle at 11px 11px,var(--ds-bg) 0 7px,var(--ds-line) 7px 8.4px,transparent 8.4px);
  background-size:22px 300px;background-repeat:repeat-y;pointer-events:none;
}

/* --- лист дела ------------------------------------------------ */
.ds-folio{
  border-top:1px solid var(--ds-hair);padding:30px 0 28px;position:relative;
}
.ds-folio:first-of-type{border-top:0}
.ds-folio-head{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap}
.ds-no{
  flex:0 0 auto;font-family:var(--ds-head),monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ds-acc);
  border:1px solid var(--ds-line);padding:4px 8px;line-height:1;
}
.ds-h2{font-size:clamp(18px,2.4vw,26px);max-width:40ch}
.ds-lead{margin-top:12px;max-width:84ch}
.ds-sub{margin-top:13px;max-width:84ch;font-size:15px}
.ds-typed{
  margin-top:12px;font-family:var(--ds-head),monospace;font-size:13px;line-height:1.7;
  color:var(--ds-mu);letter-spacing:.01em;max-width:76ch;
  border-left:2px solid var(--ds-acc2);padding-left:13px;
}

/* --- графы «поле — значение» ---------------------------------- */
.ds-fields{margin-top:16px;border:1px solid var(--ds-line);background:var(--ds-surf)}
.ds-field{
  display:grid;grid-template-columns:minmax(150px,26%) minmax(0,1fr);
  border-top:1px dotted var(--ds-line);
}
.ds-field:first-child{border-top:0}
.ds-field dt{
  padding:10px 13px;font-family:var(--ds-head),monospace;font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ds-mu);
  border-right:1px dotted var(--ds-line);
}
.ds-field dd{padding:10px 14px;font-size:14.5px}
.ds-field dd em{font-style:normal;font-family:var(--ds-head),monospace;color:var(--ds-acc)}

/* --- штампы --------------------------------------------------- */
.ds-stamps{display:flex;flex-wrap:wrap;gap:18px;margin:26px 0 30px;align-items:center}
.ds-stamp{
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  border:3px double var(--ds-acc);color:var(--ds-acc);
  padding:9px 16px;transform:rotate(-6deg);
  font-family:var(--ds-head),monospace;text-transform:uppercase;
  letter-spacing:.12em;font-size:12px;opacity:.92;
}
.ds-stamp-2{border-color:var(--ds-acc2);color:var(--ds-acc2);transform:rotate(4deg)}
.ds-stamp-3{transform:rotate(-2deg);border-style:solid;border-width:2px}
.ds-stamp i{font-style:normal;font-weight:400}
.ds-stamp-v{font-size:15px;letter-spacing:.06em}
.ds-stamp-c{font-size:9.5px;letter-spacing:.18em;opacity:.8}

/* --- карточки-вкладыши ---------------------------------------- */
.ds-sheets{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:1px;
  margin-top:16px;background:var(--ds-line);border:1px solid var(--ds-line)}
.ds-sheet{background:var(--ds-bg);padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px}
.ds-sheet h3{font-size:15.5px}
.ds-sheet p{font-size:14px}
.ds-sheet-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--ds-head),monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ds-mu);
}
.ds-sheet-top i{font-style:normal;color:var(--ds-acc2);white-space:nowrap}
.ds-sheet-v{font-family:var(--ds-head),monospace;font-size:22px;color:var(--ds-acc);line-height:1.1}
.ds-clip{
  align-self:flex-start;font-family:var(--ds-head),monospace;font-size:10px;
  letter-spacing:.15em;color:var(--ds-bg);background:var(--ds-acc2);padding:2px 7px;
}

/* --- реестр строк --------------------------------------------- */
.ds-reg{margin-top:16px;border:1px solid var(--ds-line)}
.ds-reg-r{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:0;
  border-top:1px dotted var(--ds-line);
}
.ds-reg-r:first-child{border-top:0}
.ds-reg-k{
  padding:11px 13px;font-family:var(--ds-head),monospace;font-size:13px;color:var(--ds-acc);
  border-right:1px dotted var(--ds-line);background:var(--ds-surf);
}
.ds-reg-v{padding:11px 14px;font-size:14.5px}
.ds-reg-v h3{font-size:15px;margin-bottom:3px}

/* --- hero ----------------------------------------------------- */
.ds-open{padding:28px 0 8px;position:relative}
.ds-eyebrow{
  font-family:var(--ds-head),monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ds-acc2);
}
.ds-h1{font-size:clamp(25px,4.2vw,42px);margin-top:12px;max-width:21ch;letter-spacing:-.02em}
.ds-open-lead{margin-top:15px;max-width:68ch;font-size:16px}
.ds-kpi{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px;
  border:1px solid var(--ds-line);background:var(--ds-surf);
}
.ds-kpi-c{padding:13px 14px;border-left:1px dotted var(--ds-line)}
.ds-kpi-c:first-child{border-left:0}
.ds-kpi-v{display:block;font-family:var(--ds-head),monospace;font-size:19px;color:var(--ds-acc);line-height:1.1}
.ds-kpi-l{display:block;font-size:12.5px;color:var(--ds-mu);margin-top:3px;line-height:1.35}

/* --- сводный счётчик ------------------------------------------ */
.ds-tally{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border-bottom:1px solid var(--ds-line);
}
.ds-tally-c{padding:14px 14px;border-left:1px dotted var(--ds-line)}
.ds-tally-c:first-child{border-left:0}
.ds-tally-v{display:block;font-family:var(--ds-head),monospace;font-size:20px;color:var(--ds-acc)}
.ds-tally-l{display:block;font-size:12px;color:var(--ds-mu);margin-top:2px;line-height:1.32}

/* --- кнопки --------------------------------------------------- */
.ds-go{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:0 24px;background:var(--ds-acc);color:var(--ds-bg);
  border:2px solid var(--ds-acc);
  font-family:var(--ds-head),monospace;font-weight:700;font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;
  box-shadow:4px 4px 0 0 var(--ds-glow);transition:box-shadow .15s,transform .15s;
}
.ds-go:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 0 var(--ds-glow)}
.ds-go:active{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--ds-glow)}
.ds-go-g{background:transparent;color:var(--ds-tx);border-color:var(--ds-line);box-shadow:none}
.ds-go-g:hover{border-color:var(--ds-acc2);color:var(--ds-acc2);box-shadow:none;transform:none}
.ds-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}

/* --- отзывы --------------------------------------------------- */
.ds-voice{background:var(--ds-bg);padding:15px 16px 16px;display:flex;flex-direction:column;gap:8px}
.ds-star{font-family:var(--ds-head),monospace;color:var(--ds-acc);letter-spacing:.12em;font-size:13px}
.ds-who{margin-top:auto;font-family:var(--ds-head),monospace;font-size:11px;
  letter-spacing:.08em;color:var(--ds-mu);text-transform:uppercase}

/* --- пре-футер ------------------------------------------------ */
.ds-final{
  margin-top:24px;border:2px solid var(--ds-acc);background:var(--ds-surf);
  padding:26px 24px;position:relative;
}
.ds-final h2{font-size:clamp(19px,2.6vw,27px);max-width:26ch}
.ds-final p{margin-top:11px;max-width:66ch}

/* --- FAQ ------------------------------------------------------ */
.ds-ask{margin-top:16px;border:1px solid var(--ds-line)}
.ds-ask details{border-top:1px dotted var(--ds-line)}
.ds-ask details:first-child{border-top:0}
.ds-ask summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:52px;padding:12px 14px;cursor:pointer;list-style:none;
  font-family:var(--ds-head),monospace;font-size:13.5px;
}
.ds-ask summary::-webkit-details-marker{display:none}
.ds-ask summary::after{content:"[+]";color:var(--ds-acc);flex:0 0 auto;font-size:12px}
.ds-ask details[open] summary::after{content:"[-]"}
.ds-ask details[open] summary{color:var(--ds-acc)}
.ds-ans{padding:0 14px 15px;font-size:14.5px;max-width:84ch}

/* --- author note ---------------------------------------------- */
.ds-auth{margin-top:16px;border:1px solid var(--ds-line);background:var(--ds-surf);padding:19px 18px;
  display:flex;gap:15px;align-items:flex-start}
.ds-auth-seal{
  flex:0 0 58px;height:58px;border:2px double var(--ds-acc2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);
  font-family:var(--ds-head),monospace;font-size:16px;color:var(--ds-acc2);
}
.ds-auth p{font-size:14.5px;max-width:84ch}
.ds-auth p + p{margin-top:9px}
.ds-note{color:var(--ds-mu);font-size:13.5px}

/* --- подвал --------------------------------------------------- */
.ds-base{border-top:2px solid var(--ds-line);margin-top:30px;padding:26px 0 44px;color:var(--ds-mu);font-size:13.5px}
.ds-age{
  display:inline-flex;align-items:center;justify-content:center;min-width:54px;min-height:44px;
  border:2px solid var(--ds-acc);color:var(--ds-acc);font-family:var(--ds-head),monospace;
  font-size:13px;padding:0 12px;margin-bottom:14px;letter-spacing:.06em;
}
.ds-base p{margin-top:11px;max-width:92ch}

/* --- адаптив --------------------------------------------------- */
@media (max-width:900px){
  .ds-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-kpi-c:nth-child(odd){border-left:0}
  .ds-kpi-c:nth-child(n+3){border-top:1px dotted var(--ds-line)}
  .ds-tally{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ds-tally-c{border-top:1px dotted var(--ds-line)}
  .ds-tally-c:nth-child(odd){border-left:0}
  .ds-tally-c:nth-child(-n+2){border-top:0}
  .ds-tally-c:last-child{grid-column:1/-1}
}
@media (max-width:680px){
  :root{--ds-bind:26px}
  body{font-size:15px}
  /* контрастный CTA-язычок уходит в начало скоросшивателя: он виден
     в первом экране и остаётся на месте — шапка sticky */
  .ds-tab-hot{order:-1}
  .ds-tally-c{padding:9px 12px}
  .ds-tally-v{font-size:17px}
  .ds-tally-l{font-size:11.5px}
  .ds-open{padding:14px 0 4px}
  .ds-h1{font-size:clamp(21px,5.5vw,26px);margin-top:8px;line-height:1.2}
  .ds-open-lead{margin-top:11px;font-size:14.6px;line-height:1.58}
  .ds-acts{margin-top:16px}
  .ds-go{min-height:50px}
  .ds-file{padding:0 14px 0 calc(14px + var(--ds-bind))}
  .ds-file::before{left:14px}
  .ds-file::after{left:6px;width:16px;
    background-image:radial-gradient(circle at 8px 8px,var(--ds-bg) 0 5px,var(--ds-line) 5px 6.2px,transparent 6.2px);
    background-size:16px 240px}
  .ds-cover-in{padding:8px 14px 0}
  .ds-field{grid-template-columns:1fr}
  .ds-field dt{border-right:0;border-bottom:1px dotted var(--ds-line);padding-bottom:5px}
  .ds-field dd{padding-top:7px}
  .ds-reg-r{grid-template-columns:1fr}
  .ds-reg-k{border-right:0;border-bottom:1px dotted var(--ds-line)}
  .ds-sheets{grid-template-columns:1fr}
  .ds-h1{max-width:100%}
  .ds-acts .ds-go{width:100%}
  .ds-final{padding:20px 16px}
  .ds-auth{flex-direction:column;gap:12px}
  .ds-stamps{gap:14px}
  .ds-folio{padding:24px 0 22px}
}
@media (prefers-reduced-motion:reduce){
  .ds-go,.ds-go:hover,.ds-go:active{transition:none;transform:none}
}