/**
 * News home (the timely pillar) — [finance_hamster_news].
 * Sibling look to the Learn topic page. Reuses the shared foundation/theme tokens
 * that exist (--accent/--accent-text/--radius/--fh-dur/--fh-ease); the warm SEMANTIC
 * tokens the mock uses (--paper/--raise/--sink/--ink/--body/--soft/--faint/--line
 * plus the honey/leaf/berry accents + shadows/radii) are NOT exposed by foundation,
 * so they are defined here SCOPED to .fh-news (mapped to the approved mock palette)
 * and flipped for dark — nothing leaks out. Mirrors topic.css's token-block pattern:
 * light default, an @media dark flip, and data-theme overrides that win either way.
 */

/* Scoped semantic tokens (light) + dark flips. data-theme overrides win over the media query. */
.fh-news{
	--paper:#FBF7EF; --raise:#FFFFFF; --sink:#F4EEE2;
	--ink:#211D16; --body:#453D31; --soft:#655C4E; --faint:#8C8375;
	--line:#E8DFCF;
	--honey:#C6791F; --honey-deep:#985813; --honey-bg:#FAECD5; --honey-line:#E7CEA2;
	--leaf:#2F6B4F; --berry:#A83F58; --berry-bg:#FBEAEE;
	--shadow-sm:0 1px 2px rgba(40,30,15,.06);
	--shadow:0 4px 10px rgba(40,30,15,.06),0 16px 40px rgba(40,30,15,.09);
	--r:16px; --r-lg:22px;
}
@media (prefers-color-scheme:dark){
	.fh-news{
		--paper:#16130E; --raise:#211D15; --sink:#1C1811;
		--ink:#F6F1E7; --body:#DBD2C3; --soft:#B0A794; --faint:#847B6B;
		--line:#332C20;
		--honey:#E7A755; --honey-deep:#F2B76C; --honey-bg:#2D2213; --honey-line:#4B3920;
		--leaf:#74BE96; --berry:#DE8799; --berry-bg:#241318;
		--shadow-sm:0 1px 2px rgba(0,0,0,.3);
		--shadow:0 4px 10px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.44);
	}
}
:root[data-theme="light"] .fh-news{
	--paper:#FBF7EF; --raise:#FFFFFF; --sink:#F4EEE2;
	--ink:#211D16; --body:#453D31; --soft:#655C4E; --faint:#8C8375;
	--line:#E8DFCF;
	--honey:#C6791F; --honey-deep:#985813; --honey-bg:#FAECD5; --honey-line:#E7CEA2;
	--leaf:#2F6B4F; --berry:#A83F58; --berry-bg:#FBEAEE;
	--shadow-sm:0 1px 2px rgba(40,30,15,.06);
	--shadow:0 4px 10px rgba(40,30,15,.06),0 16px 40px rgba(40,30,15,.09);
}
:root[data-theme="dark"] .fh-news{
	--paper:#16130E; --raise:#211D15; --sink:#1C1811;
	--ink:#F6F1E7; --body:#DBD2C3; --soft:#B0A794; --faint:#847B6B;
	--line:#332C20;
	--honey:#E7A755; --honey-deep:#F2B76C; --honey-bg:#2D2213; --honey-line:#4B3920;
	--leaf:#74BE96; --berry:#DE8799; --berry-bg:#241318;
	--shadow-sm:0 1px 2px rgba(0,0,0,.3);
	--shadow:0 4px 10px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.44);
}

.fh-news{font-size:17px; line-height:1.7; color:var(--body); max-width:960px; margin:0 auto; padding:0 0 var(--s-9,96px)}
.fh-news a{color:inherit; text-decoration:none}
.fh-news-prose{max-width:700px}

/* breadcrumb */
.fh-news-crumb{display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-size:var(--t-sm,.88rem); color:var(--soft); margin:0 0 var(--s-5,24px)}
.fh-news-crumb a:hover{color:var(--honey-deep); text-decoration:underline}
.fh-news-crumb .sep{opacity:.5}
.fh-news-crumb .here{color:var(--ink); font-weight:650}

/* hero */
.fh-news-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:var(--t-sm,.88rem); font-weight:700; color:var(--honey-deep)}
.fh-news-eyebrow .d{font-size:1.15rem}
.fh-news-h1{font-size:clamp(1.95rem,5.2vw,2.9rem); line-height:1.05; letter-spacing:-.022em; font-weight:820; color:var(--ink); margin:.32em 0 .22em; text-wrap:balance}
.fh-news-intro{font-size:clamp(1.06rem,2.1vw,1.24rem); line-height:1.55; color:var(--soft); max-width:660px; margin:0}

/* stream chips (presentational for now) */
.streamchips{display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 4px}
.fh-news .sc{font-size:14px; font-weight:650; color:var(--soft); background:var(--raise); border:1px solid var(--line); padding:7px 15px; border-radius:999px}
.fh-news .sc.on{background:var(--berry-bg); color:var(--berry); border-color:var(--berry)}

/* featured lead story */
.fh-news-lead{display:grid; grid-template-columns:1.3fr 1fr; gap:0; background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-top:26px; box-shadow:var(--shadow); transition:transform var(--fh-dur,200ms) var(--fh-ease,ease), border-color var(--fh-dur,200ms) var(--fh-ease,ease)}
.fh-news-lead:hover{transform:translateY(-3px); border-color:var(--honey-line)}
@media (max-width:640px){.fh-news-lead{grid-template-columns:1fr}}
.fh-news-lead .art{background:linear-gradient(135deg,var(--honey-bg),var(--sink)); min-height:220px; display:grid; place-items:center; font-size:3.2rem}
.fh-news-lead .txt{padding:26px 30px; display:flex; flex-direction:column; gap:9px; justify-content:center}
.fh-news-lead .stag{display:inline-flex; align-items:center; gap:7px; align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--berry)}
.fh-news-lead h2{margin:0; font-size:clamp(1.3rem,2.6vw,1.6rem); line-height:1.18; font-weight:800; color:var(--ink); letter-spacing:-.01em}
.fh-news-lead p{margin:0; color:var(--body); font-size:15.5px; line-height:1.5}
.fh-news-lead .read{font-size:14px; font-weight:700; color:var(--honey-deep)}

/* recent-stories feed */
.fh-news-feed{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px}
@media (max-width:640px){.fh-news-feed{grid-template-columns:1fr}}
.fh-news .ncard{background:var(--raise); border:1px solid var(--line); border-radius:16px; padding:20px 22px; display:flex; flex-direction:column; gap:8px; transition:transform var(--fh-dur,200ms) var(--fh-ease,ease), border-color var(--fh-dur,200ms) var(--fh-ease,ease)}
.fh-news .ncard:hover{transform:translateY(-2px); border-color:var(--honey-line)}
.fh-news .ncard .meta{display:flex; align-items:center; gap:10px; font-size:12.5px}
.fh-news .ncard .st{font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--honey-deep)}
.fh-news .ncard .date{color:var(--faint)}
.fh-news .ncard h3{margin:0; font-size:17.5px; line-height:1.28; font-weight:730; color:var(--ink)}
.fh-news .ncard p{margin:0; color:var(--soft); font-size:14.5px; line-height:1.5; flex:1}
.fh-news .ncard .link{font-size:14px; font-weight:700; color:var(--honey-deep)}

/* warm always-on empty state */
.fh-news-empty{background:var(--sink); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(28px,5vw,44px); margin-top:26px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; box-shadow:var(--shadow-sm)}
.fh-news-empty .ico{width:56px; height:56px; border-radius:16px; background:var(--raise); display:grid; place-items:center; font-size:1.7rem; box-shadow:var(--shadow-sm)}
.fh-news-empty h2{margin:0; font-size:clamp(1.25rem,2.6vw,1.55rem); font-weight:800; color:var(--ink); letter-spacing:-.01em}
.fh-news-empty p{margin:0; color:var(--soft); font-size:15.5px; line-height:1.6; max-width:560px}
.fh-news-empty .btn{margin-top:6px; background:var(--honey); color:#fff; font-weight:750; font-size:15px; padding:12px 22px; border-radius:12px}
.fh-news-empty .btn:hover{filter:brightness(1.05)}

/* cross-link back to Learn */
.crosslink{margin-top:26px; background:var(--sink); border:1px solid var(--line); border-radius:16px; padding:18px 22px; font-size:15px; color:var(--soft)}
.fh-news .crosslink a{color:var(--honey-deep); font-weight:700}
.fh-news .crosslink a:hover{text-decoration:underline}

.fh-news-disc{margin-top:34px; padding-top:16px; border-top:1px solid var(--line); font-size:.85rem; color:var(--faint); max-width:660px}
.fh-news :focus-visible{outline:3px solid var(--honey); outline-offset:3px; border-radius:6px}

@media (prefers-reduced-motion:reduce){
	.fh-news-lead, .fh-news .ncard{transition:none}
	.fh-news-lead:hover, .fh-news .ncard:hover{transform:none}
}