/* ===================================================================
   ОФОРМЛЕНИЕ САЙТА «ИНЖЕНЕР СМЫСЛОВ»
   Тёплая, строгая палитра. Светлая и тёмная темы. Адаптивная вёрстка.
   =================================================================== */

/* --- Шрифты (загружаются локально, без зарубежных серверов) --- */
@font-face { font-family:'PT Serif'; src:url('../fonts/PTSerif-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PT Serif'; src:url('../fonts/PTSerif-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PT Serif'; src:url('../fonts/PTSerif-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'PT Sans'; src:url('../fonts/PTSans-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'PT Sans'; src:url('../fonts/PTSans-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'PT Sans'; src:url('../fonts/PTSans-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* --- Переменные: размеры, отступы, цвета --- */
:root {
  --font-display: 'PT Serif', Georgia, serif;
  --font-body: 'PT Sans', 'Segoe UI', sans-serif;

  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.12rem);
  --text-lg: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.6rem, 1.25rem + 1.4vw, 2.4rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-full:9999px;
  --content-narrow:680px; --content-default:920px;
  --sidebar-w:280px; --header-h:64px;
  --transition: 180ms cubic-bezier(.16,1,.3,1);
}

:root, [data-theme="light"] {
  --color-bg:#f5f2ea;
  --color-surface:#fbf9f3;
  --color-surface-2:#efebe0;
  --color-border:#ddd6c7;
  --color-divider:#e6e0d2;
  --color-text:#23211c;
  --color-text-muted:#6b675c;
  --color-text-faint:#a7a293;
  --color-primary:#7a3f1d;       /* тёплая охра-терракота */
  --color-primary-hover:#5d2f14;
  --color-primary-soft:#ece0d3;
  --shadow-sm:0 1px 2px rgba(60,45,25,.07);
  --shadow-md:0 4px 16px rgba(60,45,25,.10);
}

[data-theme="dark"] {
  --color-bg:#1a1814;
  --color-surface:#211e19;
  --color-surface-2:#27241e;
  --color-border:#3a352c;
  --color-divider:#2c2823;
  --color-text:#e6e1d6;
  --color-text-muted:#9c968a;
  --color-text-faint:#6a655b;
  --color-primary:#d29a6b;
  --color-primary-hover:#e0ad80;
  --color-primary-soft:#332b22;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#1a1814; --color-surface:#211e19; --color-surface-2:#27241e;
    --color-border:#3a352c; --color-divider:#2c2823; --color-text:#e6e1d6;
    --color-text-muted:#9c968a; --color-text-faint:#6a655b;
    --color-primary:#d29a6b; --color-primary-hover:#e0ad80; --color-primary-soft:#332b22;
  }
}

/* --- База --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth;
       scroll-padding-top:calc(var(--header-h) + var(--space-4)); }
body {
  min-height:100dvh; line-height:1.65; font-family:var(--font-body);
  font-size:var(--text-base); color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video { display:block; max-width:100%; height:auto; }
a { color:var(--color-primary); text-decoration:none; }
a:hover { color:var(--color-primary-hover); text-decoration:underline; }
button { cursor:pointer; background:none; border:none; font:inherit; color:inherit;
         transition:background var(--transition), color var(--transition), border-color var(--transition); }
ul[role="list"] { list-style:none; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.2; text-wrap:balance; }
p,li { text-wrap:pretty; }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:2px; border-radius:var(--radius-sm); }
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.01ms!important; scroll-behavior:auto!important; } }

.skip-link { position:absolute; left:-999px; top:0; background:var(--color-primary);
  color:#fff; padding:var(--space-2) var(--space-4); z-index:100; border-radius:0 0 var(--radius-md) 0; }
.skip-link:focus { left:0; }

/* --- Шапка --- */
.site-header {
  position:sticky; top:0; z-index:40; height:var(--header-h);
  background:color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--color-border);
}
.header-inner { height:100%; display:flex; align-items:center; gap:var(--space-3);
  padding:0 var(--space-4); max-width:1400px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:var(--space-3); color:var(--color-text);
  text-decoration:none; margin-right:auto; }
.brand:hover { text-decoration:none; }
.brand-mark { color:var(--color-primary); display:flex; }
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-title { font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); }
.brand-tagline { font-size:var(--text-xs); color:var(--color-text-muted); }
.menu-toggle { display:none; padding:var(--space-2); border-radius:var(--radius-sm); color:var(--color-text); }
.menu-toggle:hover { background:var(--color-surface-2); }
.theme-toggle { display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-full); color:var(--color-text); }
.theme-toggle:hover { background:var(--color-surface-2); }

/* --- Раскладка: меню + контент --- */
.layout { display:grid; grid-template-columns:var(--sidebar-w) 1fr;
  max-width:1400px; margin:0 auto; align-items:start; }
.sidebar {
  position:sticky; top:var(--header-h); align-self:start;
  height:calc(100dvh - var(--header-h)); overflow-y:auto;
  padding:var(--space-6) var(--space-4); border-right:1px solid var(--color-border);
}
.nav-list { display:flex; flex-direction:column; gap:var(--space-4); }
.nav-topic-title { display:block; font-family:var(--font-display); font-weight:700;
  font-size:var(--text-base); color:var(--color-text); padding:var(--space-1) 0; }
.nav-topic-title:hover { color:var(--color-primary); text-decoration:none; }
.nav-chapters { list-style:none; margin-top:var(--space-2);
  padding-left:var(--space-3); border-left:2px solid var(--color-divider);
  display:flex; flex-direction:column; gap:var(--space-1); }
.nav-chapters a { display:block; font-size:var(--text-sm); color:var(--color-text-muted);
  padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); }
.nav-chapters a:hover { color:var(--color-primary); background:var(--color-primary-soft); text-decoration:none; }
.sidebar-overlay { display:none; }

/* --- Контент --- */
.content { padding:var(--space-8) var(--space-6) var(--space-16);
  width:100%; min-width:0; max-width:calc(var(--content-default) + var(--space-12)); }
.breadcrumb { font-size:var(--text-sm); color:var(--color-text-muted);
  margin-bottom:var(--space-6); }
.breadcrumb a { color:var(--color-text-muted); }
.breadcrumb a:hover { color:var(--color-primary); }

/* Главная: hero */
.hero { padding:var(--space-10) 0 var(--space-8); border-bottom:1px solid var(--color-divider);
  margin-bottom:var(--space-10); }
.hero-title { font-size:var(--text-2xl); font-weight:700; letter-spacing:-.01em; }
.hero-tagline { font-size:var(--text-lg); color:var(--color-text-muted);
  margin-top:var(--space-3); font-style:italic; max-width:40ch; }

.page-title { font-size:var(--text-xl); margin-bottom:var(--space-3); }
.page-lead { color:var(--color-text-muted); font-size:var(--text-lg);
  margin-bottom:var(--space-8); max-width:60ch; }
.section-heading { font-size:var(--text-lg); margin:var(--space-10) 0 var(--space-5);
  padding-bottom:var(--space-2); border-bottom:1px solid var(--color-divider); }
.section-heading:first-child { margin-top:0; }

/* Карточки-списки */
.card-list { display:grid; gap:var(--space-4);
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); }
.card { list-style:none; }
.card-link { display:block; height:100%; padding:var(--space-5) var(--space-6);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.card-link:hover { text-decoration:none; border-color:var(--color-primary);
  box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-title { display:block; font-family:var(--font-display); font-weight:700;
  font-size:var(--text-lg); color:var(--color-text); }
.card-desc { margin-top:var(--space-2); font-size:var(--text-sm); color:var(--color-text-muted); }

/* --- Статья --- */
.article { max-width:var(--content-narrow); }
.article-meta { font-size:var(--text-sm); color:var(--color-text-faint);
  margin-bottom:var(--space-6); }
.article h1 { font-size:var(--text-xl); margin-bottom:var(--space-6); }
.article h2 { font-size:var(--text-lg); margin:var(--space-10) 0 var(--space-4); }
.article h3 { font-size:var(--text-base); font-weight:700; margin:var(--space-6) 0 var(--space-3); }
.article p { margin:var(--space-4) 0; }
.article ul,.article ol { margin:var(--space-4) 0; padding-left:var(--space-6); }
.article li { margin:var(--space-2) 0; }
.article a { text-decoration:underline; text-underline-offset:.15em; }
.article img { margin:var(--space-6) 0; border-radius:var(--radius-md);
  border:1px solid var(--color-border); }
.article blockquote { margin:var(--space-6) 0; padding:var(--space-3) var(--space-5);
  border-left:3px solid var(--color-primary); background:var(--color-surface);
  color:var(--color-text-muted); font-style:italic; border-radius:0 var(--radius-md) var(--radius-md) 0; }
.article code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em;
  background:var(--color-surface-2); padding:.1em .35em; border-radius:var(--radius-sm); }
.article pre { margin:var(--space-6) 0; padding:var(--space-4); overflow:auto;
  background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.article pre code { background:none; padding:0; }
.article hr { border:none; border-top:1px solid var(--color-divider); margin:var(--space-10) 0; }
.article table { width:100%; border-collapse:collapse; margin:var(--space-6) 0; font-size:var(--text-sm); }
.article th,.article td { border:1px solid var(--color-border); padding:var(--space-2) var(--space-3); text-align:left; }
.article th { background:var(--color-surface-2); }

/* --- Реакции --- */
.reactions { margin-top:var(--space-12); padding-top:var(--space-8);
  border-top:1px solid var(--color-divider); max-width:var(--content-narrow); }
.reactions-title { font-size:var(--text-base); font-weight:700; color:var(--color-text-muted);
  margin-bottom:var(--space-4); font-family:var(--font-body); }
.reaction-buttons { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.reaction-btn { display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-4); border:1px solid var(--color-border);
  border-radius:var(--radius-full); background:var(--color-surface);
  font-size:var(--text-sm); color:var(--color-text); }
.reaction-btn:hover { border-color:var(--color-primary); background:var(--color-primary-soft); }
.reaction-btn.is-active { border-color:var(--color-primary); background:var(--color-primary);
  color:#fff; }
.reaction-btn.is-active .reaction-count { background:rgba(255,255,255,.25); }
.reaction-count { display:inline-flex; min-width:1.6em; justify-content:center;
  padding:0 .4em; font-weight:700; font-size:var(--text-xs);
  background:var(--color-surface-2); border-radius:var(--radius-full); }
.reactions-note { margin-top:var(--space-4); font-size:var(--text-sm); color:var(--color-text-faint); }

/* --- Подвал --- */
.site-footer { border-top:1px solid var(--color-border); background:var(--color-surface);
  margin-top:var(--space-20); }
.footer-inner { max-width:1400px; margin:0 auto; padding:var(--space-8) var(--space-6);
  display:flex; flex-direction:column; gap:var(--space-2); }
.footer-brand { font-family:var(--font-display); font-weight:700; }
.footer-contact,.footer-copy { font-size:var(--text-sm); color:var(--color-text-muted); }

/* --- Адаптив: телефоны и планшеты --- */
@media (max-width:880px) {
  .menu-toggle { display:flex; }
  .layout { grid-template-columns:1fr; }
  .sidebar {
    position:fixed; top:var(--header-h); left:0; z-index:35;
    width:min(86vw, var(--sidebar-w)); height:calc(100dvh - var(--header-h));
    background:var(--color-surface); transform:translateX(-100%);
    transition:transform var(--transition); box-shadow:var(--shadow-md);
  }
  .sidebar.is-open { transform:translateX(0); }
  .sidebar-overlay.is-open { display:block; position:fixed; inset:var(--header-h) 0 0 0;
    z-index:30; background:rgba(0,0,0,.4); }
  .content { padding:var(--space-6) var(--space-4) var(--space-12); }
  .brand-tagline { display:none; }
}
@media (max-width:480px) {
  .card-list { grid-template-columns:1fr; }
}