/* -----------------------------------------------------------------------
   Single article (single.php) — a long-form reader for professionals
   publishing to their peers. The headline opens the page, the person who
   wrote it comes second, and the cover image serves the piece rather than
   swallowing it.
   ----------------------------------------------------------------------- */

/* --- Head -------------------------------------------------------------- */
/* The same two-track grid .hero-entry__body uses, so the headline, byline and
   cover line up exactly with the article column beneath them instead of being
   centred on their own width. The sidebar track stays empty up here. */
.article-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 0 clamp(2.5rem, 4.5vw, 5rem);
	align-items: start;
}

@media (max-width: 860px) {
	.article-top {
		grid-template-columns: minmax(0, 1fr);
	}
}

.article-head {
	min-inline-size: 0;
	padding-block: clamp(1.75rem, 4vw, 3rem) 0;
}

.article-head__badge {
	margin-block-end: clamp(0.9rem, 2vw, 1.2rem);
}

/* Set on the page, not over a photograph: dark type on white, at a size that
   carries the piece without shouting. */
.article-head__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.025em;
	color: var(--shivuk-color-text);
	text-wrap: balance;
}

/* The standfirst — the excerpt, promoted to the summary line a professional
   reader uses to decide whether to commit. */
.article-head__standfirst {
	margin: clamp(0.85rem, 2vw, 1.15rem) 0 0;
	max-inline-size: 58ch;
	font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
	font-weight: 400;
	line-height: 1.6;
	color: var(--shivuk-color-muted);
	text-wrap: pretty;
}

/* --- Byline ------------------------------------------------------------ */
/* Portrait, name, what they do, and the stamp — with the share buttons at the
   far end of the same line. Hairlines above and below set it apart from both
   the headline and the cover without boxing it in. */
.article-byline {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1rem);
	margin-block-start: clamp(1.5rem, 3vw, 2rem);
	padding-block: clamp(1rem, 2.2vw, 1.35rem);
	border-block: 1px solid var(--shivuk-color-border);
}

.article-byline__avatar {
	flex: none;
	display: block;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--shivuk-color-surface);
	box-shadow: 0 0 0 2px var(--shivuk-color-bg), 0 0 0 3.5px var(--shivuk-color-accent-soft);
}

.article-byline__avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.article-byline__who {
	min-inline-size: 0;
	flex: 1 1 auto;
}

.article-byline__name {
	display: inline-block;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--shivuk-color-text);
	text-decoration: none;
}

.article-byline__name:hover,
.article-byline__name:focus-visible {
	color: var(--shivuk-color-accent);
}

/* The writer's own line about themselves — the detail that turns a byline
   into a credential. One line only; the full text is in the card at the end. */
.article-byline__headline {
	margin: 0.1rem 0 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--shivuk-color-muted);
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-byline__stamp {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.25rem 0 0;
	font-size: 0.82rem;
	color: var(--shivuk-color-muted);
}

.article-byline__sep {
	opacity: 0.6;
}

.article-byline__share {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin-inline-start: auto;
}

.article-byline__share-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--shivuk-color-muted);
}

/* Under ~620px the share row drops to its own line beneath the portrait
   block, rather than squeezing the name into two words per line. */
@media (max-width: 620px) {
	.article-byline {
		flex-wrap: wrap;
	}

	.article-byline__share {
		inline-size: 100%;
		margin-inline-start: 0;
		padding-block-start: 0.85rem;
		border-block-start: 1px solid var(--shivuk-color-border);
	}
}

/* --- Cover ------------------------------------------------------------- */
/* Below the byline and sized to serve the article: wide, calm, credited
   underneath in plain text instead of overlaid on the picture. */
.article-cover {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

.article-cover img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: min(58vh, 520px);
	object-fit: cover;
	border-radius: var(--shivuk-radius-lg);
	box-shadow: var(--shivuk-shadow-md);
}

.article-cover__credit {
	display: flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: 0.65rem;
	color: var(--shivuk-color-muted);
	font-size: 0.78rem;
	line-height: 1.45;
	text-wrap: pretty;
}

.article-cover__credit svg {
	inline-size: 14px;
	block-size: 14px;
	flex-shrink: 0;
	opacity: 0.8;
}

/* --- Body -------------------------------------------------------------- */
.article-entry .hero-entry__body {
	padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/* A drop cap is a magazine gesture; these are practitioners' write-ups, and
   the piece should start on the first word like any professional document. */
.article-entry .entry-content > p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
	margin-inline-end: 0;
	margin-block-start: 0;
}

/* Slightly larger and airier than the theme default — this template is read
   end to end, not skimmed. */
.article-entry .entry-content {
	font-size: 1.06rem;
}

.article-entry .entry-content > p {
	line-height: 1.9;
}

/* --- Author card, foot of the article ---------------------------------- */
.article-author {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 3vw, 1.85rem);
	border: 1px solid var(--shivuk-color-border);
	border-radius: var(--shivuk-radius-lg);
	background: var(--shivuk-color-surface);
}

.article-author__avatar {
	flex: none;
	display: block;
	inline-size: 76px;
	block-size: 76px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--shivuk-color-bg);
	box-shadow: 0 0 0 2px var(--shivuk-color-surface), 0 0 0 4px var(--shivuk-color-accent-soft);
}

.article-author__avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.article-author__body {
	min-inline-size: 0;
}

.article-author__label {
	display: block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--shivuk-color-muted);
}

.article-author__name {
	display: inline-block;
	margin-block-start: 0.2rem;
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--shivuk-color-text);
	text-decoration: none;
}

.article-author__name:hover,
.article-author__name:focus-visible {
	color: var(--shivuk-color-accent);
}

.article-author__bio {
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--shivuk-color-muted);
	text-wrap: pretty;
}

.article-author__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-block-start: 0.85rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--shivuk-color-accent);
	text-decoration: none;
}

.article-author__link svg {
	inline-size: 16px;
	block-size: 16px;
	transition: transform 0.3s var(--shivuk-ease);
}

.article-author__link:hover svg,
.article-author__link:focus-visible svg {
	transform: translateX(-3px);
}

@media (max-width: 560px) {
	.article-author {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.article-author__link svg {
		transition: none;
	}

	.article-author__link:hover svg,
	.article-author__link:focus-visible svg {
		transform: none;
	}
}