/*
	Skin layer for NOT YET, on top of Big Picture's main.css.
	New components the base template doesn't define: hero eyebrow/polaroid/cycle-line,
	chapter grid, quote grid, tracklist, get-the-book layout, pull quotes, disabled buttons.
*/

/* Inline text links inside dark boxes (bio, etc.) — make them read as links */

	.box.style2 p a {
		color: #d2b875;
		text-decoration: underline;
		text-decoration-color: rgba(210,184,117,0.4);
		text-underline-offset: 0.15em;
	}

	.box.style2 p a:hover {
		text-decoration-color: currentColor;
	}

/* Hero */

	#intro .eyebrow {
		font-family: Georgia, serif;
		font-style: italic;
		font-size: 0.85em;
		letter-spacing: 0.02em;
		color: #b9ac8c;
		margin-bottom: 1.5em;
	}

	#intro .polaroid {
		display: inline-block;
		margin: 0 0 1.75em 0;
		transform: rotate(-3deg);
	}

	#intro .polaroid img {
		display: block;
		width: 15em;
		max-width: 62vw;
		height: auto;
		box-shadow: 0 1.5em 3em rgba(0,0,0,0.55);
	}

	.cycle-line {
		font-family: Georgia, serif;
		font-style: italic;
		font-size: 1.3em;
		color: #e7e1d3;
	}

	.cycle-line #cycleWord {
		font-family: 'Kalam', 'Segoe Print', cursive;
		font-style: normal;
		color: #d2b875;
		border-bottom: 2px solid #94702f;
		padding: 0 0.15em 0.05em 0.15em;
		transition: opacity 0.2s ease;
		display: inline-block;
		min-width: 4em;
	}

	#intro footer {
		margin-top: 2.25em;
	}

	#intro .actions {
		display: flex;
		gap: 1em;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	#intro .stamp {
		margin-top: 2em;
		font-size: 0.72em;
		letter-spacing: 0.03em;
		color: #8c8163;
		border: 1px dashed rgba(238,234,224,0.25);
		display: inline-block;
		padding: 0.6em 1em;
		border-radius: 3px;
	}

/* Letter */

	#letter .content {
		width: 42em;
	}

	#letter h2 {
		font-size: 2em;
		transform: none;
	}

	.letter {
		text-align: left;
		margin-top: 1.5em;
	}

	.letter p {
		font-family: Georgia, serif;
		color: #e7e1d3;
	}

	.letter p:first-child {
		font-style: italic;
		color: #d2b875;
	}

/* Pull quote inside the "One" / "Two" boxes */

	.box.style2 blockquote {
		border-left: solid 3px #94702f;
		padding: 0.2em 0 0.2em 1.1em;
		font-family: Georgia, serif;
		font-style: italic;
		font-size: 1.2em;
		margin-top: 1.5em;
	}

	.box.style2 blockquote span {
		display: block;
		font-style: normal;
		font-size: 0.6em;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #9a8f72;
		margin-top: 0.6em;
	}

/* Chapters grid */

	.chapters {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		text-align: left;
		border-top: 1px solid rgba(238,234,224,0.12);
		margin-top: 1em;
	}

	.chapters article {
		padding: 1.5em 1.75em 1.5em 0;
		border-bottom: 1px solid rgba(238,234,224,0.12);
		display: grid;
		grid-template-columns: 2.4em 1fr;
		gap: 1em;
	}

	.chapters article:nth-child(odd) {
		border-right: 1px solid rgba(238,234,224,0.12);
		padding-right: 1.75em;
	}

	.chapters article:nth-child(even) {
		padding-left: 1.75em;
	}

	.chapters .num {
		font-family: 'Bodoni Moda', Georgia, serif;
		color: #d2b875;
		font-size: 1em;
		padding-top: 0.1em;
	}

	.chapters h3 {
		font-family: Georgia, serif;
		text-transform: none;
		font-weight: 700;
		font-size: 1.05em;
		letter-spacing: 0;
		transform: none;
		color: #eeeae0;
	}

	.chapters p {
		margin-top: 0.4em;
		font-size: 0.82em;
		color: #a89e85;
	}

/* Quotes grid */

	.quotes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2.5em 3em;
		text-align: left;
		margin-top: 1em;
	}

	.quotes blockquote {
		border-left: solid 3px #4c7a5e;
		padding: 0 0 0 1.1em;
		font-family: Georgia, serif;
		font-style: italic;
		font-size: 1.15em;
		margin: 0;
	}

	.quotes blockquote span {
		display: block;
		font-style: normal;
		font-size: 0.6em;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		color: #9a8f72;
		margin-top: 0.6em;
	}

/* Tracklist */

	.playlist-link {
		margin-top: 1.5em;
	}

	.tracklist {
		margin: 1.5em 0 0 0;
		text-align: left;
		max-width: 34em;
		margin-left: auto;
		margin-right: auto;
	}

	.tracklist li {
		display: grid;
		grid-template-columns: 1.6em 1fr;
		gap: 1em;
		align-items: baseline;
		padding: 0.85em 0;
		border-bottom: 1px solid rgba(238,234,224,0.12);
		margin: 0;
	}

	.tracklist li:first-child {
		border-top: 1px solid rgba(238,234,224,0.12);
	}

	.tracklist .n {
		font-family: 'Bodoni Moda', Georgia, serif;
		color: #8c8163;
		font-size: 0.85em;
		align-self: start;
		padding-top: 0.15em;
	}

	.tracklist li p {
		margin: 0;
	}

	.tracklist .artist {
		display: block;
		color: #a89e85;
		font-size: 0.85em;
		margin-top: 0.2em;
	}

	.tracklist .also {
		margin-top: 0.3em;
		font-family: Georgia, serif;
		font-size: 0.8em;
		color: #8c8163;
	}

/* Get the Book */

	.get-grid {
		display: grid;
		grid-template-columns: 0.85fr 1.15fr;
		gap: 3.5em;
		align-items: center;
		text-align: left;
	}

	.get-cover img {
		width: 100%;
		max-width: 20em;
		display: block;
		margin: 0 auto;
		box-shadow: 0 1.5em 3.5em rgba(0,0,0,0.5);
		transform: rotate(-1.5deg);
	}

	.get-text header {
		text-align: left;
	}

	.retailers {
		display: flex;
		gap: 1em;
		flex-wrap: wrap;
		margin: 1.75em 0 1.25em 0;
	}

	.button.disabled {
		background-color: transparent;
		border: 2px dashed rgba(238,234,224,0.25);
		color: #8c8163;
		cursor: default;
		font-size: 0.85em;
	}

	.get-text .or {
		font-size: 0.75em;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #8c8163;
		margin: 0 0 1.25em 0;
	}

	@media screen and (max-width: 980px) {
		.get-grid {
			grid-template-columns: 1fr;
			text-align: center;
		}

		.get-text header, .get-text .or {
			text-align: center;
		}

		.retailers {
			justify-content: center;
		}
	}

	@media screen and (max-width: 736px) {
		.chapters {
			grid-template-columns: 1fr;
		}

		.chapters article:nth-child(odd) {
			border-right: none;
			padding-right: 0;
		}

		.chapters article:nth-child(even) {
			padding-left: 0;
		}

		.quotes {
			grid-template-columns: 1fr;
		}
	}