/* ==========================================================================
   news.css — News Archive redesign (Ameba). Loaded ONLY on news-archive.html,
   AFTER main-v3.css; every rule scoped under body.news-v2.
   ========================================================================== */

/* --- #1 Menu: black, coral hover, active "News" coral --------------------- */
body.news-v2 header nav a { color:#1A1A1A; font-size:16px; font-weight:700; border-left-color:#1A1A1A; }
body.news-v2 header nav a:first-child { border-left:none; }
body.news-v2 header nav a:hover, body.news-v2 header nav a:focus { color:#FC5D59; }
body.news-v2 header nav a[href="/news.html"] { color:#FC5D59; }

/* --- #2 H1 "NEWS & REVIEWS" uppercase + full-width black divider ----------- */
body.news-v2 main.mp-content .news-header h1 {
	color:#1A1A1A; font-size:30px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin:0; line-height:1;
}
body.news-v2 #news-content .news-header {
	border-bottom:1px solid #1A1A1A; padding-bottom:16px; margin-bottom:10px; align-items:flex-end;
}

/* --- #3 News sub-nav: black items, coral active; years → medium-gray ------- */
body.news-v2 #news-content .news_navigation a { color:#1A1A1A; font-weight:700; font-size:15px; text-transform:uppercase; }
body.news-v2 #news-content .news_navigation a.active_page,
body.news-v2 #news-content .news_navigation a:hover,
body.news-v2 #news-content .news_navigation a:focus { color:#FC5D59; }
body.news-v2 #news-content .news_navigation .vertLineDivider { color:#d0d0d0; }
body.news-v2 #news-content .subNavigation a { color:#939393; font-weight:600; font-size:15px; }
body.news-v2 #news-content .subNavigation a:hover,
body.news-v2 #news-content .subNavigation a.active-year { color:#1A1A1A; }
body.news-v2 #news-content .subNavigation .vertLineDivider { color:#d0d0d0; }
/* years sit as a clean row BELOW the black header divider (kill the base -24px pull-up) */
body.news-v2 #news-content .subNavigation { margin:6px 0 30px 0; padding:0; }

/* --- #6 body text 16px; #5 titles → H4 (20/600); date → gray -------------- */
body.news-v2 #news-content .book-desc p { font-size:16px; letter-spacing:0.5px; }
body.news-v2 #news-content article h3.book-title { font-size:20px; font-weight:600; color:#1A1A1A; max-width:none; text-transform:uppercase; line-height:1.3; }
body.news-v2 #news-content article h3.book-title a { color:#1A1A1A; }
body.news-v2 #news-content article p.book-author { color:#4A4A4A; font-weight:400; font-size:14px; letter-spacing:0.5px; }

/* --- #4 Two-column article grid + square images --------------------------- */
body.news-v2 #news-content section { margin-bottom:20px; }
body.news-v2 #news-content .content { list-style:none; margin:0; padding:0; }
body.news-v2 #news-content .content li {
	display:grid; grid-template-columns:repeat(2,1fr); gap:36px 44px; list-style:none;
}
body.news-v2 #news-content .content li > a[name] { display:none; }
body.news-v2 #news-content .content li article {
	max-width:none; margin:0; padding:0 0 26px; border-bottom:1px solid #e2e2e2;
	display:flex; flex-direction:column;
}
body.news-v2 #news-content .content li article .book-desc { max-width:none; }
/* Images are low-res source (mostly 150px); show at ~half column, left-aligned,
   so they stay sharp instead of upscaling to fill the whole column. */
body.news-v2 #news-content .content li article img.spotlight {
	border-radius:0 !important; border:none !important; width:100%; max-width:200px; height:auto; align-self:flex-start; margin-bottom:16px;
}
body.news-v2 #news-content .content li article.np-hidden { display:none; }
/* Legacy circular thumbnails: fill the square tile (Ameba's design shows squares,
   not circles). The image link clips; the circular art is zoomed to cover corners. */
body.news-v2 #news-content .content li article a:has(> img.spotlight) {
	display:block; overflow:hidden; line-height:0; width:200px; max-width:100%; aspect-ratio:1/1; margin-bottom:16px;
	border:1px solid #bbb; box-sizing:border-box;
}
body.news-v2 #news-content .content li article a:has(> img.spotlight) img.spotlight { margin-bottom:0; }
/* These sources were pre-cleaned to white squares (ring removed, content fits),
   so just show them straight — no zoom, no crop. */
body.news-v2 #news-content .content li article img.spotlight.circ-fill {
	width:100%; height:100%; object-fit:cover; background:#fff;
}
@media (max-width:659px) { body.news-v2 #news-content .content li { grid-template-columns:1fr; } }

/* --- #7 Paginator --------------------------------------------------------- */
body.news-v2 #news-content .np-paginator {
	display:flex; align-items:center; justify-content:center; gap:14px; margin:26px 0 14px; font-size:15px;
}
body.news-v2 #news-content .np-paginator button {
	background:none; border:none; color:#FC5D59; font-size:20px; line-height:1; cursor:pointer; padding:4px 6px; font-family:inherit;
}
body.news-v2 #news-content .np-paginator button[disabled] { color:#d0d0d0; cursor:default; }
body.news-v2 #news-content .np-paginator .np-current {
	background:#FC5D59; color:#fff; font-weight:700; padding:8px 6px; width:2.6em; text-align:center; line-height:1;
	border:none; border-radius:0; font-family:inherit; font-size:15px; box-sizing:border-box;
	-webkit-appearance:none; appearance:none; cursor:text; caret-color:#fff;
}
body.news-v2 #news-content .np-paginator .np-current:focus { outline:2px solid #1A1A1A; outline-offset:1px; }
body.news-v2 #news-content .np-paginator .np-total { color:#4A4A4A; }

/* --- Footer email form (same as other pages) ------------------------------ */
body.news-v2 { overflow-x:hidden; }
body.news-v2 #wrapper { padding-bottom:0; }
body.news-v2 .social {
	background:#E8EFEE; width:100vw; position:relative; left:50%; transform:translateX(-50%);
	box-sizing:border-box; min-height:292px; padding:40px 20px; margin:0; border-top:none;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; overflow:hidden;
}
body.news-v2 .social h3 { font-size:24px; font-weight:600; color:#1A1A1A; margin:0; }
body.news-v2 .mailing-list-form { display:flex; width:100%; max-width:520px; }
body.news-v2 .mailing-list-form input[type="email"] {
	flex:1 1 auto; min-width:0; box-sizing:border-box; height:48px; background:#fff; border:1px solid #cfd6d5;
	border-right:none; padding:0 14px; font-size:16px; color:#1A1A1A; font-family:inherit;
}
body.news-v2 .mailing-list-form input[type="email"]::placeholder { color:#939393; }
body.news-v2 .mailing-list-form button {
	flex:0 0 auto; box-sizing:border-box; height:48px; display:inline-flex; align-items:center; justify-content:center;
	background:#FC5D59; color:#fff; border:none; padding:0 22px; font-size:14px; font-weight:700; line-height:1;
	text-transform:uppercase; letter-spacing:1px; cursor:pointer; font-family:inherit;
}
body.news-v2 .mailing-list-form button:hover, body.news-v2 .mailing-list-form button:focus { background:#EB534F; }
body.news-v2 .social-icons { display:flex; justify-content:center; gap:16px; }
body.news-v2 .social-icons a img { width:26px; height:26px; display:block; }
body.news-v2 .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }