/* ==========================================================================
   TheCodeWork — Article
   The single post page. Loaded alongside blog.css, and the page carries both
   .tcwb and .tcwa, so the tokens, the shell, the cards and the reveal come
   from the blog and only what is particular to reading one article is here.
   Sizing is in px on purpose: the theme sets html{font-size:15px} and 18px at
   md, which makes rem unreliable across breakpoints.
   ========================================================================== */

/* ==========================================================================
   1. Tokens and tones
   ========================================================================== */

.tcwa {
	/* The page's one accent: the eyebrow, the icons, the active entry in the contents, the
	   takeaway. It follows the hero panel's colour, so the page reads as one piece. ---------- */
	--tcwa-panel: var(--tcwb-blue);
	--tcwa-accent: var(--tcwb-blue);
	--tcwa-tint: var(--tcwb-blue-soft);

	/* Measure and shape -------------------------------------------------------- */
	--tcwa-measure: 780px;
	--tcwa-side: 250px;
	--tcwa-r: 22px;

	/* Where a heading comes to rest when the contents scroll to it: under the fixed header
	   (--hd-h, from site-header.css) with a little air. The sticky column reads the same number. */
	--tcwa-top: calc(var(--hd-h, 70px) + var(--hd-top, 0px) + 24px);

	padding-bottom: var(--tcwb-section);
}

/* The site header reserves a full measure of air under its card for every page's first section
   (site-header.css). An article is a card of its own and sits closer than that, so the page takes
   the room the header needs and a little more, not the whole clearance. Two classes, because the
   header's rule counts its :nth-child() as well as its id. */
#main > .tcwb.tcwa {
	padding-top: calc(var(--hd-h, 70px) + 44px) !important;
}

/* The twelve colours of the "Featured Image Background Color" field. The panel carries only the
   image, so it can be as bright as the field promises; the accent is the same hue taken dark
   enough to hold 4.5:1 as small text on white and on its own tint. */
.tcwa--slate  { --tcwa-panel: #64748b; --tcwa-accent: #475569; --tcwa-tint: #eef1f5; }
.tcwa--sky    { --tcwa-panel: #38bdf8; --tcwa-accent: #0369a1; --tcwa-tint: #e6f5fd; }
.tcwa--red    { --tcwa-panel: #e4574c; --tcwa-accent: #c0392f; --tcwa-tint: #fdecea; }
.tcwa--green  { --tcwa-panel: #10b981; --tcwa-accent: #047857; --tcwa-tint: #e6f7f1; }
.tcwa--yellow { --tcwa-panel: #f5b82e; --tcwa-accent: #9a6400; --tcwa-tint: #fef4dc; }
.tcwa--orange { --tcwa-panel: #f97316; --tcwa-accent: #c2410c; --tcwa-tint: #fdeee3; }
.tcwa--lime   { --tcwa-panel: #84cc16; --tcwa-accent: #4d7c0f; --tcwa-tint: #f0f8e1; }
.tcwa--teal   { --tcwa-panel: #14b8a6; --tcwa-accent: #0f766e; --tcwa-tint: #e3f6f4; }
.tcwa--cyan   { --tcwa-panel: #06b6d4; --tcwa-accent: #0e7490; --tcwa-tint: #e2f6fa; }
.tcwa--indigo { --tcwa-panel: #6366f1; --tcwa-accent: #4338ca; --tcwa-tint: #ebebfd; }
.tcwa--pink   { --tcwa-panel: #ec4899; --tcwa-accent: #be185d; --tcwa-tint: #fde8f1; }

.tcwa-eyebrow,
.tcwa-brief__key,
.tcwa-takeaway__label,
.tcwa-toc__title,
.tcwa-share__title {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcwa-accent);
}


/* ==========================================================================
   2. Hero
   ========================================================================== */

.tcwa-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin-top: clamp(8px, 1.4vw, 20px);
	background: var(--tcwb-surface);
	border: 1px solid var(--tcwb-line);
	border-radius: var(--tcwa-r);
	box-shadow: var(--tcwb-shadow);
	overflow: hidden;
}

@media (min-width: 900px) {
	.tcwa-hero {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	}
}

.tcwa-hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(22px, 2.8vw, 36px) clamp(20px, 3.4vw, 48px) clamp(26px, 2.8vw, 36px);
}

/* The summary strip overlaps the hero's bottom edge, so the byline needs room above it. */
@media (min-width: 900px) {
	.tcwa-hero--with-brief .tcwa-hero__copy {
		padding-bottom: clamp(52px, 4.6vw, 64px);
	}
}

.tcwa-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: var(--tcwb-ink-3);
}

.tcwa-crumbs__list li:not(:last-child)::after {
	content: "/";
	margin: 0 8px;
	color: var(--tcwb-blue-light);
}

.tcwa-crumbs__list a {
	color: var(--tcwb-ink-3);
	text-decoration: none;
	transition: color var(--tcwb-t) var(--tcwb-ease);
}

.tcwa-crumbs__list li:last-child a {
	color: var(--tcwb-ink-2);
}

.tcwa-crumbs__list a:hover {
	color: var(--tcwb-blue);
}

.tcwa-eyebrow {
	margin-top: 18px;
}

.tcwa-title {
	margin: 12px 0 0;
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;
	color: var(--tcwb-ink);
}

.tcwa-lead {
	margin: 16px 0 0;
	max-width: 56ch;
	font-size: clamp(16px, 1.45vw, 19px);
	line-height: 1.55;
	color: var(--tcwb-ink-2);
}

.tcwa-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 0;
	margin: 20px 0 0;
	font-size: 14px;
	color: var(--tcwb-ink-3);
}

.tcwa-byline__author {
	font-weight: 600;
	color: var(--tcwb-ink-2);
}

/* The separator belongs to the item before it, so a wrapped line never starts with a dot. */
.tcwa-byline > *:not(:last-child)::after {
	content: "\00b7";
	margin: 0 10px;
	color: var(--tcwb-blue-light);
}

.tcwa-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	padding: clamp(16px, 2.4vw, 28px);
	background: var(--tcwa-panel);
}

@media (min-width: 900px) {
	.tcwa-hero__media {
		min-height: 100%;
	}
}

/* The bundle's global img rule rounds, shifts and fixes the height of every image; the panel's
   image is fitted whole, as the artwork was drawn. */
.tcwa-hero__media img {
	display: block;
	width: 100%;
	max-width: 520px;
	max-height: 340px;
	height: auto;
	margin: 0;
	object-fit: contain;
	border-radius: 0;
}

@media (max-width: 899px) {
	.tcwa-hero__media img {
		max-height: 280px;
	}
}

/* No image: the drafting grid, in white on the panel's colour. */
.tcwa-hero__panel {
	position: absolute;
	inset: 0;
	min-height: 0;
	background-color: transparent;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.16) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
}


/* ==========================================================================
   3. In 30 seconds
   ========================================================================== */

.tcwa-brief {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 16px 0 0;
	padding: 20px 22px;
	background: var(--tcwb-surface);
	border: 1px solid var(--tcwb-line);
	border-radius: 18px;
	box-shadow: var(--tcwb-shadow);
}

@media (min-width: 900px) {
	.tcwa-brief {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 28px;
		margin: -36px clamp(24px, 3.4vw, 48px) 0;
		padding: 22px 28px;
	}
}

.tcwa-brief__label {
	margin: 0;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--tcwb-ink);
}

@media (min-width: 900px) {
	.tcwa-brief__label {
		padding-right: 28px;
		border-right: 1px solid var(--tcwb-line-2);
	}
}

.tcwa-brief__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.tcwa-brief__list {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.tcwa-brief__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
}

@media (min-width: 900px) {
	.tcwa-brief__item + .tcwa-brief__item {
		padding-left: 24px;
		border-left: 1px solid var(--tcwb-line-2);
	}
}

.tcwa-brief__icon,
.tcwa-takeaway__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tcwa-tint);
	color: var(--tcwa-accent);
}

.tcwa-brief__copy {
	display: block;
	min-width: 0;
}

.tcwa-brief__key {
	display: block;
}

.tcwa-brief__text {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--tcwb-ink-2);
}


/* ==========================================================================
   4. Layout: the contents beside the article
   ========================================================================== */

/* Narrow: one column, contents first, the share row last. The side wrapper dissolves so its two
   children can take their own places in the order. */
.tcwa-layout {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: clamp(28px, 3.4vw, 48px);
}

.tcwa-side {
	display: contents;
}

.tcwa-toc {
	order: 1;
}

.tcwa-body {
	order: 2;
}

.tcwa-share {
	order: 3;
}

/* Wide: the contents in a sticky column beside the article, the share row under them. */
@media (min-width: 1024px) {
	.tcwa-layout {
		display: grid;
		grid-template-columns: var(--tcwa-side) minmax(0, 1fr);
		column-gap: clamp(40px, 5vw, 80px);
		align-items: start;
	}

	.tcwa-side {
		display: block;
		position: sticky;
		top: var(--tcwa-top);
		max-height: calc(100vh - var(--tcwa-top) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--tcwb-line-2) transparent;
		padding-top: 6px;
	}
}


/* ==========================================================================
   5. On this page
   ========================================================================== */

.tcwa-toc__title {
	margin-bottom: 16px;
	color: var(--tcwb-ink-2);
}

.tcwa-toc__toggle {
	display: none;
}

.tcwa-toc__list,
.tcwa-toc__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The rail the dots sit on, from the first dot to the last. */
.tcwa-toc__list {
	position: relative;
	padding-left: 24px;
}

.tcwa-toc__list::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 5px;
	width: 2px;
	border-radius: 2px;
	background: var(--tcwb-line-2);
}

.tcwa-toc__list > li {
	position: relative;
}

.tcwa-toc__list > li + li {
	margin-top: 12px;
}

.tcwa-toc__list > li::before {
	content: "";
	position: absolute;
	top: 6px;
	left: -24px;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid var(--tcwb-line-2);
	border-radius: 50%;
	background: var(--tcwb-surface);
	transition: border-color var(--tcwb-t) var(--tcwb-ease), background-color var(--tcwb-t) var(--tcwb-ease), box-shadow var(--tcwb-t) var(--tcwb-ease);
}

.tcwa-toc__list > li.is-done::before {
	border-color: var(--tcwa-accent);
}

.tcwa-toc__list > li.is-active::before {
	border-color: var(--tcwa-accent);
	background: var(--tcwa-accent);
	box-shadow: 0 0 0 4px var(--tcwa-tint);
}

.tcwa-toc a {
	display: block;
	padding: 2px 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--tcwb-ink-2);
	text-decoration: none;
	transition: color var(--tcwb-t) var(--tcwb-ease);
}

.tcwa-toc a:hover {
	color: var(--tcwb-ink);
}

.tcwa-toc li.is-active > a {
	font-weight: 600;
	color: var(--tcwa-accent);
}

.tcwa-toc__sub {
	margin-top: 6px;
	padding-left: 14px;
}

.tcwa-toc__sub li + li {
	margin-top: 4px;
}

.tcwa-toc__sub a {
	font-size: 13px;
	color: var(--tcwb-ink-3);
}

/* Narrow: a folded panel above the article. The fold exists only where the script that opens it
   does, so a reader without scripting sees the whole list. */
@media (max-width: 1023px) {
	.tcwa-toc {
		padding: 4px 18px;
		background: var(--tcwb-surface);
		border: 1px solid var(--tcwb-line);
		border-radius: 14px;
	}

	.tcwa-toc__title {
		display: none;
	}

	.tcwa-toc__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 12px 0;
		border: 0;
		background: none;
		font-family: inherit;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--tcwb-ink-2);
		cursor: pointer;
	}

	.tcwa-toc__toggle svg {
		transition: transform var(--tcwb-t) var(--tcwb-ease);
	}

	.tcwa-toc.is-open .tcwa-toc__toggle svg {
		transform: rotate(180deg);
	}

	.tcwa-toc__list {
		padding-bottom: 14px;
	}

	.tcwa-toc__list::before {
		bottom: 26px;
	}

	html.js .tcwa-toc:not(.is-open) .tcwa-toc__list {
		display: none;
	}
}


/* ==========================================================================
   6. The article
   ========================================================================== */

.tcwa-body {
	max-width: var(--tcwa-measure);
	font-size: 17px;
	line-height: 1.72;
	color: var(--tcwb-ink-2);
	overflow-wrap: anywhere;
}

@media (max-width: 720px) {
	.tcwa-body {
		font-size: 16px;
	}
}

.tcwa-body > :first-child {
	margin-top: 0;
}

.tcwa-body :is(h1, h2, h3, h4, h5, h6) {
	scroll-margin-top: var(--tcwa-top);
	color: var(--tcwb-ink);
}

/* An h1 inside the body is an editing slip (the page has one h1, the title); it reads as an h2. */
.tcwa-body h1,
.tcwa-body h2 {
	margin: 44px 0 14px;
	font-size: clamp(23px, 2.2vw, 28px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

.tcwa-body h3 {
	margin: 32px 0 10px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.tcwa-body h4,
.tcwa-body h5,
.tcwa-body h6 {
	margin: 26px 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.tcwa-body p {
	margin: 0 0 20px;
}

.tcwa-body ul,
.tcwa-body ol {
	margin: 0 0 22px;
	padding-left: 26px;
}

.tcwa-body ul {
	list-style: disc;
}

.tcwa-body ol {
	list-style: decimal;
}

.tcwa-body li {
	margin: 0 0 8px;
	padding-left: 4px;
}

.tcwa-body li::marker {
	color: var(--tcwa-accent);
	font-weight: 600;
}

.tcwa-body li > ul,
.tcwa-body li > ol {
	margin: 8px 0 0;
}

.tcwa-body a {
	color: var(--tcwb-blue);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--tcwb-blue-light);
	text-underline-offset: 3px;
	transition: color var(--tcwb-t) var(--tcwb-ease), text-decoration-color var(--tcwb-t) var(--tcwb-ease);
}

.tcwa-body a:hover {
	color: var(--tcwb-blue-dark);
	text-decoration-color: currentColor;
}

.tcwa-body strong,
.tcwa-body b {
	font-weight: 700;
	color: var(--tcwb-ink);
}

.tcwa-body blockquote {
	margin: 28px 0;
	padding: 18px 24px;
	border-left: 4px solid var(--tcwa-accent);
	border-radius: 0 14px 14px 0;
	background: var(--tcwb-surface);
	font-size: 18px;
	font-style: normal;
	line-height: 1.6;
	color: var(--tcwb-ink);
}

.tcwa-body blockquote > :last-child {
	margin-bottom: 0;
}

.tcwa-body blockquote cite {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-style: normal;
	color: var(--tcwb-ink-3);
}

/* Media. The bundle's global img rule (a rounded corner, a negative margin, a fixed height) is
   undone here so an editor's image shows as uploaded. */
.tcwa-body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 12px;
}

.tcwa-body figure {
	margin: 28px 0;
}

.tcwa-body figure img {
	width: 100%;
	border: 1px solid var(--tcwb-line);
}

.tcwa-body figcaption {
	margin-top: 10px;
	font-size: 13.5px;
	line-height: 1.5;
	text-align: center;
	color: var(--tcwb-ink-3);
}

.tcwa-body .wp-block-embed {
	margin: 28px 0;
}

.tcwa-body iframe {
	max-width: 100%;
}

.tcwa-body .wp-block-embed__wrapper iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
}

.tcwa-body hr {
	margin: 36px 0;
	border: 0;
	border-top: 1px solid var(--tcwb-line-2);
}

/* A wide table scrolls inside its own box rather than pushing the page out. */
.tcwa-body table {
	display: block;
	max-width: 100%;
	margin: 0 0 24px;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}

.tcwa-body th,
.tcwa-body td {
	padding: 10px 14px;
	border: 1px solid var(--tcwb-line-2);
	text-align: left;
	vertical-align: top;
}

.tcwa-body th {
	background: var(--tcwb-ice);
	font-weight: 700;
	color: var(--tcwb-ink);
}

.tcwa-body code {
	padding: 0.15em 0.4em;
	border-radius: 5px;
	background: var(--tcwb-ice);
	font-size: 0.88em;
	color: var(--tcwb-ink);
}

.tcwa-body pre {
	margin: 0 0 24px;
	padding: 16px 18px;
	overflow-x: auto;
	border: 1px solid var(--tcwb-line);
	border-radius: 12px;
	background: var(--tcwb-surface);
	font-size: 14px;
	line-height: 1.6;
}

.tcwa-body pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}

/* The key takeaway, placed after the opening section by Article::content(). */
.tcwa-takeaway {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 32px 0;
	padding: 20px 22px;
	border-left: 4px solid var(--tcwa-accent);
	border-radius: 0 14px 14px 0;
	background: var(--tcwa-tint);
}

.tcwa-takeaway__icon {
	background: var(--tcwb-surface);
}

.tcwa-takeaway__copy {
	display: block;
	min-width: 0;
}

.tcwa-takeaway__label {
	display: block;
}

.tcwa-takeaway__text {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.55;
	color: var(--tcwb-ink);
}


/* ==========================================================================
   7. Share, and what to read next
   ========================================================================== */

/* A rule above the share row where something sits above it: the article on a narrow screen, the
   contents on a wide one. A short article with no contents list starts the column with the row. */
@media (max-width: 1023px) {
	.tcwa-share {
		padding-top: 20px;
		border-top: 1px solid var(--tcwb-line);
	}
}

@media (min-width: 1024px) {
	.tcwa-toc + .tcwa-share {
		margin-top: 28px;
		padding-top: 20px;
		border-top: 1px solid var(--tcwb-line);
	}
}

.tcwa-share__title {
	margin-bottom: 12px;
	color: var(--tcwb-ink-2);
}

.tcwa-share__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcwa-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--tcwb-line-2);
	border-radius: 50%;
	background: var(--tcwb-surface);
	color: var(--tcwb-ink-2);
	cursor: pointer;
	transition: color var(--tcwb-t) var(--tcwb-ease), border-color var(--tcwb-t) var(--tcwb-ease), background-color var(--tcwb-t) var(--tcwb-ease);
}

.tcwa-share__btn:hover {
	border-color: var(--tcwa-accent);
	background: var(--tcwa-tint);
	color: var(--tcwa-accent);
}

.tcwa-share__btn:focus-visible {
	outline: 2px solid var(--tcwb-blue);
	outline-offset: 3px;
}

.tcwa-share__note {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tcwa-accent);
}

.tcwa-share__note:empty {
	display: none;
}

.tcwa-related {
	margin-top: clamp(44px, 5.4vw, 72px);
}

@media (min-width: 1024px) {
	.tcwa-related .tcwb-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* ==========================================================================
   8. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.tcwa-toc__list > li::before,
	.tcwa-toc a,
	.tcwa-share__btn,
	.tcwa-toc__toggle svg {
		transition: none;
	}
}