:root{
  --paper:#f5f2ea;--stripe:#edeade;--card:#fbf9f3;--ink:#1b1d1a;--mut:#6e6a5d;
  --rule:#cdc9ba;--stamp:#d84727;--blue:#2456a6;--ok:#2c7a4b;--amber:#b57919;
  --disp:'Playfair Display',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.7 var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
main{min-height:60vh}

/* ── шапка-гроссбух ── */
.hdr{background:var(--paper);border-bottom:2px solid var(--ink)}
.topline{border-bottom:1px solid var(--rule);font:11px/1 var(--mono);letter-spacing:.08em;color:var(--mut);text-transform:uppercase}
.topline .wrap{display:flex;justify-content:space-between;padding-top:7px;padding-bottom:7px;gap:12px;flex-wrap:wrap}
.topline .red{color:var(--stamp)}
.hdr-in{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:14px;padding-bottom:12px}
.logo{font-family:var(--disp);font-weight:900;font-size:24px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.logo b{color:var(--stamp)}
.logo .logo-mark{display:none}
nav{display:flex;gap:0;flex-wrap:wrap;margin-left:auto}
nav a{padding:6px 11px;text-decoration:none;color:var(--mut);font:12px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;border-left:1px solid var(--rule)}
nav a:first-child{border-left:0}
nav a:hover{color:var(--stamp)}

/* ── hero ── */
.hero{padding:56px 0 34px;position:relative}
.hero-sm{padding:38px 0 12px}
.kicker{font:12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stamp);margin:0 0 14px}
.kicker::before{content:"● ";font-size:9px;vertical-align:2px}
.hero h1{font-family:var(--disp);font-weight:900;font-size:clamp(32px,5.8vw,58px);line-height:1.04;letter-spacing:-.01em;margin:0 0 18px;max-width:840px}
.hero h1 em{font-style:italic;color:var(--stamp)}
.hero .sub{color:var(--mut);max-width:520px;font-size:16px;margin:0;border-left:3px solid var(--stamp);padding-left:14px}

/* ── картотека ── */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin:20px 0 64px;counter-reset:card}
.card{grid-column:span 4;counter-increment:card;position:relative;display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--rule);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.card-lg{grid-column:span 8}
.card:nth-child(3n+1){transform:rotate(-.4deg)}
.card:nth-child(3n+2){transform:rotate(.35deg)}
.card:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:7px 7px 0 var(--stamp)}
@media(max-width:900px){.card,.card-lg{grid-column:span 6}}
@media(max-width:620px){.card,.card-lg{grid-column:span 12}}
.thumb{aspect-ratio:16/8;overflow:hidden;border-bottom:1.5px solid var(--ink)}
.thumb svg{width:100%;height:100%;display:block}
.card-lg .thumb{aspect-ratio:16/6}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body::before{content:"№ " counter(card,decimal-leading-zero);position:absolute;top:10px;left:12px;font:11px/1 var(--mono);color:var(--card);background:var(--ink);padding:4px 7px}
.card h3{margin:0;font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.25}
.card-lg h3{font-size:24px}
.card:hover h3{color:var(--stamp)}
.card p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.55}
.tag{align-self:flex-start;font:10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);border:1px solid var(--stamp);padding:4px 8px;transform:rotate(-1deg)}
.meta-line{margin-top:auto;padding-top:8px;border-top:1px dashed var(--rule);font:11px/1.5 var(--mono);color:var(--mut)}

/* ── статья ── */
article{max-width:700px;margin:0 auto}
.crumbs{font:11.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--mut);margin:22px 0 14px}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--stamp)}
.crumbs span{margin:0 6px;color:var(--rule)}
.art-hero{border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--rule);aspect-ratio:16/5.4;overflow:hidden;margin-bottom:6px}
.art-hero svg{width:100%;height:100%;display:block}
article h1{font-family:var(--disp);font-weight:900;font-size:clamp(28px,4.8vw,42px);line-height:1.1;margin:.6em 0 .35em}
article h2{font-family:var(--disp);font-weight:700;font-size:25px;margin:1.7em 0 .5em;padding-top:.7em;border-top:2px solid var(--ink)}
article h3{font-size:17px;font-weight:600;margin:1.4em 0 .4em}
.meta{display:flex;align-items:center;gap:8px;font:12px/1.6 var(--mono);color:var(--mut);margin-bottom:2em}
.dot{width:9px;height:9px;border-radius:99px;background:var(--ok)}
article p{margin:.95em 0}
article>p:first-of-type{font-size:18px;line-height:1.7}
article strong{background:linear-gradient(transparent 60%,#f3d9a4 60%)}
article a{color:var(--blue);text-decoration-thickness:1.5px;text-underline-offset:3px}
article a:hover{color:var(--stamp)}
article ol,article ul{padding-left:1.35em}
article li{margin:.4em 0}
article li::marker{color:var(--stamp);font-weight:700}
article table{border-collapse:collapse;width:100%;margin:20px 0;font-size:14px;display:block;overflow-x:auto;font-family:var(--sans)}
article th,article td{border:1px solid var(--ink);padding:10px 13px;text-align:left;vertical-align:top;background:var(--card)}
article th{background:var(--stripe);font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em}
article img{max-width:100%;border:1.5px solid var(--ink)}
blockquote{border-left:4px solid var(--stamp);margin:1.2em 0;padding:.2em 1.2em;color:var(--mut);font-style:italic}
code{background:var(--stripe);padding:.15em .45em;font-family:var(--mono);font-size:.85em}

details{background:var(--card);border:1.5px solid var(--ink);padding:13px 17px;margin:10px 0;box-shadow:3px 3px 0 var(--rule)}
summary{cursor:pointer;font-weight:600;font-size:15px}
summary::marker{color:var(--stamp)}
details p{margin:.6em 0 .2em;font-size:14.5px;color:var(--mut)}

.btn{display:inline-block;background:var(--stamp);color:var(--card)!important;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:13px 24px;text-decoration:none!important;font:700 14px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.04em;transition:.12s;margin:10px 0;transform:rotate(-.5deg)}
.btn:hover{transform:rotate(0) translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.note{background:var(--stripe);border:1.5px dashed var(--stamp);padding:13px 17px;font-size:14.5px;margin:1.5em 0}
.note::before{content:"NB";font:700 10px/1 var(--mono);color:var(--card);background:var(--stamp);padding:3px 6px;margin-right:9px;vertical-align:1px}

/* ── related ── */
.related{max-width:700px;margin:56px auto 30px;border-top:2px solid var(--ink);padding-top:14px}
.related h3{font:12px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mut);margin:0 0 14px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.rel-card{display:block;background:var(--card);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--rule);overflow:hidden;text-decoration:none;color:var(--ink);transition:.12s}
.rel-card:hover{box-shadow:5px 5px 0 var(--stamp);transform:translate(-1px,-1px)}
.rel-card .thumb{aspect-ratio:16/7;border-bottom:1.5px solid var(--ink)}
.rel-card span{display:block;padding:10px 13px 13px;font-size:13.5px;font-weight:600;line-height:1.4;font-family:var(--disp)}

.ftr{border-top:2px solid var(--ink);margin-top:60px;padding:22px 0;font-size:13.5px;color:var(--mut);background:var(--stripe)}
.ftr .fine{font:11px/1.6 var(--mono)}