/*
Theme Name: Frontiers Weekly
Theme URI: https://www.frontiersmedia.com/
Description: Alt-weekly masthead theme for Frontiers Media — entertainment, culture and gaming.
Author: Frontiers Media
Version: 1.0
Text Domain: frontiers-weekly
*/

:root {
	--paper: #FBF7EF;
	--paper-deep: #F3EBDD;
	--ink: #232B36;
	--slate: #3E4A5C;
	--slate-deep: #2A3342;
	--coral: #FF6B4A;
	--coral-deep: #E5502F;
	--rule: #D9CFBD;
	--rule-strong: #B9AC93;
	--snap: 140ms cubic-bezier(.2, .9, .3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 17px/1.65 'Instrument Sans', system-ui, sans-serif;
}
img { max-width: 100%; height: auto; }
a { color: var(--slate-deep); }

h1, h2, h3, h4 {
	font-family: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
	line-height: 1.04;
	margin: 0 0 .4em;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: .01em;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

/* ---------- top bar ---------- */
.fw-topbar {
	background: var(--slate-deep);
	color: var(--paper);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.fw-topbar .wrap { display: flex; justify-content: space-between; padding-top: 7px; padding-bottom: 7px; }
.fw-topbar span:last-child { color: var(--coral); }

/* ---------- masthead ---------- */
.fw-masthead { border-bottom: 3px solid var(--ink); }
.fw-masthead .wrap {
	display: flex; align-items: center; gap: 22px;
	padding-top: 26px; padding-bottom: 20px;
}
.fw-mark { width: 84px; flex: 0 0 auto; transition: transform var(--snap); }
.fw-masthead a:hover .fw-mark { transform: translateY(-2px); }
.fw-masthead a { text-decoration: none; display: flex; align-items: center; gap: 22px; }
.fw-wordmark {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 900; font-size: clamp(44px, 7vw, 78px);
	letter-spacing: .015em; line-height: .9;
	color: var(--ink); text-transform: uppercase;
}
.fw-wordmark em { font-style: normal; color: var(--coral); }
.fw-tagline {
	margin-left: auto; text-align: right;
	font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--slate);
	border-left: 1px solid var(--rule-strong); padding-left: 18px;
}
.fw-tagline b { display: block; color: var(--coral-deep); }

/* ---------- nav ---------- */
.fw-nav { background: var(--slate); }
.fw-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fw-nav li a {
	display: block; padding: 12px 20px;
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 19px;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--paper); text-decoration: none;
	transition: background var(--snap), color var(--snap);
}
.fw-nav li a:hover, .fw-nav li.current-menu-item a { background: var(--coral); color: var(--slate-deep); }

/* ---------- ticker (signature moment) ---------- */
.fw-ticker {
	display: flex; align-items: center; overflow: hidden;
	background: var(--paper-deep); border-bottom: 1px solid var(--rule);
}
.fw-ticker-label {
	flex: 0 0 auto; padding: 6px 14px; background: var(--coral); color: var(--slate-deep);
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 15px;
	letter-spacing: .12em; text-transform: uppercase;
}
.fw-ticker-track { display: flex; white-space: nowrap; animation: fw-ticker 46s linear infinite; }
.fw-ticker:hover .fw-ticker-track { animation-play-state: paused; }
.fw-ticker-track a {
	padding: 6px 0; font-size: 13.5px; letter-spacing: .02em; text-decoration: none; color: var(--slate-deep);
}
.fw-ticker-track a::after { content: "\2022"; color: var(--coral); margin: 0 16px; }
@keyframes fw-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.fw-ticker-track { animation: none; }
}

/* ---------- link treatment: highlight sweep ---------- */
.fw-sweep, .entry a, .fw-rundown a, .fw-card h3 a, .fw-lead h2 a, .widget a {
	text-decoration: none;
	background-image: linear-gradient(rgba(255, 107, 74, .38), rgba(255, 107, 74, .38));
	background-repeat: no-repeat;
	background-size: 0% 38%;
	background-position: 0 82%;
	transition: background-size var(--snap);
}
.fw-sweep:hover, .entry a:hover, .fw-rundown a:hover, .fw-card h3 a:hover, .fw-lead h2 a:hover, .widget a:hover {
	background-size: 100% 38%;
}

/* ---------- kicker ---------- */
.fw-kicker {
	display: inline-block;
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 16px;
	letter-spacing: .18em; text-transform: uppercase; color: var(--coral-deep);
	border-bottom: 2px solid var(--coral); padding-bottom: 2px; margin-bottom: 10px;
}
.fw-kicker a { color: inherit; text-decoration: none; background: none; }

/* ---------- front page ---------- */
.fw-front { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 36px; padding: 34px 0 10px; }
.fw-lead { border-bottom: 3px solid var(--ink); padding-bottom: 26px; }
.fw-lead img { display: block; width: 100%; }
.fw-lead h2 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 900; margin: 14px 0 8px; }
.fw-lead h2 a { color: var(--ink); }
.fw-lead .fw-dek { font-size: 18px; color: var(--slate); margin: 0 0 6px; }
.fw-meta { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.fw-meta a { color: var(--coral-deep); text-decoration: none; background: none; }

.fw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 6px; }
.fw-card { padding: 22px 24px 26px 0; border-bottom: 1px solid var(--rule); }
.fw-card:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: 24px; padding-right: 0; }
.fw-card h3 { font-size: 27px; font-weight: 700; margin: 6px 0 8px; }
.fw-card h3 a { color: var(--ink); }
.fw-card p { margin: 0 0 8px; font-size: 15.5px; color: #3d4654; }
.fw-card .fw-kicker { font-size: 13.5px; margin-bottom: 4px; }
.fw-card img { display: block; width: 100%; margin-bottom: 10px; }

/* rundown rail */
.fw-rail { border-left: 3px solid var(--ink); padding-left: 26px; }
.fw-rail-title, .widget h3.widget-title, .widget h2 {
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 22px;
	letter-spacing: .1em; text-transform: uppercase;
	background: var(--ink); color: var(--paper);
	display: inline-block; padding: 3px 12px; margin: 0 0 14px;
}
.fw-rundown { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: rundown; }
.fw-rundown li { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.fw-rundown li::before {
	counter-increment: rundown; content: counter(rundown, decimal-leading-zero);
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 24px;
	color: var(--coral); line-height: 1;
}
.fw-rundown a { font-weight: 500; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.fw-rundown time { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-top: 3px; }

/* ---------- widgets ---------- */
.widget { margin: 0 0 30px; font-size: 15px; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.widget .fw-banner img { display: block; }
.widget select, .widget input[type="search"], .widget input[type="text"] {
	width: 100%; padding: 9px 12px; border: 1px solid var(--rule-strong);
	background: #fff; font: inherit; border-radius: 0;
}
.search-form { display: flex; gap: 0; }
.search-form .search-submit {
	background: var(--slate); color: var(--paper); border: 0; padding: 0 16px;
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; cursor: pointer; transition: background var(--snap);
}
.search-form .search-submit:hover { background: var(--coral); color: var(--slate-deep); }

/* ---------- single / page shell ---------- */
.fw-content { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 36px; padding: 34px 0; }
.fw-article header h1 { font-size: clamp(34px, 4.4vw, 52px); font-weight: 900; }
.fw-article .fw-dek { font-size: 19px; color: var(--slate); margin: 4px 0 10px; }
.fw-article .fw-meta { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 8px 0; margin: 12px 0 22px; }
.entry { font-size: 17px; }
.entry > p:first-of-type::first-letter {
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 900;
	font-size: 64px; line-height: .78; color: var(--coral-deep);
	float: left; padding: 6px 10px 0 0;
}
.entry img { display: block; margin: 1.4em auto; }
.entry h2 { font-size: 30px; border-top: 3px solid var(--ink); padding-top: 12px; margin-top: 1.6em; }
.entry h3 { font-size: 23px; }
.entry blockquote {
	margin: 1.4em 0; padding: 4px 0 4px 22px;
	border-left: 3px solid var(--coral); font-style: italic; color: var(--slate);
}
.entry .wp-caption-text { font-size: 13.5px; color: var(--slate); text-align: center; margin-top: -0.8em; }

/* FAQ */
.faq details { margin: 0; border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 12px 0; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: ""; position: absolute; right: 6px; top: 50%;
	width: 10px; height: 10px; border-right: 2px solid var(--coral-deep); border-bottom: 2px solid var(--coral-deep);
	transform: translateY(-70%) rotate(45deg); transition: transform var(--snap);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq h3.faq-q { display: inline; font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: 17px; text-transform: none; letter-spacing: 0; }
.faq p { margin: 0 0 14px; }

/* pagination + post nav */
.fw-pagination { display: flex; gap: 8px; flex-wrap: wrap; padding: 26px 0; }
.fw-pagination .page-numbers {
	padding: 7px 14px; border: 1px solid var(--rule-strong); text-decoration: none;
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink);
	transition: background var(--snap), color var(--snap);
}
.fw-pagination .page-numbers.current, .fw-pagination .page-numbers:hover { background: var(--slate); color: var(--paper); border-color: var(--slate); }
.post-page-numbers { margin-right: 6px; }

/* archives / category headers */
.fw-archive-head { padding: 30px 0 4px; }
.fw-archive-head h1 { font-size: clamp(30px, 4vw, 46px); }
.fw-archive-head .fw-kicker { font-size: 14px; }

/* comments */
.fw-comments { margin-top: 40px; border-top: 3px solid var(--ink); padding-top: 18px; }
.fw-comments ol { list-style: none; padding: 0; }
.fw-comments li { border-bottom: 1px solid var(--rule); padding: 14px 0; }
.comment-form label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.comment-form input, .comment-form textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--rule-strong); background: #fff; font: inherit; border-radius: 0; }
.comment-form .submit {
	width: auto; background: var(--coral); color: var(--slate-deep); border: 0; padding: 11px 26px;
	font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 18px;
	letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background var(--snap);
}
.comment-form .submit:hover { background: var(--coral-deep); color: var(--paper); }

/* contact form plugin */
.cntctfrm_contact_form input[type="text"], .cntctfrm_contact_form input[type="email"], .cntctfrm_contact_form textarea {
	width: 100%; padding: 9px 12px; border: 1px solid var(--rule-strong); background: #fff; font: inherit; border-radius: 0;
}

/* ---------- footer ---------- */
.fw-footer { background: var(--slate-deep); color: #C9CFDA; margin-top: 50px; font-size: 14.5px; }
.fw-footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 34px; padding-top: 40px; padding-bottom: 20px; }
.fw-footer h4 { color: var(--paper); font-size: 19px; letter-spacing: .1em; }
.fw-footer ul { list-style: none; margin: 0; padding: 0; }
.fw-footer li { padding: 4px 0; }
.fw-footer a { color: #C9CFDA; text-decoration: none; transition: color var(--snap); }
.fw-footer a:hover { color: var(--coral); }
.fw-footer .fw-mark { width: 56px; margin-bottom: 10px; }
.fw-copy { border-top: 1px solid #45526A; }
.fw-copy .wrap { display: flex; justify-content: space-between; padding: 14px 20px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- reveal: kicker-first ---------- */
html.js .fw-rv { opacity: 0; transform: translateY(10px); }
html.js .fw-rv .fw-kicker { opacity: 0; transform: translateX(-10px); }
html.js .fw-rv-in { opacity: 1; transform: none; transition: opacity .34s ease-out, transform .34s cubic-bezier(.2, .9, .3, 1); }
html.js .fw-rv-in .fw-kicker { opacity: 1; transform: none; transition: opacity .3s ease-out .12s, transform .3s cubic-bezier(.2, .9, .3, 1) .12s; }
html.js .fw-grid .fw-rv-in:nth-child(2n) { transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
	html.js .fw-rv, html.js .fw-rv .fw-kicker { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 880px) {
	.fw-front, .fw-content { grid-template-columns: 1fr; }
	.fw-rail { border-left: 0; border-top: 3px solid var(--ink); padding-left: 0; padding-top: 20px; }
	.fw-tagline { display: none; }
	.fw-mark { width: 58px; }
	.fw-grid { grid-template-columns: 1fr; }
	.fw-card:nth-child(2n) { border-left: 0; padding-left: 0; }
	.fw-card { padding-right: 0; }
	.fw-footer .wrap { grid-template-columns: 1fr; }
}