/* ============================================================
   SIC Press — eyebrow + kicker, three-line heading, tab filters,
   alternating image/text entry rows, archive footer.
   ============================================================ */

.sicpress {
	--sp-bg:     #021859;
	--sp-text:   #ffffff;
	--sp-muted:  rgba(255,255,255,.72);
	--sp-accent: #bf1304;
	--sp-line:   rgba(255,255,255,.14);

	background: var(--sp-bg);
	color: var(--sp-text);
	padding: 88px 48px 96px;
	font-family: inherit;
}
.sicpress-inner { max-width: 1240px; margin: 0 auto; }

/* ---- intro ---- */
.sicpress-top { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 26px; }
.sicpress-eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0;
	font-family: var(--sic-label-font);
	font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--sp-accent);
}
.sicpress-eyebrow span { width: 34px; height: 2px; background: var(--sp-accent); display: inline-block; }
.sicpress-kicker {
	margin: 0; color: var(--sp-muted);
	font-size: 13px; letter-spacing: .02em;
}

.sicpress-heading {
	margin: 0 0 44px;
	/* Was 32ch, which suited three short stacked lines. With one heading
	   that cap broke it early, so it runs to the section's own width and
	   wraps only when the words do not fit — in balanced rows, and after
	   any break typed in the editor. */
	max-width: 100%;
	text-wrap: balance;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(30px, 4.2vw, 58px); line-height: 1.1;
}
/* Italics inside the heading keep the accent colour they had when the
   second line was a field of its own, so a heading written the old way
   reads the same once the lines are typed as one. */
.sicpress-heading em, .sicpress-heading i { font-style: italic; color: var(--sp-accent); }

@media (max-width: 860px) {
	.sicpress-heading { max-width: none; }
}

/* ---- tab filters ---- */
.sicpress-tabs {
	display: flex; align-items: center; gap: 34px; flex-wrap: wrap;
	border-bottom: 1px solid var(--sp-line);
	margin-bottom: 42px;
}
.sicpress-tab {
	background: none; border: 0; cursor: pointer;
	padding: 0 2px 14px; margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	color: var(--sp-muted);
	font-family: var(--sic-label-font);
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	transition: color .18s ease, border-color .18s ease;
}
.sicpress-tab:hover { color: var(--sp-text); }
.sicpress-tab.is-active { color: var(--sp-text); border-bottom-color: var(--sp-accent); }
.sicpress-vol {
	margin-left: auto; padding-bottom: 14px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .12em; color: var(--sp-muted);
}

/* ---- entries ---- */
.sicpress-list { display: flex; flex-direction: column; }
.sicpress-item {
	display: grid; grid-template-columns: 1fr 1fr;
	align-items: stretch;
	border: 1px solid var(--sp-line);
	border-bottom: 0;
}
.sicpress-list .sicpress-item:last-child { border-bottom: 1px solid var(--sp-line); }
.sicpress-item.is-hidden { display: none; }

/* Alternate sides. Driven by a class (not :nth-child) so the pattern
   still alternates correctly once rows are filtered out. */
.sicpress-item { display: grid; }
.sicpress-item.is-flip .sicpress-media { grid-column: 2; grid-row: 1; }
.sicpress-item.is-flip .sicpress-body  { grid-column: 1; grid-row: 1; }

.sicpress-media { position: relative; overflow: hidden; min-height: 300px; background: #021859; }
.sicpress-media img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
	transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.sicpress-item:hover .sicpress-media img { transform: scale(1.06); }

.sicpress-tag {
	position: absolute; top: 14px; left: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(20,27,51,.72); color: #ffffff;
	padding: 6px 11px; border-radius: 3px;
	font-family: var(--sic-label-font);
	font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
	backdrop-filter: blur(3px);
}
.sicpress-item.is-flip .sicpress-tag { left: auto; right: 14px; }

.sicpress-body {
	display: flex; flex-direction: column; justify-content: center;
	padding: 46px 48px;
}
.sicpress-meta {
	margin: 0 0 18px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-muted);
}
.sicpress-meta b { color: var(--sp-text); font-weight: 400; }
.sicpress-title {
	margin: 0 0 16px;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(21px, 2.1vw, 32px); line-height: 1.22;
}
.sicpress-excerpt {
	margin: 0; color: var(--sp-muted);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.65;
}
.sicpress-foot {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 34px;
}
.sicpress-read {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .1em; color: var(--sp-muted);
}
.sicpress-link {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--sp-accent); text-decoration: none; white-space: nowrap;
}
.sicpress-link:hover { text-decoration: underline; }

/* ---- archive footer ---- */
.sicpress-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	flex-wrap: wrap;
	margin-top: 34px; padding-top: 26px;
	border-top: 1px solid var(--sp-line);
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .12em; color: var(--sp-muted);
}
.sicpress-bar a {
	color: var(--sp-accent); text-decoration: none;
	letter-spacing: .14em; text-transform: uppercase;
}
.sicpress-bar a:hover { text-decoration: underline; }

.sicpress-empty { padding: 46px 0; color: var(--sp-muted); font-size: 14px; }

@media (max-width: 860px) {
	.sicpress { padding: 56px 24px 68px; }
	.sicpress-item { grid-template-columns: 1fr; }
	.sicpress-item.is-flip .sicpress-media,
	.sicpress-item.is-flip .sicpress-body { grid-column: 1; grid-row: auto; }
	.sicpress-media { min-height: 220px; }
	.sicpress-body { padding: 30px 24px; }
	.sicpress-tabs { gap: 20px; }
	.sicpress-vol { margin-left: 0; width: 100%; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.sicpress-media img { transition: none; }
	.sicpress-item:hover .sicpress-media img { transform: none; }
}