/* =========================================================
   BIOGRAPHS.ORG — єдина адаптивна таблиця стилів
   Замінює web_style.css + wap_style.css.
   Дизайн підлаштовується під пристрій через медіа-запити,
   без потреби визначати тему на боці PHP.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
	--paper:#FBF8F3;
	--panel:#FFFFFF;
	--ink:#1B1B18;
	--ink-soft:#5B564C;
	--ink-faint:#8B8577;
	--line:#E7E0D0;
	--line-strong:#D8CFB8;
	--navy:#1F3A5F;
	--navy-dark:#152944;
	--navy-tint:#EAF0F6;
	--gold:#AD7C23;
	--gold-soft:#F3E7CC;
	--danger-bg:#FBEAE7;
	--danger-border:#E4A99C;
	--danger-text:#873523;
	--radius-lg:16px;
	--radius:10px;
	--radius-sm:6px;
	--shadow-sm:0 1px 2px rgba(27,27,24,.06);
	--shadow-md:0 10px 30px -14px rgba(27,27,24,.28);
	--font-display:'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--max:1120px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
	background:var(--paper);
	color:var(--ink);
	margin:0;
	padding:0;
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
img{border:0;max-width:100%;height:auto;display:block;}
a{color:var(--navy);text-decoration:none;}
a:hover{color:var(--gold);}
::selection{background:var(--gold-soft);color:var(--ink);}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}

h1{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,4vw,34px);line-height:1.2;margin:0 0 6px;color:var(--ink);}
h2{font-family:var(--font-display);font-weight:600;font-size:clamp(19px,2.6vw,24px);line-height:1.3;margin:28px 0 10px;color:var(--ink);}
p{margin:0 0 14px;}

/* ---------- Форми ---------- */
input[type="text"], input[type="password"], input[type="email"], textarea, select{
	border-radius:var(--radius-sm);
	padding:10px 12px;
	box-sizing:border-box;
	border:1px solid var(--line-strong);
	background:var(--panel);
	margin:0;
	width:100%;
	font-family:var(--font-body);
	font-size:15px;
	color:var(--ink);
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus{
	border-color:var(--navy);
	outline:2px solid var(--navy-tint);
	outline-offset:0;
}
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--navy);}
textarea{width:100%;font-family:var(--font-body);resize:vertical;}

input[type="submit"], input[type="button"], .button, a.button{
	background:var(--navy);
	border:none;
	color:#fff;
	font-weight:600;
	font-family:var(--font-body);
	border-radius:999px;
	padding:11px 22px;
	text-align:center;
	text-decoration:none;
	display:inline-block;
	font-size:15px;
	cursor:pointer;
	transition:background .15s ease, transform .15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, .button:hover, a.button:hover{
	background:var(--navy-dark);
	color:#fff;
}
input[type="submit"]:active, .button:active{transform:translateY(1px);}

/* ---------- Шапка сайту ---------- */
.site-header{
	position:sticky;top:0;z-index:40;
	background:rgba(251,248,243,.92);
	backdrop-filter:saturate(140%) blur(8px);
	border-bottom:1px solid var(--line);
}
.site-header__inner{
	max-width:var(--max);
	margin:0 auto;
	padding:12px 20px;
	display:flex;
	align-items:center;
	gap:18px;
	flex-wrap:wrap;
}
.brand{
	display:flex;
	align-items:center;
	gap:10px;
	flex-shrink:0;
}
.brand:hover{color:var(--ink);}
.brand__seal{
	width:34px;height:34px;flex-shrink:0;
	border-radius:50%;
	background:var(--navy);
	border:2px solid var(--gold);
	color:#fff;
	font-family:var(--font-display);
	font-weight:700;
	font-size:16px;
	display:flex;align-items:center;justify-content:center;
}
.brand__word{
	font-family:var(--font-display);
	font-weight:600;
	font-size:19px;
	letter-spacing:.03em;
	color:var(--ink);
}
.brand__word small{
	display:block;
	font-family:var(--font-mono);
	font-weight:500;
	font-size:9px;
	letter-spacing:.14em;
	color:var(--ink-faint);
	text-transform:uppercase;
	margin-top:1px;
}

.site-search{
	flex:1 1 200px;
	min-width:140px;
	max-width:420px;
	display:flex;
	position:relative;
}
.site-search input[type="text"]{
	border-radius:999px;
	padding:9px 40px 9px 16px;
	border:1px solid var(--line-strong);
	background:var(--panel);
}
.site-search button{
	position:absolute;
	right:4px;top:50%;transform:translateY(-50%);
	width:30px;height:30px;
	border:none;background:transparent;
	color:var(--ink-faint);
	cursor:pointer;
	display:flex;align-items:center;justify-content:center;
}
.site-search button:hover{color:var(--navy);}

.site-nav{
	display:flex;
	align-items:center;
	gap:4px;
	flex-shrink:0;
	margin-left:auto;
	font-size:14px;
	font-weight:600;
}
.site-nav a{
	color:var(--ink-soft);
	padding:8px 10px;
	border-radius:999px;
}
.site-nav a:hover{background:var(--navy-tint);color:var(--navy);}
.site-nav .cta{
	background:var(--navy);
	color:#fff!important;
	padding:8px 16px;
}
.site-nav .cta:hover{background:var(--navy-dark);}
.badge{
	background:var(--gold);
	color:#fff;
	font-family:var(--font-mono);
	font-size:10px;
	font-weight:500;
	border-radius:999px;
	padding:1px 6px;
	margin-left:5px;
	vertical-align:2px;
}

/* ---------- Каркас сторінки ---------- */
.layout{
	max-width:var(--max);
	margin:0 auto;
	padding:22px 20px 60px;
	display:grid;
	grid-template-columns:220px minmax(0,1fr);
	gap:28px;
	align-items:start;
}
.sidebar{order:1;position:sticky;top:78px;}
.main{order:2;min-width:0;}

.account-box{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:16px;
	margin-bottom:14px;
}
.account-box .who{font-family:var(--font-display);font-weight:600;font-size:16px;margin-bottom:2px;}
.account-box form{display:flex;flex-direction:column;gap:8px;}
.account-box p{margin:8px 0 0;font-size:13px;}

.categories{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:6px;
}
.categories .eyebrow{
	font-family:var(--font-mono);
	font-size:10px;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:var(--ink-faint);
	padding:10px 12px 4px;
}
.blok{
	padding:9px 12px;
	line-height:1.3;
	border-radius:var(--radius-sm);
	font-size:14px;
}
.blok:hover{background:var(--gold-soft);}
.blok a{color:var(--ink);font-weight:500;}
.blok a:hover{color:var(--navy);background:transparent;padding:0;}

/* ---------- Хлібні крихти / контент ---------- */
.menu{
	font-family:var(--font-mono);
	font-size:12px;
	letter-spacing:.02em;
	color:var(--ink-faint);
	padding:2px 0 14px;
}
.menu a{color:var(--ink-soft);}
.menu a:hover{color:var(--navy);}

.content{padding:0;}

.base{
	background:var(--panel);
	border:1px solid var(--line);
	padding:18px 20px;
	border-radius:var(--radius-lg);
	margin:0 0 14px;
	box-shadow:var(--shadow-sm);
}
.dark{background:#F2EFE8;padding:18px 20px;border-radius:var(--radius-lg);margin:0 0 14px;}
.gold{background:var(--gold-soft);padding:18px 20px;border-radius:var(--radius-lg);margin:0 0 14px;}
.pink{background:var(--danger-bg);padding:18px 20px;border-radius:var(--radius-lg);margin:0 0 14px;}

.gray{font-size:13px;color:var(--ink-soft);}
.quote{font-size:15px;padding:8px 0 8px 14px;color:var(--ink-soft);border-left:3px solid var(--gold);margin:14px 0;}
.error{color:var(--danger-text);background:var(--danger-bg);border:1px solid var(--danger-border);padding:14px 16px;margin:4px 0 14px;border-radius:var(--radius);}
.warning{color:var(--ink);background:var(--gold-soft);border:1px solid var(--line-strong);padding:14px 16px;margin:4px 0 14px;border-radius:var(--radius);}

/* ---------- Картки людей (списки) ---------- */
.person-row{
	display:flex;
	align-items:center;
	gap:14px;
	text-decoration:none;
}
.person-row .avatar{
	flex-shrink:0;
	width:56px;height:56px;
	border-radius:50%;
	overflow:hidden;
	background:var(--navy-tint);
	border:1px solid var(--line);
}
.person-row .avatar img{width:100%;height:100%;object-fit:cover;}
.person-row .info{min-width:0;}
.person-row .name{
	font-family:var(--font-display);
	font-weight:600;
	font-size:18px;
	color:var(--ink);
	text-decoration:underline;
	text-decoration-color:var(--line-strong);
	text-underline-offset:3px;
}
.person-row a.name:hover{color:var(--navy);text-decoration-color:var(--gold);}
.person-row .flag-line{display:flex;align-items:center;gap:6px;margin-top:3px;}
.person-row .flag-line img{width:16px;height:auto;border-radius:2px;}
.person-row .prof{margin-top:4px;font-size:14px;color:var(--ink-soft);}
@media (min-width:560px){
	.person-row .avatar{width:64px;height:64px;}
}

/* ---------- Профіль людини ---------- */
.profile-hero{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;}
.profile-hero .photo{
	width:200px;flex-shrink:0;
	border-radius:var(--radius);
	overflow:hidden;
	border:1px solid var(--line);
	box-shadow:var(--shadow-sm);
}
.profile-hero .info{flex:1 1 260px;min-width:0;}
.profile-hero .prof-title{
	font-family:var(--font-mono);
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--gold);
	margin:6px 0 12px;
}
.profile-hero .meta{
	display:flex;flex-direction:column;gap:6px;
	font-size:14px;color:var(--ink-soft);
	border-top:1px solid var(--line);
	padding-top:12px;
}
.profile-hero .meta b{color:var(--ink);font-weight:600;}
.profile-hero .meta img{display:inline-block;width:16px;height:auto;vertical-align:-2px;margin-right:4px;}
.edit-link{float:right;font-family:var(--font-mono);font-size:11px;background:var(--gold-soft);padding:3px 8px;border-radius:999px;}

.content h2{position:relative;padding-left:14px;}
.content h2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--gold);border-radius:2px;}
.content ol{padding-left:20px;font-size:14px;color:var(--ink-soft);}
.content ol a{color:var(--ink-soft);}
.content ol a:hover{color:var(--navy);}

.inline-photo{margin:18px 0;}
.inline-photo img{border-radius:var(--radius);max-width:100%;}

.video-embed{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;margin:18px auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.yt-thumb-wrap{margin:14px 0;max-width:480px;}
.yt-thumb{
	display:block;position:relative;
	width:100%;aspect-ratio:16/9;
	background-size:cover;background-position:center;
	border-radius:var(--radius);overflow:hidden;
	box-shadow:var(--shadow-sm);cursor:pointer;
}
.yt-thumb::after{
	content:"";position:absolute;top:50%;left:50%;
	width:56px;height:56px;transform:translate(-50%,-50%);
	background:rgba(27,27,24,.55);border-radius:50%;
	transition:background .15s ease;
}
.yt-thumb::before{
	content:"";position:absolute;top:50%;left:calc(50% + 3px);
	transform:translate(-50%,-50%);
	border-style:solid;border-width:10px 0 10px 16px;
	border-color:transparent transparent transparent #fff;
	z-index:1;
}
.yt-thumb:hover::after{background:var(--gold);}

.related-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
	gap:16px;
	margin-top:6px;
}
.related-card{text-align:center;}
.related-card .avatar{
	width:96px;height:96px;margin:0 auto 8px;
	border-radius:50%;overflow:hidden;
	border:1px solid var(--line);background:var(--navy-tint);
}
.related-card .avatar img{width:100%;height:100%;object-fit:cover;}
.related-card a{font-size:13px;font-weight:600;color:var(--ink);}
.related-card a:hover{color:var(--navy);}

/* ---------- Форми (вхід/реєстрація тощо) ---------- */
.form{display:flex;flex-direction:column;gap:12px;}
.form.centered{margin:0 auto;max-width:360px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.field-row{display:flex;align-items:center;gap:10px;}
.captcha{border-radius:var(--radius-sm);border:1px solid var(--line);}
.form-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;}
.form-inline input[type="text"]{max-width:280px;}
.policy-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}

/* ---------- Пагінація ---------- */
.nav{text-align:right;padding:16px 2px;font-size:14px;}
.nav a{border:1px solid var(--line-strong);padding:6px 12px;text-decoration:none;border-radius:999px;color:var(--ink-soft);}
.nav a:hover{background:var(--navy-tint);border-color:var(--navy);color:var(--navy);}
.navcurrent{color:#fff;background:var(--navy);border:1px solid var(--navy);padding:6px 12px;font-weight:700;border-radius:999px;}

/* ---------- Підвал ---------- */
.site-footer{
	max-width:var(--max);
	margin:0 auto;
	padding:20px 20px 40px;
	text-align:center;
	font-size:13px;
	color:var(--ink-faint);
	border-top:1px solid var(--line);
	margin-top:24px;
}
.site-footer a{color:var(--ink-soft);margin:0 8px;}
.site-footer a:hover{color:var(--navy);}
.site-footer .copy{margin-top:10px;font-family:var(--font-mono);font-size:11px;}

.empty-state{text-align:center;padding:80px 16px;color:var(--ink-soft);font-size:16px;}
.load-more{text-align:center;padding:20px 0;}
.load-more a{font-weight:600;}

/* ---------- Адаптив ---------- */
@media (max-width:800px){
	.layout{grid-template-columns:1fr;}
	.sidebar{order:2;position:static;display:flex;gap:12px;flex-wrap:wrap;}
	.sidebar .account-box{flex:1 1 220px;margin-bottom:0;}
	.sidebar .categories{flex:1 1 220px;}
	.main{order:1;}
	.profile-hero .photo{width:150px;}
}
@media (max-width:560px){
	.site-header__inner{padding:10px 14px;}
	.brand__word{font-size:17px;}
	.site-nav{gap:0;font-size:13px;}
	.site-nav a{padding:7px 8px;}
	.layout{padding:16px 14px 40px;}
	.base{padding:14px;}
	.sidebar{flex-direction:column;}
	h1{font-size:22px;}
}

/* ---------- Успадковані елементи (сторінки поза цим архівом) ---------- */
.ublok{padding:9px 6px;border-bottom:1px solid var(--line);}
.ublok a{display:block;}
.ublok:hover{background:var(--navy-tint);}
.flexHeader{color:var(--navy);background:var(--navy-tint);padding:6px 12px;border-radius:var(--radius-sm);}
.mainPost{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:8px;padding:8px 10px;}
.profile_bg{height:150px;background:var(--navy-tint);position:relative;border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.profile_photo{border:3px solid #fff;width:140px;height:140px;overflow:hidden;background:#fff;position:absolute;top:-80px;left:32px;border-radius:50%;box-shadow:var(--shadow-md);}
.profile_photo img{width:100%;height:100%;object-fit:cover;}
.profile_hint{display:none;color:#fff;background:rgba(27,27,24,.55);position:absolute;bottom:0;left:0;right:0;font-size:12px;text-align:right;padding:4px 8px;cursor:pointer;}
.profile_photo:hover .profile_hint{display:block;}

#buy,#b_green{background:var(--navy);}
#buy:hover,#b_green:hover{background:var(--navy-dark);}
#cart{background:#B5493F;}
#cart:hover{background:#973B32;}
#m_buy{background:var(--navy);color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;}
#m_cart{background:#B5493F;color:#fff;font-size:12px;padding:4px 8px;border-radius:999px;}
#m_gray,#b_gray{background:var(--line-strong);color:var(--ink);}
#m_gray:hover,#b_gray:hover{background:var(--ink-faint);color:#fff;}
#m_blue{background:var(--navy);color:#fff;font-size:12px;padding:5px 8px;border-radius:var(--radius-sm);}

.tabs{width:100%;margin:0 auto;}
.tabs>div,.tabs-content{display:none;padding:14px;border:1px solid var(--line);background:var(--panel);border-radius:0 var(--radius-lg) var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-sm);}
.tabs-content.active{display:block;}
.tabs>label{display:inline-block;padding:9px 14px;margin:0 -1px -1px 0;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm) var(--radius-sm) 0 0;background:#F2EFE8;cursor:pointer;}
.tabs label.active{background:var(--panel);border-bottom-color:var(--panel);}

ul#lmenu, ul#lmenu ul{list-style:none;margin:0;padding:0;width:170px;}
ul#lmenu a,ul#lmenu span{display:block;text-decoration:none;padding:6px 8px;border-radius:var(--radius-sm);}
ul#lmenu a:hover{background:var(--navy-tint);}