/* Блокнот дуэлянта — персона supremeduelist.ru.
   Светлая «тетрадная» тема: бумага, чернила, красный карандаш, синяя ручка, маркер.
   Только системные шрифты, никаких внешних ресурсов. */
:root{
  --paper:#f6f1e4; --paper-2:#fffdf6; --ink:#232730; --ink-soft:#4a5160;
  --rule:#dcd3bd; --pen-red:#c2402f; --pen-blue:#2a5db0; --marker:#f2c14e;
  --accent:#b3452f; --accent-ink:#8f3220; --line:#e3dac4;
  --mono:"DejaVu Sans Mono",ui-monospace,"Courier New",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --radius:12px; --shadow:0 1px 0 rgba(35,39,48,.04);
  --container:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 var(--sans);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px);
  background-size:100% 34px; background-attachment:fixed; background-position:0 12px;
}
a{color:var(--pen-blue); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; background:#fff; padding:8px; z-index:99; border-radius:6px}

/* ---------- шапка: одна строка ---------- */
.site-head{background:var(--paper-2); border-bottom:2px solid var(--ink); position:sticky; top:0; z-index:40}
.bar{max-width:var(--container); margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:14px; flex-wrap:nowrap}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{background:var(--ink); color:var(--paper-2); font:700 15px/1 var(--mono); padding:8px 9px; border-radius:8px; letter-spacing:.5px}
.brand-txt{font:700 16px/1.1 var(--sans); display:flex; flex-direction:column; max-width:230px}
.brand-txt small{font:400 11px/1 var(--mono); color:var(--ink-soft); margin-top:3px; letter-spacing:.2px}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px; overflow-x:auto; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--ink); font:600 14px/1 var(--sans); padding:9px 10px; border-radius:8px; white-space:nowrap}
.nav a:hover{background:#f0e9d8; color:var(--accent-ink); text-decoration:none}
.nav a.active{background:var(--ink); color:var(--paper-2)}
.burger{display:none; background:var(--paper-2); border:2px solid var(--ink); border-radius:8px; width:42px; height:38px; cursor:pointer; padding:8px 9px; flex-direction:column; justify-content:space-between}
.burger span{display:block; height:3px; background:var(--ink); border-radius:2px}
@media (max-width:760px){
  .burger{display:flex}
  .brand-txt small{display:none}
  .nav{position:absolute; top:100%; left:0; right:0; background:var(--paper-2); border-bottom:2px solid var(--ink); flex-direction:column; align-items:stretch; gap:0; max-height:0; overflow:hidden; transition:max-height .22s ease}
  .nav.open{max-height:70vh; overflow-y:auto}
  .nav a{padding:12px 16px; border-radius:0; border-top:1px solid var(--line)}
}

/* ---------- крошки ---------- */
.crumbs{max-width:var(--container); margin:14px auto 0; padding:0 16px; font:13px/1.4 var(--sans); color:var(--ink-soft)}
.crumbs a{color:var(--pen-blue)}
.crumbs .sep{margin:0 6px; color:var(--ink-soft)}
.crumbs .here{color:var(--ink); font-weight:600}

/* ---------- контейнер ---------- */
.wrap{max-width:var(--container); margin:0 auto; padding:8px 16px 40px}
h1{font:800 30px/1.15 var(--sans); margin:.4em 0 .3em; letter-spacing:-.4px}
h2{font:800 22px/1.2 var(--sans); margin:1.6em 0 .5em; padding-bottom:6px; border-bottom:2px solid var(--ink)}
h3{font:700 17px/1.3 var(--sans); margin:1.2em 0 .4em}
p{margin:.6em 0}
a:focus-visible,button:focus-visible{outline:3px solid var(--marker); outline-offset:2px}
.lead{font-size:19px; color:var(--ink-soft)}
.small{font-size:13px; color:var(--ink-soft)}
.mono{font-family:var(--mono)}

/* ---------- кнопки ---------- */
.btn{display:inline-block; background:var(--ink); color:var(--paper-2); font:700 15px/1 var(--sans); padding:13px 18px; border-radius:10px; border:2px solid var(--ink)}
.btn:hover{background:var(--accent); border-color:var(--accent); text-decoration:none; color:#fff}
.btn.red{background:var(--pen-red); border-color:var(--pen-red)}
.btn.red:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.btn.blue{background:var(--pen-blue); border-color:var(--pen-blue)}
.btn.blue:hover{background:#1d4487; border-color:#1d4487}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:#efe7d4; color:var(--ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin:1em 0}
.btn.store{display:inline-flex; align-items:center; gap:10px; background:var(--paper-2); color:var(--ink); border-color:var(--ink); font-weight:700}
.btn.store img{max-height:44px; width:auto}
.btn.store:hover{background:#efe7d4; color:var(--ink)}

/* ---------- панели/карточки ---------- */
.panel{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; margin:.8em 0}
.panel.tight{padding:12px 14px}
.note{background:#fff8e1; border-left:5px solid var(--marker); padding:12px 14px; border-radius:8px; margin:1em 0}
.note.red{background:#fdeeec; border-left-color:var(--pen-red)}
.note.blue{background:#eaf1fb; border-left-color:var(--pen-blue)}
.badge{display:inline-block; font:600 12px/1 var(--mono); padding:6px 9px; border-radius:999px; background:#efe7d4; color:var(--ink); border:1px solid var(--line)}
.badge.red{background:#fdeeec; color:var(--accent-ink); border-color:#e7c9c3}
.badge.blue{background:#eaf1fb; color:#1d4487; border-color:#c9dbf4}
.badge.green{background:#eaf7ee; color:#20603a; border-color:#c9e6d5}

/* ---------- сетка сущностей ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin:1.2em 0}
.card{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.card:hover{border-color:var(--ink); box-shadow:0 4px 0 rgba(35,39,48,.10)}
.card .thumb{background:#efe7d4; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:contain}
.card .body{padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1}
.card .t{font:700 14px/1.25 var(--sans)}
.card .t a{color:var(--ink)}
.card .t a:hover{color:var(--accent); text-decoration:none}
.card .m{font:12px/1.3 var(--mono); color:var(--ink-soft)}

/* ---------- предметная страница ---------- */
.item{max-width:760px}
.item-hero{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.item-hero .pic{width:210px; flex:0 0 auto; background:#efe7d4; border:1px solid var(--line); border-radius:var(--radius); padding:10px}
.item-hero .pic img{width:100%; height:auto; object-fit:contain}
.item-meta{flex:1; min-width:220px}
.specs{width:100%; border-collapse:collapse; margin:.8em 0; background:var(--paper-2)}
.specs th,.specs td{border:1px solid var(--line); padding:9px 12px; text-align:left; font-size:15px}
.specs th{width:38%; background:#f0e9d8; font:600 14px/1.4 var(--sans)}
.prevnext{display:flex; justify-content:space-between; gap:12px; margin:1.4em 0; font:600 14px/1.4 var(--sans)}
.prevnext a{padding:10px 12px; background:var(--paper-2); border:1px solid var(--line); border-radius:10px}
.prevnext a:hover{border-color:var(--ink); text-decoration:none}

/* ---------- таблицы/коды ---------- */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1em 0}
table.tbl{width:100%; border-collapse:collapse; background:var(--paper-2); min-width:520px}
table.tbl th{background:var(--ink); color:var(--paper-2); font:700 14px/1.3 var(--sans); padding:11px 12px; text-align:left}
table.tbl td{border-bottom:1px solid var(--line); padding:11px 12px; font-size:15px; vertical-align:top}
table.tbl tr:nth-child(even) td{background:#faf6ea}
table.tbl td:last-child{white-space:nowrap}
.dl-btn{display:inline-block; background:var(--pen-red); color:#fff; font:700 13px/1 var(--sans); padding:10px 12px; border-radius:8px}
.dl-btn:hover{background:var(--accent-ink); text-decoration:none}

/* ---------- FAQ ---------- */
details.faq{background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--pen-blue); border-radius:10px; margin:.6em 0}
details.faq summary{cursor:pointer; font:700 15px/1.4 var(--sans); padding:13px 16px; list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:" +"; color:var(--pen-blue)}
details.faq[open] summary::after{content:" −"}
details.faq .a{padding:0 16px 14px; color:var(--ink-soft)}

/* ---------- превью/галерея ---------- */
.shot{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:10px; margin:1em 0}
.shot img{width:100%; border-radius:6px}
.shot figcaption{font:12px/1.4 var(--mono); color:var(--ink-soft); margin-top:8px}

/* ---------- футер ---------- */
.site-foot{border-top:2px solid var(--ink); background:var(--paper-2); margin-top:30px; padding:16px}
.foot-row{max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; font:13px/1.5 var(--sans); color:var(--ink-soft)}
.foot-row a{color:var(--pen-blue)}
.disclaimer{max-width:var(--container); margin:8px auto 0; font-size:12px; color:var(--ink-soft)}

@media (max-width:520px){
  h1{font-size:24px} h2{font-size:19px}
  .lead{font-size:17px}
  .item-hero .pic{width:150px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}