/* ==========================================================================
   Article — built from the "Article" screen of design/Epileptic News.dc.html.
   ========================================================================== */

.epi-article {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 26px var(--gutter) 80px;
}

.epi-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.4px;
	color: var(--fg-label);
	text-transform: uppercase;
}

.epi-back:hover { color: var(--fg); }

.epi-article__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--rail-w);
	gap: 34px;
	align-items: start;
}

/* --- masthead -------------------------------------------------------------- */

.epi-article__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.epi-article__source {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.2px;
	color: var(--fg-label);
	text-transform: uppercase;
}

.epi-article__stamp {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--fg-ghost);
	text-transform: uppercase;
}

.epi-article__views {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--fg-mute);
	text-transform: uppercase;
}

/* `.epi-eye` itself lives in main.css — cards on the Feed and the stream rows
   use it too, and it must not depend on the article sheet being loaded. */

/*
 * 🔴 No `max-width` on either of these. Both used to carry a character cap —
 * 24ch on the title, 68ch on the standfirst — inside a 960px column. Measured:
 * the title was being held to 629px and the standfirst to 701px, so a headline
 * that would have set in two lines broke into four and left a third of the
 * column empty beside it. The grid column is the constraint; nothing else needs
 * to be.
 */
.epi-article__title {
	font-size: 52px;
	line-height: 1.04;
	/* Wide and heavy. The tighter tracking is what keeps a widened face from
	   reading as loose — the two moves have to travel together. */
	font-stretch: var(--stretch-head);
	letter-spacing: -1.6px;
	font-weight: 800;
	margin-bottom: 20px;
}

.epi-article__stand {
	font-size: 19px;
	line-height: 1.58;
	color: #9AA1B1;
	margin-bottom: 28px;
}

.epi-article__media {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-panel);
	background: var(--bg-raised);
	background-image: var(--media-hatch);
	border: 1px solid var(--line);
	margin-bottom: 26px;
	overflow: hidden;
}

.epi-article__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.epi-article__credit {
	position: absolute;
	right: 16px;
	bottom: 14px;
	z-index: 2;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.4px;
	color: #C3C9D6;
	text-transform: uppercase;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* --- AI summary ------------------------------------------------------------
   The only block on this page that flashes. It runs the brand cycle for ~2.5s
   on load and then holds. The TEXT never flashes — only the frame, the cubes
   and the label do, so the summary stays readable the entire time.
   -------------------------------------------------------------------------- */

.epi-summary {
	border: 1px solid rgba(47, 125, 255, 0.3);
	background: linear-gradient(180deg, rgba(47, 125, 255, 0.10), rgba(47, 125, 255, 0.03));
	border-radius: var(--r-panel);
	padding: 24px 26px;
	margin-bottom: 26px;
}

.epi-summary__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.epi-summary__brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.epi-summary__cubes { display: flex; gap: 2px; }

.epi-summary__cube {
	width: 8px;
	height: 8px;
	border-radius: 2px;
}

.epi-summary__label {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	color: var(--ui-accent-soft);
	text-transform: uppercase;
}

.epi-summary__model {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.2px;
	color: var(--ui-accent);
	text-transform: uppercase;
}

.epi-summary__body {
	font-size: 15.5px;
	line-height: 1.68;
	color: #D5DAE4;
	margin-bottom: 18px;
}

.epi-summary__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
}

.epi-stat {
	border: 1px solid var(--line-strong);
	border-radius: var(--r-ctrl);
	background: rgba(8, 9, 12, 0.5);
	padding: 12px 13px;
}

.epi-stat__key {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.4px;
	color: var(--fg-label);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.epi-stat__value {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 8px;
	font-family: var(--font-mono);
}

.epi-stat__num {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.8px;
}

.epi-stat__unit {
	font-size: 10px;
	color: var(--fg-ghost);
}

.epi-stat__track {
	height: 3px;
	border-radius: 2px;
	background: var(--bg-well);
	overflow: hidden;
}

.epi-stat__fill { height: 100%; }

/* The 2.5s load flash. `.is-flashing` is added by article.js and removed on a
   timer; without JS the block simply never flashes, which is a safe default. */

.epi-summary.is-flashing {
	animation: epi-summary-frame var(--flash-cycle) steps(1, end) infinite;
}

.epi-summary.is-flashing .epi-summary__cube,
.epi-summary.is-flashing .epi-summary__label {
	animation: epi-news-flash var(--flash-cycle) steps(1, end) infinite;
}

.epi-summary.is-flashing .epi-summary__cube {
	animation-name: epi-news-flash-bg;
}

@keyframes epi-summary-frame {
	0%,   33.32%   { border-color: var(--logo-blue); }
	33.33%, 66.65% { border-color: var(--logo-red); }
	66.66%, 100%   { border-color: var(--logo-green); }
}

@media (prefers-reduced-motion: reduce) {
	.epi-summary.is-flashing,
	.epi-summary.is-flashing .epi-summary__cube,
	.epi-summary.is-flashing .epi-summary__label {
		animation: none !important;
	}
}

/* --- actions --------------------------------------------------------------- */

.epi-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 30px;
}

.epi-action {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 18px;
	border-radius: 11px;
	border: 1px solid var(--line-strong);
	background: var(--bg-card);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.2px;
	color: var(--fg-body);
	text-transform: uppercase;
	transition: border-color 160ms ease, background 160ms ease;
}

.epi-action:hover { border-color: rgba(255, 255, 255, 0.24); color: var(--fg-body); }

.epi-action--primary {
	background: var(--fg);
	border-color: var(--fg);
	color: var(--bg);
	font-weight: 600;
}

.epi-action--primary:hover { background: #fff; border-color: #fff; color: var(--bg); }

.epi-action--meme {
	border-color: rgba(47, 125, 255, 0.45);
	background: rgba(47, 125, 255, 0.10);
	color: #B3D2FF;
	font-weight: 600;
}

.epi-action--meme:hover { background: rgba(47, 125, 255, 0.18); color: #B3D2FF; }

.epi-action__cubes { display: flex; gap: 2px; }

/*
 * The token mark on the meme button. It BREATHES, it does not strobe: the AI
 * summary is the only 11Hz thing on this page, and a permanent brand-cycle
 * strobe in the corner of a reading screen is exactly what the two-tier palette
 * exists to prevent. This is the design's own `epi-flash-pulse`.
 */
.epi-action__cube {
	width: 7px;
	height: 7px;
	border-radius: 2px;
	animation: epi-flash-pulse 1.5s ease-in-out infinite;
}

.epi-action__cube--red   { background: var(--ui-bear); }
.epi-action__cube--green { background: var(--ui-bull); animation-delay: 0.75s; }

/* --- signal timeline ------------------------------------------------------- */

.epi-timeline { border-top: 1px solid var(--line-strong); padding-top: 26px; }

.epi-timeline__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--fg-label);
	text-transform: uppercase;
	margin-bottom: 18px;
}

.epi-timeline__row {
	display: grid;
	grid-template-columns: 96px 20px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	transition: background 150ms ease;
}

.epi-timeline__row:hover { background: rgba(255, 255, 255, 0.02); }

.epi-timeline__time {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--fg-ghost);
	letter-spacing: 1px;
	padding-top: 14px;
	text-align: right;
}

.epi-timeline__spine {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}

.epi-timeline__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-top: 15px;
	flex-shrink: 0;
}

.epi-timeline__line {
	width: 1px;
	flex: 1;
	background: rgba(255, 255, 255, 0.09);
}

.epi-timeline__body { padding: 12px 0 18px; }

.epi-timeline__title {
	font-size: 14.5px;
	line-height: 1.35;
	font-weight: 500;
	margin-bottom: 5px;
}

.epi-timeline__title a { color: var(--fg); }

.epi-timeline__src {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.2px;
	color: var(--fg-faint);
	text-transform: uppercase;
}

/* --- rail ------------------------------------------------------------------ */

.epi-rail {
	position: sticky;
	top: 112px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.epi-rail__box {
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: var(--bg-card);
	padding: 18px;
}

.epi-rail__box--flush { padding: 0; overflow: hidden; }

.epi-rail__label {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.8px;
	color: var(--fg-label);
	text-transform: uppercase;
	margin-bottom: 14px;
}

.epi-rail__label--bar {
	margin-bottom: 0;
	padding: 15px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.epi-entities {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.epi-entity {
	font-family: var(--font-mono);
	font-size: 10.5px;
	padding: 6px 10px;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: var(--bg-raised);
	color: var(--fg-soft);
	transition: border-color 160ms ease, color 160ms ease;
}

.epi-entity:hover { border-color: var(--ui-accent); color: #fff; }

.epi-trust {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.epi-trust__badge {
	width: 42px;
	height: 42px;
	border-radius: var(--r-ctrl);
	background: #151922;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	flex-shrink: 0;
}

.epi-trust__name { font-size: 14px; font-weight: 500; }

.epi-trust__sub {
	font-family: var(--font-mono);
	font-size: 9.5px;
	color: var(--fg-faint);
	letter-spacing: 1px;
}

.epi-trust__mix {
	display: flex;
	height: 5px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--bg-track);
	margin-bottom: 10px;
}

.epi-trust__note {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--fg-mute);
}

.epi-quote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.epi-quote__sym {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11.5px;
	font-weight: 600;
	color: #DDE2EC;
	letter-spacing: 0.5px;
}

.epi-quote__pip {
	width: 6px;
	height: 6px;
	border-radius: 2px;
}

.epi-quote__nums {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
}

.epi-quote__price { color: var(--fg-mute); }
.epi-quote__chg { width: 60px; text-align: right; }

/* --- latest strip ---------------------------------------------------------- */

.epi-latest {
	margin-top: 44px;
	border-top: 1px solid var(--line-strong);
	padding-top: 26px;
}

.epi-latest__label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--fg-label);
	text-transform: uppercase;
	margin-bottom: 18px;
}

.epi-latest__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

/* --- narrow ---------------------------------------------------------------- */

@media (max-width: 1080px) {
	.epi-article__grid { grid-template-columns: minmax(0, 1fr); }
	.epi-rail { position: static; }
	.epi-article__title { font-size: 40px; letter-spacing: -1.2px; }
}

@media (max-width: 860px) {
	.epi-latest__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	.epi-article { padding: 18px var(--gutter) 60px; }
	/* Narrow enough that the width axis costs more lines than it buys presence,
	   so it eases back towards normal here. */
	.epi-article__title { font-size: 30px; letter-spacing: -0.6px; font-stretch: 100%; }
	.epi-article__stand { font-size: 16.5px; }
	.epi-summary { padding: 18px 16px; }
	.epi-summary__body { font-size: 14.5px; }
	.epi-latest__grid { grid-template-columns: 1fr; }
	.epi-timeline__row { grid-template-columns: 62px 20px minmax(0, 1fr); gap: 10px; }
	.epi-action { flex: 1 1 auto; justify-content: center; }
}