/* ===========================================================================
   FREE DOWNLOADS
   The /downloads/ library and every /downloads/<slug>/ landing page.

   Built on the homepage download band (components.css), which loads first:
   the landing hero IS that band's plate, so it inherits every decision made
   there rather than restating it. This file only adds what is new.

   THE THEME FORCES PARAGRAPH COLOUR WITH !important (see the note near the
   end of components.css). Every <p> colour below is therefore !important and
   scoped to .atc-dl, so none of it leaks to the rest of the site.

   Loaded on these pages only. Namespaced .atc-dl.
   =========================================================================== */

.atc-dl {
	background: var(--atc-white, #FFFFFF);
	color: var(--atc-black, #0A0A0A);
	font-family: var(--atc-font, "Poppins", -apple-system, sans-serif);
}

.atc-dl *, .atc-dl *::before, .atc-dl *::after { box-sizing: border-box; }

.atc-dl__inner { max-width: var(--atc-content-max, 1102px); margin: 0 auto; }

.atc-dl .atc-dl-eyebrow {
	margin: 0 0 16px;
	font-size: 11px; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656) !important;
}

.atc-dl .atc-dl-h2 {
	margin: 0 0 28px;
	font-family: inherit;
	font-size: 34px; font-weight: 800; text-transform: uppercase;
	line-height: 1.04; letter-spacing: -.02em;
	color: var(--atc-black, #0A0A0A);
}

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

.atc-dl-hero { padding: 72px 24px 40px; }

.atc-dl .atc-dl-hero__title {
	margin: 0 0 20px;
	font-family: inherit;
	font-size: 56px; font-weight: 800; text-transform: uppercase;
	line-height: 1; letter-spacing: -.02em;
	color: var(--atc-black, #0A0A0A);
}

.atc-dl .atc-dl-hero__lede {
	margin: 0;
	max-width: 60ch;
	font-size: 19px; line-height: 1.6;
	color: var(--atc-ink-700, #2E2E2E) !important;
}

/* --- library grid ----------------------------------------------------- */

.atc-dl-library { padding: 16px 24px 88px; }

.atc-dl .atc-dl-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin: 0; padding: 0;
	list-style: none;
}

/* A sticker card: 2px rule and a hard offset shadow, like every other card
   on the rebuilt site. */
.atc-dl .atc-dl-card {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	margin: 0;
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 20px;
	background: var(--atc-white, #FFFFFF);
	box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A);
	overflow: hidden;
}

.atc-dl-card__art {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	padding: 28px 22px;
	background: var(--atc-yellow, #FFE600);
	border-right: 2px solid var(--atc-black, #0A0A0A);
}

.atc-dl-card__art img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 210 / 297; object-fit: cover;
	border: 1px solid var(--atc-black, #0A0A0A); border-radius: 3px;
	box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A);
}

.atc-dl-card__pill {
	position: absolute; top: 12px; left: 12px; z-index: 1;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-yellow, #FFE600);
	font-size: 11px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
}

.atc-dl-card__body { display: flex; flex-direction: column; padding: 28px; }

.atc-dl .atc-dl-card__kind {
	margin: 0 0 10px;
	font-size: 11px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-ink-600, #565656) !important;
}

.atc-dl .atc-dl-card__title {
	margin: 0 0 12px;
	font-family: inherit;
	font-size: 24px; font-weight: 800; text-transform: uppercase;
	line-height: 1.08; letter-spacing: -.01em;
}

.atc-dl .atc-dl-card__title a { color: var(--atc-black, #0A0A0A); text-decoration: none; }

.atc-dl .atc-dl-card__title a:hover,
.atc-dl .atc-dl-card__title a:focus { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.atc-dl .atc-dl-card__summary {
	margin: 0 0 22px;
	font-size: 16px; line-height: 1.55;
	color: var(--atc-ink-700, #2E2E2E) !important;
}

.atc-dl .atc-dl-card__cta { align-self: flex-start; margin-top: auto; padding: 16px 28px; }

/* --- newsletter line ---------------------------------------------------- */

.atc-dl-news { padding: 64px 24px 80px; border-top: 2px solid var(--atc-black, #0A0A0A); }

.atc-dl-news__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: center; }

.atc-dl .atc-dl-news__title {
	margin: 0;
	font-family: inherit;
	font-size: 30px; font-weight: 800; text-transform: uppercase;
	line-height: 1.08; letter-spacing: -.02em;
	color: var(--atc-black, #0A0A0A);
}

/* --- landing: hero ------------------------------------------------------ */

.atc-dl-landing-hero { padding-top: 40px; }

.atc-dl .atc-dl-back { margin: 0 0 18px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.atc-dl .atc-dl-back a { color: var(--atc-black, #0A0A0A); text-decoration: none; }

.atc-dl .atc-dl-back a::before { content: "\2190\00a0"; }

.atc-dl .atc-dl-back a:hover,
.atc-dl .atc-dl-back a:focus { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* The plate's title is the page's h1 here. Same look as the band's h2, but
   the theme styles h1 on its own, so it is restated at two classes. */
.atc-dl .atc-download__title { font-family: inherit; color: var(--atc-white, #FFFFFF); }

/* --- landing: what's inside --------------------------------------------- */

.atc-dl-inside { padding: 80px 24px 40px; }

.atc-dl .atc-dl-inside__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0; padding: 0;
	list-style: none;
	counter-reset: atc-dl-inside;
}

.atc-dl .atc-dl-inside__item {
	margin: 0;
	padding: 28px 28px 28px 76px;
	position: relative;
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 18px;
	counter-increment: atc-dl-inside;
}

.atc-dl .atc-dl-inside__item::before {
	content: counter(atc-dl-inside);
	position: absolute; top: 24px; left: 24px;
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px;
	border-radius: 999px;
	background: var(--atc-yellow, #FFE600);
	border: 2px solid var(--atc-black, #0A0A0A);
	font-size: 15px; font-weight: 800;
}

/* With an icon, the icon tile replaces the number. */
.atc-dl .atc-dl-inside__item--icon { display: flex; gap: 20px; align-items: flex-start; padding: 26px; }

.atc-dl .atc-dl-inside__item--icon::before { content: none; }

.atc-dl-inside__icon {
	flex: 0 0 64px; height: 64px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 14px;
	background: var(--atc-black, #0A0A0A);
}

.atc-dl-inside__icon img { display: block; width: 40px; height: 40px; object-fit: contain; }

.atc-dl .atc-dl-inside__head {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 20px; font-weight: 800; text-transform: uppercase;
	line-height: 1.15;
	color: var(--atc-black, #0A0A0A);
}

.atc-dl .atc-dl-inside__body {
	margin: 0;
	font-size: 16px; line-height: 1.6;
	color: var(--atc-ink-700, #2E2E2E) !important;
}

/* --- landing: quote ------------------------------------------------------ */

.atc-dl-quote { padding: 40px 24px; }

.atc-dl .atc-dl-quote__figure {
	margin: 0;
	padding: 44px 48px;
	border-radius: 20px;
	background: var(--atc-black, #0A0A0A);
}

.atc-dl .atc-dl-quote__text { margin: 0; padding: 0; border: 0; }

.atc-dl .atc-dl-quote__text p {
	margin: 0;
	font-size: 26px; font-weight: 700;
	line-height: 1.35; letter-spacing: -.01em;
	color: var(--atc-white, #FFFFFF) !important;
}

.atc-dl .atc-dl-quote__by {
	margin-top: 20px;
	font-size: 12px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--atc-yellow, #FFE600);
}

/* Photo beside the words. The photo is near-black itself, so it sits on the
   black plate without a frame and reads as part of it. */
.atc-dl .atc-dl-quote__figure--image {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: stretch;
	padding: 0 0 0 48px;
	overflow: hidden;
}

.atc-dl-quote__figure--image .atc-dl-quote__words { padding: 44px 0; align-self: center; }

.atc-dl-quote__image { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }

/* --- landing: sneak peek ------------------------------------------------- */

.atc-dl-peek { padding: 80px 0 48px; background: var(--atc-ink-100, #F2F2F2); border-bottom: 2px solid var(--atc-black, #0A0A0A); }

.atc-dl-peek .atc-dl__inner { padding: 0 24px; }

.atc-dl .atc-dl-peek__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(200px, 1fr);
	gap: 32px;
	max-width: var(--atc-content-max, 1102px);
	margin: 8px auto 0;
	padding: 12px 24px 28px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}

.atc-dl .atc-dl-peek__strip:focus-visible { outline: 3px solid var(--atc-black, #0A0A0A); outline-offset: 4px; }

.atc-dl .atc-dl-peek__page { margin: 0; scroll-snap-align: start; }

.atc-dl .atc-dl-peek__figure { margin: 0; }

/* Paper on a desk: a slight alternating tilt and the site's hard offset
   shadow. The tilt straightens on hover so a curious reader can look. */
.atc-dl-peek__figure img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 210 / 297; object-fit: cover; object-position: top;
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 6px;
	background: var(--atc-white, #FFFFFF);
	box-shadow: 8px 8px 0 0 var(--atc-black, #0A0A0A);
	transform: rotate(-1.5deg);
	transition: transform 200ms var(--atc-ease, cubic-bezier(.22,1,.36,1));
}

.atc-dl-peek__page:nth-child(even) .atc-dl-peek__figure img { transform: rotate(1.5deg); }

.atc-dl-peek__page:hover .atc-dl-peek__figure img { transform: rotate(0) translateY(-4px); }

.atc-dl .atc-dl-peek__caption {
	margin-top: 18px;
	font-size: 13px; font-weight: 800;
	letter-spacing: .08em; text-transform: uppercase;
	line-height: 1.35;
	color: var(--atc-black, #0A0A0A);
}

/* --- landing: closing call to action ------------------------------------- */

.atc-dl-cta { padding: 48px 24px 88px; }

.atc-dl .atc-dl-cta__plate {
	display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
	padding: 36px 40px;
	border: 2px solid var(--atc-black, #0A0A0A);
	border-radius: 20px;
	background: var(--atc-yellow, #FFE600);
	box-shadow: 6px 6px 0 0 var(--atc-black, #0A0A0A);
}

.atc-dl .atc-dl-cta__title {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 30px; font-weight: 800; text-transform: uppercase;
	line-height: 1.05; letter-spacing: -.02em;
	color: var(--atc-black, #0A0A0A);
}

.atc-dl .atc-dl-cta__body { margin: 0; font-size: 17px; line-height: 1.5; color: var(--atc-black, #0A0A0A) !important; }

.atc-dl .atc-dl-cta__btn {
	padding: 18px 34px;
	background: var(--atc-black, #0A0A0A);
	color: var(--atc-white, #FFFFFF);
	font-size: 13px;
}

.atc-dl .atc-dl-cta__btn:hover, .atc-dl .atc-dl-cta__btn:focus { color: var(--atc-yellow, #FFE600); transform: translate(-2px,-2px); }

.atc-dl-foot__inner { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.atc-dl-peek__figure img, .atc-dl-peek__page:nth-child(even) .atc-dl-peek__figure img { transform: none; transition: none; }
}

/* --- responsive --------------------------------------------------------- */

@media only screen and (max-width: 1000px) {
	.atc-dl .atc-dl-grid { grid-template-columns: 1fr; }

	.atc-dl .atc-dl-hero__title { font-size: 44px; }

	.atc-dl-news__inner { grid-template-columns: 1fr; gap: 24px; }
}

@media only screen and (max-width: 767px) {
	.atc-dl-hero { padding: 48px 18px 28px; }

	.atc-dl .atc-dl-hero__title { font-size: 34px; }

	.atc-dl .atc-dl-hero__lede { font-size: 17px; }

		.atc-dl .atc-dl-card { grid-template-columns: 1fr; }

	.atc-dl-card__art { border-right: 0; border-bottom: 2px solid var(--atc-black, #0A0A0A); padding: 32px 0; }

	.atc-dl-card__art img { width: 150px; }

	.atc-dl-card__body { padding: 24px; }

	.atc-dl .atc-dl-inside__list { grid-template-columns: 1fr; }

	.atc-dl .atc-dl-h2 { font-size: 28px; }

	.atc-dl .atc-dl-quote__figure { padding: 30px 26px; }

	.atc-dl .atc-dl-quote__text p { font-size: 20px; }

	.atc-dl .atc-dl-news__title { font-size: 24px; }

	.atc-dl-foot__inner .atc-btn { width: 100%; text-align: center; }

	.atc-dl-library, .atc-dl-inside, .atc-dl-quote, .atc-dl-cta, .atc-dl-news { padding-left: 18px; padding-right: 18px; }

	.atc-dl-peek { padding-top: 56px; }

	.atc-dl-peek .atc-dl__inner { padding: 0 18px; }

	/* Two and a bit pages visible, so it is obvious the strip scrolls. */
	.atc-dl .atc-dl-peek__strip { grid-auto-columns: 58%; gap: 20px; padding: 12px 18px 24px; }

	.atc-dl .atc-dl-quote__figure--image { grid-template-columns: 1fr; padding: 0; gap: 0; }

	.atc-dl-quote__figure--image .atc-dl-quote__words { padding: 30px 26px; }

	.atc-dl-quote__image { min-height: 0; height: 220px; }

	.atc-dl .atc-dl-cta__plate { padding: 28px 24px; }

	.atc-dl .atc-dl-cta__title { font-size: 24px; }

	.atc-dl .atc-dl-cta__btn { width: 100%; text-align: center; }

	.atc-dl .atc-dl-inside__item--icon { padding: 22px; gap: 16px; }

	.atc-dl-inside__icon { flex-basis: 52px; height: 52px; }

	.atc-dl-inside__icon img { width: 32px; height: 32px; }
}