:root{
  /* светлая тема (по умолчанию) */
  --accent:#5b7a9a;
  --accent-dark:#3d6a8a;
  --accent-rgb:91,122,154; /* тот же цвет, что --accent, но в виде "r,g,b" для полупрозрачных подложек */
  --text:#333;
  --muted:#888;
  --border:#eee;
  --surface:#ffffff;      /* фон "карточки" с текстом */
  --body-bg:#efeef1;      /* фон страницы вокруг карточки (пока картинка грузится / если её нет) */
  --body-bg-image: url('/assets/img/back.jpg');  /* сюда подставляется url('/assets/img/back.jpg') */

  /* Цвета бейджей статуса проекта — правьте пары "фон/текст" под свой вкус.
     Схема одинаковая во всех темах: ongoing = продолжается, completed = завершено, dropped = заброшено */
  --status-ongoing-bg:#e3edf5;
  --status-ongoing-text:#3d6a8a;
  --status-completed-bg:#e2f3e5;
  --status-completed-text:#2e7d4f;
  --status-dropped-bg:#fbe4e4;
  --status-dropped-text:#a3383a;
}

[data-theme="sepia"]{
  --accent:#8a5a2b;
  --accent-dark:#6b4520;
  --accent-rgb:138,90,43;
  --text:#4b3621;
  --muted:#8a7a63;
  --border:#e3d5b8;
  --surface:#f4ecd8;
  --body-bg:#e6d8b8;

  /* пастельные, под тон "бумаги" */
  --status-ongoing-bg:#ecdcc0;
  --status-ongoing-text:#8a5a2b;
  --status-completed-bg:#dde8c8;
  --status-completed-text:#5f7a3a;
  --status-dropped-bg:#f0d3c8;
  --status-dropped-text:#a15236;
}

[data-theme="dark"]{
  /* --accent используется для ссылок и акцентов
     по всему сайту, --accent-dark — вспомогательный (например, для бейджей). */
  --accent:#c49f60;
  --accent-dark:#e8c179;
  --accent-rgb:211,163,83;
  --text:#e4e4e6;
  --muted:#9a9aa2;
  --border:#3a3a40;
  --surface:#1c1c20;
  --body-bg:#101012;

  --status-ongoing-bg:#26384a;
  --status-ongoing-text:#8fc1e8;
  --status-completed-bg:#1f3a28;
  --status-completed-text:#7fd99a;
  --status-dropped-bg:#3a2323;
  --status-dropped-text:#e08787;
}

*{box-sizing:border-box}
html{overflow-x:hidden}
body{
  margin:0;
  font-family:Georgia, 'Times New Roman', serif;
  color:var(--text);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  position:relative;
  transition:color .2s ease;
}

/* Фон страницы отрисовываем отдельным фиксированным слоем позади всего контента.
   Это специально сделано через ::before + position:fixed, а не через
   background-attachment:fixed на body — тот вариант ломается в паре с
   overflow-x:hidden в большинстве браузеров. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-color:var(--body-bg);
  background-image:var(--body-bg-image);
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  transition:background-color .2s ease;
}

img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:visited{color:var(--accent)}
a:hover{text-decoration:underline}

/* page-shell — единая карточка на всю страницу: шапка, контент и футер лежат
   в одном общем блоке с одним фоном/тенью/скруглением, без разрывов между ними. */
.page-shell{
  max-width:1300px; /* было 900 */
  margin:20px auto;
  background:var(--surface);
  border-radius:12px;
  box-shadow:0 2px 24px rgba(0,0,0,.08);
  overflow:hidden;
}
.wrap{padding:0 clamp(14px, 4vw, 22px)}

.site-header{padding-top:20px;border-bottom:1px solid var(--border)}
.site-header .wrap{padding-bottom:16px;position:relative}

.theme-slider{
  position:absolute;
  top:12px;
  left:16px;
  display:inline-flex;
  align-items:center;
  background:var(--body-bg);
  border-radius:18px;
  padding:3px;
  width:96px;
  height:32px;
}
.theme-slider-opt{
  position:relative;
  z-index:1;
  flex:1;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:.85em;
  line-height:1;
  padding:4px 0;
  opacity:.55;
  transition:opacity .2s ease;
}
.theme-slider-opt.active{opacity:1}
.theme-slider-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:calc((100% - 6px) / 3);
  height:calc(100% - 6px);
  background:var(--surface);
  border-radius:14px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:transform .25s ease;
  z-index:0;
}

.logo{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:20px}
.logo-title{font-size:clamp(1.4rem, 5vw, 2.2rem);color:var(--accent);font-weight:bold;display:block}
.logo-tagline{color:var(--muted);font-style:italic;font-size:clamp(.85rem, 2.5vw, 1rem)}
.main-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px clamp(8px, 2vw, 14px);font-size:clamp(.75rem, 2vw, .9rem);letter-spacing:.05em;text-transform:uppercase;padding-bottom:0}
.main-nav a,
.main-nav a:visited{color:var(--muted);padding:2px 0;white-space:nowrap}
.main-nav > *:not(:last-child)::after{content:"•";margin-left:clamp(8px, 2vw, 14px);color:var(--muted);opacity:.4}

.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  padding-top:10px; /* невидимый буфер — часть наводимой области, без "мёртвой зоны" */
  z-index:20;
}
.nav-dropdown-menu-inner{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  padding:6px 0;
  min-width:180px;
  max-height:280px;
  overflow-y:auto;
  text-align:left;
}
.nav-dropdown-menu a{display:block;padding:6px 14px;text-transform:none;letter-spacing:normal;white-space:normal}
.nav-dropdown-menu a:hover{background:var(--body-bg)}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.content{padding:24px clamp(14px, 4vw, 22px)}

.feed-item{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}
.feed-cover{flex:0 0 auto;width:clamp(80px, 22vw, 120px)}
.feed-cover img{width:100%;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.feed-body{flex:1 1 220px;min-width:0}
.feed-title{margin:0 0 6px;font-size:clamp(1.05rem, 3vw, 1.3rem)}
.feed-meta{color:var(--muted);font-size:.85em;margin-bottom:8px}
.divider{border:none;border-top:1px dashed var(--border);margin:24px 0}
.continue-link{font-weight:bold}

.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.pagination a{padding:4px 10px;border:1px solid var(--border);border-radius:4px}
.pagination a.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(110px,30vw,140px),1fr));gap:20px}
.project-card {
    text-align: center;
    color: var(--text);
}
.project-card a {
    display: block;
    text-decoration: none;
}
.project-card a:hover {
    text-decoration: underline;
}
.project-card img{width:100%;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.project-card-title{margin-top:8px;font-weight:bold;word-break:break-word}
.project-card-status{display:inline-block;padding:1px 8px;border-radius:10px;font-size:.75em;margin-top:2px}

.project-header{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px;margin-bottom:24px}
/* Чтобы приподнять/опустить обложку на странице проекта относительно заголовка —
   меняйте margin-top ниже (сейчас 6px, можно смело подбирать на глаз) */
.project-cover{flex:0 0 auto;width:clamp(120px, 30vw, 200px);aspect-ratio:2/3;object-fit:cover;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.2);margin-top:10px}
.project-info{flex:1 1 240px;min-width:0}
.project-info h1{margin-top:0}
.project-status{display:inline-block;padding:2px 10px;border-radius:12px;font-size:.85em}

/* Цвета статуса берутся из переменных --status-*-bg/text, определённых для
   каждой темы в начале файла — правьте их там, а не здесь, если нужно
   поменять оттенки, чтобы это сразу применилось ко всем трём темам. */
.status-ongoing{background:var(--status-ongoing-bg);color:var(--status-ongoing-text)}
.status-completed{background:var(--status-completed-bg);color:var(--status-completed-text)}
.status-dropped{background:var(--status-dropped-bg);color:var(--status-dropped-text)}
.project-credits{color:var(--muted);font-size:.9em;margin:2px 0 0}
.project-alt-titles{color:var(--muted);font-size:.9em;margin:2px 0 0}
.download-links{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.download-links a{border:1px solid var(--accent);border-radius:4px;padding:3px 10px;white-space:nowrap}

.volume-title{border-bottom:2px solid var(--accent);display:inline-block;padding-bottom:2px}
.chapter-list{list-style:none;padding:0}
.chapter-list li{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.chapter-list li.chapter-read a{color:var(--muted)}
.chapter-list li.chapter-read a::before{content:"✓ ";color:var(--status-completed-text)}

.btn-continue-reading{
  display:inline-block;
  margin-top:12px;
  padding:6px 14px;
  border-radius:6px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
}
.btn-continue-reading[hidden]{display:none}
.btn-continue-reading:visited{color:#fff}
.btn-continue-reading:hover{background:var(--accent-dark);color:#fff;text-decoration:none}
.chapter-date{color:var(--muted);font-size:.85em;white-space:nowrap}

.chapter-breadcrumbs{margin-bottom:10px}
.chapter-meta{color:var(--muted);margin-bottom:20px}

.font-size-controls{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.font-size-label{color:var(--muted);font-size:.85em}
.font-size-buttons{
  display:inline-flex;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
}
.font-size-buttons button{
  border:none;
  border-right:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:6px 12px;
  cursor:pointer;
  font-family:inherit;
  font-size:.85em;
  line-height:1.2;
}
.font-size-buttons button:last-child{border-right:none}
#font-decrease{font-size:.9em}
#font-increase{font-size:1.05em;font-weight:bold}
.font-size-buttons button:hover:not(:disabled){background:var(--body-bg);color:var(--accent)}
.font-size-buttons button:disabled{opacity:.35;cursor:default}
.chapter-content{
  max-width:1080px; /* было 680 */
  margin:0 auto;
  font-size:clamp(1rem, 2.2vw, 1.15rem);
  line-height:1.8;
  word-wrap:break-word;
  overflow-wrap:break-word;
  hyphens:auto;
}
.chapter-content img{
  display:block;
  margin:1.5em auto;
  max-width:100%;
  height:auto;
}
.chapter-content p{margin:0 0 1.2em;text-indent:2em}
.chapter-content img{max-width:100%;height:auto}

.tnote{
  cursor:pointer;
  color:var(--accent);
  font-weight:bold;
  font-size:.8em;
  text-decoration:underline dotted;
  padding:0 1px;
  border-radius:3px;
  margin-left:1px;
  position:relative;
  user-select:none;
}
.tnote:hover{background:var(--body-bg)}
.tnote-popup{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translateX(-50%);
  margin-bottom:6px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  padding:8px 12px;
  font-size:.85rem;
  font-style:normal;
  font-weight:normal;
  line-height:1.4;
  text-indent:0;
  white-space:normal;
  width:max-content;
  max-width:240px;
  z-index:30;
}
.tnote-popup::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border-width:5px 5px 0 5px;
  border-style:solid;
  border-color:var(--border) transparent transparent transparent;
}

.chapter-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin:40px 0;
  padding:14px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.chapter-nav .prev{grid-column:1;justify-self:start;text-align:left}
.chapter-nav .up{grid-column:2;justify-self:center;text-align:center;white-space:nowrap}
.chapter-nav .next{grid-column:3;justify-self:end;text-align:right}

@media(max-width:480px){
  .chapter-nav{grid-template-columns:1fr;justify-items:center;text-align:center;gap:8px}
  .chapter-nav .prev,.chapter-nav .up,.chapter-nav .next{grid-column:1}
}

.comments{margin-top:40px}
.comment{border-bottom:1px solid var(--border);padding:12px 0}
.comment-author{font-weight:bold}
.comment-date{color:var(--muted);font-size:.8em}
.no-comments{color:var(--muted)}

.comment-admin{background:rgba(var(--accent-rgb),.08);border-radius:6px;padding:12px;border-bottom:none;margin-bottom:8px}
.role-badge{display:inline-block;color:#fff;font-size:.72em;font-weight:600;padding:1px 8px;border-radius:10px;vertical-align:middle;line-height:1.6}
.comment-actions{margin-top:4px}
.comment-actions a{font-size:.82em}
.comment-replies{margin:10px 0 0 20px;padding-left:14px;border-left:2px solid var(--border)}
.comment-replies .comment{border-bottom:none;padding:10px 0}

.comment-form-reply-note{background:#f0edf5;padding:8px 12px;border-radius:4px;margin:0}
.comment-form-admin-note{color:var(--muted);margin:0}

.popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.popup-overlay[hidden]{display:none}
.popup-box{background:var(--surface);color:var(--text);border-radius:8px;padding:24px;max-width:400px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.popup-box p{margin:0 0 16px}
.popup-box button{width:100%;background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:4px;cursor:pointer;font-size:16px}
.popup-box button:hover{background:var(--accent-dark)}

.comment-form{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.comment-form input, .comment-form textarea{
  font-family:inherit;
  font-size:16px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:4px;
  max-width:100%;
  width:100%;
  background:var(--surface);
  color:var(--text);
}
.comment-form button{align-self:flex-start;background:var(--accent);color:#fff;border:none;padding:8px 20px;border-radius:4px;cursor:pointer;font-size:16px}
.comment-form button:hover{background:var(--accent-dark)}
.form-error{color:#c0392b}
.hp-field{position:absolute;left:-9999px}

.site-footer{text-align:center;color:var(--muted);font-size:.85em;border-top:1px solid var(--border)}
.site-footer .wrap{padding-top:16px;padding-bottom:20px}

.social-links{display:flex;justify-content:center;gap:12px;margin-bottom:12px}

.back-to-top{
  position:fixed;
  bottom:20px;
  right:20px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:1.2em;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
  z-index:40;
}
.back-to-top:hover{color:var(--accent);border-color:var(--accent)}
.back-to-top[hidden]{display:none}
.footer-contact{margin:0 0 8px;font-size:.9em}
.footer-contact a{color:var(--muted)}
.social-icon,
.social-icon:visited{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--border);
  color:var(--muted);
  line-height:1;
  vertical-align:middle;
  text-decoration:none;
}
.social-icon:hover{
  color:var(--accent);
  border-color:var(--accent);
  text-decoration:none;
  background:rgba(var(--accent-rgb),0.08);
}
.social-icon-text{
    font-family: sans-serif;
    font-weight: bold;
    font-size: .8em;
    line-height: 1;
    transform: translate(0, 0.5px);
}
.social-icon svg {
    display: block;
}

.social-icon-tg svg {
    transform: translate(-1px, 1px);
}

.social-icon-mail svg {
    transform: translate(0, 0.5px);
}

.form-footnote {
    font-size: .85em;
    font-style: italic;
    color: var(--muted);
    margin: 4px 0 0;
}

.chapter-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 16px 0 20px;
}

.header-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px calc(-1 * clamp(14px, 4vw, 22px));
}
.contact-form label{display:flex;flex-direction:column;gap:4px;font-weight:600;margin-bottom:2px}
.field-group{position:relative}
.field-popup{
  position:absolute;
  top:100%;
  left:0;
  margin-top:6px;
  background:#c0392b;
  color:#fff;
  font-size:.8em;
  font-weight:normal;
  padding:6px 10px;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  z-index:5;
  max-width:280px;
}
.field-popup::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:14px;
  border-width:0 5px 5px 5px;
  border-style:solid;
  border-color:transparent transparent #c0392b transparent;
}
.form-success{color:#256029;background:rgba(37,96,41,.08);padding:12px 16px;border-radius:6px}

@media(max-width:600px){
  .feed-item, .project-header{flex-direction:column}
  .feed-cover, .project-cover{width:100%;max-width:200px}
  .project-header{text-align:center;align-items:center}
}

@media(max-width:360px){
  .project-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
}