/* Kitnerboy Redoubt — design system "Evergreen Fortress"
   Ретро живёт в пропорциях, типографике и линейках, а не в гифках.
   Ни одного внешнего запроса: только системные шрифты. */

:root{
  --paper:#f6f3ec;        /* фон страницы */
  --sheet:#fffdf8;        /* фон шапки и карточек */
  --ink:#1b1a17;          /* основной текст и линейки */
  --ink-2:#3c3931;        /* вторичный текст */
  --dim:#6b665c;          /* подписи, метки */
  --rule:#d8d1c0;         /* тонкие линии */
  --accent:#8a1c12;       /* кирпичный: акцент, номера, ссылки */
  --accent-2:#5c130c;     /* акцент при наведении */
  --flag:#f2c200;         /* предупреждения, «unrated» */
  --ok:#2f6b45;
  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --col:868px;            /* 820 px текста + 2×24 поля — ширина из макета 20 */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
     font:16px/1.62 var(--serif);text-rendering:optimizeLegibility}
.wrap{max-width:var(--col);margin:0 auto;padding:0 24px}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(138,28,18,.35)}
a:hover{color:var(--accent-2);border-bottom-color:var(--accent-2)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-.005em}
p{margin:0 0 14px}
hr.thick{border:0;border-top:3px solid var(--ink);margin:26px 0}
hr.thin{border:0;border-top:1px solid var(--rule);margin:22px 0}

/* — метки и надзаголовки: мелкий Arial в разрядку, как в каталогах эпохи — */
.kick{font:700 11px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.label{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* — шапка — */
.top{background:var(--sheet);border-bottom:4px solid var(--ink)}
.top .in{max-width:var(--col);margin:0 auto;padding:15px 24px;display:flex;align-items:baseline;gap:18px;flex-wrap:nowrap}
.top .brand{font:700 20px/1 var(--serif);letter-spacing:.04em;color:var(--ink);border:0}
.top .brand span{color:var(--accent)}
.top nav{margin-left:auto;font:12px/1.9 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.top nav a{color:var(--ink);margin-left:14px;border-bottom:1px solid transparent}
.top nav a:hover,.top nav a[aria-current]{border-bottom-color:var(--accent);color:var(--accent)}

/* — герой — */
.hero{padding-top:34px;padding-bottom:6px}   /* боковые отступы берём у .wrap, иначе текст уедет */
.hero h1{font:400 40px/1.14 var(--serif);margin:12px 0 12px}
.hero .lead{font-size:16.5px;color:var(--ink-2);max-width:62ch}

/* — тёмная плашка-манифест: по ширине колонки, как в исходном макете 20,
     а не полосой от края до края — */
.strip{max-width:var(--col);margin:24px auto;background:var(--ink);color:#f4f1e8}
.strip .in{padding:14px 24px;display:flex;gap:18px;align-items:center;flex-wrap:nowrap}
.strip b{font:700 13px/1.3 var(--sans);letter-spacing:.06em;flex:none}
.strip span{font-size:12.5px;color:#c9c4b6;min-width:0}   /* без font-family: засечки, как во всём тексте */

/* — сетка карточек — */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card h3{margin:0 0 5px;font-size:16px}
.card h3 a{color:var(--ink);border-bottom:1px solid var(--rule)}
.card h3 a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.card .n{display:block;font:700 11px/1 var(--sans);letter-spacing:.2em;color:var(--accent);margin-bottom:7px}
.card p{margin:0;font-size:14px;color:var(--ink-2)}

/* — кнопки-рубрики: потомок кнопок-картинок 150×30 Brown Safe 2000 — */
.rubrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0}
.rubric{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);background:var(--sheet);
        padding:10px 12px;font:700 13px/1.25 var(--sans);color:var(--ink);letter-spacing:.02em}
.rubric:hover{background:var(--ink);color:#f4f1e8}
.rubric small{margin-left:auto;font:400 11px/1 var(--mono);color:var(--dim)}
.rubric:hover small{color:#c9c4b6}

/* — таблицы: главный рабочий инструмент справочника — */
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:12px 0 0;
      border-bottom:3px solid var(--ink)}
th{text-align:left;font:700 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;
   color:var(--dim);border-bottom:3px solid var(--ink);padding:0 10px 8px 0;vertical-align:bottom}
td{border-bottom:1px solid var(--rule);padding:9px 10px 9px 0;vertical-align:top}
td.c{color:var(--accent);font-weight:700;white-space:nowrap}
tr:hover td{background:rgba(138,28,18,.035)}
.tbl-note{font-size:12.5px;color:var(--dim);margin-top:9px}

/* — плашки статуса — */
.badge{display:inline-block;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
       padding:4px 7px;border:1px solid var(--ink);white-space:nowrap}
.badge.rated{border-color:var(--ok);color:var(--ok)}
.badge.unrated{border-color:#9a7c00;color:#7a6200;background:rgba(242,194,0,.16)}
.badge.disputed{border-color:var(--accent);color:var(--accent)}

/* — врезки — */
.note{border-left:4px solid var(--accent);background:var(--sheet);padding:12px 16px;margin:18px 0;font-size:14.5px}
.note b{display:block;margin-bottom:4px;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.warn{border-left-color:#9a7c00}
.warn b{color:#7a6200}

/* — «вопросы продавцу»: приём Sturdy 1998 — */
.qa{margin:0;padding:0;list-style:none;counter-reset:q}
.qa li{counter-increment:q;border-bottom:1px solid var(--rule);padding:14px 0 14px 52px;position:relative}
.qa li:before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:14px;
              font:700 15px/1 var(--mono);color:var(--accent)}
.qa b{display:block;font-size:16px;margin-bottom:4px}
.qa p{margin:0;font-size:14px;color:var(--ink-2)}
.qa .bad{display:block;margin-top:6px;font-size:13px;color:#7a6200}
.qa .bad em{font-style:normal;font-weight:700}

/* — доказательство вместо обещания: потомок «TESTED BY» Brown Safe — */
.proof{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;margin:20px 0}
.proof .plate{border:2px solid var(--ink);background:var(--sheet);padding:0}
.proof .plate .cap{background:var(--ink);color:#f4f1e8;font:700 10.5px/1.4 var(--sans);
                   letter-spacing:.12em;text-align:center;padding:6px 8px}
.proof .plate .fig{height:190px;display:block}
.proof dl{margin:0}
.proof dt{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:12px}
.proof dt:first-child{margin-top:0}
.proof dd{margin:3px 0 0;font-size:15px}

/* — архив брошюр — */
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:18px 0}
.doc{border:1px solid var(--rule);background:var(--sheet);padding:8px}
.doc .scan{display:block;width:100%;height:190px;object-fit:contain;padding:6px;
           background:linear-gradient(#efe9d8,#ded5bd);border:1px solid var(--rule)}
.doc b a{color:var(--ink);border:0}
.doc b a:hover{color:var(--accent)}
.plate img.cover{display:block;width:100%;height:auto;background:#efe9d8}
.doc b{display:block;font-size:13.5px;margin-top:8px;line-height:1.3}
.doc i{display:block;font:12px/1.4 var(--sans);color:var(--dim);font-style:normal;margin-top:2px}
.doc a{font:11px/1 var(--sans);letter-spacing:.06em;display:inline-block;margin-top:6px}

/* — подвал: «Last Modified» и счётчик — прямые цитаты из Liberty Safe 1996 — */
.foot{border-top:1px solid var(--rule);margin-top:30px;padding:16px 0 30px;font-size:12.5px;color:var(--dim)}
.foot .in{max-width:var(--col);margin:0 auto;padding:0 24px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.foot .in .r{margin-left:auto;text-align:right}
.counter{display:inline-block;background:var(--ink);color:#8ef5b5;font:700 12px/1 var(--mono);
         letter-spacing:.24em;padding:4px 7px;border:2px solid #000}

/* — служебное — */
.mono{font-family:var(--mono);font-size:13px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}

@media (max-width:1000px){
  .top .in{flex-wrap:wrap}
  .top nav{margin-left:0;width:100%;white-space:normal}
  .top nav a{margin:0 16px 0 0}
}
@media (max-width:760px){
  .cards,.cards.two{grid-template-columns:1fr;gap:16px}
  .rubrics{grid-template-columns:1fr}
  .shelf{grid-template-columns:repeat(2,1fr)}
  .proof{grid-template-columns:1fr}
  .hero h1{font-size:31px}
  .top .in{flex-wrap:wrap}
  .top nav{margin-left:0;width:100%;white-space:normal}
  .top nav a{margin:0 14px 0 0}
  .strip{margin-left:16px;margin-right:16px}
  .strip .in{flex-wrap:wrap;white-space:normal;gap:8px}
  .strip b{flex:1 1 auto;min-width:0}   /* иначе строка не переносится и распирает страницу */
  .strip span{white-space:normal}
  table{font-size:13.5px}
}
@media print{
  body{background:#fff}
  .top nav,.strip{display:none}
}

/* — утилиты: существуют, чтобы в разметке не было ни одного style="" —
   Content-Security-Policy без 'unsafe-inline' блокирует инлайновые стили,
   поэтому любой отступ живёт здесь, а не в атрибуте. */
.mt{margin-top:26px}
.mid{vertical-align:middle}

/* — слой магазина: те же токены, ничего нового изобретать не пришлось — */
.buybox{border:2px solid var(--ink);background:var(--sheet);padding:16px 18px;margin:20px 0}
.buybox .label + .price{margin-top:2px}
.price{font:400 34px/1 var(--serif);margin:2px 0 4px}
.price small{font:400 14px/1 var(--sans);color:var(--dim);margin-left:8px}
.buybox ul{margin:12px 0 0;padding-left:18px;font-size:14px;color:var(--ink-2)}
.buybox li{margin-bottom:5px}
.buybox .label.second{margin-top:10px;display:block}
.cta{display:inline-block;margin-top:14px;background:var(--ink);color:#f4f1e8;border:2px solid var(--ink);
     font:700 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:13px 22px}
.cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.coupon{border:2px dashed var(--ink);padding:14px 16px;margin:22px 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.coupon b{font:700 12px/1.35 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.coupon input{flex:1;min-width:150px;border:0;border-bottom:1px solid var(--ink);background:transparent;
              font:15px var(--serif);padding:6px 2px;color:var(--ink)}
.coupon input:focus{outline:2px solid var(--accent);outline-offset:2px}

/* ── Раздел «Сейф не открывается»: дерево симптомов без единой строки скрипта ──
   <details>/<summary> — нативные, работают при выключенном JS и при строгой CSP. */
.symptoms{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0}
.symptom{display:block;border:2px solid var(--ink);background:var(--sheet);padding:13px 15px;
         text-decoration:none;color:var(--ink)}
.symptom:hover{background:var(--ink);color:#f4f1e8}
.symptom b{display:block;font:700 15px/1.3 var(--serif);margin-bottom:3px}
.symptom span{display:block;font:13px/1.4 var(--sans);color:var(--dim)}
.symptom:hover span{color:#c9c4b6}

details{border-bottom:1px solid var(--rule);padding:2px 0}
details > summary{cursor:pointer;padding:12px 0;font:700 16px/1.35 var(--serif);list-style:none;
                  display:flex;gap:10px;align-items:baseline}
details > summary::-webkit-details-marker{display:none}
details > summary:before{content:"+";color:var(--accent);font:700 17px/1 var(--mono);flex:none}
details[open] > summary:before{content:"–"}
details > summary:hover{color:var(--accent)}
details .body{padding:0 0 14px 24px;font-size:15px}
details .body p{margin:0 0 10px}
details .body ol,details .body ul{margin:0 0 10px;padding-left:20px}
details .body li{margin-bottom:6px}

.stop{border:2px solid var(--accent);background:#fdf6f4;padding:12px 16px;margin:18px 0}
.stop b{display:block;font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
        color:var(--accent);margin-bottom:5px}
.stop p{margin:0}
.stop p + p{margin-top:9px}
.steps{counter-reset:s;list-style:none;margin:14px 0;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 12px 40px;border-left:2px solid var(--rule);
          margin-left:12px;padding-top:2px}
.steps li:before{content:counter(s);position:absolute;left:-13px;top:0;width:24px;height:24px;
                 background:var(--ink);color:#f4f1e8;border-radius:50%;font:700 12px/24px var(--sans);text-align:center}
.steps li > b:first-child{display:block;margin-bottom:3px}
.steps li:last-child{border-left-color:transparent}
@media (max-width:1000px){
  .top .in{flex-wrap:wrap}
  .top nav{margin-left:0;width:100%;white-space:normal}
  .top nav a{margin:0 16px 0 0}
}
@media (max-width:760px){ .symptoms{grid-template-columns:1fr} }

/* ── Демонстрационный слой ──────────────────────────────────────────────
   Страницы, где показана структура записи, а не проверенные данные.
   Плашка обязана быть заметной: сайт требует доказательств от других. */
.sample{border:2px dashed var(--accent);background:#fdf6f4;padding:11px 16px;margin:0 0 18px;
        font-size:13.5px;color:var(--ink-2)}
.sample b{display:block;font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
          color:var(--accent);margin-bottom:5px}
td.pending,.pending{color:var(--dim);font-style:italic}

/* ── Доступность ───────────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
.rubric:focus-visible,.symptom:focus-visible{outline:3px solid var(--accent);outline-offset:2px;
        border-radius:1px}

/* ── Широкие таблицы: прокрутка внутри блока, а не всей страницы ───────── */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 0}
.tw table{margin-top:0}
@media (max-width:760px){
  .tw{border-bottom:3px solid var(--ink)}
  .tw table{border-bottom:0;min-width:520px}
}

/* длинные таблицы из текста (раздел identify): на телефоне — построчно, без горизонтальной прокрутки */
@media (max-width:760px){
  .tw.stack table{min-width:0}
  .tw.stack table,.tw.stack tbody,.tw.stack tr,.tw.stack td{display:block;width:auto}
  .tw.stack tr:first-child{display:none}
  .tw.stack tr{border-bottom:1px solid var(--rule);padding:10px 0}
  .tw.stack tr:last-child{border-bottom:0}
  .tw.stack td{border:0;padding:2px 0}
  .tw.stack td.c{white-space:normal;font-size:15px}
  .tw.stack td.empty{display:none}
}