/* Sol Salut — редакционная вёрстка: бумага, узкий гротеск, жёлтый маркер.
   Разметка и классы остаются вордпресс-подобными, меняется только оформление. */
:root{
  --paper:#FBFBF7;
  --ink:#1D1D1B;
  --rule:#DCDAD2;
  --muted:#6B6A64;
  --link:#2E4BC6;
  --marker:#FFE566;
  --rail:72px;
  --measure:34rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.75 "PT Serif",Georgia,serif;
}
h1,h2,h3,.brand-name,.note-title,.rail-title,.nav,.note-meta,.pager-num,.read-on{
  font-family:"Oswald","PT Sans Narrow",Arial Narrow,sans-serif;font-weight:500;
}
a{color:var(--link);text-decoration:none;background-image:linear-gradient(var(--marker),var(--marker));
  background-size:0 .55em;background-position:0 88%;background-repeat:no-repeat}
a:hover,a:focus-visible{background-size:100% .55em}
@media (prefers-reduced-motion:no-preference){a{transition:background-size .18s ease}}
:focus-visible{outline:2px solid var(--link);outline-offset:3px}
img{max-width:100%;height:auto}

/* ── корешок: имя сайта вертикально, как на кассете ── */
.shell{position:relative;min-height:100vh}
.shell::before{
  content:"";position:fixed;left:0;top:0;bottom:0;width:var(--rail);
  background:var(--ink);z-index:2;
}
.spine{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:3;
  display:flex;align-items:center;justify-content:center;
}
.spine a{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"Oswald",sans-serif;font-weight:600;font-size:22px;letter-spacing:.34em;
  color:var(--paper);background:none;text-transform:none;
}
.spine a:hover{background:none;color:var(--marker)}
.container{max-width:1180px;margin:0 auto;padding:0 32px}

.top{padding-left:var(--rail)}
.top-inner{padding-top:44px;padding-bottom:26px;border-bottom:3px solid var(--ink)}
.brand-name{margin:0;font-size:clamp(44px,7vw,84px);line-height:.94;letter-spacing:-.015em}
.brand-name a{color:var(--ink);background:none}
.brand-note{margin:10px 0 0;font-size:18px;color:var(--muted);font-style:italic;max-width:30rem}
.nav{margin-top:22px}
.nav .menu{display:flex;flex-wrap:wrap;gap:26px;list-style:none;margin:0;padding:0;
  font-size:15px;letter-spacing:.06em}
.nav a{color:var(--ink)}

.body{padding-left:var(--rail);display:grid;grid-template-columns:minmax(0,1fr) 15rem;
  gap:64px;max-width:1180px;margin:0 auto;padding-top:44px;padding-bottom:64px;padding-right:32px}
@media(max-width:900px){
  :root{--rail:0px}
  .shell::before,.spine{display:none}
  .body{grid-template-columns:1fr;gap:40px;padding-left:32px}
}

/* ── лента записей: первая запись крупная, остальные — списком ── */
article.note{padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--rule)}
.note-title{margin:0 0 10px;font-size:34px;line-height:1.08;letter-spacing:-.01em}
.note-title a{color:var(--ink);background-position:0 92%}
article.note:first-of-type .note-title{font-size:clamp(34px,5vw,54px)}
.note-meta{display:flex;flex-wrap:wrap;gap:22px;margin:0 0 14px;
  font-size:13px;letter-spacing:.08em;color:var(--muted)}
.note-meta a{color:var(--muted)}
.note-lead{max-width:var(--measure);color:#33332F}
.read-on{display:inline-block;margin-top:6px;font-size:14px;letter-spacing:.06em;color:var(--ink);
  border-bottom:2px solid var(--marker);background:none}
.read-on:hover{background:var(--marker)}

/* ── статья ── */
.note-body{max-width:var(--measure)}
.note-body > p:first-of-type::first-letter{
  float:left;font-family:"Oswald",sans-serif;font-weight:600;font-size:3.3em;line-height:.9;
  margin:.06em .14em 0 0;color:var(--ink);
}
@media(max-width:560px){.note-body > p:first-of-type::first-letter{font-size:2.8em}}
.note-body h2{font-size:26px;line-height:1.2;margin:2.2em 0 .6em}
.note-body h3{font-size:20px;margin:1.8em 0 .5em}
.note-body p{margin:0 0 1.15em}
.note-body ul,.note-body ol{padding-left:1.2em;max-width:var(--measure)}
.note-body li{margin-bottom:.5em}
.note-body li::marker{color:var(--muted)}
.note-body blockquote{margin:1.6em 0;padding:.2em 0 .2em 1.2em;border-left:6px solid var(--marker);
  font-size:19px;color:#33332F}
.note-body table{border-collapse:collapse;width:100%;margin:1.6em 0;font-size:15px}
.note-body th,.note-body td{border-bottom:1px solid var(--rule);padding:10px 12px;text-align:left}
.note-tags{margin-top:28px;font-size:13px;letter-spacing:.06em;color:var(--muted)}
.head{margin-bottom:28px;border-bottom:3px solid var(--ink);padding-bottom:12px}
.head-title{margin:0;font-size:clamp(32px,5vw,50px);line-height:1.02}

/* ── боковая колонка: указатель, а не набор карточек ── */
.rail{font-size:15px}
.rail-item{margin-bottom:34px}
.rail-title{margin:0 0 12px;font-size:13px;letter-spacing:.14em;color:var(--muted);
  border-bottom:1px solid var(--rule);padding-bottom:6px}
.rail-item ul{list-style:none;margin:0;padding:0}
.rail-item li{padding:7px 0;line-height:1.4}
.rail-item a{color:var(--ink)}
.rail-item .count{color:var(--muted);font-size:13px}
.find{display:flex;flex-wrap:wrap;gap:8px}
.find-input{flex:1 1 100%;padding:9px 10px;border:1px solid var(--rule);background:#fff;
  font:15px/1.4 "PT Serif",Georgia,serif}
.find-go{padding:9px 16px;border:0;background:var(--ink);color:var(--paper);
  font-family:"Oswald",sans-serif;letter-spacing:.08em;font-size:14px;cursor:pointer}
.find-go:hover{background:var(--link)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags a{padding:3px 9px;border:1px solid var(--rule);font-size:13px;background:#fff}
.tags a:hover{border-color:var(--ink);background:var(--marker)}

/* ── пагинация и подвал ── */
.pager{margin-top:8px}
.pager-list{display:flex;gap:10px;font-size:15px}
.pager-num{min-width:40px;padding:8px 12px;border:1px solid var(--rule);text-align:center;
  background:#fff;color:var(--ink)}
.pager-num.is-now{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.index-list{list-style:none;padding:0;margin:0}
.index-list li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;
  border-bottom:1px solid var(--rule)}
.index-date{color:var(--muted);font-size:13px;white-space:nowrap}
.lead{max-width:var(--measure);font-size:19px;color:#33332F;margin-bottom:34px}
.bottom{padding-left:var(--rail);border-top:3px solid var(--ink);background:#F4F2EC}
.bottom .container{padding-top:26px;padding-bottom:34px;font-size:14px;color:var(--muted)}
.bottom p{margin:5px 0;max-width:46rem}
.bottom a{color:var(--ink)}
.disclaimer{font-size:13px}
