/* ====== БАЗА (ч/б) ==================================================== */
:root{
  --wrap: 980px;
  --page-bg: #fcfcfc;
  --page-fg: #111111;
  --muted-fg: #3f3f3f;
  --accent: #111111;          /* без цвета: чёрный/почти чёрный */
  --border: #e5e5e5;
  --card: #ececec;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --page-bg: #0f0f10;
    --page-fg: #eeeeee;
    --muted-fg: #e2e1e1;
    --accent: #f0f0f0;        /* светлый вместо цвета */
    --border: #2a2a2a;
    --card: #151515;
    --shadow: 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--page-fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  text-rendering:optimizeLegibility;
  min-height: 100vh;
  display: flex;
  justify-content: center;  /* по горизонтали */
  align-items: center;      /* по вертикали */
}


#app {
  max-width: 780px;
  width: 100%;
  margin: 12px auto;        /* центрирование */
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  box-sizing: border-box;
}



/* Центровка общая для всех секций/хедера/футера */
header, section, footer{
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 16px;
}

/* Заголовки и текст */
h1,h2,h3{
  line-height:1.25; 
  margin:0 0 .4em;
}
h1{font-size: clamp(28px, 4vw, 42px); text-align:center;  }
h2{font-size: clamp(22px, 3vw, 30px); text-align:center}
h3{font-size: clamp(18px, 2.5vw, 24px); text-align:center}

p, li{font-size:1rem}
.usf{
    color:var(--muted-fg);
		text-indent: 1.5em;
		margin: 0;
		text-align: justify;

}
.ital { 
    color:var(--muted-fg);
		text-indent: 1.5em;
		margin: 0;
		text-align: justify;
     font-style: italic
}
P.prim { 
     color:var(--muted-fg);
     margin-right: 0%; 
     margin-left: 5pt; 
     margin-top: 0.1em; 
     text-indent: 1.5em;
     text-align: justify;
     font-size: 70%; 
     }
P.otk { 
    color:var(--muted-fg);
     margin-right: 3%; 
     margin-top: 0.1em; 
     text-indent: 1.5em;
     text-align: justify;
     }
P.podp{ 
     color:var(--muted-fg);
     font-weight:bold;
     margin-right: 3%; 
     margin-top: 1.5em; 
     text-align: justify;
     }

/* Ссылки: ч/б и подчёркнуты для понятности */
a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}
a:hover{ background: var(--card) }

/* Навигация */
nav{
  text-align:center;
  margin-top: 10px;
}
nav a{padding: 4px 8px; border-radius:8px}
nav a:hover{background:var(--card)}

/* Герой-блок */
.hero{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.hero .grid{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.hero img{
  width:320px; max-width:100%; border-radius:12px
}
.hero .cta{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center
}

/* Кнопки и формы (без цвета) */
button, .btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--page-fg);
  cursor:pointer;
}
button:hover, .btn:hover{background:var(--card)}
input[type="email"]{
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  width:min(420px,100%);
}


/* Списки + блокквоты */
section > ul{max-width: 780px; margin: 0 auto}
blockquote{
  max-width: 780px; margin: 12px auto;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 12px; padding: 12px 14px;
}


/* Витрина книг */
#books ul{list-style: none; padding:0; margin: 10px auto; max-width:780px}
#books li{
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--border);
}
#books li:last-child{border-bottom:0}
.meta{font-size:.85rem; color:var(--muted-fg)}
.meta--soon{color:#555}                 /* вместо красного — серый */
@media (prefers-color-scheme: dark){
  .meta--soon{color:#c9c9c9}
}

/* Об авторе */
#about .grid{
  display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start;
}
#about img{width:260px; max-width:100%; border-radius:12px}

/* Футер */
footer{
  text-align:center;
  color:var(--muted-fg);
  border-top:1px solid var(--border);
  margin-top: 24px;
}

/* Совместимость с <font> в существующих файлах */
font[size="-2"]{font-size: .85rem; color:var(--muted-fg)}
font[color="red"]{color:#555}          /* ч/б замена красного */

/* ====== СТРАНИЦЫ ЧТЕНИЯ (ГЛАВА) ====================================== */
.reader{
  max-width: 68ch;
  margin: 0 auto;
  padding: 24px 16px;
}
.reader h1.chapter-title{
  text-align:center;
  font-family: Georgia,"Times New Roman",Times,serif;
  font-weight:700;
  letter-spacing:.3px;
  margin-bottom:.4em;
}
.reader .chapter-subtitle{
  text-align:center; color:var(--muted-fg); margin:-.3em 0 1.2em;
}
.reader article{
  font-family: Georgia,"Times New Roman",Times,serif;
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.75;
  hyphens: auto;
}
.reader p{margin: .8em 0}
.reader .lead{ font-size: 1.07em }
.reader .dropcap:first-letter{
  float:left; font-size:3.2em; line-height:.9; padding-right:.08em; padding-top:.02em; font-weight:700;
}
.reader .scene-break{ text-align:center; margin: 1.6em 0; opacity:.6 }
.reader .epigraph{
  font-style: italic; color: var(--muted-fg);
  border-left: 3px solid var(--border);
  padding-left: 12px; margin: .6em 0 1.2em;
}
.reader .reading-nav{
  display:flex; justify-content:space-between; gap:10px;
  margin-top: 22px; border-top:1px solid var(--border); padding-top:14px;
}
.reader .reading-nav a{white-space:nowrap}

/* Графика: Ч/Б. Удалите строку ниже, если обложки должны остаться цветными. */
/* img, video{ filter: grayscale(100%); } */

/* Небольшие улучшения */
img{max-width:100%; height:auto}
hr{border:0; border-top:1px solid var(--border); margin: 16px 0}

/* Выделение текста — тоже ч/б */
::selection{ background: rgba(0,0,0,.18) }
@media (prefers-color-scheme: dark){
  ::selection{ background: rgba(255,255,255,.18) }
}

/* ===== Мастхед: h1 слева, фото справа ===== */
.masthead{ text-align:center; padding-top:24px }
.masthead-top{
  display:flex; align-items:center; justify-content:center; gap:16px 24px; flex-wrap:wrap;
}
.masthead-text h1{ margin-bottom:.2em }
.masthead-text .usf{ margin-top:0 }

/* Фото справа */
.author-photo{
  width:min(22vw, 200px);
  height:auto;
  border-radius:12px;
  object-fit:cover;
  box-shadow: var(--shadow);
  border:1px solid var(--border);
}

/* Навигация под строкой заголовок+фото */
.masthead nav{ margin-top:10px }

/* На узких экранах складываем в колонку */
@media (max-width: 560px){
  .masthead-top{ flex-direction:column }
}

/* ===== Решётка книг (карточки с обложками) ===== */
.books{padding-top:8px}
.books-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  max-width: var(--wrap);
  margin: 10px auto 0;
}
.book-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  text-align:center;
}
.book-card .cover{
  width:50%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03));
}
.book-title{ margin:.6em 0 .2em; font-size:1rem; line-height:1.3 }
.book-meta{ font-size:.85rem; color:var(--muted-fg) }
.book-card.soon .book-meta{ color:#555 }
@media (prefers-color-scheme: dark){
  .book-card.soon .book-meta{ color:#c9c9c9 }
}

/* Кнопки под обложкой */
.book-links{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:8px;
}
.btn-sm{ padding:8px 10px; font-size:.9rem; border-radius:10px }

/* Шире на очень узких экранах */
@media (max-width:420px){
  .book-links .btn{ flex:1 1 140px; text-align:center }
}

/* Компактный архив-блок на главной */
.read-min{
  text-align:center;
  padding: 8px 16px;
}

.cover-img {
  display: block;
  margin: auto;
  width: 50%;
}

/* ===== OVERRIDES: blockquote uses the same background as body, for all schemes ===== */
blockquote { background: inherit !important; }