/* ================================================================
   LEARN ARTICLE CONTENT
   /css/article-content.css
   ================================================================ */
   
   
   /* ================================================================
	  PROTECT ARTICLE ELEMENTS FROM GLOBAL TYPOGRAPHY RULES
	  ================================================================ */
   
   .articleContent .articleSection,
   .articleContent .articleSectionHeader,
   .articleContent .articleSectionImage,
   .articleContent .articleSectionText,
   .articleContent .articleSectionList,
   .articleContent .articleSectionQuote {
	   box-sizing: border-box;
   }
   
   .articleContent .articleSectionHeader h2,
   .articleContent .articleSectionHeader h3,
   .articleContent .articleSectionHeader p,
   .articleContent .articleSectionText p,
   .articleContent .articleSectionList,
   .articleContent .articleSectionQuote,
   .articleContent .articleSectionQuote p,
   .articleContent .articleSectionVideo,
   .articleContent .articleSectionLink {
	   width: auto;
	   max-width: none;
	   margin-inline: 0;
   }
   
   .articleContent .articleSectionHeader h2,
   .articleContent .articleSectionHeader h3,
   .articleContent .articleSectionHeader p {
	   text-align: left;
   }
   
   .articleContent .articleSectionTitle {
	   width: auto !important;
	   max-width: none !important;
	   margin: 0 !important;
	   text-align: left !important;
   }
   
   .articleContent .articleSectionSubtitle {
	   width: auto !important;
	   max-width: none !important;
	   margin: 10px 0 0 !important;
	   text-align: left !important;
   }
   
   .articleContent .articleSectionText {
	   width: 100%;
   }
   
   .articleContent .articleSectionText p {
	   width: 100% !important;
	   max-width: none !important;
	   margin: 0 0 1.15em !important;
	   text-align: left;
   }
   
   .articleContent .articleSectionText p:last-child {
	   margin-bottom: 0 !important;
   }
   
.articleContent .articleSectionImage {
	   width: 100%;
	   max-width: none;
	   margin: 0;
   }
   
   .articleContent .articleSectionImage img {
	   display: block;
	   width: 100%;
	   height: auto;
	   max-width: none;
	   margin: 0;
	   aspect-ratio: 16 / 9;
	   object-fit: cover;
   }
   

.articleContent {
	--article-text: #352f39;
	--article-muted: #716a73;
	--article-gold: #b98322;
	--article-border: rgba(53, 47, 57, 0.14);
	--article-panel: #f5f3f4;
	--article-dark: #29252c;

	background: #fff;
	color: var(--article-text);
	padding: clamp(48px, 7vw, 110px) 0;
}

.articleContent > .contentContainer {
	width: min(1180px, calc(100% - 40px));
	max-width: 1180px;
	margin-inline: auto;
	padding: 0;
}


/* ================================================================
   INDIVIDUAL SECTIONS
   ================================================================ */

.articleContent .articleSection {
	display: grid;

	/* Image 30% | Text 70% */
	grid-template-columns:
		minmax(240px, 3fr)
		minmax(0, 7fr);

	column-gap: clamp(32px, 5vw, 70px);
	row-gap: clamp(28px, 3vw, 44px);

	align-items: center;
	padding: clamp(44px, 7vw, 96px) 0;
	border-bottom: 1px solid var(--article-border);
}

.articleContent .articleSection:first-child {
	padding-top: 0;
}

.articleContent .articleSection:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* ================================================================
   SECTION HEADINGS
   ================================================================ */

.articleContent .articleSection > .articleSectionHeader {
	   grid-column: 1 / -1;
	   grid-row: 1;
   
	   display: grid !important;
	   grid-template-columns: minmax(0, 1fr);
	   grid-template-areas:
		   "number"
		   "title"
		   "subtitle";
   
	   row-gap: 8px;
	   align-items: start;
	   justify-items: start;
   
	   width: 100% !important;
	   max-width: none !important;
	   margin: 0 !important;
	   padding: 0 !important;
	   text-align: left !important;
   }
.articleContent .articleSectionNumber {
	grid-area: number;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 72px !important;
	min-width: 72px;
	max-width: 72px !important;
	height: 38px;

	margin: 0 !important;
	margin-bottom:1rem!important;
	padding: 0 10px !important;

	border: 1px solid var(--pink);
	border-radius: 999px;

	color: var(--white);
	background: var(--pink);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	text-align: center !important;
}

.articleContent .articleSectionNumber::before {
	content: "Song\00a0";
}

.articleContent .articleSectionTitle {
	grid-area: title;

	display: block;
	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--article-dark);
	font-size: clamp(2rem, 4.2vw, 3.8rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	text-align: left !important;
}

.articleContent .articleSectionSubtitle {
	grid-area: subtitle;

	display: block;
	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--article-muted);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 600;
	line-height: 1.4;
	text-align: left !important;
}

/* ================================================================
   IMAGES
   ================================================================ */

.articleSectionImage {
	grid-column: 1;
	grid-row: 2;
	
	overflow: hidden;
	display:block;
	background: var(--article-panel);
	border-radius: 16px;
	box-shadow:
		0 18px 45px rgba(27, 22, 30, 0.12);
}

.articleContent .articleSectionImage img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	margin: 0;

	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

.articleSectionImage figcaption {
	padding: 12px 16px;

	color: var(--article-muted);
	font-size: 0.85rem;
	line-height: 1.45;
}


/* ================================================================
   ARTICLE TEXT
   ================================================================ */

.articleSectionText {
	grid-column: 1 / -1;
	grid-row: 2;
	max-width: 780px;
	margin: 0 auto;
}

.articleSectionImage + .articleSectionText {
	grid-column: 2;
	max-width: none;
	margin: 0;
}

.articleSectionText p {
	margin: 0 0 1.15em;
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.75;
}

.articleSectionText p:last-child {
	margin-bottom: 0;
}

.articleSectionText a,
.articleSectionList a {
	color: inherit;
	font-weight: 700;
	text-decoration-color: var(--pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.articleSectionText a:hover,
.articleSectionList a:hover {
	color: var(--pink);
}





/* ================================================================
   LISTS
   ================================================================ */

.articleSectionList {
	grid-column: 1 / -1;
	margin: 5px auto 0;
	padding: 0;
	width: min(100%, 780px);
	list-style: none;
}

.articleSectionList li {
	position: relative;
	margin: 0;
	padding: 12px 0 12px 30px;

	border-bottom: 1px solid var(--article-border);
	font-size: 1.05rem;
	line-height: 1.6;
}

.articleSectionList li:last-child {
	border-bottom: 0;
}

.articleSectionList li::before {
	content: "";
	position: absolute;
	top: 1.25em;
	left: 4px;

	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--pink);
}


/* ================================================================
   QUOTATIONS
   ================================================================ */

.articleSectionQuote {
	grid-column: 1 / -1;
	width: min(100%, 820px);
	margin: 12px auto 0;
	padding: clamp(24px, 4vw, 40px);

	background: var(--article-panel);
	border-left: 4px solid var(--pink);
	border-radius: 0 14px 14px 0;
}

.articleSectionQuote p {
	margin: 0;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-style: italic;
	line-height: 1.6;
}

.articleSectionQuote footer {
	margin-top: 14px;
	color: var(--article-muted);
	font-size: 0.95rem;
}

.articleSectionQuote cite {
	font-style: normal;
	font-weight: 700;
}


/* ================================================================
   VIDEO AND SUPPORTING LINKS
   ================================================================ */

.articleContent .articleSectionVideo,
.articleContent .articleSectionLink {
	grid-column: 1 / -1;
	width: min(100%, 780px);
	max-width: 780px;
	margin: 5px auto 0;
	text-align: left;
}

/* When an image is present, align the button with the text column. */
.articleContent
.articleSectionImage
+ .articleSectionText
~ .articleSectionVideo,
.articleContent
.articleSectionImage
+ .articleSectionText
~ .articleSectionLink {
	grid-column: 2;
	width: 100%;
	max-width: none;
	margin: 5px 0 0;
	text-align: left;
}

.articleSectionVideo a,
.articleSectionLink a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 48px;
	padding: 12px 24px;

	background: var(--green);
	border: 2px solid var(--green);
	border-radius: 999px;

	color: #fff;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;

	transition:
		background-color 160ms ease,
		border-color 160ms ease,
		color 160ms ease,
		transform 160ms ease;
}

.articleSectionVideo a:hover,
.articleSectionLink a:hover {
	background: var(--pink);
	border-color: var(--pink);
	color: #fff;
	transform: translateY(-2px);
}

.articleSectionVideo a:focus-visible,
.articleSectionLink a:focus-visible {
	outline: 3px solid var(--pink);
	outline-offset: 4px;
}


/* ================================================================
   TABLET AND MOBILE
   ================================================================ */

@media (max-width: 800px) {
   
	   .articleContent {
		   padding: 48px 0;
	   }
   
	   .articleContent > .contentContainer {
		   width: min(calc(100% - 24px), 680px);
	   }
   
	   .articleContent .articleSection {
		   display: block;
		   padding: 48px 0;
	   }
   
	   .articleContent .articleSection:first-child {
		   padding-top: 0;
	   }
   
	 .articleContent .articleSection > .articleSectionHeader {
		 display: grid !important;
		 grid-template-columns: minmax(0, 1fr);
		 grid-template-areas:
			 "number"
			 "title"
			 "subtitle";
	 
		 row-gap: 7px;
		 margin-bottom: 24px !important;
	 }
   
	   .articleContent .articleSectionNumber {
		   width: 72px !important;
		   min-width: 72px;
		   max-width: 72px !important;
		   height: 38px;
		   padding: 0 8px !important;
	   }
   
	   .articleContent .articleSectionTitle {
		   font-size: clamp(1.9rem, 7.5vw, 2.8rem);
		   line-height: 1.05;
	   }
   
	   .articleContent .articleSectionSubtitle {
		   font-size: 1rem;
	   }
   
	   .articleContent .articleSectionImage {
		   margin: 0 0 22px !important;
		   border-radius: 12px;
	   }
   
	   .articleContent .articleSectionText {
		   width: 100%;
		   max-width: none;
		   margin: 0;
	   }
   
	   .articleContent .articleSectionText p {
		   font-size: 1.05rem;
		   line-height: 1.68;
	   }
   
	   .articleContent .articleSectionList {
		   width: 100%;
		   margin-top: 22px;
	   }
   
	   .articleContent .articleSectionQuote {
		   width: 100%;
		   margin-top: 26px;
	   }
   
	   .articleContent .articleSectionVideo,
	   .articleContent .articleSectionLink,
	   .articleContent
	   .articleSectionImage
	   + .articleSectionText
	   ~ .articleSectionVideo,
	   .articleContent
	   .articleSectionImage
	   + .articleSectionText
	   ~ .articleSectionLink {
		   width: 100%;
		   max-width: none;
		   margin: 26px 0 0;
		   text-align: left;
	   }

	   
		   .articleContent .articleSectionImage img {
			   aspect-ratio: 16 / 9;
			   object-position: center;
		   }
	   
	   }
   


/* ================================================================
   REDUCED MOTION
   ================================================================ */

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

	.articleSectionVideo a,
	.articleSectionLink a {
		transition: none;
	}
}