/* ==========================================================================
   TheCodeWork — Quick read
   A single Explore piece. Loaded with blog.css, explore.css and post.css, and
   the page carries .tcwb, .tcwe and .tcwx: the tokens, the shell and the
   reveal are the blog's, the poster cards are the listing's, the heading
   block and the body typography are the article page's (.tcwa-*), and only
   what is particular to reading a poster is written 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 the page
   ========================================================================== */

.tcwx {
	/* The one accent: amber, as the posters themselves tend to be. The bright step is for lines
	   and the callout's rule; text on white takes the dark step, which holds 4.5:1. */
	--tcwx-amber: #f5a623;
	--tcwx-amber-ink: #b45309;
	--tcwx-amber-tint: #fff7e6;

	/* What the article page's classes read. */
	--tcwa-accent: var(--tcwx-amber-ink);
	--tcwa-tint: var(--tcwx-amber-tint);
	--tcwa-measure: 100%;
	--tcwa-top: calc(var(--hd-h, 70px) + var(--hd-top, 0px) + 24px);

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

/* Closer under the header than the site's default clearance, on the same measure as the article
   page. Two classes, because the header's rule counts its :nth-child() as well as its id. */
#main > .tcwb.tcwx {
	padding-top: calc(var(--hd-h, 70px) + 52px) !important;
}

/* The reading line: how far through the piece the reader is. On a narrow screen it is a line
   under the header card; on a wide one, where the poster stays in view, it is the trace around
   the poster's frame instead (section 2). Script-only either way, so it is not there to sit at
   zero for a reader without scripting. */
.tcwx-progress {
	display: none;
}

html.js .tcwx-progress {
	position: fixed;
	z-index: 40;
	top: calc(var(--hd-h, 70px) + var(--hd-top, 0px) - 6px);
	right: var(--hd-side, 14px);
	left: var(--hd-side, 14px);
	display: block;
	height: 3px;
	border-radius: 3px;
	background: var(--tcwb-line);
	pointer-events: none;
}

.tcwx-progress span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 3px;
	background: var(--tcwx-amber);
	transform: scaleX(var(--tcwx-p, 0));
	transform-origin: 0 50%;
}

/* After the rule that shows it, so that this one wins: on a wide screen the trace takes over. */
@media (min-width: 1024px) {
	html.js .tcwx-progress {
		display: none;
	}
}


/* ==========================================================================
   2. Layout, and the poster
   ========================================================================== */

/* Narrow: the heading block, the poster, then the points and the text. */
.tcwx-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"poster"
		"main";
	gap: 26px;
}

.tcwx-head {
	grid-area: head;
}

.tcwx-poster {
	grid-area: poster;
}

.tcwx-main {
	grid-area: main;
	min-width: 0;
}

/* Wide: the poster beside everything, staying in view while the text scrolls past it. */
@media (min-width: 1024px) {
	.tcwx-layout {
		grid-template-columns: minmax(300px, 0.44fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"poster head"
			"poster main";
		column-gap: clamp(32px, 4vw, 56px);
		row-gap: 0;
		align-items: start;
	}

	.tcwx-poster {
		position: sticky;
		top: var(--tcwa-top);
		align-self: start;
	}
}

.tcwx-poster__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(18px, 2.8vw, 34px);
	border-radius: 20px;
	background: var(--tcwb-ice);
}

/* The reading trace: a faint track around the frame's edge, and the amber line that draws itself
   along it, clockwise from the top left, as far as the reader has come. The script sizes the two
   rectangles to the frame and sets how much of the line shows. */
.tcwx-poster__trace {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

@media (min-width: 1024px) {
	html.js .tcwx--trace .tcwx-poster__trace {
		display: block;
	}
}

.tcwx-poster__track,
.tcwx-poster__line {
	fill: none;
	stroke-width: 3;
}

.tcwx-poster__track {
	stroke: var(--tcwb-line-2);
}

.tcwx-poster__line {
	stroke: var(--tcwx-amber);
	stroke-linecap: round;
}

/* The bundle's global img rule rounds, shifts and fixes the height of every image; the poster is
   shown whole, at its own proportions, and no taller than the window it sits in. The art wrapper
   takes the poster's size, carries its corners and shadow, and clips the water to it. */
.tcwx-poster__art {
	position: relative;
	display: block;
	max-width: 100%;
	overflow: hidden;
	border-radius: 10px;
	box-shadow: 0 18px 40px -22px rgba(15, 30, 58, 0.5), 0 2px 6px rgba(15, 30, 58, 0.12);
}

.tcwx-poster__frame img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: min(70vh, 640px);
	margin: 0;
	border-radius: 0;
}

/* The water: two translucent layers in the poster's own colour (--tcwx-water, set on the art by
   the template from the poster's dominant colour; the brand blue where it has none), risen by
   however much of the piece has been read. Each layer is one element whose top edge is a wave: a
   mask, so the surface and the body are the same paint and there is no seam between them. The
   surface drifts, the back layer the other way and slower. The script sets --tcwx-p. */
.tcwx-poster__water {
	position: absolute;
	inset: 0;
	display: none;
	transform: translateY(calc((1 - var(--tcwx-p, 0)) * 100%));
	transition: transform 160ms linear;
	will-change: transform;
}

@media (min-width: 1024px) {
	html.js .tcwx--water .tcwx-poster__water {
		display: block;
	}
}

.tcwx-poster__wave {
	--tcwx-wave-w: 160px;
	--tcwx-wave-h: 20px;
	position: absolute;
	top: -14px;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgb(var(--tcwx-water, 70 101 155) / 0.42);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q75 0 150 12 T300 12 V20 H0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q75 0 150 12 T300 12 V20 H0 Z' fill='%23000'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
	-webkit-mask-size: var(--tcwx-wave-w) var(--tcwx-wave-h), 100% calc(100% - var(--tcwx-wave-h));
	mask-size: var(--tcwx-wave-w) var(--tcwx-wave-h), 100% calc(100% - var(--tcwx-wave-h));
	-webkit-mask-repeat: repeat-x, no-repeat;
	mask-repeat: repeat-x, no-repeat;
	-webkit-mask-position: 0 0, 0 var(--tcwx-wave-h);
	mask-position: 0 0, 0 var(--tcwx-wave-h);
	animation: tcwx-wave 3s linear infinite;
}

.tcwx-poster__wave--back {
	--tcwx-wave-w: 130px;
	top: -22px;
	background: rgb(var(--tcwx-water, 70 101 155) / 0.22);
	animation-duration: 4s;
	animation-direction: reverse;
}

@keyframes tcwx-wave {
	from {
		-webkit-mask-position: 0 0, 0 var(--tcwx-wave-h);
		mask-position: 0 0, 0 var(--tcwx-wave-h);
	}

	to {
		-webkit-mask-position: var(--tcwx-wave-w) 0, 0 var(--tcwx-wave-h);
		mask-position: var(--tcwx-wave-w) 0, 0 var(--tcwx-wave-h);
	}
}
}

@media (max-width: 1023px) {
	.tcwx-poster__frame img {
		max-height: 520px;
	}
}

.tcwx-poster__empty {
	min-height: 320px;
	border-radius: 10px;
}

.tcwx-poster__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	margin: 14px 0 0;
}

.tcwx-poster__full {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tcwb-blue);
	text-decoration: none;
	transition: color var(--tcwb-t) var(--tcwb-ease);
}

.tcwx-poster__full:hover {
	color: var(--tcwb-blue-dark);
}

.tcwx-poster__download {
	height: 40px;
	padding: 0 18px;
	font-size: 13.5px;
	text-decoration: none;
}

/* The heading block: the article page's classes, in this page's order (the byline sits above the
   title here, under the eyebrow). */
.tcwx-head .tcwa-eyebrow {
	margin-top: 16px;
}

.tcwx-head .tcwa-byline {
	margin-top: 6px;
}

.tcwx-head .tcwa-title {
	margin-top: 10px;
	font-size: clamp(27px, 3.1vw, 40px);
}

.tcwx-head .tcwa-lead {
	margin-top: 12px;
	max-width: 62ch;
}


/* ==========================================================================
   3. The key points
   ========================================================================== */

.tcwx-points {
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--tcwb-line-2);
}

@media (min-width: 1024px) {
	.tcwx-points {
		margin-top: 30px;
	}
}

.tcwx-point {
	margin: 0;
	border-bottom: 1px solid var(--tcwb-line);
}

.tcwx-point__link {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	gap: 4px 14px;
	align-items: start;
	padding: 15px 14px 15px 12px;
	border-left: 3px solid transparent;
	color: inherit;
	text-decoration: none;
	transition: background-color var(--tcwb-t) var(--tcwb-ease), border-color var(--tcwb-t) var(--tcwb-ease);
}

@media (min-width: 700px) {
	.tcwx-point__link {
		grid-template-columns: 44px minmax(0, 0.85fr) minmax(0, 1.5fr);
		gap: 8px 18px;
		padding: 17px 16px 17px 12px;
	}
}

.tcwx-point__link:hover,
.tcwx-point__link:focus-visible {
	background: var(--tcwx-amber-tint);
	border-left-color: var(--tcwx-amber);
}

.tcwx-point__link:focus-visible {
	outline: 2px solid var(--tcwb-blue);
	outline-offset: -2px;
}

.tcwx-point__n {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.25;
	color: var(--tcwx-amber-ink);
}

.tcwx-point__label {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.012em;
	line-height: 1.35;
	color: var(--tcwb-ink);
}

.tcwx-point__text {
	grid-column: 2;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--tcwb-ink-2);
}

@media (min-width: 700px) {
	.tcwx-point__text {
		grid-column: 3;
	}
}


/* ==========================================================================
   4. The short version, and the text
   ========================================================================== */

.tcwx-short {
	display: block;
	margin: 22px 0 0;
	padding: 18px 24px 20px;
	border-left: 5px solid var(--tcwx-amber);
	border-radius: 0 14px 14px 0;
	background: var(--tcwb-navy);
	color: #fff;
}

.tcwx-short__label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcwx-amber);
}

.tcwx-short__text {
	display: block;
	margin-top: 8px;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.35;
	color: #fff;
}

/* The divider between the summary and the piece itself. */
.tcwx-label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 34px 0 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcwb-ink-3);
}

.tcwx-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--tcwb-line-2);
}

.tcwx-body {
	margin-top: 18px;
}

/* A bold line that leads a section reads as the heading it is. */
.tcwx-body .tcwx-lead {
	margin: 30px 0 10px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--tcwb-ink);
	scroll-margin-top: var(--tcwa-top);
}

.tcwx-body .tcwx-lead strong {
	font-weight: inherit;
	color: inherit;
}


/* ==========================================================================
   5. Want to go deeper?
   ========================================================================== */

.tcwx-deeper {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px 18px;
	align-items: center;
	margin-top: clamp(28px, 3.4vw, 44px);
	padding: 18px 20px;
	border: 1px solid var(--tcwb-line);
	border-radius: 16px;
	background: var(--tcwb-surface);
	box-shadow: var(--tcwb-shadow-sm);
}

@media (min-width: 900px) {
	.tcwx-deeper {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		gap: 22px;
		padding: 18px 22px 18px 20px;
	}
}

.tcwx-deeper__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	border-radius: 14px;
	background: var(--tcwb-ice);
	color: var(--tcwb-blue);
}

.tcwx-deeper__copy {
	min-width: 0;
}

.tcwx-deeper__eyebrow {
	margin: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tcwb-blue);
}

.tcwx-deeper__title {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.3;
}

.tcwx-deeper__title a {
	color: var(--tcwb-ink);
	text-decoration: none;
}

.tcwx-deeper__title a:hover {
	color: var(--tcwb-blue);
}

.tcwx-deeper__text {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tcwb-ink-2);
}

.tcwx-deeper__read {
	font-size: 13.5px;
	color: var(--tcwb-ink-3);
	white-space: nowrap;
}

@media (min-width: 900px) {
	.tcwx-deeper__read {
		padding: 0 22px;
		border-left: 1px solid var(--tcwb-line-2);
	}
}

@media (max-width: 899px) {
	.tcwx-deeper__read,
	.tcwx-deeper__btn {
		grid-column: 2;
		justify-self: start;
	}
}

.tcwx-deeper__btn {
	text-decoration: none;
}

.tcwx-deeper__btn:hover svg {
	transform: translateX(3px);
}


/* ==========================================================================
   6. Continue exploring
   ========================================================================== */

.tcwx-more {
	margin-top: clamp(40px, 5vw, 64px);
}

.tcwx-more__head {
	align-items: flex-end;
}

.tcwx-more__lead {
	margin: 6px 0 0;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.5;
	color: var(--tcwb-ink-2);
}

/* Six across on a wide screen, so the cards are small and the row is short. The poster frame is
   squarer than the library's (2:3 rather than 5:8): the posters are fitted, not cropped, so the
   headline drawn into each stays whole and the frame carries a little of its ground either side. */
.tcwx-more__grid {
	--tcwe-poster: 2 / 3;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

@media (min-width: 640px) {
	.tcwx-more__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.tcwx-more__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.tcwx-more .tcwe-card__body {
	gap: 7px;
	padding: 11px 12px 10px;
}

.tcwx-more .tcwe-card__title {
	font-size: 13.5px;
	-webkit-line-clamp: 2;
}

.tcwx-more .tcwe-card__foot {
	padding-top: 8px;
}


/* ==========================================================================
   7. Motion
   ========================================================================== */

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

	.tcwx-point__link,
	.tcwx-poster__full,
	.tcwx-poster__water {
		transition: none;
	}

	/* The water still rises with the reading; only its surface holds still. */
	.tcwx-poster__wave {
		animation: none;
	}
}