/*
Theme Name: FNN
Theme URI: https://example.com/fnn
Author: FNN Team
Description: Ретро-газета из будущего: первая полоса с лид-материалом, колонки новостей, таймлайн прогнозов и архив. Новости = Posts, статика = Pages, прогнозы = меню «Прогнозы» в админке.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fnn
Tags: news, blog, one-column, custom-menu, featured-images
*/

/* ============ База ============ */
:root{
	--paper:#f7f1e0;
	--bg:#eee3c8;
	--ink:#191512;
	--ink-soft:#5a5245;
	--rule:#26221c;
	--line:rgba(38,34,28,.35);
	--gold:#a07c3f;
	--dark:#221d18;
}
*{box-sizing:border-box;}
html{background:var(--bg);}
body{
	margin:0;
	font-family:'PT Serif',Georgia,'Times New Roman',serif;
	font-size:16px;
	color:var(--ink);
	background:
		radial-gradient(circle at 12% 8%, rgba(160,124,63,.08), transparent 30%),
		radial-gradient(circle at 88% 90%, rgba(160,124,63,.10), transparent 35%),
		radial-gradient(circle at 70% 20%, rgba(120,100,60,.06), transparent 25%),
		var(--bg);
}
img{max-width:100%;height:auto;}
a{color:inherit;}
a:focus-visible{outline:2px solid var(--gold);}
::selection{background:var(--gold);color:#fff;}

/* ============ «Лист газеты» ============ */
.paper{
	max-width:860px;
	margin:32px auto 48px;
	padding:44px 58px 56px;
	background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 120px), var(--paper);
	box-shadow:0 1px 3px rgba(70,55,20,.25), 0 14px 44px rgba(70,55,20,.22);
}

/* ============ Шапка ============ */
.masthead{text-align:center;}
.brand{
	display:block;
	font-family:'Playfair Display',Georgia,serif;
	font-weight:900;
	font-size:64px;
	line-height:1;
	letter-spacing:.04em;
	text-transform:uppercase;
	text-decoration:none;
}
.issue-line{
	display:flex;
	justify-content:space-between;
	gap:12px;
	margin:14px 0 10px;
	padding-top:8px;
	border-top:1px solid var(--rule);
	font-size:11px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ink-soft);
}
.main-nav{
	border-top:1px solid var(--rule);
	border-bottom:4px double var(--rule);
	padding:9px 0 10px;
}
.menu{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:6px 26px;
}
.menu li a{font-weight:700;font-size:14px;text-decoration:none;}
.menu li a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;}

/* ============ Лид-материал ============ */
.hero{margin-top:26px;text-align:center;}
.hero-title{
	margin:0 0 10px;
	font-family:'Playfair Display',Georgia,serif;
	font-weight:900;
	font-size:46px;
	line-height:1.08;
	text-transform:uppercase;
}
.hero-title a{text-decoration:none;}
.hero-title a:hover{text-decoration:underline;}
.hero-sub{margin:0 auto 20px;max-width:560px;font-weight:700;font-size:15px;line-height:1.45;}
.hero-img{display:block;}
.hero-img img{width:100%;display:block;border:1px solid var(--line);}
.hero-img.placeholder,.archive-ph{
	height:340px;
	border:1px solid var(--line);
	background:
		repeating-linear-gradient(0deg, rgba(38,34,28,.06) 0 1px, transparent 1px 7px),
		repeating-linear-gradient(90deg, rgba(38,34,28,.05) 0 1px, transparent 1px 7px),
		#e7dcc2;
}

/* ============ Заголовки секций ============ */
.section-title{
	margin:40px 0 0;
	padding-bottom:7px;
	border-bottom:1px solid var(--rule);
	font-family:'Playfair Display',Georgia,serif;
	font-size:21px;
	font-weight:700;
}

/* ============ Колонки «Latest News» ============ */
.cols{display:grid;grid-template-columns:repeat(3,1fr);}
.cols .empty{grid-column:1/-1;}
.col-item{padding:16px 20px 4px 0;}
.col-item + .col-item{padding-left:20px;border-left:1px solid var(--line);}
.col-item h3{margin:0 0 8px;font-size:16px;line-height:1.3;}
.col-item h3 a{text-decoration:none;}
.col-item h3 a:hover{text-decoration:underline;}
.col-text{font-size:13px;line-height:1.6;color:var(--ink-soft);text-align:justify;}
.stamp{margin-top:10px;font-size:10.5px;letter-spacing:.08em;color:var(--ink-soft);text-align:right;}
.empty{padding:18px 0 6px;font-style:italic;color:var(--ink-soft);}

/* ============ Таймлайн прогнозов ============ */
.timeline{
	--yw:72px; --gw:30px; --iw:46px;
	position:relative;
	padding:20px 0 8px;
}
.timeline::before{
	content:"";
	position:absolute;
	top:26px;bottom:14px;
	left:calc(var(--yw) + var(--gw) / 2);
	border-left:1px solid var(--rule);
}
.tl-row{
	position:relative;
	display:grid;
	grid-template-columns:var(--yw) var(--gw) var(--iw) 1fr;
	align-items:center;
	padding:7px 0;
}
.tl-row::before{
	content:"";
	position:absolute;
	left:calc(var(--yw) + var(--gw) / 2 - 4px);
	top:50%;
	width:8px;height:8px;margin-top:-4px;
	background:var(--paper);
	border:1px solid var(--rule);
	transform:rotate(45deg);
}
.tl-year{padding-right:10px;text-align:right;font-weight:700;font-size:15px;}
.tl-icon{
	width:var(--iw);height:var(--iw);
	display:flex;align-items:center;justify-content:center;
	background:var(--dark);color:#efe6cd;
	border-radius:7px;font-size:20px;overflow:hidden;
}
.tl-row:nth-child(even) .tl-icon{background:var(--gold);}
.tl-icon img{width:100%;height:100%;object-fit:cover;}
.tl-text{padding-left:16px;font-size:13.5px;}

/* ============ Архив ============ */
.archive-card{
	position:relative;
	display:block;
	max-width:600px;
	margin:22px auto 6px;
	padding:10px 10px 12px;
	background:#fbf6e7;
	border:1px solid #cfc3a4;
	box-shadow:0 8px 22px rgba(70,55,20,.30);
	transform:rotate(-1.4deg);
	text-decoration:none;
}
.archive-card img{width:100%;display:block;filter:grayscale(1) sepia(.30) contrast(1.05) brightness(.98);}
.archive-card::before,.archive-card::after{
	content:"";
	position:absolute;
	width:90px;height:26px;
	background:rgba(214,197,150,.85);
	box-shadow:0 1px 2px rgba(70,55,20,.25);
}
.archive-card::before{top:-12px;left:34px;transform:rotate(-6deg);}
.archive-card::after{top:-12px;right:34px;transform:rotate(5deg);}
.archive-cap{
	position:absolute;
	left:50%;bottom:20px;transform:translateX(-50%);
	padding:3px 12px;
	background:var(--paper);
	border:1px solid var(--rule);
	font-size:11px;font-style:italic;white-space:nowrap;
}

/* ============ Списки (index/archive) ============ */
.list-wrap{margin-top:26px;}
.list-item{padding:18px 0;border-bottom:1px solid var(--line);}
.list-item h2{margin:0 0 4px;font-family:'Playfair Display',Georgia,serif;font-size:24px;}
.list-item h2 a{text-decoration:none;}
.list-item h2 a:hover{text-decoration:underline;}
.pager{display:flex;justify-content:space-between;padding:16px 0;font-weight:700;}

/* ============ Статья и страницы ============ */
.post-article{margin-top:28px;}
.post-title{
	margin:0 0 10px;
	text-align:center;
	font-family:'Playfair Display',Georgia,serif;
	font-weight:900;
	font-size:38px;
	line-height:1.12;
	text-transform:uppercase;
}
.post-meta{
	display:flex;justify-content:center;gap:18px;
	margin-bottom:20px;padding-bottom:12px;
	border-bottom:1px solid var(--rule);
	font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.post-meta a{text-decoration:none;}
.post-img{margin:0 0 20px;}
.post-img img{width:100%;border:1px solid var(--line);}
.post-content{font-size:16.5px;line-height:1.75;}
.post-content p:first-of-type::first-letter{
	float:left;
	padding:6px 10px 0 0;
	font-family:'Playfair Display',Georgia,serif;
	font-weight:900;font-size:56px;line-height:.8;
}
.post-nav{
	display:flex;justify-content:space-between;gap:16px;
	margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;
}
.post-nav a{text-decoration:none;}
.post-nav a:hover{text-decoration:underline;}

/* ============ Подвал ============ */
.site-footer{
	margin-top:48px;padding-top:14px;
	border-top:4px double var(--rule);
	text-align:center;
	font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.footer-feeds{margin-top:6px;font-size:10px;letter-spacing:.08em;}

/* ============ Мобильная версия ============ */
@media (max-width:760px){
	.paper{margin:12px;padding:26px 20px 36px;}
	.brand{font-size:44px;}
	.hero-title{font-size:30px;}
	.post-title{font-size:28px;}
	.issue-line{flex-direction:column;gap:2px;text-align:center;}
	.cols{grid-template-columns:1fr;}
	.col-item{padding:14px 0 4px;}
	.col-item + .col-item{padding-left:0;border-left:0;border-top:1px solid var(--line);}
	.timeline{--yw:52px;--gw:22px;--iw:38px;}
	.tl-year{font-size:13px;}
}
/* ============ Первая полоса: прогнозы справа ============ */
.front-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 250px;
    gap:0 34px;
    margin-top:26px;
}
.front-main .hero{margin-top:0;}
.front-main .hero-title{font-size:36px;}
.front-side{
    border-left:1px solid var(--line);
    padding-left:22px;
}
.front-side .section-title{margin-top:0;font-size:17px;}
.front-side .timeline{--yw:46px;--gw:20px;--iw:38px;padding:14px 0 8px;}
.front-side .tl-year{font-size:12px;}
.front-side .tl-text{font-size:12px;padding-left:10px;}
.with-side .cols{grid-template-columns:1fr;}
.with-side .col-item{padding:12px 0 4px;}
.with-side .col-item + .col-item{padding-left:0;border-left:0;border-top:1px solid var(--line);}

@media (max-width:760px){
    .front-grid{grid-template-columns:1fr;}
    .front-main .hero-title{font-size:30px;}
    .front-side{
        border-left:0;
        padding-left:0;
        margin-top:34px;
        border-top:1px solid var(--rule);
        padding-top:18px;
    }
}
/* ============ Прогнозы: столбец справа от листа ============ */
.paper{position:relative;}
.paper:has(.with-side){
    margin-left:max(16px, calc(50vw - 550px));
    margin-right:auto;
}
.front-grid{grid-template-columns:1fr;}
.front-main .hero-title{font-size:44px;}
.with-side .cols{grid-template-columns:repeat(3,1fr);}
.with-side .col-item{padding:16px 20px 4px 0;}
.with-side .col-item + .col-item{padding-left:20px;border-left:1px solid var(--line);border-top:0;}

.front-side{
    position:absolute;
    top:120px;
    left:calc(100% + 24px);
    width:220px;
    padding:0 0 0 18px;
    background:none;
    border:0;
    border-left:1px solid var(--rule);
    box-shadow:none;
    transform:none;
}
.front-side .timeline{--yw:44px;--gw:18px;--iw:34px;}

@media (max-width:1120px){
    .front-side{
        position:static;
        width:auto;
        margin-top:34px;
        padding:18px 0 0;
        border-left:0;
        border-top:1px solid var(--rule);
    }
}
/* ============ Столбец на бумажном фоне ============ */
.front-side{
    width:250px;
    padding:18px;
    background:var(--paper);
    box-shadow:0 1px 3px rgba(70,55,20,.25), 0 14px 44px rgba(70,55,20,.22);
}
@media (max-width:1180px){
    .front-side{
        position:static;
        width:auto;
        margin-top:34px;
        padding:18px 0 0;
        border-left:0;
        border-top:1px solid var(--rule);
        background:none;
        box-shadow:none;
    }
}
/* ============ Счётчик читателей ============ */
.counter{
    margin-top:10px;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
}
.counter span{
    display:inline-block;
    margin-left:6px;
    padding:2px 10px;
    border:1px solid var(--rule);
    background:var(--paper);
    font-weight:700;
    letter-spacing:.2em;
    color:var(--ink);
}
/* ============ Рекламные блоки ============ */
.ad-box{
    margin:24px 0;
    padding:14px 16px;
    border:1px solid var(--rule);
    background:
        repeating-linear-gradient(-45deg, rgba(38,34,28,.035) 0 2px, transparent 2px 7px),
        rgba(251,246,231,.75);
    text-align:center;
    color:var(--ink);
}
.ad-label{
    display:inline-block;
    margin-bottom:8px;
    padding:2px 8px;
    border:1px solid var(--line);
    font-size:9px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
}
.ad-title{
    font-family:'Playfair Display', Georgia, serif;
    font-weight:900;
    font-size:18px;
    line-height:1.15;
    text-transform:uppercase;
}
.ad-box p{
    margin:8px auto;
    max-width:360px;
    font-size:12.5px;
    line-height:1.45;
    color:var(--ink-soft);
}
.ad-box a{
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    text-decoration:none;
    border-bottom:1px solid var(--rule);
}
.ad-box a:hover{color:var(--gold);border-bottom-color:var(--gold);}
.front-side .ad-box{margin:22px 0 0;padding:12px;}
.front-side .ad-title{font-size:15px;}
.front-side .ad-box p{font-size:11.5px;}