/* ==========================================================================
   Community — built from the "Community" screen of
   design/Epileptic Sections.dc.html: hero with four counters, a year rail, the
   timeline spine, and a sidebar. Borrows the account cards, so that sheet
   loads alongside this one.
   ========================================================================== */

.epi-community {
	max-width: 1400px;
	margin: 0 auto;
	padding: 34px var(--gutter) 90px;
}

/* --- hero ------------------------------------------------------------------ */

.epi-community__hero {
	border: 1px solid var(--line-strong);
	border-radius: var(--r-hero);
	background: var(--card-gradient);
	padding: 30px 32px;
	margin-bottom: 30px;
}

.epi-community__herotop {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 26px;
}

.epi-community__stand {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--fg-dim);
	max-width: 74ch;
	margin-top: 14px;
}

.epi-community__stand strong { color: var(--fg-soft); }

.epi-community__actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.epi-btn {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 16px;
	border-radius: var(--r-ctrl);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color 160ms ease, background 160ms ease;
}

.epi-btn--ghost {
	border: 1px solid var(--line-strong);
	background: var(--bg-card);
	color: var(--fg-body);
}

.epi-btn--ghost:hover { border-color: var(--line-hover); color: var(--fg); }

.epi-btn--accent {
	border: 1px solid transparent;
	background: var(--ui-accent);
	color: #fff;
	font-weight: 600;
}

.epi-btn--accent:hover { background: #1B5AD9; color: #fff; }

.epi-community__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
}

.epi-community__stat {
	border: 1px solid var(--line);
	border-radius: var(--r-rail);
	background: rgba(8, 9, 12, 0.5);
	padding: 16px 18px;
}

.epi-community__stat-v {
	font-family: var(--font-mono);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.9px;
	margin-top: 9px;
}

.epi-community__stat-s {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.1px;
	color: var(--fg-ghost);
	margin-top: 6px;
}

/* --- three columns --------------------------------------------------------- */

/*
 * Three columns: the year rail, the story, and the token.
 *
 * The old right-hand rail carried "jump to", house rules and a note about where
 * the numbers come from — none of it this page's subject, all of it removed.
 * What is beside the story now is the thing the story is ABOUT: the token's own
 * live numbers and its address.
 *
 * 🔴 The spine is capped rather than left as a bare `1fr`. A 1400px page with
 * one column hands the prose about 1280px, which is 170 characters a line —
 * unreadable, and it reads as more room rather than less. The cap keeps the
 * measure near 90ch and still leaves the embed grid enough width for two posts
 * abreast.
 */
.epi-community__grid {
	display: grid;
	grid-template-columns: 92px minmax(0, 900px) 320px;
	justify-content: center;
	gap: 26px;
	align-items: start;
}

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

.epi-community__year {
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--fg-label);
	padding: 8px 0;
	border-top: 1px solid var(--line-strong);
}

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

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

.epi-community__links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
}

.epi-community__links a { color: var(--fg-soft); }
.epi-community__links a:hover { color: var(--ui-accent-soft); }

/* --- the spine ------------------------------------------------------------- */

.epi-community__spine {
	position: relative;
	padding-left: 34px;
	min-width: 0;
}

/* The line runs behind every event. Drawn on the container rather than per
   event, so it is continuous through the year markers instead of restarting. */
.epi-community__spine::before {
	content: '';
	position: absolute;
	left: 5px;
	top: 10px;
	bottom: 54px;
	width: 1px;
	background: linear-gradient(180deg, rgba(47, 125, 255, 0.6), rgba(255, 255, 255, 0.09) 30%, rgba(255, 255, 255, 0.04));
}

.epi-community__ymark {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 2.4px;
	color: var(--fg-faint);
	text-transform: uppercase;
	margin: 10px 0 16px;
	/* Clears the spine so the year does not sit on the line. */
	scroll-margin-top: 120px;
}

.epi-event {
	position: relative;
	margin-bottom: 22px;
}

.epi-event__pip {
	position: absolute;
	left: -34px;
	top: 26px;
	width: 11px;
	height: 11px;
	border-radius: 3px;
	/* The ring is the page ground, so the pip punches a hole in the spine
	   instead of sitting on top of it. */
	box-shadow: 0 0 0 4px var(--bg);
}

.epi-event__pip--open {
	background: transparent;
	border: 1px dashed rgba(255, 255, 255, 0.28);
	border-radius: 50%;
}

.epi-event__card {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	border: 1px solid var(--line);
	border-radius: var(--r-panel);
	background: var(--bg-card);
	overflow: hidden;
	transition: border-color 180ms ease;
}

.epi-event__card:hover { border-color: rgba(255, 255, 255, 0.16); }

.epi-event__date {
	border-right: 1px solid var(--line-soft);
	background: rgba(255, 255, 255, 0.012);
	padding: 22px 0 22px 20px;
	font-family: var(--font-mono);
}

.epi-event__day {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -1.2px;
	line-height: 1;
}

.epi-event__mon {
	font-size: 10.5px;
	letter-spacing: 1.6px;
	color: var(--fg-dim);
	margin-top: 6px;
}

.epi-event__yr {
	font-size: 10.5px;
	letter-spacing: 1.6px;
	color: var(--fg-ghost);
	margin-top: 3px;
}

.epi-event__body { padding: 22px 24px 24px; min-width: 0; }

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

.epi-event__kind {
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.6px;
	padding: 4px 8px;
	border-radius: 5px;
	border: 1px solid;
	background: rgba(255, 255, 255, 0.03);
	text-transform: uppercase;
}

.epi-event__no {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.3px;
	color: var(--fg-ghost);
	text-transform: uppercase;
}

.epi-event__title {
	font-size: 24px;
	line-height: 1.18;
	letter-spacing: -0.4px;
	font-weight: 800;
	font-stretch: var(--stretch-head);
	margin-bottom: 12px;
}

.epi-event__text {
	font-size: 14.5px;
	line-height: 1.62;
	color: var(--fg-dim);
	margin-bottom: 20px;
}

/* --- the post that caused it ------------------------------------------------ */

.epi-event__post {
	display: block;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-card);
	background: #0E1117;
	padding: 16px 18px;
	margin-bottom: 18px;
	transition: border-color 160ms ease;
}

a.epi-event__post:hover { border-color: rgba(47, 125, 255, 0.55); }

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

.epi-event__avatar {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	background: linear-gradient(145deg, #2A3040, #171A22);
	flex-shrink: 0;
}

.epi-event__handle {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--fg-soft);
}

.epi-event__when {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.1px;
	color: var(--fg-ghost);
}

.epi-event__fill { flex: 1; }

.epi-event__open {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.3px;
	color: var(--ui-accent-soft);
	text-transform: uppercase;
	white-space: nowrap;
}

.epi-event__posttext {
	font-size: 16px;
	line-height: 1.48;
	color: var(--fg);
	margin-bottom: 12px;
}

.epi-event__poststats {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.3px;
	color: var(--fg-ghost);
	padding-top: 11px;
	border-top: 1px solid var(--line-soft);
}

/* --- what it caused --------------------------------------------------------- */

.epi-event__caused {
	border-left: 2px solid var(--ui-accent);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.022);
	padding: 14px 16px;
}

.epi-event__effects {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.epi-event__effects li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fg-soft);
}

.epi-event__bullet {
	width: 5px;
	height: 5px;
	border-radius: 1px;
	margin-top: 7px;
	flex-shrink: 0;
}

.epi-event__metrics {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.epi-event__metric {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 11px;
	border-radius: 7px;
	background: #0E1117;
	border: 1px solid var(--line);
	font-family: var(--font-mono);
}

.epi-event__mk {
	font-size: 9px;
	letter-spacing: 1.3px;
	color: var(--fg-faint);
	text-transform: uppercase;
}

.epi-event__mv {
	font-size: 12px;
	font-weight: 600;
	color: var(--fg);
}

/* --- the open end ----------------------------------------------------------- */

.epi-event__nextcard {
	border: 1px dashed rgba(255, 255, 255, 0.14);
	border-radius: var(--r-rail);
	padding: 20px 22px;
}

.epi-event__nexttext {
	font-size: 15px;
	color: var(--fg-dim);
	margin-top: 7px;
}

/* --- narrower --------------------------------------------------------------- */

@media (max-width: 1280px) {
	/*
	 * The token column goes under the story rather than squeezing it: below
	 * this the two together leave the prose about 55 characters a line.
	 *
	 * 🔴 The rail's own rules for this width are at the END of this file, not
	 * here. They were here first and lost: `.epi-tokrail { display: flex }` is
	 * declared later in the sheet at equal specificity, so it overrode the
	 * media query and the stacked rail stayed a single column. A media query
	 * carries no extra weight — it has to come after what it is changing.
	 */
	.epi-community__grid { grid-template-columns: 92px minmax(0, 900px); }
}

@media (max-width: 860px) {
	/* The year rail is two links. Below this it costs more width than it
	   returns, and the years are still marked down the spine. */
	.epi-community__grid { grid-template-columns: minmax(0, 1fr); }
	.epi-community__years { display: none; }
}

@media (max-width: 640px) {
	.epi-community { padding: 20px var(--gutter) 60px; }
	.epi-community__hero { padding: 22px 18px; border-radius: var(--r-panel); }
	.epi-community__stand { font-size: 14px; }
	.epi-community__stats { grid-template-columns: 1fr 1fr; gap: 10px; }
	.epi-community__stat { padding: 13px 14px; }
	.epi-community__stat-v { font-size: 18px; }

	/* The spine keeps its pips but loses the indent — 34px of gutter is a lot
	   of a 375px screen to spend on a decorative line. */
	.epi-community__spine { padding-left: 20px; }
	.epi-event__pip { left: -20px; top: 20px; width: 9px; height: 9px; }

	/* The date column becomes a row above the body: at this width a 92px
	   sidebar leaves the title setting in about twenty characters. */
	.epi-event__card { grid-template-columns: minmax(0, 1fr); }
	.epi-event__date {
		display: flex;
		align-items: baseline;
		gap: 8px;
		border-right: 0;
		border-bottom: 1px solid var(--line-soft);
		padding: 12px 16px;
	}
	.epi-event__day { font-size: 19px; }
	.epi-event__mon,
	.epi-event__yr { margin-top: 0; font-size: 10px; }

	.epi-event__body { padding: 16px 16px 18px; }
	.epi-event__title { font-size: 19px; font-stretch: 100%; letter-spacing: -0.2px; }
	.epi-event__text { font-size: 14px; margin-bottom: 16px; }
	.epi-event__posttext { font-size: 14.5px; }
	.epi-event__post { padding: 13px 14px; }
}

/* ==========================================================================
   The story — an entry's rich body.

   Added when the project's real history arrived and the single `body`
   paragraph stopped being able to hold it. Everything below is rendered by
   Epinews_Community_Blocks; the class names match its output one for one.
   ========================================================================== */

/* --- the chapter head above the spine --------------------------------------- */

.epi-story {
	max-width: 1364px;   /* 92 + 26 + 900 + 26 + 320 — the grid's own width, so
	                        the head and the columns share one left edge. */
	margin-left: auto;
	margin-right: auto;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-hero);
	background: var(--card-gradient);
	padding: 30px 32px 28px;
	margin-bottom: 26px;
	position: relative;
	overflow: hidden;
}

/* A single hairline of the two brand colours across the top edge — the mark at
   page scale, without spending a headline on it. */
.epi-story::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, var(--ui-bear), var(--ui-bull) 52%, transparent);
	opacity: 0.85;
}

.epi-story__mark { margin-bottom: 14px; }
.epi-story__mark .epi-mark { font-size: 22px; }

.epi-story__title {
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: -1.1px;
	font-weight: 800;
	font-stretch: var(--stretch-head);
	text-transform: uppercase;
}

/* Plain white, like the rest of the heading. It carried the house strobe for a
   while; at 34px over a whole word that is a lot of flashing for a page title,
   and the mark above it already says whose story this is. */
.epi-story__cult { color: var(--fg); }

.epi-story__lede {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--fg-faint);
	margin-top: 14px;
}

.epi-story__note {
	font-size: 13px;
	line-height: 1.55;
	color: var(--fg-ghost);
	margin-top: 12px;
	max-width: 78ch;
}

/* --- the brand mark, drawn rather than typed --------------------------------- */

/* Two squares in the UI tier, matching the header cubes. Sized in `em` so it
   tracks whatever type it sits in, and aria-hidden in the markup because it is
   the brand, not a word the reader is missing. */
.epi-mark {
	display: inline-flex;
	gap: 0.22em;
	vertical-align: -0.06em;
	margin-right: 0.55em;
	flex-shrink: 0;
}

.epi-mark i {
	width: 0.72em;
	height: 0.72em;
	border-radius: 0.16em;
	display: block;
}

.epi-mark__r { background: var(--ui-bear); }
.epi-mark__g { background: var(--ui-bull); }

/* --- blocks ----------------------------------------------------------------- */

.epi-event__story {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 20px;
}

.epi-blk { margin: 0; }

.epi-blk--note,
.epi-blk--plain {
	font-size: 14.5px;
	line-height: 1.68;
	color: var(--fg-dim);
	text-wrap: pretty;
}

.epi-blk--note strong,
.epi-blk--plain strong { color: var(--fg-soft); font-weight: 600; }

.epi-ilink {
	color: var(--ui-accent-soft);
	border-bottom: 1px solid rgba(143, 186, 255, 0.28);
	transition: color 160ms ease, border-color 160ms ease;
}

.epi-ilink:hover {
	color: var(--ui-accent-bright);
	border-bottom-color: var(--ui-accent-bright);
}

.epi-blk__label { margin-bottom: 10px; }

/* --- callout ---------------------------------------------------------------- */

.epi-blk--lead {
	display: block;
	border-left: 2px solid var(--ui-accent);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.03);
	padding: 14px 16px;
}

.epi-blk__lead-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 9.5px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	margin-bottom: 9px;
}

.epi-blk__lead-text {
	display: block;
	font-size: 14px;
	line-height: 1.66;
	color: var(--fg-soft);
}

/* --- list ------------------------------------------------------------------- */

.epi-blk__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.epi-blk__items li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.58;
	color: var(--fg-dim);
}

.epi-blk__bullet {
	width: 5px;
	height: 5px;
	border-radius: 1px;
	margin-top: 8px;
	flex-shrink: 0;
}

/* --- link cards ------------------------------------------------------------- */

/* Layout is shared with the embed row above. */

.epi-lcard {
	display: flex;
	align-items: center;
	gap: 11px;
	border: 1px solid var(--line);
	border-radius: var(--r-card);
	background: #0E1117;
	padding: 11px 13px;
	min-width: 0;
	transition: border-color 160ms ease, background 160ms ease;
}

.epi-lcard:hover {
	border-color: rgba(47, 125, 255, 0.5);
	background: #101520;
}

.epi-lcard__mark {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: linear-gradient(145deg, #232838, #14171F);
	border: 1px solid var(--line-strong);
	display: grid;
	place-items: center;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--fg-dim);
	flex-shrink: 0;
}

.epi-lcard__body { min-width: 0; flex: 1; }

.epi-lcard__label {
	display: block;
	font-size: 13px;
	color: var(--fg-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.epi-lcard__tail {
	display: block;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fg-ghost);
	margin-top: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.epi-lcard__out {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--fg-faint);
	flex-shrink: 0;
}

.epi-lcard:hover .epi-lcard__out { color: var(--ui-accent-soft); }

/* --- embeds ------------------------------------------------------------------ */

/* Two or more embeds in one block sit side by side wherever the column can
   afford it. Measured before adding this: the first entry alone ran 3,279px of
   a 14,219px page, because four stacked embeds is four screens of scrolling
   for four posts that belong to the same sentence. `align-items: start` keeps
   each one at its own height — a tweet with video is three times the height of
   a text one, and stretching the short one to match just adds empty box. */
/*
 * 🔴 Everything embedded is CENTRED in its block; the prose above it is not.
 *
 * An X card is about 380px wide whatever the column is, so left-aligned in a
 * 740px block it sat against one edge with half the row empty beside it — and
 * with two of them the pair looked like a column that had failed to fill. The
 * text stays ranged left, because centred prose is unreadable; only the things
 * that cannot fill their row get centred in it.
 */
.epi-blk--embed,
.epi-blk--articles,
.epi-blk__cards {
	/*
	 * 🔴 Flex, not grid, and the reason is measurable.
	 *
	 * These were `grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))`
	 * with `justify-items: center`, which centres an item INSIDE its track and
	 * does nothing at all here: measured, a block 704px wide kept TWO 347px
	 * tracks even holding one item, and that item filled its track exactly. It
	 * sat hard against the left with 357px of nothing beside it, and the
	 * centring rule was live, applied, and pointless.
	 *
	 * `auto-fit` is supposed to collapse the empty track; with a `1fr` maximum
	 * it does not free the space in a way that helps. Flex has no tracks to
	 * argue with: one item grows to its own max and `justify-content` centres
	 * it; two share the row.
	 */
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	align-items: flex-start;
}

.epi-blk--embed > .epi-embed,
.epi-blk--articles > .epi-acard,
.epi-blk__cards > .epi-lcard {
	flex: 1 1 320px;
	max-width: 420px;
	min-width: 0;
}

/* The heading is a row of its own above them, ranged left like the prose. */
.epi-blk--embed > .epi-blk__label,
.epi-blk--articles > .epi-blk__label {
	flex: 0 0 100%;
	text-align: left;
}

/* The block's heading is a row of its own above the grid, not a cell in it. */


.epi-embed {
	margin: 0 0 10px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-card);
	background: #0B0D12;
	overflow: hidden;
}

.epi-embed:last-child { margin-bottom: 0; }

/* The grid's own `gap` does the spacing now. */
.epi-blk--embed .epi-embed { margin-bottom: 0; }

.epi-embed__chrome {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 13px;
	border-bottom: 1px solid var(--line-soft);
	background: rgba(255, 255, 255, 0.016);
}

.epi-embed__src {
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--fg-faint);
	flex: 1;
}

.epi-embed__out {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--ui-accent-soft);
	white-space: nowrap;
}

.epi-embed__out:hover { color: var(--ui-accent-bright); }

/* The stage holds its height before the iframe arrives, so promoting a lazy
   embed does not shove the rest of the page down under the reader's cursor. */
.epi-embed__stage {
	position: relative;
	height: 100%;
	display: grid;
	place-items: center;
	min-height: 120px;
}

.epi-embed__stage iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* A button, not a label — see Epinews_Community_Blocks::frame(). It looks like
   a quiet status line until you point at it, because in the normal case it is
   on screen for a few hundred milliseconds and should not shout. */
.epi-embed__wait {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--fg-ghost);
	background: none;
	border: 1px solid transparent;
	border-radius: var(--r-ctrl);
	padding: 9px 14px;
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease;
}

.epi-embed__wait:hover,
.epi-embed__wait:focus-visible {
	color: var(--ui-accent-soft);
	border-color: rgba(47, 125, 255, 0.4);
}

/* community.js sets this once the iframe is in, so the waiting label stops
   claiming a grid row underneath it. A class rather than `:has(iframe)`,
   because the label has to disappear in browsers that do not support `:has`
   too — and this is the one place on the page where a stale label would read
   as a broken embed. */
.epi-embed__stage.is-live { display: block; }
.epi-embed__stage.is-live .epi-embed__wait { display: none; }

.epi-embed--ig { margin-inline: auto; }
.epi-embed--yt .epi-embed__stage { min-height: 0; }

/* --- the X fallback card ------------------------------------------------------ */

/* Not a placeholder. widgets.js replaces the whole blockquote when it succeeds;
   when the post is deleted, the script is blocked, or X is rate limiting, THIS
   is what the reader gets and it has to stand on its own. */
.epi-embed--x { border: 0; background: none; border-radius: 0; }

.epi-embed--x .twitter-tweet {
	/* `auto` on the sides, not 0: widgets.js swaps in an iframe with its own
	   max-width, and without this the rendered post ignores the centring the
	   grid applied to the placeholder it replaced. */
	margin: 0 auto !important;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-card);
	background: #0E1117;
	padding: 0;
}

/* Once widgets.js swaps in its own iframe the blockquote carries this class,
   so the shell falls away rather than framing the rendered post twice. */
.epi-embed--x .twitter-tweet-rendered {
	border: 0;
	background: none;
}

.epi-xcard { padding: 14px 16px; }

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

.epi-xcard__avatar {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(145deg, #2A3040, #171A22);
	flex-shrink: 0;
}

.epi-xcard__handle {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--fg-soft);
}

.epi-xcard__fill { flex: 1; }

.epi-xcard__badge {
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.4px;
	color: var(--fg-faint);
	border: 1px solid var(--line-strong);
	border-radius: 5px;
	padding: 3px 7px;
}

.epi-xcard__note {
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fg-ghost);
}

.epi-embed--x blockquote > a {
	display: inline-block;
	margin: 0 16px 14px;
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--ui-accent-soft);
}

.epi-embed--x .twitter-tweet-rendered > a { display: none; }

/* --- month-precision dates ---------------------------------------------------- */

/* At month precision the month takes the large slot. Same block, smaller type:
   "DECEMBER" does not fit at 26px in a 92px column. */
.epi-event__day--mon {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	line-height: 1.15;
	text-transform: uppercase;
	padding-right: 12px;
}

.epi-event__no--soft { color: var(--fg-faint); }

/* Anchored from wp-admin's "View" button and from the year rail; without this
   the sticky 100px header lands on top of the card. */
.epi-event { scroll-margin-top: 120px; }

/* --- narrower ----------------------------------------------------------------- */

@media (max-width: 640px) {
	.epi-story { padding: 22px 18px 20px; border-radius: var(--r-panel); }
	.epi-story__title { font-size: 25px; letter-spacing: -0.6px; font-stretch: 100%; }
	.epi-story__lede { font-size: 10px; letter-spacing: 1.1px; }

	.epi-event__story { gap: 14px; }
	.epi-blk--note,
	.epi-blk--plain { font-size: 14px; }
	.epi-blk--embed > .epi-embed,
	.epi-blk--articles > .epi-acard,
	.epi-blk__cards > .epi-lcard { flex-basis: 100%; }

	/* The date column is a row at this width, so the month sits inline with
	   the year and can take its full size back. */
	.epi-event__day--mon { font-size: 15px; padding-right: 0; }

	.epi-embed--ig { max-width: 100%; }
}

/* --- article cards ------------------------------------------------------------

   For a destination that publishes no embed API. The headline, the summary and
   the picture are the page's OWN — read from its `og:` tags once, when the
   entry was saved, and stored with the block. Nothing here is fetched while a
   reader waits, and nothing is invented: a page that gives up no title falls
   back to the plain link card instead of a rich card with empty furniture.
   ---------------------------------------------------------------------------- */

/* Layout is shared with the embed and link rows above. */



.epi-acard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-card);
	background: #0E1117;
	overflow: hidden;
	min-width: 0;
	transition: border-color 160ms ease, transform 180ms cubic-bezier(.2, .7, .3, 1);
}

.epi-acard:hover {
	border-color: rgba(47, 125, 255, 0.5);
	transform: translateY(-2px);
}

.epi-acard__shot {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--bg-raised);
	overflow: hidden;
}

.epi-acard__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.epi-acard__body {
	display: block;
	padding: 14px 16px 16px;
}

.epi-acard__site {
	display: block;
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--fg-faint);
	margin-bottom: 8px;
}

.epi-acard__title {
	display: block;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -0.2px;
	color: var(--fg);
	text-wrap: pretty;
}

.epi-acard__text {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fg-dim);
	margin-top: 8px;
}

.epi-acard__go {
	display: block;
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--ui-accent-soft);
	margin-top: 12px;
}

.epi-acard:hover .epi-acard__go { color: var(--ui-accent-bright); }



/* ==========================================================================
   The token column.

   Everything on it comes from the pool through Epinews_Token, which answers
   from its own transient — nothing here waits on a network while a reader
   does. The one row with no number says why it has none.
   ========================================================================== */

.epi-tokrail {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: sticky;
	top: 112px;
	min-width: 0;
}

.epi-tokrail__box {
	border: 1px solid var(--line);
	border-radius: var(--r-rail);
	background: var(--rail-gradient, linear-gradient(180deg, #0E1017, #0A0B10));
	padding: 16px 17px;
	min-width: 0;
}

.epi-tokrail__box--price {
	border-color: rgba(47, 125, 255, 0.22);
}

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

.epi-tokrail__head .epi-mark { font-size: 15px; margin-right: 0; }

.epi-tokrail__sym {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.6px;
	color: var(--fg-soft);
}

.epi-tokrail__fill { flex: 1; }

.epi-tokrail__price {
	font-family: var(--font-mono);
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1;
	color: var(--fg);
	/* A sub-cent price is a long string; it must wrap rather than push the
	   column wider than the grid allotted it. */
	overflow-wrap: anywhere;
}

.epi-tokrail__chg {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.8px;
	margin-top: 7px;
}

.epi-tokrail__chg span { color: var(--fg-ghost); font-weight: 400; }

.epi-tokrail__rows {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.epi-tokrail__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

.epi-tokrail__k {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--fg-faint);
	white-space: nowrap;
}

.epi-tokrail__v {
	font-family: var(--font-mono);
	font-size: 11.5px;
	color: var(--fg-soft);
	text-align: right;
	min-width: 0;
	overflow-wrap: anywhere;
}

.epi-tokrail__row--absent .epi-tokrail__v a { color: var(--ui-accent-soft); }
.epi-tokrail__row--absent .epi-tokrail__v a:hover { color: var(--ui-accent-bright); }

/* --- addresses --------------------------------------------------------------- */

.epi-tokrail__addr {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line-soft);
	min-width: 0;
}

.epi-tokrail__addr .epi-tokrail__k { display: block; margin-bottom: 7px; }

/* Never truncated. This is the one string a reader might carry away, and a
   shortened contract address is worse than none — it looks copyable and is not. */
.epi-tokrail__ca {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 1.5;
	color: var(--fg-dim);
	background: rgba(8, 9, 12, 0.6);
	border: 1px solid var(--line-soft);
	border-radius: 6px;
	padding: 8px 9px;
	overflow-wrap: anywhere;
	user-select: all;
}

.epi-tokrail__copy {
	margin-top: 7px;
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: var(--fg-faint);
	background: none;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	padding: 6px 10px;
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease;
}

.epi-tokrail__copy:hover { color: var(--fg); border-color: var(--line-hover); }
.epi-tokrail__copy.is-done { color: var(--ui-bull); border-color: rgba(47, 217, 138, 0.5); }

/* Without a clipboard the button does nothing, so it is not shown. The address
   above it carries `user-select: all` — one click selects the whole string. */
.no-clipboard .epi-tokrail__copy { display: none; }

.epi-tokrail__note {
	font-size: 11px;
	line-height: 1.5;
	color: var(--fg-ghost);
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line-soft);
}

/* --- links -------------------------------------------------------------------- */

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

.epi-tokrail__go:hover { color: var(--ui-accent-bright); }

.epi-tokrail__go--soft {
	color: var(--fg-faint);
	margin-top: 11px;
	padding-top: 11px;
	border-top: 1px solid var(--line-soft);
}

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

@media (max-width: 1280px) {
	.epi-tokrail { gap: 12px; }
}

/* ==========================================================================
   Narrower — after the base rules, because a media query has no extra
   specificity and loses to anything declared below it.
   ========================================================================== */

@media (max-width: 1280px) {
	.epi-tokrail {
		grid-column: 1 / -1;
		position: static;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 12px;
		align-items: start;
	}
}

@media (max-width: 640px) {
	.epi-tokrail { grid-template-columns: minmax(0, 1fr); }
	.epi-tokrail__price { font-size: 22px; }
}