/*
Theme Name: Solo-Man Blog
Theme URI: https://soloman.digital
Author: Solo-Man Digital
Author URI: https://web-river.com
Description: Мінімалістична тема для блогу Solo-Dō. Японська філософія, крафт, усвідомлене чоловіче життя.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: solo-man
*/

/* ===== VARIABLES ===== */
:root {
  --bg-warm: #F5F0EB;
  --bg-dark: #1A1A1A;
  --bg-mid: #E8E0D8;
  --accent: #8B4513;
  --accent2: #2F4F4F;
  --gold: #B8860B;
  --text: #2C2C2C;
  --text-secondary: #6B6560;
  --border: #D4C9BE;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-accent: 'Crimson Pro', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'DM Sans', sans-serif;
  --font-jp: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;
}

/* cormorant-garamond-regular - cyrillic_latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/cormorant-garamond-v21-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* cormorant-garamond-italic - cyrillic_latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 400;
	src: url('assets/fonts/cormorant-garamond-v21-cyrillic_latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* cormorant-garamond-600 - cyrillic_latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	src: url('assets/fonts/cormorant-garamond-v21-cyrillic_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* cormorant-garamond-600italic - cyrillic_latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 600;
	src: url('assets/fonts/cormorant-garamond-v21-cyrillic_latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* cormorant-garamond-700 - cyrillic_latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/cormorant-garamond-v21-cyrillic_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* crimson-pro-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/crimson-pro-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* crimson-pro-italic - latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 400;
	src: url('assets/fonts/crimson-pro-v28-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* crimson-pro-600 - latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Crimson Pro';
	font-style: normal;
	font-weight: 600;
	src: url('assets/fonts/crimson-pro-v28-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* crimson-pro-600italic - latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Crimson Pro';
	font-style: italic;
	font-weight: 600;
	src: url('assets/fonts/crimson-pro-v28-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

 /* dm-sans-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* dm-sans-500 - latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	src: url('assets/fonts/dm-sans-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* dm-sans-600 - latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 600;
	src: url('assets/fonts/dm-sans-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

/* noto-serif-jp-regular - japanese_latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/noto-serif-jp-v33-japanese_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* noto-serif-jp-700 - japanese_latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Noto Serif JP';
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/noto-serif-jp-v33-japanese_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

/* source-serif-4-regular - cyrillic_latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/source-serif-4-v14-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* source-serif-4-italic - cyrillic_latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Serif 4';
	font-style: italic;
	font-weight: 400;
	src: url('assets/fonts/source-serif-4-v14-cyrillic_latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 /* source-serif-4-600 - cyrillic_latin */
 @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Source Serif 4';
	font-style: normal;
	font-weight: 600;
	src: url('assets/fonts/source-serif-4-v14-cyrillic_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg-warm);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ===== NAV ===== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(245, 240, 235, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: all 0.4s ease;
}
.site-nav.scrolled {
  background: rgba(245, 240, 235, 0.97);
  box-shadow: 0 2px 30px rgba(0,0,0,0.06);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.nav-logo {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--text); display: flex; align-items: center; gap: 0.5rem;
}
.nav-logo .kanji {
  font-family: var(--font-jp); font-size: 1.2rem; color: var(--accent); opacity: 0.8;
}
.nav-menu { display: flex; gap: 1.1rem; align-items: center; }
.nav-menu a {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500;
  color: var(--text-secondary); letter-spacing: 0.04em;
  text-transform: uppercase; transition: color 0.3s;
  position: relative;
}
.nav-menu a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1.5px;
  background: var(--accent); transition: width 0.3s;
}
.nav-menu a:hover { color: var(--accent); }
.nav-menu a:hover::after { width: 100%; }
.nav-menu a.current-menu-item { color: var(--accent); }
.nav-cta {
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
  background: var(--accent); color: #fff !important;
  padding: 0.5rem 1.2rem; border-radius: 2px; letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav-cta:hover { background: var(--gold); }
.nav-cta::after { display: none !important; }

/* Mobile menu */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 30px; height: 20px; position: relative; z-index: 101;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; background: var(--text);
  transition: all 0.3s; position: absolute; left: 0;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.nav-toggle.active span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ===== HERO ===== */
.hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; background: var(--bg-dark);
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(139,69,19,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, rgba(47,79,79,0.1) 0%, transparent 50%);
}
.hero-grain {
  position: absolute; inset: 0; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 256px;
}
.hero-content {
  position: relative; z-index: 2; text-align: center;
  padding: 2rem; max-width: 800px;
}
.hero-kanji {
  font-family: var(--font-jp); font-size: clamp(4rem, 10vw, 8rem);
  color: var(--accent); opacity: 0.9; line-height: 1.1;
  margin-bottom: 1rem; letter-spacing: 0.1em;
  animation: fadeUp 1.2s ease-out;
}
.hero-title {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4rem);
  color: #F5F0EB; font-weight: 700; letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  animation: fadeUp 1.2s ease-out 0.2s both;
}
.hero-divider {
  width: 60px; height: 1.5px; background: var(--accent); margin: 0 auto 1.5rem;
  animation: fadeUp 1.2s ease-out 0.3s both;
}
.hero-subtitle {
  font-family: var(--font-accent); font-size: clamp(1rem, 2vw, 1.3rem);
  color: rgba(245,240,235,0.6); font-style: italic;
  margin-bottom: 2.5rem; letter-spacing: 0.02em;
  animation: fadeUp 1.2s ease-out 0.4s both;
}
.hero-btn {
  display: inline-block; font-family: var(--font-ui); font-size: 0.85rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bg-warm); background: transparent;
  border: 1.5px solid var(--accent); padding: 0.9rem 2.5rem;
  transition: all 0.4s;
  animation: fadeUp 1.2s ease-out 0.6s both;
}
.hero-btn:hover { background: var(--accent); color: #fff !important; }
.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  animation: float 3s ease-in-out infinite;
}
.hero-scroll span {
  display: block; width: 1px; height: 40px; background: rgba(245,240,235,0.3);
  margin: 0 auto 0.5rem;
}
.hero-scroll small {
  font-family: var(--font-ui); font-size: 0.65rem; color: rgba(245,240,235,0.3);
  letter-spacing: 0.15em; text-transform: uppercase;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* ===== SECTIONS COMMON ===== */
.section-header { text-align: center; margin-bottom: 4rem; }
.section-kanji {
  font-family: var(--font-jp); font-size: 2rem; color: var(--accent);
  opacity: 0.5; margin-bottom: 0.5rem;
}
.section-title {
  font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700; color: var(--text); margin-bottom: 0.5rem;
}
.section-line {
  width: 40px; height: 1.5px; background: var(--accent); margin: 1rem auto 0;
}

/* ===== PILLARS ===== */
.pillars-section { padding: 6rem 2rem; max-width: 1200px; margin: 0 auto; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.pillar {
  text-align: center; padding: 2.5rem 1.5rem;
  border: 1px solid transparent; transition: all 0.4s;
}
.pillar:hover { border-color: var(--border); }
.pillar-icon {
  font-family: var(--font-jp); font-size: 2.5rem; color: var(--accent);
  margin-bottom: 1rem; display: block;
}
.pillar h3 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 600;
  margin-bottom: 0.8rem; color: var(--text);
}
.pillar p {
  font-size: 0.95rem; color: var(--text-secondary); line-height: 1.7;
}

/* ===== ARTICLES GRID ===== */
.articles-section { padding: 5rem 2rem; background: var(--bg-mid); }
.articles-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}
.article-card {
  background: var(--bg-warm); border: 1px solid var(--border);
  transition: all 0.4s; overflow: hidden;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}
.article-card:hover .card-img { transform: scale(1.05); }
.card-img-wrap { overflow: hidden; height: 220px; position: relative; }
.card-img {
  width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s;
}
.card-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
}
.card-category {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--bg-warm); color: var(--accent); padding: 0.3rem 0.8rem;
}
.card-body { padding: 1.5rem; }
.card-date {
  font-family: var(--font-ui); font-size: 0.75rem; color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.card-title {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
  color: var(--text); line-height: 1.3; margin-bottom: 0.8rem;
}
.card-title a { transition: color 0.3s; }
.card-title a:hover { color: var(--accent); }
.card-excerpt {
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;
}
.card-read {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: 0.5rem; transition: gap 0.3s;
}
.card-read:hover { gap: 0.8rem; }
.card-read::after { content: '→'; }

/* ===== QUOTE ===== */
.quote-section {
  background: var(--bg-dark); padding: 5rem 2rem;
  position: relative; overflow: hidden;
}
.quote-section::before {
  content: '道'; position: absolute;
  font-family: var(--font-jp); font-size: 20rem; color: rgba(139,69,19,0.05);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.quote-inner {
  max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 2;
}
.quote-mark {
  font-family: var(--font-display); font-size: 4rem; color: var(--accent);
  line-height: 1; margin-bottom: 1rem; opacity: 0.6;
}
.quote-text {
  font-family: var(--font-accent); font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  color: rgba(245,240,235,0.85); font-style: italic; line-height: 1.7; margin-bottom: 1.5rem;
}
.quote-author {
  font-family: var(--font-ui); font-size: 0.8rem; color: rgba(245,240,235,0.4);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ===== SUBSCRIBE ===== */
.subscribe-section { background: var(--bg-mid); padding: 5rem 2rem; }
.subscribe-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.subscribe-desc {
  font-family: var(--font-accent); font-size: 1.05rem; color: var(--text-secondary);
  font-style: italic; margin-bottom: 2rem;
}
.subscribe-form { display: flex; gap: 0; max-width: 480px; margin: 0 auto; }
.subscribe-form input[type="email"] {
  flex: 1; padding: 0.9rem 1.2rem;
  font-family: var(--font-ui); font-size: 0.85rem;
  border: 1px solid var(--border); border-right: none;
  background: var(--bg-warm); color: var(--text); outline: none;
  transition: border-color 0.3s;
}
.subscribe-form input[type="email"]:focus { border-color: var(--accent); }
.subscribe-form input[type="email"]::placeholder { color: var(--text-secondary); }
.subscribe-form button {
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 0.9rem 1.8rem; cursor: pointer; transition: all 0.3s; white-space: nowrap;
}
.subscribe-form button:hover { background: var(--gold); border-color: var(--gold); }

/* ===== FOOTER ===== */
.site-footer { background: var(--bg-dark); padding: 4rem 2rem 2rem; color: rgba(245,240,235,0.5); }
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem;
  padding-bottom: 3rem; border-bottom: 1px solid rgba(245,240,235,0.08);
}
.footer-brand p {
  font-family: var(--font-accent); font-size: 0.9rem; font-style: italic;
  line-height: 1.6; color: rgba(245,240,235,0.4); max-width: 280px; margin-top: 1rem;
}
.footer-col h4 {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(245,240,235,0.3); margin-bottom: 1.2rem;
}
.footer-col a, .footer-col .menu a {
  display: block; font-family: var(--font-ui); font-size: 0.85rem;
  color: rgba(245,240,235,0.5); margin-bottom: 0.6rem; transition: color 0.3s;
}
.footer-col a:hover, .footer-col .menu a:hover { color: var(--accent); }
.footer-col .menu { list-style: none; padding: 0; margin: 0; }
.footer-col .menu li { margin: 0; }
.footer-bottom {
  max-width: 1200px; margin: 0 auto; padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom small {
  font-family: var(--font-ui); font-size: 0.75rem; color: rgba(245,240,235,0.25);
}
.footer-social { display: flex; gap: 1.5rem; }
.footer-social a {
  font-family: var(--font-ui); font-size: 0.75rem;
  color: rgba(245,240,235,0.3); letter-spacing: 0.05em; transition: color 0.3s;
}
.footer-social a:hover { color: var(--gold); }

/* ===== SINGLE POST ===== */
.article-hero {
  padding: 8rem 2rem 3rem; max-width: 760px; margin: 0 auto; text-align: center;
}
.article-meta-top {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.article-category-badge {
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); padding: 0.3rem 0.8rem;
}
.article-category-badge a { color: var(--accent); }
.article-meta-sep { color: var(--border); }
.article-date, .article-reading-time {
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-secondary);
}
.article-hero h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 1.5rem;
}
.article-hero-subtitle {
  font-family: var(--font-accent); font-size: 1.15rem; color: var(--text-secondary);
  font-style: italic; line-height: 1.6; max-width: 600px; margin: 0 auto;
}
.article-hero-line { width: 40px; height: 1.5px; background: var(--accent); margin: 2rem auto 0; }

/* Article layout */
.article-layout {
  max-width: 1100px; margin: 0 auto; padding: 2rem;
  display: grid; grid-template-columns: 1fr 240px; gap: 4rem;
}
.article-content { max-width: 680px; }
.article-content p {
  font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.5rem;
}
.article-content h2 {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
  margin: 3rem 0 1.2rem; padding-top: 1rem;
}
.article-content h3 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: var(--accent2); margin: 2rem 0 1rem;
}
.article-content strong { font-weight: 600; }
.article-content a { color: var(--accent); border-bottom: 1px solid var(--border); transition: border-color 0.3s; }
.article-content a:hover { border-color: var(--accent); }
.article-content ul, .article-content ol {
  margin: 1rem 0 1.5rem 1.5rem; list-style: disc;
}
.article-content li { margin-bottom: 0.5rem; line-height: 1.7; font-size: 1.05rem; }
.article-content blockquote {
  margin: 2rem 0; padding: 1.5rem 1.5rem 1.5rem 2rem;
  border-left: 3px solid var(--accent); background: rgba(139,69,19,0.03);
}
.article-content blockquote p {
  font-family: var(--font-accent); font-size: 1.1rem; font-style: italic;
  color: #444; margin-bottom: 0.5rem;
}
.article-content blockquote cite {
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-secondary); font-style: normal;
}
.article-content img {
  margin: 2rem 0; width: 100%;
}
.article-content figure { margin: 2rem 0; }
.article-content figcaption {
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-secondary);
  text-align: center; margin-top: 0.5rem;
}

/* H2 Kanji */
.article-content h2 .h2-kanji {
  font-family: var(--font-jp); color: var(--accent); opacity: 0.4;
  margin-right: 0.5rem; font-size: 1.4rem;
}

/* Insight box */
.insight-box {
  background: var(--bg-dark); color: var(--bg-warm);
  padding: 2rem 2.5rem; margin: 2.5rem 0;
  position: relative; overflow: hidden;
}
.insight-box::before {
  content: '降'; position: absolute; right: 1.5rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-jp); font-size: 5rem;
  color: rgba(139,69,19,0.15); pointer-events: none;
}
.insight-box p {
  color: rgba(245,240,235,0.85); position: relative; z-index: 2;
  margin-bottom: 0;
}
.insight-box p strong { color: var(--gold); }

/* TOC list */
.toc-list { list-style: none; }
.toc-list li { margin-bottom: 0.6rem; }
.toc-list a {
  font-family: var(--font-ui); font-size: 0.82rem; color: var(--text-secondary);
  text-decoration: none; transition: all 0.3s; display: block;
  padding-left: 0.8rem; border-left: 2px solid transparent; line-height: 1.4;
}
.toc-list a:hover,
.toc-list a.active { color: var(--accent); border-left-color: var(--accent); }

/* Section separator */
.section-sep { text-align: center; margin: 3rem 0; position: relative; }
.section-sep::before {
  content: ''; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--border);
}
.section-sep span {
  font-family: var(--font-jp); font-size: 1.2rem; color: var(--accent);
  background: var(--bg-warm); padding: 0 1rem; position: relative; opacity: 0.5;
}

/* Sidebar */
.sidebar { position: relative; }
.sidebar-sticky { position: sticky; top: 90px; }
.sidebar-section { margin-bottom: 2.5rem; }
.sidebar-title {
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 1rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sidebar-tag {
  font-family: var(--font-ui); font-size: 0.7rem;
  color: var(--text-secondary); border: 1px solid var(--border);
  padding: 0.2rem 0.6rem; transition: all 0.3s;
}
.sidebar-tag:hover { border-color: var(--accent); color: var(--accent); }
.sidebar-subscribe {
  background: var(--bg-mid); padding: 1.5rem; text-align: center;
}
.sidebar-subscribe p {
  font-family: var(--font-accent); font-size: 0.9rem; color: var(--text-secondary);
  font-style: italic; margin-bottom: 1rem; line-height: 1.5;
}
.sidebar-subscribe input[type="email"] {
  width: 100%; padding: 0.6rem 0.8rem; margin-bottom: 0.5rem;
  font-family: var(--font-ui); font-size: 0.8rem;
  border: 1px solid var(--border); background: var(--bg-warm); outline: none;
}
.sidebar-subscribe button {
  width: 100%; padding: 0.6rem;
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  transition: background 0.3s;
}
.sidebar-subscribe button:hover { background: var(--gold); }

/* Author box */
.author-box {
  display: flex; gap: 1.5rem; align-items: flex-start;
  margin: 3rem 0; padding: 2rem;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.author-avatar {
  width: 120px; height: 120px; flex-shrink: 0; border-radius: 0;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.4rem; color: #fff; font-weight: 700;
  overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-info h4 {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.3rem;
}
.author-role {
  font-family: var(--font-ui); font-size: 0.75rem; color: var(--accent);
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.6rem;
}
.author-info p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

/* Post navigation */
.post-nav {
  max-width: 1100px; margin: 0 auto; padding: 2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  border-top: 1px solid var(--border);
}
.post-nav-item {
  padding: 1.5rem; border: 1px solid var(--border); transition: all 0.3s;
}
.post-nav-item:hover { border-color: var(--accent); }
.post-nav-label {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.post-nav-title {
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  color: var(--text); line-height: 1.3;
}
.post-nav-item.next { text-align: right; }

/* Related posts */
.related-section { padding: 4rem 2rem; background: var(--bg-mid); }
.related-inner { max-width: 1100px; margin: 0 auto; }
.related-title {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
  text-align: center; margin-bottom: 2.5rem;
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.related-card {
  background: var(--bg-warm); border: 1px solid var(--border);
  padding: 1.5rem; transition: all 0.3s;
}
.related-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.related-card .card-category {
  position: static;
  font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.6rem; display: inline-block;
}
.related-card h3 {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
  color: var(--text); line-height: 1.3; margin-bottom: 0.5rem;
}
.related-card h3 a { transition: color 0.3s; }
.related-card h3 a:hover { color: var(--accent); }

/* ===== ARCHIVE / BLOG ===== */
.archive-header {
  padding: 8rem 2rem 3rem; text-align: center; background: var(--bg-warm);
}
.archive-header h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; margin-bottom: 0.5rem;
}
.archive-header p {
  font-family: var(--font-accent); font-size: 1.1rem; color: var(--text-secondary);
  font-style: italic;
}
.archive-content {
  max-width: 1200px; margin: 0 auto; padding: 3rem 2rem;
}
.archive-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
}

/* Pagination */
.pagination {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-top: 3rem; padding: 2rem 0;
}
.pagination a, .pagination span {
  font-family: var(--font-ui); font-size: 0.85rem;
  padding: 0.5rem 1rem; border: 1px solid var(--border);
  color: var(--text-secondary); transition: all 0.3s;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ===== PAGES (About, Codex, Contact) ===== */
.page-hero {
  padding: 8rem 2rem 3rem; text-align: center;
  background: var(--bg-dark); color: var(--bg-warm);
}
.page-hero .section-kanji { color: var(--accent); }
.page-hero h1 {
  font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700; color: var(--bg-warm); margin-bottom: 1rem;
}
.page-hero p {
  font-family: var(--font-accent); font-size: 1.15rem;
  color: rgba(245,240,235,0.6); font-style: italic;
  max-width: 600px; margin: 0 auto;
}
.page-content {
  max-width: 760px; margin: 0 auto; padding: 4rem 2rem;
}
.page-content p { font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.5rem; }
.page-content h2 {
  font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
  margin: 3rem 0 1.2rem;
}
.page-content h3 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: var(--accent2); margin: 2rem 0 1rem;
}
.page-content blockquote {
  margin: 2rem 0; padding: 1.5rem 1.5rem 1.5rem 2rem;
  border-left: 3px solid var(--accent); background: rgba(139,69,19,0.03);
}
.page-content blockquote p {
  font-family: var(--font-accent); font-size: 1.1rem; font-style: italic; color: #444;
}

/* Codex specific */
.codex-law {
  margin-bottom: 3rem; padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
.codex-law:last-child { border-bottom: none; }
.codex-law-number {
  font-family: var(--font-jp); font-size: 2.5rem; color: var(--accent);
  opacity: 0.6; margin-bottom: 0.5rem;
}
.codex-law h3 {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--text); margin-bottom: 1rem;
}

/* Oath */
.codex-oath {
  background: var(--bg-dark); color: var(--bg-warm);
  padding: 3rem; margin: 3rem 0; text-align: center;
}
.codex-oath h2 {
  font-family: var(--font-display); font-size: 1.8rem; color: var(--bg-warm);
  margin-bottom: 2rem;
}
.codex-oath p {
  font-family: var(--font-accent); font-size: 1.1rem; font-style: italic;
  color: rgba(245,240,235,0.8); margin-bottom: 0.8rem; line-height: 1.6;
}

/* ===== CTA SECTION ===== */
.cta-section {
  padding: 4rem 2rem; text-align: center; background: var(--bg-dark);
}
.cta-section h2 {
  font-family: var(--font-display); font-size: 2rem; color: var(--bg-warm); margin-bottom: 0.8rem;
}
.cta-section p {
  font-family: var(--font-accent); font-size: 1.05rem;
  color: rgba(245,240,235,0.5); font-style: italic; margin-bottom: 2rem;
}
.cta-btn {
  display: inline-block; font-family: var(--font-ui); font-size: 0.8rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bg-warm); border: 1.5px solid var(--accent);
  padding: 0.9rem 2.5rem; transition: all 0.3s;
}
.cta-btn:hover { background: var(--accent); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .pillars { grid-template-columns: 1fr; gap: 2rem; }
  .articles-grid, .archive-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-item.next { text-align: left; }
}

@media (max-width: 768px) {
  .nav-menu { 
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-warm); flex-direction: column;
    align-items: center; justify-content: center; gap: 2rem;
  }
  .nav-menu.active { display: flex; }
  .nav-menu a { font-size: 1.1rem; }
  .nav-toggle { display: block; }
  .subscribe-form { flex-direction: column; }
  .subscribe-form input[type="email"] { border-right: 1px solid var(--border); border-bottom: none; }
  .author-box { flex-direction: column; align-items: center; text-align: center; }
}

/* ===== SCREEN READER ===== */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px); position: absolute;
  height: 1px; width: 1px; overflow: hidden;
}

/* ===== WP SPECIFIC ===== */
.wp-block-image { margin: 2rem 0; }
.aligncenter { text-align: center; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.wp-caption-text {
  font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-secondary);
  text-align: center; margin-top: 0.5rem;
}


/* Breadcrumbs */
.rank-math-breadcrumb { color: var(--text-secondary); padding: 0 2rem;}
.rank-math-breadcrumb a { color: var(--text-secondary); border-bottom: 1px solid transparent; transition: all 0.3s; }
.rank-math-breadcrumb a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rank-math-breadcrumb .separator { margin: 0 0.4rem; opacity: 0.5; }

/* Search widget */
.sidebar-section .search-form { display: flex; }
.sidebar-section .search-field {
  flex: 1; padding: 0.6rem 0.8rem;
  font-family: var(--font-ui); font-size: 0.8rem;
  border: 1px solid var(--border); border-right: none;
  background: var(--bg-warm); color: var(--text); outline: none;
}
.sidebar-section .search-field:focus { border-color: var(--accent); }
.sidebar-section .search-submit,
.sidebar-section input[type="submit"] {
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 0.6rem 1rem; cursor: pointer; transition: background 0.3s;
}
.sidebar-section .search-submit:hover,
.sidebar-section input[type="submit"]:hover { background: var(--gold); border-color: var(--gold); }

/* ===== SUBSCRIBE FORM ===== */
.sidebar-subscribe form { 
	display: flex; flex-direction: column; gap: 0.5rem; margin: 0; 
}
.sidebar-subscribe input[type="email"] {
	width: 100%; padding: 0.6rem 0.8rem;
	font-family: var(--font-ui); font-size: 0.8rem;
	border: 1px solid var(--border); background: var(--bg-warm); color: var(--text); outline: none;
	box-sizing: border-box; transition: border-color 0.3s;
}
.sidebar-subscribe input[type="email"]:focus { border-color: var(--accent); }
.sidebar-subscribe button[type="submit"] {
	width: 100%; padding: 0.6rem;
	font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--accent); color: #fff; border: none; cursor: pointer;
	transition: background 0.3s; box-sizing: border-box;
}
.sidebar-subscribe button[type="submit"]:hover { background: var(--gold); }

/* ===== АДАПТИВНІСТЬ (Планшет і Мобільний) - Нижня навігація ===== */
@media (max-width: 1024px) {
	/* 1. Відриваємо шапку від верху і притискаємо до низу */
	.site-nav {
	  top: auto;
	  bottom: 0;
	  border-bottom: none;
	  border-top: 1px solid var(--border);
	  box-shadow: 0 -2px 20px rgba(0,0,0,0.05); /* Тінь тепер падає вгору */
	}
 
	.nav-toggle { 
	  display: block; 
	} 
	
	/* 2. Меню "виростає" знизу */
	.site-nav .nav-menu {
	  position: fixed; 
	  top: auto;
	  bottom: 72px; /* Починається рівно над нижньою панеллю */
	  left: 0;
	  width: 100%;
	  height: calc(100vh - 72px); 
	  background: #F5F0EB; 
	  flex-direction: column;
	  justify-content: flex-end; /* Притискаємо пункти меню ближче до пальця! */
	  padding-bottom: 3rem; /* Відступ знизу замість верху */
	  overflow-y: auto; 
	  
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none;
	  transform: translateY(20px); /* Зміщення вниз, щоб меню м'яко виїжджало вгору */
	  transition: all 0.3s ease-in-out;
	}
	
	.site-nav .nav-menu.active {
	  opacity: 1;
	  visibility: visible;
	  pointer-events: auto;
	  transform: translateY(0);
	}
	
	.site-nav .nav-menu li { width: 100%; text-align: center; padding: 20px; }
	.site-nav .nav-menu a { 
	  font-size: 1.2rem; 
	  display: block; 
	  padding: 1.2rem; 
	}
	.site-nav .nav-menu a::after { display: none; }
	
	.site-nav .nav-cta { 
	  margin: 1rem auto 0; 
	  display: inline-block; 
	}
 }

/* ===== AI SUMMARY / ГОЛОВНЕ (SPEAKABLE) ===== */
.solo-ai-summary {
	background: #F5F0EB; /* Твій фірмовий теплий фон */
	border-left: 3px solid var(--accent); /* Строга лінія, як у змісті */
	padding: 2rem;
	margin: 2rem 0 3rem 0;
	border-radius: 2px; /* Мінімалістичний кут */
}

.solo-ai-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 1.2rem;
}

.solo-ai-kanji {
	font-family: var(--font-jp);
	font-size: 1.4rem;
	color: var(--accent);
	opacity: 0.8;
}

.solo-ai-title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0;
	color: var(--text);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.solo-takeaways-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.solo-takeaways-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.8rem;
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--text);
}

.solo-takeaways-list li:last-child {
	margin-bottom: 0;
}

/* Стоїчне тире замість дитячих блискавок */
.solo-takeaways-list li::before {
	content: "—"; 
	position: absolute;
	left: 0;
	color: var(--accent);
	font-weight: 600;
}

/* Контейнер Мудрість в статті */
.article-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 2rem 0;
	background: linear-gradient(135deg, #2C2420 0%, #3D3028 50%, #4A3F2F 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Величезний ієрогліф у центрі */
.article-image span {
	font-family: var(--font-jp);
	font-size: 3rem;
	color: rgba(139,69,19,0.3);
}

/* Темна плашка для підпису знизу */
.article-image figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	font-family: var(--font-ui);
	font-size: 0.75rem;
	color: rgba(245, 240, 235, 0.4);
	padding: 0.6rem 1rem;
	background: rgba(0, 0, 0, 0.5);
	text-align: center;
}

/* ===== MAILPOET: ІМІТАЦІЯ СТАРОЇ .subscribe-form ===== */

/* Робимо саму форму гнучкою, щоб поле і кнопка стали в ряд (якщо тобі потрібен такий дизайн) */
.subscribe-form-wrapper .mailpoet_form {
	display: flex;
	gap: 10px;
	width: 100%;
}

/* Прибираємо дурні відступи від параграфів MailPoet, які ламають сітку */
.subscribe-form-wrapper .mailpoet_form .mailpoet_paragraph {
	margin: 0 !important;
	line-height: 1 !important;
}

/* Поле email бере всю вільну ширину */
.subscribe-form-wrapper .mailpoet_form .mailpoet_paragraph:first-child {
	flex-grow: 1;
}

/* Стилі для поля вводу (переносимо з твого старого дизайну) */
.subscribe-form-wrapper .mailpoet_text {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 1px solid rgba(0,0,0,0.1) !important;
	background: transparent !important;
	font-family: var(--font-ui, sans-serif) !important;
	font-size: 1rem !important;
	color: var(--text, #1a1a1a) !important;
	outline: none !important;
}

.subscribe-form-wrapper .mailpoet_text:focus {
	border-color: var(--accent, #9e5a32) !important;
}

/* Стилі для кнопки */
.subscribe-form-wrapper .mailpoet_submit {
	padding: 12px 24px !important;
	background: var(--text, #1a1a1a) !important;
	color: #fff !important;
	border: none !important;
	font-family: var(--font-ui, sans-serif) !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background 0.3s ease !important;
	height: 100% !important;
}

.subscribe-form-wrapper .mailpoet_submit:hover {
	background: var(--accent, #9e5a32) !important;
}

/* Адаптив: на телефонах ставимо поле і кнопку одне під одним */
@media (max-width: 600px) {
	.subscribe-form-wrapper .mailpoet_form {
		 flex-direction: column;
	}
	.subscribe-form-wrapper .mailpoet_submit {
		 width: 100% !important;
	}
}

/* Logo No cursor-pointer in front page */
		/* Блокування взаємодії з логотипом на головній сторінці */
		.solo-logo-disabled {
			cursor: default !important;
			pointer-events: none !important;
			user-select: none !important;
		}


		/*  Footer Menu - Glossary */
		.footer-inner {
			display: grid;
			grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* 1 колонка лого + 4 колонки меню */
			gap: 2rem;
	  }
	  
	  /* Стиль для списку свіжих матеріалів */
	  .footer-latest-list {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 12px;
	  }
	  .footer-latest-list a {
			font-family: var(--font-ui, sans-serif);
			font-size: 0.85rem;
			color: var(--text-secondary, #a0a0a0);
			text-decoration: none;
			transition: color 0.3s ease;
			display: block;
			line-height: 1.4;
	  }
	  .footer-latest-list a:hover {
			color: var(--accent, #9e5a32);
	  }
	  
	  /* Адаптив під мобільні */
	  @media (max-width: 992px) {
			.footer-inner {
				 grid-template-columns: 1fr 1fr; /* По дві колонки на планшетах */
			}
	  }
	  @media (max-width: 576px) {
			.footer-inner {
				 grid-template-columns: 1fr; /* Одна колонка на телефонах */
			}
	  }

	  /* ===== КНОПКА ВГОРУ ===== */
.solo-back-to-top {
	position: fixed;
	bottom: 69px;
	right: 40px;
	width: 48px;
	height: 48px;
	background-color: var(--accent, #9e5a32);
	/* Колір із запобіжником */
	color: #ffffff;
	border: 2px solid var(--accent, #9e5a32);
	border-radius: 2px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	z-index: 9999;
	/* Максимальний пріоритет, щоб нічого не перекрило */

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	/* Щоб не клікалась, коли прозора */
	transform: translateY(20px);
	transition: all 0.6s ease;
}

.solo-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.solo-back-to-top:hover {
	background-color: #fff;
}

.solo-back-to-top .btt-icon {
	transition: transform 0.6s ease;

}

.solo-back-to-top:hover .btt-icon {
	transform: translateY(-3px);
	color: var(--accent, #9e5a32);
}

@media (max-width: 900px) {
	.solo-back-to-top {
		bottom: 90px;
		right: 20px;
		width: 44px;
		height: 44px;
	}
}

/* Деактивація поточного пункту меню (анти-циклічність) */
.disabled-cyclic-link {
	cursor: default !important;
	pointer-events: none !important;
}

/* ===== HORIZONTAL CATEGORY NAV BAR ===== */
.category-nav-bar {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem;
}
.category-nav-inner {
	display: flex;
	gap: 0.3rem;
	padding: 1rem 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.category-nav-inner::-webkit-scrollbar { display: none; }
.category-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.2rem;
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--text, #3D3529);
	text-decoration: none;
	border: 1.5px solid var(--border, #D5CBBA);
	border-radius: 2px;
	white-space: nowrap;
	transition: all 0.3s;
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: transparent;
}
.category-nav-link:hover {
	border-color: var(--accent, #C4713B);
	color: var(--accent, #C4713B);
}
.category-nav-link.active {
	color: #fff;
	background: var(--accent, #C4713B);
	border-color: var(--accent, #C4713B);
}
.category-nav-link.active .category-nav-count {
	background: rgba(255,255,255,0.25);
}
.category-nav-count {
	font-size: 0.7rem;
	background: rgba(139,69,19,0.1);
	padding: 0.1rem 0.4rem;
	border-radius: 2px;
	color: var(--accent);
	font-weight: 700;
}

/* ===== CATEGORY ARCHIVE: MIXED CONTENT ===== */
.category-section {
	margin-bottom: 3rem;
}

.category-section-title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--text);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--border);
}

.category-section-kanji {
	font-family: var(--font-jp);
	font-size: 1.1rem;
	color: var(--accent);
	opacity: 0.7;
}

.category-section-count {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	color: var(--text-secondary);
	background: var(--bg-mid);
	padding: 0.15em 0.6em;
	border-radius: 10px;
	margin-left: auto;
}

/* CATEGORY SEPARATOR (道) */
.category-separator {
	text-align: center;
	padding: 2rem 0 3rem;
}
.category-separator-kanji {
	font-family: var(--font-jp);
	font-size: 2rem;
	color: var(--accent);
	opacity: 0.3;
}

.category-section-glossary .sg-terms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
}

/* ===== GLOSSARY CARDS IN TAG/MIXED ARCHIVES ===== */
.article-card--glossary {
	border-left: 3px solid var(--accent);
	background: var(--bg-warm);
}
.article-card--glossary .card-body {
	padding: 1.2rem 1.5rem;
}
.card-type-badge {
	font-family: var(--font-ui);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
	background: var(--bg-mid);
	padding: 0.15rem 0.5rem;
	display: inline-block;
	margin-bottom: 0.5rem;
}
.card-category--inline {
	position: static;
	display: inline-block;
	margin-bottom: 0.5rem;
}
.card-glossary-header {
	margin-bottom: 0.5rem;
}
.card-glossary-kanji {
	font-family: var(--font-jp);
	font-size: 1.5rem;
	color: var(--accent);
	opacity: 0.7;
	display: block;
	margin-bottom: 0.2rem;
}
.card-glossary-pronunciation {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-style: italic;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
	.category-section-glossary .sg-terms-grid {
		grid-template-columns: 1fr;
	}
	.category-nav-bar {
		padding: 0 1rem;
	}
}

/* ============================================
   ВИХІД З БОЛЮ — Hub Page Styles
   
   ============================================ */

/* ── Base ── */
.vzb-page {
  background: #0a0a0a;
  color: #e8e4de;
  font-family: 'Noto Serif', Georgia, serif;
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* ── Variables (fallback if not global) ── */
.vzb-page {
  --vzb-bg: #0a0a0a;
  --vzb-bg-secondary: #111111;
  --vzb-bg-card: #161616;
  --vzb-bg-card-hover: #1c1c1c;
  --vzb-text: #e8e4de;
  --vzb-text-secondary: #9a9590;
  --vzb-text-muted: #5a5550;
  --vzb-accent: #c4956a;
  --vzb-accent-dim: rgba(196, 149, 106, 0.15);
  --vzb-accent-glow: rgba(196, 149, 106, 0.08);
  --vzb-border: #222;
  --vzb-border-light: #2a2a2a;
  --vzb-font-sans: 'Noto Sans JP', sans-serif;
  --vzb-font-serif: 'Noto Serif', Georgia, serif;
  --vzb-max-width: 780px;
  --vzb-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Breadcrumbs ── */
.vzb-breadcrumbs {
  max-width: var(--vzb-max-width);
  margin: 0 auto;
  padding: 6rem 2rem 0;
  font-family: var(--vzb-font-sans);
  font-size: 0.75rem;
  color: var(--vzb-text-muted);
}

.vzb-breadcrumbs a {
  color: var(--vzb-text-muted);
  text-decoration: none;
  transition: color var(--vzb-transition);
}

.vzb-breadcrumbs a:hover {
  color: var(--vzb-accent);
}

.vzb-breadcrumbs span {
  margin: 0 0.5rem;
}

/* ── Hero ── */
.vzb-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  overflow: hidden;
}

.vzb-hero__kanji {
  position: absolute;
  font-family: var(--vzb-font-sans);
  font-size: clamp(20rem, 40vw, 45rem);
  font-weight: 700;
  color: white;
  opacity: 0.06;
  pointer-events: none;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vzb-hero__label {
  font-family: var(--vzb-font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--vzb-accent);
  margin-bottom: 2rem;
}

.vzb-hero__title {
  font-family: var(--vzb-font-serif);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--vzb-text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.vzb-hero__sub {
  font-family: var(--vzb-font-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--vzb-text-secondary);
  max-width: 540px;
  margin-bottom: 3rem;
}

.vzb-hero__meta {
  font-family: var(--vzb-font-sans);
  font-size: 0.8rem;
  color: var(--vzb-text-muted);
  letter-spacing: 0.05em;
}

.vzb-hero__scroll {
  position: absolute;
  bottom: 2rem;
  font-family: var(--vzb-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--vzb-text-muted);
  text-transform: uppercase;
  animation: vzb-pulse 2s ease-in-out infinite;
}

@keyframes vzb-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ── Section Kanji Label ── */
.vzb-section-kanji {
  font-family: var(--vzb-font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--vzb-accent);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

/* ── Divider ── */
.vzb-divider {
  width: 40px;
  height: 1px;
  background: var(--vzb-accent);
  margin: 4rem auto;
  opacity: 0.5;
}

/* ── Prologue ── */
.vzb-prologue {
  max-width: var(--vzb-max-width);
  margin: 0 auto;
  padding: 5rem 2rem;
}

.vzb-prologue h2 {
  font-family: var(--vzb-font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: var(--vzb-text);
}

.vzb-prologue__content p {
  margin-bottom: 1.5rem;
  color: var(--vzb-text-secondary);
}

.vzb-prologue__content strong {
  color: var(--vzb-text);
  font-weight: 700;
}

/* Highlight block - for the central thesis */
.vzb-prologue__content blockquote,
.vzb-prologue__content .wp-block-quote {
  border-left: 2px solid var(--vzb-accent);
  padding: 1.5rem 0 1.5rem 2rem;
  margin: 2.5rem 0;
  background: var(--vzb-accent-glow);
  font-style: italic;
}

.vzb-prologue__content blockquote p {
  color: var(--vzb-text);
  font-size: 1.1rem;
  margin-bottom: 0;
}

/* ── Chapters ── */
.vzb-chapters {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2rem 6rem;
}

.vzb-chapters__header {
  text-align: center;
  margin-bottom: 4rem;
}

.vzb-chapters__header h2 {
  font-family: var(--vzb-font-serif);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--vzb-text);
}

.vzb-chapter-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vzb-chapter-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: start;
  gap: 1.5rem;
  padding: 2rem 1.5rem;
  background: var(--vzb-bg-card);
  border: 1px solid var(--vzb-border);
  text-decoration: none;
  color: inherit;
  transition: all var(--vzb-transition);
  position: relative;
}

.vzb-chapter-item:hover {
  background: var(--vzb-bg-card-hover);
  border-color: var(--vzb-border-light);
}

.vzb-chapter-item--active:hover {
  border-color: var(--vzb-accent);
}

.vzb-chapter-item:first-child {
  border-radius: 4px 4px 0 0;
}

.vzb-chapter-item:last-child {
  border-radius: 0 0 4px 4px;
}

.vzb-chapter-item__num {
  font-family: var(--vzb-font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--vzb-text-muted);
  padding-top: 0.3rem;
}

.vzb-chapter-item--active .vzb-chapter-item__num {
  color: var(--vzb-accent);
}

.vzb-chapter-item__content h3 {
  font-family: var(--vzb-font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--vzb-text);
  margin-bottom: 0.5rem;
  transition: color var(--vzb-transition);
}

.vzb-chapter-item--active:hover .vzb-chapter-item__content h3 {
  color: var(--vzb-accent);
}

.vzb-chapter-item__content p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--vzb-text-secondary);
}

/* Status badges */
.vzb-chapter-status {
  font-family: var(--vzb-font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
  white-space: nowrap;
  margin-top: 0.3rem;
}

.vzb-chapter-status--live {
  color: var(--vzb-accent);
  background: var(--vzb-accent-dim);
}

.vzb-chapter-status--soon {
  color: var(--vzb-text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--vzb-border);
}

/* Locked chapters */
.vzb-chapter-item--locked {
  opacity: 0.5;
  cursor: default;
}

.vzb-chapter-item--locked .vzb-chapter-item__content p {
  color: var(--vzb-text-muted);
}

/* ── CTA ── */
.vzb-cta {
  max-width: var(--vzb-max-width);
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
  text-align: center;
}

.vzb-cta__box {
  background: var(--vzb-bg-secondary);
  border: 1px solid var(--vzb-border);
  padding: 3rem 2rem;
  border-radius: 4px;
}

.vzb-cta__box h3 {
  font-family: var(--vzb-font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--vzb-text);
  margin-bottom: 1rem;
}

.vzb-cta__box p {
  font-size: 0.95rem;
  color: var(--vzb-text-secondary);
  margin-bottom: 2rem;
}

.vzb-cta__button {
  display: inline-block;
  font-family: var(--vzb-font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vzb-bg);
  background: var(--vzb-accent);
  padding: 0.9rem 2.5rem;
  text-decoration: none;
  border-radius: 2px;
  transition: all var(--vzb-transition);
}

.vzb-cta__button:hover {
  background: var(--vzb-text);
}

/* ── Footer Symbol ── */
.vzb-footer-symbol {
  text-align: center;
  padding: 3rem 0 4rem;
  font-family: var(--vzb-font-sans);
  font-size: 1.5rem;
  color: var(--vzb-text-muted);
  opacity: 0.3;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .vzb-chapter-item {
    grid-template-columns: 45px 1fr;
    gap: 1rem;
    padding: 1.5rem 1rem;
  }

  .vzb-chapter-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.5rem;
  }

  .vzb-prologue {
    padding: 3rem 1.5rem;
  }

  .vzb-chapters {
    padding: 2rem 1.5rem 4rem;
  }

  .vzb-hero {
    min-height: 70vh;
    padding: 3rem 1.5rem;
  }
}

/* ============================================
   ВИХІД З БОЛЮ — Chapter Page Styles
   
   ============================================ */

/* ── Progress Bar ── */
.vzb-ch-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--vzb-accent, #c4956a);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ── Page Base ── */
.vzb-ch-page {
  background: #0a0a0a;
  color: #e8e4de;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;

  --vzb-bg: #0a0a0a;
  --vzb-bg-secondary: #111111;
  --vzb-text: #e8e4de;
  --vzb-text-secondary: #9a9590;
  --vzb-text-muted: #5a5550;
  --vzb-accent: #c4956a;
  --vzb-accent-dim: rgba(196, 149, 106, 0.15);
  --vzb-accent-glow: rgba(196, 149, 106, 0.08);
  --vzb-border: #222;
  --vzb-border-light: #2a2a2a;
  --vzb-font-sans: 'Noto Sans JP', sans-serif;
  --vzb-font-serif: 'Noto Serif', Georgia, serif;
  --vzb-max-width: 720px;
  --vzb-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Breadcrumbs ── */
.vzb-ch-breadcrumbs {
  max-width: var(--vzb-max-width);
  margin: 0 auto;
  padding: 6rem 2rem 0;
  font-family: var(--vzb-font-sans);
  font-size: 0.75rem;
  color: var(--vzb-text-muted);
}

.vzb-ch-breadcrumbs a {
  color: var(--vzb-text-muted);
  text-decoration: none;
  transition: color var(--vzb-transition);
}

.vzb-ch-breadcrumbs a:hover {
  color: var(--vzb-accent);
}

.vzb-ch-breadcrumbs span {
  margin: 0 0.5rem;
}

/* ── Chapter Hero ── */
.vzb-ch-hero {
  max-width: var(--vzb-max-width);
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  text-align: center;
}

.vzb-ch-hero__label {
  font-family: var(--vzb-font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--vzb-accent);
  margin-bottom: 1.5rem;
}

.vzb-ch-hero__title {
  font-family: var(--vzb-font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--vzb-text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.vzb-ch-hero__meta {
  font-family: var(--vzb-font-sans);
  font-size: 0.8rem;
  color: var(--vzb-text-muted);
  letter-spacing: 0.03em;
}

.vzb-ch-hero__sep {
  margin: 0 0.5rem;
}

.vzb-ch-hero__epigraph {
  font-family: var(--vzb-font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--vzb-text-secondary);
  max-width: 500px;
  margin: 2rem auto 0;
  opacity: 0.8;
}

/* ── Chapter Content ── */
.vzb-ch-content {
  max-width: var(--vzb-max-width);
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

/* Paragraphs */
.vzb-ch-content p {
  margin-bottom: 1.5rem;
  color: var(--vzb-text-secondary);
}

/* Headings */
.vzb-ch-content h2 {
  font-family: var(--vzb-font-serif);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--vzb-text);
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  padding-top: 2rem;
}

.vzb-ch-content h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.vzb-ch-content h3 {
  font-family: var(--vzb-font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--vzb-text);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

/* Bold text */
.vzb-ch-content strong {
  color: var(--vzb-text);
  font-weight: 700;
}

/* Italic */
.vzb-ch-content em {
  color: var(--vzb-text);
  font-style: italic;
}

/* Bold paragraphs starting with ** — item headers */
.vzb-ch-content p strong:first-child {
  color: var(--vzb-accent);
}

/* Blockquotes */
.vzb-ch-content blockquote,
.vzb-ch-content .wp-block-quote {
  border-left: 2px solid var(--vzb-accent);
  padding: 1.2rem 0 1.2rem 1.5rem;
  margin: 2rem 0;
  background: var(--vzb-accent-glow);
}

.vzb-ch-content blockquote p {
  color: var(--vzb-text);
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 0;
}

.vzb-ch-content blockquote cite,
.vzb-ch-content blockquote .wp-block-quote__citation {
  display: block;
  font-family: var(--vzb-font-sans);
  font-size: 0.8rem;
  font-style: normal;
  color: var(--vzb-text-muted);
  margin-top: 0.8rem;
}

/* Horizontal rules — section dividers */
.vzb-ch-content hr {
  border: none;
  width: 40px;
  height: 1px;
  background: var(--vzb-accent);
  margin: 3rem auto;
  opacity: 0.5;
}

/* Links */
.vzb-ch-content a {
  color: var(--vzb-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--vzb-accent-dim);
  transition: all var(--vzb-transition);
}

.vzb-ch-content a:hover {
  border-bottom-color: var(--vzb-accent);
}

/* Lists (if used) */
.vzb-ch-content ul,
.vzb-ch-content ol {
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  color: var(--vzb-text-secondary);
}

.vzb-ch-content li {
  margin-bottom: 0.5rem;
}

/* Images */
.vzb-ch-content img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
  margin: 2rem 0;
}

/* ── Chapter Footer ── */
.vzb-ch-footer {
  max-width: var(--vzb-max-width);
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

/* Symbol */
.vzb-ch-symbol {
  text-align: center;
  font-family: var(--vzb-font-sans);
  font-size: 1.5rem;
  color: var(--vzb-text-muted);
  opacity: 0.3;
  padding: 2rem 0 3rem;
}

/* Navigation */
.vzb-ch-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-bottom: 2rem;
}

.vzb-ch-nav__link {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--vzb-bg-secondary);
  border: 1px solid var(--vzb-border);
  text-decoration: none;
  color: inherit;
  transition: all var(--vzb-transition);
}

.vzb-ch-nav__link:hover {
  border-color: var(--vzb-accent);
  background: #161616;
}

.vzb-ch-nav__link--prev {
  border-radius: 4px 0 0 4px;
  text-align: left;
}

.vzb-ch-nav__link--next {
  border-radius: 0 4px 4px 0;
  text-align: right;
}

.vzb-ch-nav__link--empty {
  background: transparent;
  border-color: transparent;
}

.vzb-ch-nav__direction {
  font-family: var(--vzb-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--vzb-accent);
  margin-bottom: 0.4rem;
}

.vzb-ch-nav__title {
  font-family: var(--vzb-font-serif);
  font-size: 1rem;
  color: var(--vzb-text);
}

/* Hub link */
.vzb-ch-hub-link {
  text-align: center;
  margin-bottom: 3rem;
}

.vzb-ch-hub-link a {
  font-family: var(--vzb-font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--vzb-text-muted);
  text-decoration: none;
  transition: color var(--vzb-transition);
}

.vzb-ch-hub-link a:hover {
  color: var(--vzb-accent);
}

/* CTA */
.vzb-ch-cta {
  background: var(--vzb-bg-secondary);
  border: 1px solid var(--vzb-border);
  padding: 2.5rem 2rem;
  border-radius: 4px;
  text-align: center;
}

.vzb-ch-cta h3 {
  font-family: var(--vzb-font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--vzb-text);
  margin-bottom: 0.8rem;
}

.vzb-ch-cta p {
  font-size: 0.9rem;
  color: var(--vzb-text-secondary);
  margin-bottom: 1.5rem;
}

.vzb-ch-cta__button {
  display: inline-block;
  font-family: var(--vzb-font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vzb-bg);
  background: var(--vzb-accent);
  padding: 0.8rem 2rem;
  text-decoration: none;
  border-radius: 2px;
  transition: all var(--vzb-transition);
}

.vzb-ch-cta__button:hover {
  background: var(--vzb-text);
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .vzb-ch-hero {
    padding: 4rem 1.5rem 3rem;
  }

  .vzb-ch-content {
    padding: 0 1.5rem 3rem;
  }

  .vzb-ch-content h2 {
    font-size: 1.4rem;
  }

  .vzb-ch-footer {
    padding: 0 1.5rem 3rem;
  }

  .vzb-ch-nav {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .vzb-ch-nav__link--prev,
  .vzb-ch-nav__link--next {
    border-radius: 4px;
    text-align: left;
  }
}

/* ============================================
   СЕРІЇ — Catalog Page Styles
   Додати в style.css
   ============================================ */

/* ── Page Base ── */
.sr-page {
  background: #0a0a0a;
  color: #e8e4de;
  font-family: 'Noto Serif', 'Source Serif 4', Georgia, serif;
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;

  --sr-bg: #0a0a0a;
  --sr-bg-card: #111111;
  --sr-bg-card-hover: #161616;
  --sr-text: #e8e4de;
  --sr-text-secondary: #9a9590;
  --sr-text-muted: #5a5550;
  --sr-accent: #c4956a;
  --sr-accent-dim: rgba(196, 149, 106, 0.15);
  --sr-accent-glow: rgba(196, 149, 106, 0.08);
  --sr-border: #222;
  --sr-border-light: #2a2a2a;
  --sr-font-sans: 'Noto Sans JP', 'DM Sans', sans-serif;
  --sr-font-serif: 'Source Serif 4', Georgia, serif;
  --sr-max-width: 860px;
  --sr-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Breadcrumbs ── */
.sr-breadcrumbs {
  max-width: var(--sr-max-width);
  margin: 0 auto;
  padding: 6rem 2rem 0;
  font-family: var(--sr-font-sans);
  font-size: 0.75rem;
  color: var(--sr-text-muted);
}

.sr-breadcrumbs a {
  color: var(--sr-text-muted);
  text-decoration: none;
  transition: color var(--sr-transition);
}

.sr-breadcrumbs a:hover {
  color: var(--sr-accent);
}

.sr-breadcrumbs span {
  margin: 0 0.5rem;
}

/* ── Hero ── */
.sr-hero {
  position: relative;
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  overflow: hidden;
}

.sr-hero__kanji {
  position: absolute;
  font-family: var(--sr-font-sans);
  font-size: clamp(18rem, 35vw, 40rem);
  font-weight: 700;
  color: white;
  opacity: 0.04;
  pointer-events: none;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sr-hero__label {
  font-family: var(--sr-font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sr-accent);
  margin-bottom: 1.5rem;
}

.sr-hero__title {
  font-family: var(--sr-font-serif);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--sr-text);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.sr-hero__sub {
  font-family: var(--sr-font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--sr-text-secondary);
  max-width: 520px;
}

/* ── Series Grid ── */
.sr-grid {
  max-width: var(--sr-max-width);
  margin: 0 auto;
  padding: 0 2rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Series Card ── */
.sr-card {
  display: grid;
  grid-template-columns: 90px 1fr 40px;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--sr-bg-card);
  border: 1px solid var(--sr-border);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: all var(--sr-transition);
  position: relative;
  overflow: hidden;
}

.sr-card:hover {
  background: var(--sr-bg-card-hover);
  border-color: var(--sr-accent);
  transform: translateY(-2px);
}

/* Kanji in card */
.sr-card__kanji {
  font-family: var(--sr-font-sans);
  font-size: 3rem;
  font-weight: 700;
  color: var(--sr-accent);
  opacity: 0.25;
  line-height: 1;
  text-align: center;
  transition: opacity var(--sr-transition);
}

.sr-card:hover .sr-card__kanji {
  opacity: 0.5;
}

/* Card content */
.sr-card__content {
  min-width: 0;
}

.sr-card__title {
  font-family: var(--sr-font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--sr-text);
  margin-bottom: 0.5rem;
  transition: color var(--sr-transition);
}

.sr-card:hover .sr-card__title {
  color: var(--sr-accent);
}

.sr-card__desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--sr-text-secondary);
  margin-bottom: 0.8rem;
}

.sr-card__meta {
  font-family: var(--sr-font-sans);
  font-size: 0.75rem;
  color: var(--sr-text-muted);
  letter-spacing: 0.03em;
}

.sr-card__sep {
  margin: 0 0.4rem;
}

.sr-card__status {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
}

.sr-card__status--active {
  color: var(--sr-accent);
}

.sr-card__status--complete {
  color: #6b9e78;
}

/* Arrow */
.sr-card__arrow {
  font-family: var(--sr-font-sans);
  font-size: 1.2rem;
  color: var(--sr-text-muted);
  transition: all var(--sr-transition);
  justify-self: center;
}

.sr-card:hover .sr-card__arrow {
  color: var(--sr-accent);
  transform: translateX(4px);
}

/* ── Empty state ── */
.sr-empty {
  max-width: var(--sr-max-width);
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
}

.sr-empty p {
  font-size: 1rem;
  color: var(--sr-text-muted);
  font-style: italic;
}

/* ── CTA ── */
.sr-cta {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 2rem 5rem;
  text-align: center;
}

.sr-cta__box {
  background: #0e0e0e;
  border: 1px solid var(--sr-border);
  padding: 2.5rem 2rem;
  border-radius: 4px;
}

.sr-cta__box h3 {
  font-family: var(--sr-font-serif);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--sr-text);
  margin-bottom: 0.8rem;
}

.sr-cta__box p {
  font-size: 0.9rem;
  color: var(--sr-text-secondary);
  margin-bottom: 1.5rem;
}

.sr-cta__button {
  display: inline-block;
  font-family: var(--sr-font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sr-bg);
  background: var(--sr-accent);
  padding: 0.8rem 2rem;
  text-decoration: none;
  border-radius: 2px;
  transition: all var(--sr-transition);
}

.sr-cta__button:hover {
  background: var(--sr-text);
}

/* ── Footer Symbol ── */
.sr-footer-symbol {
  text-align: center;
  padding: 2rem 0 4rem;
  font-family: var(--sr-font-sans);
  font-size: 1.5rem;
  color: var(--sr-text-muted);
  opacity: 0.3;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .sr-hero {
    min-height: 45vh;
    padding: 3rem 1.5rem;
  }

  .sr-grid {
    padding: 0 1.5rem 3rem;
  }

  .sr-card {
    grid-template-columns: 60px 1fr 30px;
    gap: 1rem;
    padding: 1.5rem;
  }

  .sr-card__kanji {
    font-size: 2.2rem;
  }

  .sr-card__title {
    font-size: 1.1rem;
  }

  .sr-card__desc {
    font-size: 0.85rem;
  }
}

/* ===== MOBILE MENU FIX ===== */
@media (max-width: 1024px) {

  /* Меню: центрування, компактність */
  .site-nav .nav-menu {
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    gap: 0;
  }

  /* Кожен пункт: на всю ширину, по центру */
  .site-nav .nav-menu li {
    width: 100%;
    text-align: center;
    padding: 0;
  }

  /* Посилання: компактні відступи */
  .site-nav .nav-menu a {
    padding: 0.7rem 1rem;
    font-size: 1rem;
    display: block;
  }

  /* Підменю: під батьківським пунктом, по центру */
  .site-nav .nav-menu .sub-menu,
  .site-nav .nav-menu li > ul {
    position: static !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    float: none !important;
  }

  .site-nav .nav-menu .sub-menu li {
    width: 100%;
    text-align: center;
  }

  .site-nav .nav-menu .sub-menu a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.5rem 1rem;
    display: inline-block;
    border-left: 2px solid var(--border);
    padding-left: 1rem;
  }

  .site-nav .nav-menu .sub-menu a:hover {
    border-left-color: var(--accent);
    color: var(--accent);
  }

  /* CTA кнопка: по центру */
  .site-nav .nav-cta {
    margin: 0.5rem auto 0;
  }

  /* Прибрати стрілку dropdown якщо є */
  .site-nav .nav-menu .menu-item-has-children > a::after {
    display: none;
  }
}

/* ===== SOLO SEPARATOR — UNIVERSAL ===== */
.solo-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem 0;
  padding: 0.5rem 0;
}

.solo-sep__line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--border, #D4C9BE);
  opacity: 0.5;
}

.solo-sep__kanji {
  font-family: var(--font-jp, 'Noto Serif JP', serif);
  font-size: 1.3rem;
  color: var(--accent, #8B4513);
  opacity: 0.4;
  line-height: 1;
}

/* Темна тема (серії) */
.vzb-ch-content .solo-sep__line {
  background: var(--vzb-accent, #c4956a);
  opacity: 0.25;
}

.vzb-ch-content .solo-sep__kanji {
  color: var(--vzb-accent, #c4956a);
  opacity: 0.3;
}

/* ===== SOLO MOMENT — ДУМКА НА ШЛЯХУ ДЛЯ СТАТТІ З СЕРІЇ ===== */
.vzb-moment {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 2rem 2rem 2.5rem;
  border-left: 2px solid var(--vzb-accent, #c4956a);
  background: var(--vzb-accent-glow, rgba(196, 149, 106, 0.08));
  border-radius: 0 4px 4px 0;
}

.vzb-moment__kanji {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  font-family: var(--vzb-font-sans, 'Noto Sans JP', serif);
  font-size: 1.6rem;
  color: var(--vzb-accent, #c4956a);
  opacity: 0.15;
  filter: grayscale(1) sepia(1) hue-rotate(-15deg) saturate(3) brightness(0.8);
  line-height: 1;
  pointer-events: none;
}

.vzb-moment__text {
  position: relative;
  z-index: 2;
}

.vzb-moment__text p {
  font-family: var(--vzb-font-serif, 'Source Serif 4', Georgia, serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--vzb-text, #e8e4de);
  margin-bottom: 0;
}

.vzb-moment__text p:not(:last-child) {
  margin-bottom: 1rem;
}

.vzb-moment__text strong {
  color: var(--vzb-accent, #c4956a);
  font-weight: 600;
  font-style: normal;
}

@media (max-width: 640px) {
  .vzb-moment {
    padding: 1.5rem 1.5rem 1.5rem 1.8rem;
    margin: 2rem 0;
  }

  .vzb-moment__kanji {
    font-size: 1.4rem;
    top: 0.8rem;
    right: 1rem;
  }
}

/* ===== СУТЬ. КОРОТКО — СЕРІЇ (ТЕМНА) ===== */
.vzb-ch-summary {
  max-width: var(--vzb-max-width, 720px);
  margin: 0 auto 2rem;
  padding: 2rem 2rem 2rem 2.5rem;
  border-left: 2px solid var(--vzb-accent, #c4956a);
  background: var(--vzb-accent-glow, rgba(196, 149, 106, 0.08));
  border-radius: 0 4px 4px 0;
}

.vzb-ch-summary__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.2rem;
}

.vzb-ch-summary__kanji {
  font-family: var(--vzb-font-sans, 'Noto Sans JP', serif);
  font-size: 1.3rem;
  color: var(--vzb-accent, #c4956a);
  opacity: 0.8;
}

.vzb-ch-summary__title {
  font-family: var(--vzb-font-serif, 'Noto Serif', serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--vzb-text, #e8e4de);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.vzb-ch-summary__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vzb-ch-summary__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
  font-family: var(--vzb-font-sans, 'DM Sans', sans-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--vzb-text-secondary, #9a9590);
}

.vzb-ch-summary__list li:last-child {
  margin-bottom: 0;
}

.vzb-ch-summary__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--vzb-accent, #c4956a);
  font-weight: 600;
}

@media (max-width: 640px) {
  .vzb-ch-summary {
    padding: 1.5rem 1.5rem 1.5rem 1.8rem;
  }
}

/* ===== RELATED — СЕРІЇ (ТЕМНА) ===== */
.vzb-ch-related {
  margin-bottom: 2.5rem;
}

.vzb-ch-related__title {
  font-family: var(--vzb-font-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vzb-text-muted, #5a5550);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--vzb-border, #222);
}

.vzb-ch-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}

.vzb-ch-related__card {
  display: block;
  padding: 1.2rem;
  background: var(--vzb-bg-card, #161616);
  border: 1px solid var(--vzb-border, #222);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s;
}

.vzb-ch-related__card:hover {
  border-color: var(--vzb-accent, #c4956a);
  background: var(--vzb-bg-card-hover, #1c1c1c);
}

.vzb-ch-related__kanji {
  font-family: var(--vzb-font-sans, 'Noto Sans JP', serif);
  font-size: 1.3rem;
  color: var(--vzb-accent, #c4956a);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.3rem;
}

.vzb-ch-related__card h3 {
  font-family: var(--vzb-font-serif, 'Noto Serif', serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--vzb-text, #e8e4de);
  margin-bottom: 0.4rem;
  transition: color 0.3s;
}

.vzb-ch-related__card:hover h3 {
  color: var(--vzb-accent, #c4956a);
}

.vzb-ch-related__card p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--vzb-text-secondary, #9a9590);
  margin: 0;
}

.vzb-ch-related__read {
  font-family: var(--vzb-font-sans, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  color: var(--vzb-accent, #c4956a);
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
  display: inline-block;
}

@media (max-width: 640px) {
  .vzb-ch-related__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== RELATED CARDS — БЛОГ ===== */
.article-content .sg-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.article-content .sg-related h2 {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.article-content .sg-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.article-content .sg-related-card {
  display: block;
  padding: 1.2rem;
  background: var(--bg-warm, #F5F0EB);
  border: 1px solid var(--border, #D4C9BE);
  text-decoration: none;
  transition: all 0.3s;
}

.article-content .sg-related-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.article-content .sg-related-kanji {
  font-family: var(--font-jp);
  font-size: 1.4rem;
  color: var(--accent);
  opacity: 0.5;
  display: block;
  margin-bottom: 0.3rem;
}

.article-content .sg-related-card h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.article-content .sg-related-card:hover h3 {
  color: var(--accent);
}

.article-content .sg-related-card p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.article-content .sg-term-read {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  display: inline-block;
}

@media (max-width: 640px) {
  .article-content .sg-related-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SOLO-MAN AUDIO PLAYER v3.0
   Замінити попередні стилі sm-audio в style.css
   ============================================ */

/* ── Container ── */
.sm-audio {
  max-width: 680px;
  margin: 0 auto 2rem;
  background: #1a1a1a;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  position: relative;
  border: 1px solid rgba(255,255,255,0.06);
}

/* ── Header: label + time ── */
.sm-audio__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.sm-audio__label {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.sm-audio__time {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
}

/* ── Progress Bar ── */
.sm-audio__progress-wrap {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin-bottom: 0.8rem;
  transition: height 0.15s;
}

.sm-audio__progress-wrap:hover {
  height: 6px;
}

.sm-audio__progress {
  height: 100%;
  background: var(--accent, #c4956a);
  border-radius: 4px;
  width: 0%;
  transition: width 0.1s linear;
}

.sm-audio__progress-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  background: var(--accent, #c4956a);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

.sm-audio__progress-wrap:hover .sm-audio__progress-thumb {
  opacity: 1;
}

/* ── Controls Row ── */
.sm-audio__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sm-audio__controls-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sm-audio__controls-extra {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* ── Buttons ── */
.sm-audio__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  padding: 0;
  flex-shrink: 0;
}

.sm-audio__btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

.sm-audio__btn--play {
  width: 44px;
  height: 44px;
  color: #fff;
  background: var(--accent, #c4956a);
  margin: 0 0.2rem;
}

.sm-audio__btn--play:hover {
  background: #d4a57a;
  transform: scale(1.05);
}

.sm-audio__btn--small {
  width: 32px;
  height: 32px;
}

.sm-audio__btn--disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

.sm-audio__btn--active {
  color: var(--accent, #c4956a) !important;
  background: rgba(196, 149, 106, 0.15);
}

.sm-audio__btn--highlight {
  animation: sm-pulse 1.5s ease-in-out 3;
}

@keyframes sm-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 149, 106, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(196, 149, 106, 0); }
}

.sm-audio__btn svg {
  display: block;
}

/* ── Speed Button ── */
.sm-audio__btn--speed {
  width: auto;
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}

.sm-audio__btn--speed:hover {
  color: var(--accent, #c4956a);
  background: rgba(255,255,255,0.08);
}

/* ── Volume ── */
.sm-audio__volume {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.sm-audio__volume-slider {
  width: 50px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: width 0.2s;
}

.sm-audio__volume:hover .sm-audio__volume-slider {
  width: 70px;
}

.sm-audio__volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.sm-audio__volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

/* ── Auto-transition Overlay ── */
.sm-audio__next {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(196, 149, 106, 0.2);
  animation: sm-slideUp 0.4s ease-out;
}

@keyframes sm-slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sm-audio__next-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 700px;
  width: 100%;
}

.sm-audio__next-label {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #c4956a);
  margin-bottom: 0.2rem;
}

.sm-audio__next-title {
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 1.1rem;
  color: #e8e4de;
  flex: 1;
  min-width: 0;
}

.sm-audio__next-countdown {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}

.sm-audio__next-actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.sm-audio__next-go {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--accent, #c4956a);
  padding: 0.5rem 1.2rem;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.sm-audio__next-go:hover {
  background: #d4a57a;
}

.sm-audio__next-cancel {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s;
}

.sm-audio__next-cancel:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

/* ── Dark pages (VZB series) ── */
.vzb-ch-page .sm-audio {
  background: #111;
  border-color: #2a2a2a;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .sm-audio {
    padding: 0.8rem 1rem;
    border-radius: 6px;
  }

  .sm-audio__btn {
    width: 32px;
    height: 32px;
  }

  .sm-audio__btn--play {
    width: 40px;
    height: 40px;
  }

  .sm-audio__btn--play svg {
    width: 24px;
    height: 24px;
  }

  .sm-audio__btn--small {
    width: 28px;
    height: 28px;
  }

  .sm-audio__btn--small svg {
    width: 16px;
    height: 16px;
  }

  .sm-audio__volume-slider {
    display: none;
  }

  .sm-audio__next-inner {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }

  .sm-audio__next-actions {
    justify-content: center;
  }
}

/* ── Mobile bottom nav offset ── */
@media (max-width: 1024px) {
  .sm-audio__next {
    bottom: 72px;
  }
}

/* ── Continue Listening (autoplay blocked) ── */
.sm-audio__continue {
  max-width: 680px;
  margin: -0.5rem auto 2rem;
  text-align: center;
  animation: sm-fadeIn 0.3s ease;
}

@keyframes sm-fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.sm-audio__continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #c4956a);
  background: transparent;
  border: 1px solid var(--accent, #c4956a);
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.sm-audio__continue-btn:hover {
  background: var(--accent, #c4956a);
  color: #fff;
}

.sm-audio__continue-btn svg {
  flex-shrink: 0;
}