:root {
  --color-white: #FFFFFF;
  --color-off-white: #FFFCF5;
  --color-black: #231F20;

  --spacing-s: 10px;
  --spacing-m: 20px;
  --spacing-l: 40px;
  --spacing-xl: 80px;
  --spacing-xxl: 120px;
}

@media only screen and (min-width: 1281px) {
  :root {
    --spacing-s: 10px;
    --spacing-m: 20px;
    --spacing-l: 60px;
    --spacing-xl: 120px;
    --spacing-xxl: 240px;
  }
}

/*
========================================

BASE RESET

========================================
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}

blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, iframe, video {
  height: auto;
  vertical-align: bottom;
  max-width: 100%;
}

iframe.airtable-embed {
  min-height: 70vh;
}

input, textarea, select {
  font: inherit;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/*
========================================

BACK TO BUSINESS

========================================
*/

html {
  font-size: 16px;
}

@media only screen and (min-width: 960px) {
  html {
    font-size: 18px;
  }
}

@media only screen and (min-width: 1080px) {
  html {
    font-size: 20px;
  }
}

body {
  background: var(--color-off-white);
  display: flex;
  flex-direction: column;
  align-items: center;

  color: var(--color-black);
  font-family: "Warbler Text";
  line-height: 1.5;
}

::selection {
    background: rgba(255, 239, 68, 0.5);
}

/*
========================================

DESKTOP VS. MOBILE

========================================
*/

@media only screen and (max-width: 768px) {
  .desktop {
    display: none !important;
  }
}


@media only screen and (min-width: 768px) {
  .mobile {
    display: none !important;
  }
}

/*
========================================

Main

========================================
*/

#warbler {
  display: grid;
  width: 100%;
}

#warbler section {
  overflow: hidden;
  max-width: 100vw;
  width: 100%;
}

/*
========================================

Font Fit

========================================
*/

.fit {
  display: inline-flex;
  margin: 0;
  opacity: 0;
  white-space: nowrap;

  transition: opacity 0.2s ease-in-out;
}

.fitted {
  opacity: 1;
}

/*
========================================

Editable Content

========================================
*/

.editable {
  overflow-wrap: break-word;
  transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
}

.editable:hover {
  color: olive;
}

.editable:focus {
  outline: none;
}

/*
========================================

Typograhy

========================================
*/

p:not(:last-child) {
  margin-bottom: 1em;
}

a {
  color: olive;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  transition: 0.2s all ease-in-out;
}

a:hover {
  color: rgb(80,80,0);
}

.Warbler-Text {
  font-family: 'Warbler Text';
}

.Warbler-Banner {
  font-family: 'Warbler Banner';
}

.Warbler-Display {
  font-family: 'Warbler Display';
}

.Warbler-Deck {
  font-family: 'Warbler Deck';
}

.Warbler-Variable {
  font-family: 'Warbler Variable';
}

.italic {
  font-style: italic;
}

.w-400 {
  font-weight: 400;
}

.w-600 {
  font-weight: 600;
}

.w-700,
.bold {
  font-weight: 700;
}

.w-800 {
  font-weight: 800;
}

.upper {
  text-transform: uppercase;
}

.smcp {
  font-variant-caps: small-caps;
  font-feature-settings: "calt" 0;
}

.c2sc {
  font-variant-caps: all-small-caps;
  font-feature-settings: "calt" 0;
}

.track-0 {
  letter-spacing: 0;
}

.track-10 {
  letter-spacing: 0.1em;
  font-feature-settings: "calt" 0;
}

.track-20 {
  letter-spacing: 0.2em;
  font-feature-settings: "calt" 0;
}

.smcp em,
.c2sc em {
  font-variant-caps: normal;
}

/* Other fonts :) */

.clavichord-s {
  font-family: "Clavichord S";
  font-style: normal;
}

.clavichord-m {
  font-family: "Clavichord M";
  font-style: normal;
}

.glyptic {
  font-family: "Glyptic DJR";
  font-weight: 400;
}

/*
========================================

Rules

========================================
*/

hr {
  border: 0;
  border-top: 1px solid var(--color-black);
}

hr.thin-thin {
  border-bottom: 1px solid var(--color-black);
  height: 6px;
}

hr.thick-thin {
  border-top: 2px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
  height: 6px;
}

/*
========================================

Layout

========================================
*/

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-space-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.align-self-end {
  align-self: flex-end;
}

.width-100 {
  width: 100%;
}

.width-90 {
  width: 90%;
}

.width-80 {
  width: 80%;
}

.width-75 {
  width: 75%;
}

.width-70 {
  width: 70%;
}

.width-60 {
  width: 60%;
}

.width-50 {
  width: 50%;
}

.width-40 {
  width: 40%;
}

.width-30 {
  width: 30%;
}

.width-25 {
  width: 25%;
}

.width-20 {
  width: 20%;
}

.width-10 {
  width: 10%;
}

/*
========================================

Buy Button

========================================
*/

.buy-nav {
  display: inline-block;
  grid-row: 0;
  position: sticky;
  bottom: 0;
  height: 0;
  margin: var(--spacing-m);
  z-index: 100;
  pointer-events: none;
}

.buy-nav .inner {
  background: white;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 10px 20px, rgba(0, 0, 0, 0.13) 0px 6px 6px;
  display: flex;
  grid-gap: 0;
  overflow: hidden;
  transform: translateY(calc(-100% - 1.5em + 10px));
  width: max-content;
}

.buy-nav button {
  border: 0;
  -webkit-appearance: none;
  font: inherit;
}

.buy-nav .buy-button {
  background: white;
  color: var(--color-black);
  display: inline-block;
  padding: 0.5em 0.75em;
  padding-top: 0.325em;
  text-decoration: none;
  transition: 0.2s all ease-in-out;

  pointer-events: all;
}

.buy-nav .inner .buy-button {
  border-right: 1px dotted var(--color-black);
}

.buy-nav .inner > .buy-button:last-child {
  border-right: 0;
}

.buy-nav .buy-button:hover {
  color: olive;
  cursor: pointer;
}

/*
========================================

WALLPAPER

========================================
*/

#wallpaper {
	background: #d7d8d0;
	background-image: url("/assets/warbler/images/Wallpaper.jpg"), url("/assets/warbler/images/Wallpaper.min.jpg");
	background-size: 30vw 45vw, 30vw 45vw;
	height: 90vh;

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

	position: relative;
}

@media only screen and (min-width: 960px) {
	#wallpaper {
		background-size: 18.75vw 28.125vw, 18.75vw 28.125vw;
		height: 100vh;
	}
}

@media only screen and (min-width: 1280px) {
	#wallpaper {
		background-size: 15vw 22.5vw, 15vw 22.5vw;
	}
}

#wallpaper::after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;

	background: radial-gradient(circle at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%);
	z-index: 1;
}

#wallpaper .pre-load {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}

#wallpaper .frame {
	z-index: 10;

	display: grid;
	margin-top: -2%;
	position: relative;
}

@media only screen and (min-width: 960px) {
	#wallpaper .frame {
		margin-top: 0;
	}
}

#wallpaper .frame img {
	grid-row: 1;
	grid-column: 1;
	height: 80vh;
	max-height: 1400px;
	width: auto;
}

#wallpaper .frame .title-container {
	bottom: 22%;
	font-size: clamp(10px, 3vw, 20px);
	position: absolute;
	text-align: center;
	width: 100%;
	z-index: 4;

	container-type: inline-size;
	container-name: title-container;
}

#wallpaper .frame .title-container .title {
	font-size: 4cqw;
}

/*
========================================

TITLE PAGE

========================================
*/

#title-page,
#title-page .title {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

#title-page {
	padding: var(--spacing-xxl) 0;
	grid-gap: var(--spacing-xl);
}

#title-page .title {
	grid-gap: var(--spacing-l);
}

#title-page h1 {
	font-family: "Warbler Display";
	font-family: "Warbler Variable";
	font-size: clamp(32px, 2vw, 48px);
}

@media only screen and (min-width: 1280px) {
	#title-page h1 {
		font-family: "Warbler Banner";
		font-family: "Warbler Variable";
	}
}

#title-page .description {
	line-height: 1.5;
	max-width: 20em;
}

#title-page hr {
	max-width: 50%;
}

#title-page .description p {
	margin-top: 1.9em;
	margin-bottom: 2.05em;
}

#title-page .description p:first-letter {
	font-variant-caps: all-small-caps;
}

#title-page a {
	color: inherit;
	text-decoration: none;
	transition: 0.2s all ease-in-out;
}

#title-page a:hover {
	color: olive;
}

/*
========================================

TABLE OF CONTENTS

========================================
*/

#toc {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--spacing-xxl) 0;
	text-align: center;
}

#toc .container {
	max-width: 20em;
	width: 100%;
}

#toc .toc-title {
	margin-bottom: var(--spacing-l);
}

#toc ul {
	list-style: none;
	line-height: 1.5;
	margin: 0;
	margin-top: var(--spacing-m);
	padding: 0;
}

#toc a {
	color: inherit;
	text-decoration: none;
}

#toc ul li a {
	align-items: baseline;
	display: flex;
}

#toc ul li a:hover {
	font-style: italic;
}

#toc ul hr {
	flex-grow: 1;
	margin: 0 0.5em;
	border-style: dotted;
}

/*
========================================

PROCESS

========================================
*/

#process {
	align-items: center;
	background: #FBF9ED;
	display: flex;
	flex-direction: column;
	grid-gap: var(--spacing-xl);
	padding: var(--spacing-xxl) 0;
}

#process .container {
	display: flex;
	flex-direction: column;
	grid-gap: var(--spacing-m);
	max-width: 2048px;
	width: 90%;

	position: relative;
}

#process .container .intro {
	font-family: "Warbler Deck";
	font-family: "Warbler Variable";
	font-size: clamp(32px, 6vw, 6vw);
	line-height: 1;
	padding-top: 0.05em;
}

#process .container .intro p {
	text-indent: -0.3em;
}

#process .container .main {
	column-count: 1;
	column-gap: var(--spacing-m);
}

@media only screen and (min-width: 768px) {
	#process .container .intro {
		font-family: "Warbler Display";
		font-family: "Warbler Variable";
	}
}

@media only screen and (min-width: 1280px) {
	#process .container .intro {
		font-family: "Warbler Banner";
		font-family: "Warbler Variable";
	}
}

#process .container .main p {
	max-width: 100%;
}

#process .container .main figure {
	margin-bottom: 1em;
	width: 100%;
}

@media only screen and (min-width: 860px) {
	#process .container .main p {
		max-width: 30em;
	}

	#process .container .main figure {
		width: 25%;
	}

	#process .container .main figure.left,
	#process .container .main figure.right {
		float: right;
		margin-left: 2%;
	}
}

@media only screen and (min-width: 1280px) {
	#process .container .main p {
		margin-left: auto;
		margin-right: auto;
	}

	#process .container .main figure {
		width: calc((100% - 30em) / 2 - 4%);
/*		max-width: 16rem;*/
	}

	#process .container .main figure.left {
		float: left;
		margin-right: 2%;
		margin-left: 0;
	}

	#process .container .main figure.right {
		float: right;
		margin-left: 2%;
		magin-right: 0;
	}
}

#process .container .main figure img {
	margin-bottom: 0.5em;
}

#process .container .main figure figcaption {
	color: olive;
	font-family: "Input Sans Narrow";
	font-size: 0.625em;
}

/*
========================================

STYLES

========================================
*/

#styles {
	--color-styles-background: #EFEBE2;
	background: var(--color-styles-background);
	display: flex;
	justify-content: center;
	padding: var(--spacing-xxl) 0;
}

#styles .inner {
	align-items: baseline;
	display: flex;
	flex-direction: column;
	grid-row-gap: var(--spacing-m);
	max-width: 1400px;
	width: 90%;
}

@media only screen and (min-width: 960px) {
	#styles .inner {
		display: grid;
		grid-template-columns: calc(100% / 3) calc((100% / 3 * 2) - var(--spacing-xl));
		grid-column-gap: var(--spacing-xl);
		width: 90%;
	}
}

#styles .inner .left {
	grid-column: 1;
}

#styles .right {
	grid-column: 2;
}

#styles .styles-container {
	grid-column: 2;

	display: grid;
	grid-template-columns: 40px 6px 1fr;
	grid-column-gap: 10px;
	align-items: baseline;
}

@media only screen and (min-width: 960px) {
	#styles .styles-container {
		grid-column-gap: 20px;
		grid-template-columns: 50px 16px 1fr;
	}
}

#styles .styles-container .fig {
	font-style: italic;
	grid-column: 1;
}

#styles .styles-container .sub-class {
	font-style: italic;
	grid-column: 2;
}

#styles .styles-container .sample-big {
	grid-column: 3 / -1;
	line-height: 1.125;
	margin-bottom: var(--spacing-l);
	white-space: nowrap;
}

#styles .styles-container .sample-big.italic {
	margin-top: calc(-1 * var(--spacing-l));
}

#styles .styles-container .Warbler-Banner {
	font-size: clamp(128px, 10vw, 192px);
}

#styles .styles-container .Warbler-Display {
	font-size: clamp(96px, 7vw, 128px);
}

#styles .styles-container .Warbler-Deck {
	font-size: clamp(48px, 4vw, 64px);
}

#styles .styles-container .sample-small {
	grid-column-start: 3;
	white-space: nowrap;
}

#styles .key .row {
	align-items: baseline;
	display: grid;
	grid-template-columns: 2ch 2ch fit-content(70px) 1fr fit-content(0);
	grid-column-gap: var(--spacing-s);
}

#styles .key .fig {
	grid-column: 1;
}

#styles .key .sub-class {
	grid-column: 2;
}

#styles .key .family {
	grid-column: 3;
}

#styles .key hr {
	flex-grow: 1;
	border-style: dotted;
	margin: 0;
}

#styles .key .style {
	grid-column: 5;
}

#styles .key .ibid {
	color: var(--color-styles-background);
	position: relative;
}

#styles .key .ibid::after {
	color: var(--color-black);
	content: ",,";
	left: 0;
	position: absolute;
	text-align: center;
	width: 100%;
}

/*
========================================

TYPESETTING

========================================
*/

#typesetting {
	display: flex;
	justify-content: center;
	padding: var(--spacing-xxl) 0;
}

@media only screen and (min-width: 1280px) {
	#typesetting {
		justify-content: center;
	}
}

#typesetting img {
	width: 100%;
}

#typesetting .book-container {
	border-radius: 8px;
	display: flex;
	font-size: clamp(16px, 0.75vw, 20px);
	padding: 5%;
}

@media only screen and (min-width: 960px) {
	#typesetting .book-container {
		transform: translateX(21.325%);
		padding: 12px 34px;
	}
}

@media only screen and (min-width: 1280px) {
	#typesetting .book-container {
		transform: none;
	}
}

#typesetting .page-edges {
	display: none;
}

@media only screen and (min-width: 960px) {
	#typesetting .page-edges {
		box-sizing: border-box;
		display: block;
		border: 1px solid var(--color-black);
		background: repeating-linear-gradient(
		  to right,
		  transparent,
		  transparent 4px,
		  var(--color-black) 4px,
		  var(--color-black) 5px
		);
		height: 100%;
		width: 60px;
	}
}

#typesetting .page-edges.left {
	border-right: 0;
}

#typesetting .page-edges.right {
	border-left: 0;
}

#typesetting .spread {
	position: relative;
	width: 100%;
}

@media only screen and (min-width: 960px) {
	#typesetting .spread {
		border: 1px solid var(--color-black);
		padding: 5% 7.5%;
		width: clamp(1110px, 80vw, 1400px);
	}

	#typesetting .spread::after {
		background: var(--color-black);
		content: "";
		height: 100%;
		left: 50%;
		position: absolute;
		top: 0;
		width: 1px;
	}

	#typesetting .spread::before {
		content: "";
		height: calc(100% + 24px);
		width: calc(100% + 120px + 68px);
		top: -12px;
		left: -94px;
		border: 1px solid var(--color-black);
		border-radius: 8px;
		position: absolute;
	}
}

#typesetting .columns {
	justify-content: baseline;
	column-count: 1;
	overflow: hidden;
	width: 100%;
}

#typesetting .content-container {
	position: relative;
}

@media only screen and (min-width: 960px) {
	#typesetting .columns {
		column-count: 2;
		column-gap: 20%;
	}

	#typesetting .content-container {
		height: calc(19 * 1.825em);
	}
}

#typesetting .meta,
#typesetting .page-info {
	text-align: center;
}

#typesetting .meta {
	width: 100%;
}

@media only screen and (min-width: 960px) {
	#typesetting .meta {
		position: absolute;
		width: 40%;
	}
}

#typesetting .page-info-container {
	margin-bottom: 4em;
}

#typesetting .chapter-title {
	font-family: "Warbler Deck";
	font-size: 1.75em;
}

#typesetting .quote {
	font-size: 0.8em;
	font-style: italic;
}

#typesetting .chapter-title,
#typesetting .quote {
	margin-bottom: 8%;
}

#typesetting .content p {
	line-height: 1.825;
	margin-bottom: 0;
	text-align: left;

	-webkit-hyphens: auto;
	-webkit-hyphenate-limit-before: 3;
	-webkit-hyphenate-limit-after: 3;
	-webkit-hyphenate-limit-lines: 2;
}

@media only screen and (min-width: 960px) {
	#typesetting .content p {
		text-align: justify;
	}
}

#typesetting .content p:not(:first-child) {
	text-indent: 2em;
}

#typesetting .content p:first-child {
	margin-top: calc(1.81 * 6em);
}

#typesetting .page-numbers {
	display: flex;
	justify-content: space-between;
	margin-top: 8em;
	text-align: center;
}

@media only screen and (min-width: 960px) {
	#typesetting .page-numbers {
		display: block;
	}
}

/*
========================================

CALENDAR

========================================
*/

#calendar {
	background: #1A1919;
	display: flex;
	justify-content: center;
	padding: var(--spacing-xxl) 0;
	grid-gap: var(--spacing-l);

	--cal-margin: 40px;
}

@media only screen and (min-width: 960px) {
	#calendar {
		--cal-margin: 80px;
	}
}

#calendar .calendar.left,
#calendar .calendar.right {
	display: none;
}
@media only screen and (min-width: 1200px) {
	#calendar .calendar.left,
	#calendar .calendar.right {
		display: block;
	}
}

#calendar .calendar {
	background: #EFEBE2;
	padding: calc(var(--cal-margin) / 2);
	width: 90%;
}

@media only screen and (min-width: 768px) {
	#calendar .calendar {
		min-width: clamp(400px, 90vw, 1000px);
	}
}

#calendar .calendar .top-outer,
#calendar .calendar .bottom-outer,
#calendar .calendar .top-inner,
#calendar .calendar .bottom-inner {
	border: 1px solid var(--color-black);
}

#calendar .calendar .top-outer {
	margin-bottom: -1px;
}

/* Image / Month portion of Calendar */

#calendar .calendar .top-inner {
	align-items: center;
	justify-content: center;
	display: grid;
	font-family: "Warbler Display";
	text-transform: uppercase;
	padding: 2.5%;

	grid-template-columns: 1fr;
}

@media only screen and (min-width: 768px) {
	#calendar .calendar .top-inner {
		padding: var(--cal-margin);
	}
}

#calendar .calendar.center .top-inner {
	background: radial-gradient(circle farthest-side, #f8d8cb, #EFEBE2);
}

#calendar .calendar.left .top-inner,
#calendar .calendar.right .top-inner {
	background: radial-gradient(circle farthest-side, #c9d6c7, #EFEBE2);
}

#calendar .calendar .top-inner .month,
#calendar .calendar .top-inner .month-image {
	grid-column: 1;
	grid-row: 1;
}

#calendar .calendar .top-inner .month {
	display: flex;
	max-width: 100%;
}

#calendar .calendar .top-inner .month .name {
	align-items: center;
	letter-spacing: 0.5em;
}

#calendar .calendar .top-inner .month-image {
	transform: scale(1.1);
	height: 100%;
	width: 100%;
	z-index: 1;
}

#calendar .crop {
    height: 0;
    margin: 0;
    position:relative;
}

#calendar .crop div {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width:100%;
}

#calendar .crop img {
    height: 100%;
    object-fit: cover;
    width:100%;
}

#calendar .crop-1x1 {
    padding-bottom:100%
}

#calendar .calendar .top-inner .month .name .clavichord-m {
	font-size: 4.625em;
	line-height: 0.75;
	letter-spacing: 0.1em;
	transform: translateY(-0.075em) scale(0.94);
}

#calendar .calendar .center-credit {
	height: 0;
	position: relative;
	text-align: center;
}

/* Text in center of calendar */

#calendar .calendar .center-credit .morning {
	font-family: "Gimlet Sans";
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transform: translateY(-50%) scale(0.9);
}
#calendar .calendar .center-credit .morning > span {
	background: #EFEBE2;
	padding: 0 0.75em;
}

#calendar .calendar .top-inner,
#calendar .calendar .bottom-inner {
	margin: 10px;
}

#calendar .calendar .bottom-inner {
	display: flex;
	flex-direction: column;
}

#calendar .calendar .bottom-inner .row {
	align-items: center;
	border-bottom: 1px solid var(--color-black);
	display: grid;
	grid-template-columns: calc(var(--cal-margin) / 2) 1fr calc(var(--cal-margin) / 2);
	min-height: var(--cal-margin);
}

@media only screen and (min-width: 960px) {
	#calendar .calendar .bottom-inner .row {
		grid-template-columns: var(--cal-margin) 1fr var(--cal-margin);
	}
}

#calendar .calendar .bottom-inner .bottom.row {
	border: 0;
}

/* Text along bottom of calendar */

#calendar .calendar .bottom-inner .bottom.row .center {
	font-size: clamp(8px, 3vw, 18px);
	line-height: 1;
	text-align: center;
}

#calendar .calendar .bottom-inner .bottom.row .center a {
	color: inherit;
	text-decoration: none;
}

#calendar .calendar .bottom-inner .bottom.row .center a:hover {
	color: olive;
}

#calendar .cal-content {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: -1px;
	width: 100%;
}

#calendar .cal-content .cell {
	font-family: "Warbler Banner";
	font-size: clamp(54px, 12vw, 152px);
	letter-spacing: -0.05em;
	text-align: center;
	height: 0;
	padding-bottom: 100%;
	position: relative;
	overflow: hidden;

	border: 1px solid var(--color-black);
	margin-left: -1px;
	margin-top: -1px;

	font-feature-settings: "lnum";
}

#calendar .cal-content .cell .inner {
	position: absolute;
	top: 5%;
	left: 5%;
	height: 90%;
	width: 90%;
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	transition: 0.2s all ease-in-out;
}

#calendar .cal-content .cell:not(.day) .inner::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;

	background: orange;
	border-radius: 50%;
	transition: 0.2s all ease-in-out;
	opacity: 0;
	mix-blend-mode: hard-light;
	z-index: 99;
}

#calendar .cal-content .cell:not(.day) .inner:hover::after {
	opacity: 1;
}

/*
========================================

WARBLER SIGHTINGS

========================================
*/

#chart {
	--border-color: #cccac4;

	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--spacing-xxl) 0;
}

#chart .chart-title {
	font-size: 2em;
	font-family: "Warbler Deck";
	margin-bottom: var(--spacing-xl);
	text-align: center;
}

#chart .table {
	display: grid;
	margin-left: 5%;
	overflow: scroll;
	width: 95%;
}

@media only screen and (min-width: 1260px) {
	#chart .table {
		margin-left: 0;
		width: 90%;
		overflow-x: hidden;
	}
}

#chart .headings,
#chart .entries {
	border-top: 1px solid var(--border-color);
	padding: 10px 0;
}

#chart .table .headings,
#chart .table .entry {
	display: grid;
	grid-template-columns: minmax(50vw, 1fr) repeat(15, 42px) 5.25em 60px;
	width: 100%;
}

@media only screen and (min-width: 1260px) {
	#chart .table .headings,
	#chart .table .entry {
		display: grid;
		grid-template-columns: minmax(20vw, 1fr) repeat(15, 42px) 5.25em 60px;
		width: 100%;
	}
}

@media only screen and (min-width: 2048px) {
	#chart {
		font-size: clamp(20px, 1vw, 28px);
	}

	#chart .table {
		max-width: 2048px;
	}
}

/*
========================================

Headings

========================================
*/

#chart .headings {
	height: 6em;
}

#chart .headings .year {
	align-items: center;
	display: flex;
	font-weight: 700;
	justify-content: center;
	position: relative;
}

#chart .headings .year::after {
	background: var(--color-off-white);
	content: "";
	left: 0;
	top: -10px;
	height: calc(100% + 20px);
	width: 100%;
	position: absolute;
	z-index: -1;
}

#chart .headings .cell {
	align-items: end;
	display: flex;
	white-space: nowrap;
}

#chart .headings .cell .inner {
	align-items: center;
	display: flex;
	height: 22px;

	text-align: center;
	transform-origin: bottom left;
	transform: rotate(-90deg) translateY(100%);
}

#chart .headings .abundance {
	line-height: 1;
}

#chart .headings .abundance .inner {
	height: 68px;
	transform: rotate(-90deg) translateY(97%);
}

#chart .headings .seen .inner {
	height: 40px;
}

/*
========================================

Entries

========================================
*/

#chart .entry {
	position: relative;
}

#chart .entry::before {
	background: rgba(255, 239, 68, 0.5);
	border-radius: 4px;
	content: "";
	left: -6px;
	height: 100%;
	mix-blend-mode: darken;
	opacity: 0;
	position: absolute;
	width: calc(100% + 12px);
	z-index: 20;

	transition: 1s opacity ease-in;
}

#chart .entry:hover::before {
	opacity: 1;
	transition: 0.2s opacity ease-out;
}

#chart .bird-name {
	align-items: baseline;
	display: flex;
}

#chart .bird-name .combined-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#chart .bird-name hr {
	border-color: var(--border-color);
	border-style: dotted;
	flex-grow: 1;
	margin: 0 0.5em;
}

#chart .latin-name {
	font-style: italic;
}

#chart .cell {
	border-left: 1px solid var(--border-color);
	padding: 0 10px;
}

#chart .year + .cell,
#chart .bird-name + .cell {
	border-left: 0;
}

#chart .count {
	text-align: center;
}

#chart .seen {
	text-align: right;
}

/*
========================================

Sticky Year & Bird Name

========================================
*/

#chart .headings .year,
#chart .entry .bird-name {
	background: var(--color-off-white);
	border-right: 1px solid var(--border-color);
	left: 0;
	position: sticky;
	z-index: 10;
}

/*
========================================

EGGS

========================================
*/

#eggs {
	align-items: center;
	background: #FBF9ED;
	display: flex;
	flex-direction: column;
	grid-gap: var(--spacing-xl);
	padding: var(--spacing-xxl) 0;
}

#eggs .title {
	display: flex;
	justify-content: center;
	width: 100%;
}

#eggs .title .inner {
	display: flex;
	flex-direction: column;
	grid-gap: var(--spacing-m);
	justify-content: center;
	text-align: center;
	max-width: 1000px;
	width: 90%;
}

#eggs .title h2 {
	font-size: 4em;
	font-weight: 400;
	line-height: 1.125;
}

#eggs .title h3 {
	font-style: italic;
	font-weight: 400;
}

#eggs .title a {
	color: inherit;
	text-decoration: none;
}

#eggs .title a:hover {
	color: olive;
}

#eggs .illustration-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 1000px;
	margin-left: 5%;
	margin-right: 5%;
	position: relative;
	width: 90%;
}

#eggs .illustration-container .egg-names {
	height: 100%;
	font-size: 0.825em;
	position: absolute;
	top: 0;
	width: 100%;
	opacity: 1;

	transition: 0.1s all ease-in-out;
}

@media only screen and (min-width: 768px) {
	#eggs .illustration-container {
		margin-bottom: 0;
	}

	#eggs .illustration-container .egg-names {
		font-size: 1em;
		position: absolute;
		opacity: 0;
		top: 0;
	}

	#eggs .illustration-container:hover .egg-names {
		opacity: 1;
		background: rgba(251, 249, 237, 0.4);
		backdrop-filter: blur(10px);
	    -webkit-backdrop-filter: blur(10px);
	}
}

#eggs .illustration-container .egg-names .egg {
	position: absolute;
	text-align: center;

	transform: translateX(-50%) translateY(-50%);
}

@media only screen and (min-width: 768px) {
	#eggs .illustration-container .egg-names .egg {
/*		transform: translateX(0%);*/
	}
}

#eggs .illustration-container .egg-names .egg.no-01 {
	left: 17%;
	top: 13%;
}

#eggs .illustration-container .egg-names .egg.no-02 {
    left: 25%;
    top: 23%;

}

#eggs .illustration-container .egg-names .egg.no-03 {
    left: 35%;
    top: 35%;

}

#eggs .illustration-container .egg-names .egg.no-04 {
    left: 50%;
    top: 13%;

}

#eggs .illustration-container .egg-names .egg.no-05 {
    left: 82%;
    top: 13%;

}

#eggs .illustration-container .egg-names .egg.no-06 {
    left: 78%;
    top: 23.5%;

}

#eggs .illustration-container .egg-names .egg.no-07 {
    left: 65%;
    top: 35%;

}

#eggs .illustration-container .egg-names .egg.no-08 {
    left: 17%;
    top: 50%;

}

#eggs .illustration-container .egg-names .egg.no-09 {
    left: 51%;
    top: 53%;

}

#eggs .illustration-container .egg-names .egg.no-10 {
    left: 83%;
    top: 50%;

}

#eggs .illustration-container .egg-names .egg.no-11 {
    left: 17%;
    top: 68%;

}

#eggs .illustration-container .egg-names .egg.no-12 {
    left: 20%;
    top: 79%;

}

#eggs .illustration-container .egg-names .egg.no-13 {
    left: 33%;
    top: 89%;

}

#eggs .illustration-container .egg-names .egg.no-14 {
    left: 50.5%;
    top: 73%;

}

#eggs .illustration-container .egg-names .egg.no-15 {
    left: 82%;
    top: 68%;

}

#eggs .illustration-container .egg-names .egg.no-16 {
    left: 80%;
    top: 80%;

}

#eggs .illustration-container .egg-names .egg.no-17 {
    left: 66%;
    top: 89%;
}

#eggs .illustration-container .egg-names .egg .fig-no {
	font-style: italic;
}

@media only screen and (max-width: 768px) {
	#eggs .illustration-container .egg-names .egg .name {
		display: none;
	}

	#eggs .illustration-container .egg-names .egg .fig-no {
		background: var(--color-off-white);
		padding: 0.2em 0.5em;
		border-radius: 100px;
	}
}

#eggs .key.mobile {
	border-top: 1px solid var(--color-black);
	border-bottom: 1px solid var(--color-black);
	display: flex;
	flex-wrap: wrap;
	padding: 1em 0;
	width: 90%;
}

#eggs .key.mobile .egg-names {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#eggs .key.mobile .egg {
	align-items: baseline;
	display: flex;
	grid-gap: 0.5ch;
	margin: 0.25em 0;
	width: 100%;
}

@media only screen and (min-width: 574px) {
	#eggs .key.mobile .egg {
		width: 47.5%;
	}
}

#eggs .key.mobile .name,
#eggs .key.mobile .fig-no {
	grid-row: 1;
}

#eggs .key.mobile .name {
	grid-column: 2;
}

#eggs .key.mobile hr {
	flex-grow: 1;
	border-style: dotted;
	margin: 0;
}

#eggs .key.mobile .fig-no {
	grid-column: 1;
	font-style: italic;
}

#eggs .source {
	text-align: center;
	width: 90%;
}

#eggs .source a {
	color: inherit;
	font-style: italic;
	text-decoration: none;
}

#eggs .source a:hover {
	color: olive;
}

/*
========================================

MENU

========================================
*/

#menu {
	background: #EFEBE2;
	display: flex;
	flex-wrap: wrap;
}

#menu .side {
	align-items: center;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: var(--spacing-xl) 5vw;
}

@media only screen and (min-width: 1080px) {
	#menu .side {
		display: grid;
		width: 50%;
	}
}

#menu .left {
	border-bottom: 1px solid var(--color-black);
}

@media only screen and (min-width: 1080px) {
	#menu .left {
		border-bottom: 0;
		border-right: 1px solid var(--color-black);
	}
}

#menu .side .content,
#menu .side .watermark {
	grid-column: 1;
	grid-row: 1;
}

#menu .side .watermark {
	display: none;
	font-family: "Clavichord S";
	text-align: center;
	width: 40vw;
}

@media only screen and (min-width: 1080px) {
	#menu .side .watermark {
		display: block;
		opacity: 1;
	}
}

#menu .side .watermark .fit {
	color: #ECE8DF;
	text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.6), 0px -2px 4px rgba(0, 0, 0, 0.1);
	filter: blur(1px);
	transform: scale(0.9);
	pointer-events: none;
}

#menu .side .content {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	line-height: 1.25;
	grid-gap: 20px;
	height: 100%;
	max-width: 100%;
	width: 100%;
	z-index: 10;
}

@media only screen and (min-width: 1080px) {
	#menu .side .content {
		max-width: 40vw;
	}
}

#menu .title {
	align-items: center;
	display: flex;
	justify-content: center;
	font-size: 40px;
}

#menu .title em {
	font-size: 1rem;
	margin-left: -0.25em;
	padding: 0 0.5em;
}

#menu section {
	align-items: center;
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
}

#menu h3 {
	font-style: italic;
	font-size: 1.25em;
	text-align: center;
}

#menu h3.glyptic {
	font-size: 1.75em;
	font-style: normal;
	letter-spacing: 0.05em;
}

/* Glyptic hover easter egg */

#menu h3.glyptic a,
#menu h3 .glyptic a {
	color: initial;
	text-decoration: none;
}

#menu h3.glyptic a:hover,
#menu h3 .glyptic a:hover {
	color: olive;
}

#menu hr {
	border: 0;
	border-top: 1px solid var(--color-black);
	height: 0;
	width: 120px;
}

#menu .split {
	align-items: baseline;
	display: flex;
	justify-content: space-between;
}

#menu section p {
	margin: 0;
}

@media only screen and (min-width: 768px) {
	#menu section.soups {
		display: grid;
	}
}

#menu section.soups h3,
#menu section.soups .split {
	grid-column: 1;
	grid-row: 1;
}

#menu section.soups .split {
	justify-self: center;
}

#menu .split p {
	text-align: center;
}

#menu .triple p {
	width: calc(100% / 3);
}

#menu .triple p:first-child {
	text-align: left;
}

#menu .triple p:last-child {
	text-align: right;
}

#menu section.wines h3 {
	display: flex;
	align-items: center;
	font-style: normal;
}

#menu section.wines h3 .glyptic {
	font-size: 1.25em;
	margin-right: 0.15em;
}

#menu section.wines .split {
	display: flex;
	flex-wrap: wrap;
	grid-row-gap: 10px;
	text-lign: center;
}

#menu .wine-item {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-style: italic;
	width: 50%;
}

#menu .wine-item p:first-child {
	font-style: normal;
	font-variant-caps: all-small-caps;
	letter-spacing: 0.2em;
	margin: 0;
}

/* Make split columns 100% width on small screens */

@media only screen and (max-width: 768px) {
	#menu .left.side .width-90,
	#menu .left.side .width-80,
	#menu .left.side .width-75,
	#menu .left.side .width-70,
	#menu .left.side .width-60,
	#menu .left.side .width-50,
	#menu .left.side .width-40,
	#menu .left.side .width-30,
	#menu .left.side .width-25,
	#menu .left.side .width-20,
	#menu .left.side .width-10, 
	#menu .ornamental-pyramids .split {
		width: 100%;
	}

	#menu .left.side .split p:first-child,
	#menu .ornamental-pyramids .split p:first-child {
		text-align: left;
	}

	#menu .left.side .split p:last-child,
	#menu .ornamental-pyramids .split p:last-child {
		text-align: right;
	}
}


/*
========================================

SAMPLES

========================================
*/

#samples {
	display: flex;
	justify-content: center;
	padding: var(--spacing-xxl) 0;
}

#samples .inner {
	display: flex;
	flex-direction: column;
	grid-row-gap: var(--spacing-l);
	max-width: 1400px;
	margin: 0 5%;
	width: 90%;
}

@media only screen and (min-width: 960px) {
	#samples .inner {
		grid-row-gap: var(--spacing-xl);
	}
}

@media only screen and (min-width: 1280px) {
	#samples .inner {
		grid-row-gap: var(--spacing-xxl);
	}
}

#samples .sample-container {
	display: flex;
	flex-direction: column;
	grid-row-gap: var(--spacing-m);
}

#samples .sample {
	column-gap: var(--spacing-m);
}

#samples .banner .sample,
#samples .display .sample,
#samples .deck .sample {
	line-height: 1;
	width: 130vw;
}

@media only screen and (min-width: 960px) {
	#samples .banner .sample,
	#samples .display .sample,
	#samples .deck .sample {
		width: 100%;
	}
}

#samples .text .sample {
	max-height: calc(15 * 1.5em);
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
}

#samples .text .sample.small {
	column-count: 3;
	font-size: 18px;
}

#samples .text .sample.medium {
	column-count: 2;
	font-size: 24px;
}

#samples .sample-container .label {
	border-top: 1px solid var(--color-black);
	display: flex;
	justify-content: space-between;
	font-family: "Input Sans Narrow";
	font-size: 12px;
	padding-top: var(--spacing-s);
	width: 100%;
}

#samples .text .sample[data-columns="1"],
#samples .text .sample[data-columns="2"],
#samples .text .sample[data-columns="3"] {
	column-count: 1;
}

@media only screen and (min-width: 960px) {
	#samples .text .sample[data-columns="2"],
	#samples .text .sample[data-columns="3"] {
		column-count: 2;
	}
}

@media only screen and (min-width: 1024px) {
	#samples .text .sample[data-columns="3"] {
		column-count: 3;
	}
}

/*
========================================

SPECIMEN

========================================
*/

#pdf-specimen {
	background: #9A9489;
}

#pdf-specimen .container {
	display: flex;
	justify-content: center;
	padding-top: var(--spacing-xxl);
	overflow: hidden;
	width: 100%;
}

#pdf-specimen .cover {
	display: grid;
	grid-template-columns: 100%;
	position: relative;
	max-width: 1400px;
	text-decoration: none;
	width: 90%;

	transition: 0.5s transform cubic-bezier(.25,0,0,1);
}

@media only screen and (min-width: 960px) {
	#pdf-specimen .cover {
		max-width: 1000px;
	}
}

#pdf-specimen .cover:hover {
	transform: rotate(-0.5deg) translateY(-20px);
}

#pdf-specimen .cover .book {
	position: absolute;
	height: 0;
	max-width: 100%;
	width: 100%;
}

#pdf-specimen .cover .cover-height {
	height: 0;
	width: 100%;
	padding-bottom: 60%;
}

#pdf-specimen .cover img {
	grid-column: 1;
	grid-row: 1;
	object-fit: cover;
}

#pdf-specimen .cover .type-container {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

#pdf-specimen .cover .type {
	grid-column: 1;
	grid-row: 1;

	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	grid-gap: var(--spacing-m);

	padding-top: 18%;
	padding-bottom: 10%;
	margin-left: 20%;

	height: 100%;
	max-width: 65%;
	width: 65%;

	font-size: 1.5em;
	line-height: 1.25;
	text-align: center;
}

#pdf-specimen .cover .type .target {
	align-self: center;
	color: #b18946;
	font-size: clamp(1px, 4vw, 22px);
	position: relative;
	text-align: center;
	z-index: 1;
	max-width: 100%;
}

#pdf-specimen .cover .type span {
	text-shadow: 0px -1px 2px rgb(62, 48, 11), -1px -2px 3px #000;
	z-index: 10;
}

#pdf-specimen .cover .type .Type-Specimen {
	transform: translateY(-4%);
}

/*#pdf-specimen .cover .type .target::after {
	content: attr(data-text);
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: -1;
	font-family: inherit;
	font-size: inherit;
	text-shadow: 0px -1px 2px rgb(62, 48, 11), 0px 1px 1px rgba(231,202,149,1), 0px 1px 1px rgba(255, 233, 116, 0.5), -1px -2px 3px #000;
	white-space: nowrap;
	width: 100%;
}*/

/*
========================================

Extra Bottom

========================================
*/

.extra {
  align-items: center;
  display: flex;
  min-height: 100vh;
}