:root {
	--sans-serif: sans-serif, Arial, Helvetica, sans-serif;
	--grey: #999;
	--main: #f35959;
}

@media print {
	@page {
		size: A4;
		size: portrait;
		size: auto;
		margin: 10%;
		margin-left: 1.2 cm;
		margin-right: 2.1 cm;
	}
	
	footer {page-break-after: always;}

	a {page-break-inside: avoid;}
	
	h1, h2, h3, h4, h5 {page-break-before: always;}

	table, figure { page-break-inside: avoid;}	
}

.center { text-align: center; padding: 0 0 2rem; }
.hidden { display: none; }

body { padding: 0; margin: 0; color: var(--black); }
.container-wrapper { background: var(--white); padding: 1rem; }

/* DARK MODE ETC */

	#dark-mode-toggle {
		float: left;
		margin-right: 1rem;
		cursor: pointer;
	}

	#dark-mode-toggle img {
    width: 20px;
    height: 20px;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s ease;
	}

	body.dark #sun-icon { stroke: #fff; }
	body.light #sun-icon { stroke: #000; }	
	body.dark .container-wrapper { background: var(--black); }
	body.dark .container-wrapper .wrapper { color: #fff; }

/* BUTTON */			

	.button {
		background: var(--button);
		color: var(--black)!important;
		font-family: var(--sans-serif);
		padding: .4rem 1.5rem;
		font-weight: 800;
		border-radius: 5px;
		display: inline-block;
		margin: .5rem 0;
		cursor: pointer;
	}

	.button:hover {
		opacity: .8;
		text-decoration: none;
	}

/* SIDE TOC */

	#side-toc {
		position: fixed;
		top: 0;
		left: calc(-251px - 2rem);
		height: calc(100% - 6rem);
		width: 250px;
		padding: 3rem 1rem;
		background-color: #fff;
		border-right: 1px solid var(--grey);
		transition: left 0.3s ease-in-out;
		overflow-y: auto!important;
		z-index: 900;
	}

	body.dark #side-toc {
		background: var(--black);
		border-right: 1px solid var(--black);
	}

	#side-toc.active { left: 0; }

/* TOP BAR */

	.top-bar {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: calc(100% - 2rem);
	  padding: 1rem;
	  background: #fff;
	  z-index: 900;
	}

	body.dark .top-bar {
		background: var(--black);
	}

	.top-bar a {
		text-decoration: none;
		color: #000;
		font-weight: 600;
		margin-right: 1.5rem;
		z-index: 9999;
	}
	
	.top-bar a:hover {
		text-decoration: underline;
	}
	
	body.dark .top-bar a {
		color: #fff;
	}
	
	#toc-button {
		text-transform: uppercase;
		font-weight: 800;
		z-index: 9999;
		cursor: pointer;
		padding: 3px 0;
		border: none;
		background: #fff;
	}	
	
	body.dark #toc-button {
		color: #fff;
		background: var(--black);
	}

	#time-left {
	  font-family: var(--sans-serif);
	  position: fixed;
	  top: 19px;
	  right: 20px;
	  z-index: 9999;
	  color: var(--black);
	  font-size: .85rem;
	}

	body.dark #time-left {
		color: #fff;
	}

	#progress-container {
	  position: fixed;
	  top: 50px;
	  left: 0;
	  width: 100%;
	  height: 5px;
	  background: var(--grey);
	  z-index: 900;
	}

	#progress-bar {
	  height: 100%;
	  background: var(--main);
	  width: 0%;
	}

/* HEADER WITH BOOK INTRO ETC */

	.header { padding: 4rem 0; overflow: auto; max-width: calc(800px - 2rem); margin: 0 auto; }

	body.dark .header p { color: #fff; }

	p.title {
		font-family: var(--sans-serif);
		line-height: 3rem;
	  font-size: 3.5rem;
	  font-weight: 800;
	  letter-spacing: -.15rem;
	  margin: 2.5rem 0 0;
	}

	p.sold { font-style: italic; font-size: 1.5rem; }
	.button.start { padding: 1em 2rem; }
	p.small { line-height: 1rem; font-size: 1rem; }
	img.bookCover { float: right; width: 30%; max-width: 300px; box-shadow: 6px 6px 20px #00000066; margin: 0 2rem;}

	@media screen and (max-width: 621px) {
		.header { padding-top: 3rem; }
		img.bookCover { width: 100%; float: left; margin-bottom: 2rem; }
		p.title { font-size: 2.5rem; line-height: 2rem; margin-top: 1.5rem; }
		p.sold { font-size: 1rem; }
	}

/* WRAPPER STARTS HERE */

	.wrapper { max-width: 600px; margin: 0; margin-left: 2rem; margin-right: 250px; display: block; position: relative; overflow: visible; }
	
	@media screen and (max-width: 821px) {
		.wrapper { margin-right: 1rem; }
	}
	
	@media screen and (max-width: 621px) {
		.wrapper { margin-left: 1rem; margin-right: 1rem; }
		.cover { width: 100% !important; max-width: 100% !important; }
	}

/* FEATURED IN */

	p.fake-header  {
		font-family: var(--sans-serif);
		font-size: 1rem;
		text-align: center;
		text-transform: uppercase;
		margin: 0 2rem 1rem;
		font-weight: 100;
	}

	.featured {
	  display: flex;
	  flex-wrap: wrap; 
	  justify-content: space-between; 
	  width: 100%;
	  padding: 0; 
	}

	.featured li {
	  width: 33.33%; 
	  list-style: none;
	  margin-bottom: 1rem;
	}

	.featured img {
	  max-width: 100%; 
	  height: auto; 
	  opacity: .5;
	}

/* TOC IN BOOK */

	nav ul { padding: 0; }
	nav ul li { line-height: 1.5rem; list-style-type: none; text-indent: 0; padding-left: 0; padding: 0; }
	nav ul li a,
	nav#toc ul li a { 
		color: #000 !important; 
		font-size: 1rem; 
		text-decoration: none;
	}
	nav ul li a:hover {
		text-decoration: underline;
	}

	.toc-h1:first-of-type { margin-top: 0; }
	.toc-h1 { margin-top: 1rem; }
	.toc-h1 a { 
		font-family: var(--sans-serif); 
		font-size: 0.9rem; 
		font-weight: 600; 
		color: #000 !important; 
	}
	
	body.dark nav ul li a,
	body.dark nav#toc ul li a,
	body.dark .toc-h1 a {
		color: #fff !important;
	}

/* ACTUAL BOOK */

	.cover { width: 50%; margin: 4rem auto 0; }

	.book { position: relative; overflow: visible; }
	section { padding: 2rem 0; }
	p.part-part { font-family: var(--sans-serif); text-transform: uppercase; text-align: center; text-indent: 0; padding-bottom: .5rem;}
	img.icon { display: block; margin: 0 auto; }
	p.alert { padding: 2rem; margin: 2rem 0 5rem; border: 1px solid #000; background: #fefdce; }

/* TEXT */

	h1 { font-family: sans-serif; font-size: 2rem; text-align: center; padding: 0; margin: 0; }
	h2 { font-family: var(--sans-serif); font-size: 1.4rem; margin: 0 2rem 2rem 0; font-weight: 800; }
	h3 { font-family: 'Cardo', serif; font-size: 1.3rem; margin: 2rem 0 0; text-align: left; font-weight: 800; }
	h4 { font-family: var(--sans-serif); font-size: 1.25rem; margin: 2rem 0 0; }
	h5 { font-family: 'Cardo', serif; font-size: 1.2rem; font-weight: bold; margin-top: 1.5rem; margin-bottom: 0; }

	p,
	ul li,
	ol li,
	label { font-family: 'Cardo', serif; font-size: 1.2rem; }

	p { margin: 0; margin-bottom: 1rem; }
	p:first-of-type { text-indent: 0; }
	section > p:first-of-type { text-indent: 0; }
	blockquote + p,
	h2 + p,
	h3 + p,
	h4 + p,
	h5 + p,
	figure + p,
	ul + p,
	ol + p { text-indent: 0; }

	h1 + p { padding: 0 15%; text-align: center; }

/*	section > h2 + p:first-of-type::first-letter {
		font-family: var(--sans-serif);
	    float: left;
	    font-size: 3.5rem;
	    line-height: 0.65;
	    font-weight: 800;
	    margin: 1rem 0.3rem 0.2rem 0;
	}*/

	a { text-decoration: none; }
	a, a s, a:visited { color: var(--main); }
	a:hover { text-decoration: underline; }	

	body.dark a,
	body.dark a:visited,
	body.dark a:hover {
		color: var(--main);
	}

/* SECTION */

section:has(#toc) {
	display: none;
}

section:has(h1) { 
	border-top: 1px solid grey;
	border-bottom: 1px solid grey;
	margin: 5rem 0;
	padding: 5rem 0;
}

	section.box {
		padding: 1rem 2rem;
		margin: 2rem 0;
		background: var(--lightGreen);
		border: 1px solid var(--green);
	}

	body.dark section.box { background: #000; border: 1px solid #fff; }

	section.box h3 {
		font-family: var(--sans-serif);
		padding-bottom: 1rem;
		font-size: 1rem;
		text-align: left;
		margin-top: 1rem;
	}

	section.box p,
	section.box ul li,
	section.box ol li {
		font-family: var(--sans-serif);
		font-size: 1rem;
		line-height: 2rem;
	}	

/* QUOTE & PRAISE */

	blockquote { ;background: #fff; margin: 0; margin: 2rem 0 3rem; }
	body.dark blockquote { background: var(--black); }
	blockquote p { font-style: italic; margin: 0 0 .5rem; text-indent: 0; }
	blockquote cite { font-family: var(--sans-serif); font-weight: 600; font-style: initial; }
	.praise-part blockquote { padding: 0; background: none; }
	.praise-part blockquote p { font-style: inherit; font-size: 1.1rem; line-height: 1.5rem; }
	.praise-part blockquote p::before { content: "\201C"; }
	.praise-part blockquote p::after { content: "\201D"; }
	.praise-part blockquote cite { text-transform: uppercase; font-weight: 200; font-size: .8rem; }
	.praise-part blockquote cite::before { content: "\2014 "; }

/* FIGURE */

	figure { margin: 0; padding: 0 0 1rem 0; }
	figure img { width: calc(100% - 2px); }
	figure figcaption {
		font-family: var(--sans-serif);
		font-size: .9rem;
		font-style: italic;
		padding: 1rem .5rem .5rem;
		text-align: center;
		color: var(--black);
	}

	body.dark figure figcaption {
		color: #fff;
	}

/* TABLE */

	.book table { 
		border-collapse: separate; 
		border-spacing: 0; 
		width: 100%; 
		margin-top: 2rem !important; 
		margin-bottom: 2rem !important; 
		border: 1px solid #000; 
	}
	.book table,
	.book table p { font-family: var(--sans-serif);	font-size: .8rem; line-height: 1.2rem; margin: 0; }
	.book thead { font-weight: 800; }
	.book td, 
	.book th { 
		padding: .2rem .4rem; 
		border-right: 1px solid #000; 
		border-bottom: 1px solid #000; 
		vertical-align: top; 
		text-align: left; 
	}
	
	/* Add left and top borders to first column and first row */
	.book td:first-child,
	.book th:first-child {
		border-left: 1px solid #000;
	}
	.book thead th,
	.book tbody tr:first-child td {
		border-top: 1px solid #000;
	}

	body.dark .book table {
		border: 1px solid #fff;
	}

	body.dark .book td,
	body.dark .book th {
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	
	body.dark .book td:first-child,
	body.dark .book th:first-child {
		border-left: 1px solid #fff;
	}
	body.dark .book thead th,
	body.dark .book tbody tr:first-child td {
		border-top: 1px solid #fff;
	}

/* FORM */

.form-container {
	padding: 4rem 1rem;
	height: calc(100% - 2rem);
	width: calc(100% - 2rem);
	max-width: calc(600px + 2rem);
	margin: 0 auto;
}

input[type="email"],
input[type="submit"],
textarea {
	width: calc(100% - 1rem - .4rem);
	margin: .2rem 0;
	padding: .5rem;
	font-size: 1.2rem;
	font-family: 'Inter', Arial, Helvetica, sans-serif;
} 

input[type="submit"] { width: calc(100% - 2px); }
textarea { height: 150px; }

/* FEEDBACK MODAL OVERLAY THINGY */

	.modal {
	  display: none;
	  position: fixed;
	  z-index: 1;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  overflow: auto;
	}

	.modal-content {
	  background-color: #fefefe;
	  margin: 0 auto;
	  padding: .4rem;
	  border: 1px solid var(--grey);
	  border-radius: 1rem;
	  display: inline-block;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.close {
	  color: #aaa;
	  float: right;
	  font-size: 28px;
	  font-weight: bold;
	  cursor: pointer;
	}

	.feedback-option {
	  margin-right: 2px;
	  padding: .4rem .8rem;
	  border: none;
	  background: var(--grey);
	  border-radius: .5rem;
	  font-weight: 800;
	  color: var(--black);
	  cursor: pointer;
	}

	.feedback-option:hover {
		opacity: 80%;
	}

	.love { background: #efdcff; }
	.error { background: #fccccc; }
	.confusing { background: #cbffc2; }
	.helpful { background: #aeffe9; }
	.weird { background: #fffc96; }
	.other { background: #f1f1f1; }
	.copy { background: #f1f1f1; }
	.tweet { background: #1da1f2; color: #fff; }

	#custom-feedback {
	  width: 100%;
	  height: 100px;
	  margin-bottom: 10px;
	}

	#submit-feedback {
	  display: block;
	  margin-left: auto;
	}

/* IMG CLICK OVERLAY */

	.book img { cursor: pointer; }

	.overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background-color: rgba(0, 0, 0, 0.8);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    z-index: 9999;
	}

	.overlay img {
	    max-width: 90%;
	    max-height: 90%;
	}

/* FEEDBACK BUTTON */

	.feedback-link {
			font-family: var(--sans-serif);
			color: var(--black)!important;
	    position: fixed;
	    right: 0;
	    bottom: 0;
	    border: 1px solid #999;
	    padding: .5rem 1rem;
	    font-size: .8rem;
	    background-color: #f1f1f1;
	    text-decoration: none;
	    color: black;
	    font-weight: bold;
	    white-space: nowrap;
	}

	.feedback-link:hover { text-decoration: none; }

/* BOTTOM BAR */

	.bottom-bar {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: var(--grey);
		box-sizing: border-box;
		z-index: 1000;
	}

	body.dark .bottom-bar { background: var(--black); }
	body.dark .bottom-bar p { color: #fff; }

	p.initial-content {
		padding: 0 1rem;
	}

	.bottom-wrapper {
		margin: 0 auto;
		max-width: calc(600px + 2rem);
	}

	.bottom-wrapper .left {
		padding: 0 2rem;
		max-width: calc(400px - 4rem);
		float: left;
		display: inline-block;
	}

	.bottom-wrapper .left .offer-book {
		max-width: 200px;
	}

	.bottom-wrapper .middle {
		padding: 0 2rem;
		max-width: calc(800px - 4rem);
		float: left;
		display: inline-block;
	}

	.bottom-wrapper .middle h2 {
		font-family: 'Crimson Pro', 'Cardo', serif;
		font-size: 2.5rem;
		margin: 3rem 0 .5rem;
		text-align: left;
		text-transform: none;
		color: #000;
	}

	.bottom-wrapper .middle h3 {
		font-family: 'Cardo', serif;
		font-size: 1.2rem;
		line-height: 2rem;
		font-weight: 100;
		margin: 0;
	}

	.bottom-wrapper .right {
		padding: 0 2rem;
		max-width: calc(400px - 4rem);
		float: left;
		display: inline-block;
	}

	.bottom-wrapper .right .button {
		background: var(--green);
		padding: 1rem 2rem;
		color: #fff!important;
		margin: 3.5rem 0 0;
		cursor: pointer;
	}

	.bottom-wrapper .right p {
		font-weight: 100;
		font-size: .8rem;
	}

	@media screen and (max-width: 821px) {
		p.current-chapter { display: none; }
	  .bottom-wrapper .left { display: none; }
		.bottom-wrapper .middle h2 { font-size: 2rem; }
		.bottom-wrapper .right { margin-bottom: 2rem; }
		.bottom-wrapper .right .button { margin: 2rem 0 0; }
	}

	.bottom-bar p {
		font-family: 'Inter', Arial, Helvetica, sans-serif;
		font-size: .9rem;
		font-weight: 800;
		line-height: 1.5rem;
	}

	#toggle-div {
		display: none;
		padding: 0 1rem;
	}

	.toggle-button {
		position: absolute;
		right: 1rem;
		top: 1rem;
		cursor: pointer;
	}

.footnote-ref {
	vertical-align: middle;
	padding: 0 0 0 .2rem;
}

/* Margin notes for desktop */
.footnote-reference {
	position: relative;
	display: inline;
}

.footnote-margin-note {
	position: absolute;
	left: 620px; /* 600px wrapper + 20px spacing */
	width: 200px;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #666;
	display: none;
	z-index: 10;
	white-space: normal;
	pointer-events: auto;
	background: #fff;
	padding: 0.25rem 0;
	margin: 0;
}

/* Show margin notes on desktop */
@media screen and (min-width: 900px) {
	.footnote-margin-note {
		display: block !important;
	}
	
	.footnote-list-bottom {
		display: none !important;
	}
}

/* Hide margin notes on mobile, show bottom list */
@media screen and (max-width: 899px) {
	.footnote-margin-note {
		display: none !important;
	}
	
	.footnote-list-bottom {
		display: block !important;
	}
}

#footnote-list {
	padding: 0;
}

#footnote-list li {
	list-style-type: none;
	word-wrap: break-word;
}

#footnote-list li a {
	padding-right: .5rem;
}

.footnote-margin-note a {
	color: var(--main);
	text-decoration: none;
	font-weight: 600;
}

.footnote-margin-note a:hover {
	text-decoration: underline;
}

.paywall {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  z-index: 9999; /* Ensure it's on top of everything else */
  padding-top: 2rem;
  overflow: auto;
  flex-direction: column;
  justify-content: center;
}

	.paywallContents {
		background: #fff;
		max-width: calc(500px - 2rem);
		padding: 2rem 1rem;
		margin: 0 auto;
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
	}

		.paywallContents .bookCover {
			margin: 0;
			float: none;
			width: 200px;
		}

		.paywallContents h1 {
			font-family: var(--sans-serif);
			font-size: 1.5rem;
			margin-bottom: 0;
		}

		.paywallContents h1 + p {
			padding: 0;
			line-height: 1.5rem;
		}

		.paywallContents ul {
			padding: 0 0 1rem 0;
			margin: 0;
		}

		.paywallContents ul li {
			list-style-type: none;
			line-height: 1.5rem;
		}

		.paywallContents .button {
			padding: 1rem 7rem;
		}

		.paywallContents .finePrint {
			font-size: .9rem;
			margin-top: 0;
		}

/* Floating download button */
.download-float-container {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 1000;
}

.download-float-button {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease;
	padding: 0;
}

.download-float-button:hover {
	background: #fff;
	color: #000;
	border: 1px solid #000;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
}

.download-float-button:active {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.download-float-button svg {
	width: 24px;
	height: 24px;
}

.download-float-menu {
	position: absolute;
	bottom: 70px;
	right: 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	min-width: 180px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	overflow: hidden;
}

.download-float-menu.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.download-float-option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	color: #000;
	text-decoration: none;
	transition: all 0.2s ease;
	border-bottom: 1px solid #f0f0f0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	white-space: nowrap;
}

.download-float-option:last-child {
	border-bottom: none;
}

.download-float-option:hover {
	background: #000;
	color: #fff;
	text-decoration: none;
}

.download-float-option svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: #000;
	transition: color 0.2s ease;
}

.download-float-option:hover svg {
	color: #fff;
}

.download-float-option span {
	font-size: 0.95rem;
	font-weight: 500;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 768px) {
	.download-float-container {
		bottom: 1.5rem;
		right: 1.5rem;
	}
	
	.download-float-button {
		width: 52px;
		height: 52px;
	}
	
	.download-float-menu {
		bottom: 65px;
		min-width: 160px;
	}
}