:root{
  --paper:#FEFAF3;
  --sepia:#8A6A58;
  --sepia-dark:#5F473B;
  --warm:#7A5C4C;
  --gold:#9C6B3F;
  --highlight:#D8C29A;
  --graphite:#3F3A34;

  --border: rgba(63,58,52,.18);
  --shadow: rgba(63,58,52,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--paper);
  color: var(--graphite);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Лёгкая “бумажная” фактура (почти незаметно) */
  background-image:
    radial-gradient(rgba(63,58,52,.035) 1px, transparent 1px);
  background-size: 18px 18px;
}

a{color:var(--sepia); text-decoration:none}
a:hover{color:var(--sepia-dark); text-decoration:underline}

.wrap{max-width: 1160px; margin: 0 auto; padding: 0 16px}

.topbar{
  border-bottom:1px solid var(--border);
  background: rgba(254,250,243,.88);
  backdrop-filter: blur(2px);
}
.topbar .wrap{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
}
.brand__title{
  font-weight:700;
  letter-spacing:.2px;
  color: var(--sepia-dark);
}
.brand__sub{
  font-size:13px;
  color: rgba(63,58,52,.72);
  margin-top:2px;
}
.header-slot{
  min-width: 220px;
  text-align:right;
}

.pagehead{margin:16px auto 0}

.layout{
  display:grid;
  grid-template-columns: 280px minmax(0,1fr) 280px;
  gap:16px;
  padding:16px 0 24px;
}
@media (max-width: 1060px){
  .layout{grid-template-columns: 1fr; }
  .header-slot{display:none}
}

.card{
  background: rgba(254,250,243,.92);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 6px 18px var(--shadow);
  padding: 14px 14px;
  position:relative;
}

/* “следы печати” — очень мягко */
.card:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  pointer-events:none;
  background:
    linear-gradient(transparent, rgba(63,58,52,.02)),
    repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(63,58,52,.012) 23px);
  opacity:.6;
}

.h1{margin:0; font-size: 22px; color: var(--sepia-dark)}
.h2{margin:0 0 8px; font-size: 17px; color: var(--sepia-dark)}
.p{margin:0 0 10px}
.subtitle{margin:6px 0 0; color: rgba(63,58,52,.72)}

.sidebar-title{
  font-weight:700;
  color: var(--sepia-dark);
  margin-bottom:10px;
}

.side-nav{display:flex; flex-direction:column; gap:6px}
.side-link{
  display:block;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background: rgba(254,250,243,.7);
}
.side-link:hover{background: rgba(216,194,154,.25)}
.side-link.is-active{
  border-color: rgba(156,107,63,.45);
  background: rgba(216,194,154,.28);
}

.content .card{margin-bottom:16px}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 560px){
  .grid2{grid-template-columns:1fr}
}

.btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(156,107,63,.45);
  background: rgba(216,194,154,.25);
  color: var(--sepia-dark);
  text-align:center;
}
.btn:hover{background: rgba(216,194,154,.36); text-decoration:none}

.slot{
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed rgba(63,58,52,.25);
  color: rgba(63,58,52,.70);
  background: rgba(254,250,243,.6);
  margin:8px 0;
}
.slot-mini{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px dashed rgba(63,58,52,.25);
  color: rgba(63,58,52,.72);
  background: rgba(254,250,243,.65);
  font-size:12px;
}

.list{margin:0; padding-left:18px; color: rgba(63,58,52,.86)}
.muted{color: rgba(63,58,52,.70); font-size: 13px}

.footer{
  border-top:1px solid var(--border);
  padding:18px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 260px;
  gap:16px;
}
@media (max-width: 900px){
  .footer-grid{grid-template-columns:1fr}
}
.footer-title{
  font-weight:700;
  color: var(--sepia-dark);
  margin-bottom:8px;
}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(63,58,52,.22);
  background: rgba(216,194,154,.22);
  color: var(--sepia-dark);
  font-size:13px;
}
code{
  padding:2px 6px;
  border-radius:8px;
  background: rgba(216,194,154,.18);
  border:1px solid rgba(63,58,52,.14);
}

.mini-link{
  display:inline-block;
  margin-top:8px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(63,58,52,.18);
  background: rgba(254,250,243,.7);
}
.mini-link:hover{background: rgba(216,194,154,.25); text-decoration:none}

.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(63,58,52,.22);
  background: rgba(216,194,154,.22);
  color: var(--sepia-dark);
  font-size:13px;
}
code{
  padding:2px 6px;
  border-radius:8px;
  background: rgba(216,194,154,.18);
  border:1px solid rgba(63,58,52,.14);
}
.mini-link{
  display:inline-block;
  margin-top:8px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(63,58,52,.18);
  background: rgba(254,250,243,.7);
}
.mini-link:hover{background: rgba(216,194,154,.25); text-decoration:none}

.widget{padding:14px; border:1px solid rgba(63,58,52,.16); border-radius:16px; background: rgba(254,250,243,.7); margin-bottom:12px}
.widget-title{font-weight:700; color: var(--sepia-dark); margin-bottom:10px}
.widget-text{font-size:14px}
.mini-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.mini-meta{font-size:12px; opacity:.85}
.mini-text{font-size:13px; line-height:1.35}

a.pick{display:inline-block; margin:2px 6px 2px 0; padding:3px 8px; border-radius:999px; border:1px solid rgba(63,58,52,.18); background: rgba(216,194,154,.18); font-size:12px}
a.pick:hover{text-decoration:none; background: rgba(216,194,154,.30)}