* {
	padding: 0;
	margin: 0;
}

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

html {
	-webkit-text-size-adjust: none;
	   -moz-text-size-adjust: none;
	        text-size-adjust: none;
}

body {
	min-height: 100vh;
}

img,
iframe,
audio,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

ul {
	list-style: none;
}

html {
	--content-max-width: 75rem;
	--content-side-padding: 1rem;
	--gutter: 1rem;
	--row-gutter: 1rem;
	--col-gutter: 1rem;

	/*--text-color: black;*/
	--text-color: black;
	--text-color-muted: rgba(255, 255, 255, 0.7);
	/*--bg-color: rgba(0, 0, 0, 0.8);*/
	--bg-color: rgb(225,223,218);

	--font-small: 0.65rem;
	--font-smaller: 0.55rem;

	--font-h2: 100%;
	--font-title: 60pt;

	--font-text-intro: 5cqi;
	--font-text-intro-lineheight: min(120%, 7cqi);
	--font-text: max(12px, min(1.5cqi, 13px));
	/*--font-text: 12px;*/
	--font-text-lineheight: 170%;
	--font-text-weight: 425;
	--font-longform: 11.5pt;
	--font-caption: 7.5pt;
	--font-footnote: 8pt;
	--footnote-spacing: 10pt;
	--font-header-title: 10pt;
	--font-header-title-weight: 800;
	--font-header-title-single: 8.25pt;

	/*single column*/
	/*--font-text-single: max(9.5pt, min(1.65cqi, 11.2pt));*/
	--font-text-single: 13.5pt;
	--font-caption-single: 11.5pt;

	--font-bluebox: max(22pt, min(7cqi, 150pt));
	--lineheight-bluebox: 115%;
	--padding-bluebox: max(10pt, min(4cqi, 30pt));
	--headline-bluebox: max(30pt, min(12cqi, 200pt));

	--underline: 2px;

	/* Stacking order */
	--z-index-dropdown: 1000; /* Header dropdown */
	--z-index-image: 200; /* Zoomable images */

	--header-height: 35pt;

	--dark-bgcolor: black;
	--bright-textcolor: white;

	/*	too light in small
	--lettErrorBlue: rgba(197, 219, 242, 1);
*/
	/*too dark*/
	/*--lettErrorBlue: rgba(52, 107, 166, 1);*/

	--lettErrorBlue: rgba(180, 210, 230, 1); /* 0.12 */
	--lettErrorDarkBlue: rgba(16, 19, 32, 1);
	--currentPageMark: gray;
	--lettErrorLight: white;

	--typeTesterBackground: rgba(0, 0, 0, 0.04);

	--buyButtonBackground: rgba(135, 206, 250, 0.9);
	--buyButtonHover: rgba(64, 105, 216, 1);

	--oldFontGray: rgba(206, 212, 206, 0.5);

	--limitedBlue: rgba(118, 86, 56, 1);
	--veryBaubleBlue: rgba(55, 76, 122, 1);

}

.columns {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gutter);
}

.columns  > * {
		grid-column: 1 / -1;

		/* First element inside a new column shouldn't get top margin */
	}

:is(.columns > *)  > *:first-child {
			margin-top: 0;
		}

.half {
	grid-column: span 6;
}

.third {
	grid-column: span 4;
}

.twothirds {
	grid-column: span 8;
}

.sixth {
	grid-column: span 2;
}

.quarter {
	grid-column: span 3;
}

.three-quarters {
	grid-column: span 9;
}

.full-bleed {
	grid-column: full;
}

@media (max-width: 768px) {
	.half,
	.third,
	.two-thirds,
	.quarter,
	.sixth,
	.three-quarters {
		grid-column: 1 / -1;
	}
}

@font-face {
	font-family: "AGVF";
	src: url("/assets/font/AGVF-Upright.woff2");
	font-weight: 100-900;
	font-display: swap;
}

@font-face {
	font-family: "AGVF";
	src: url("/assets/font/AGVF-Italic.woff2");
	font-style: italic;
	font-weight: 100-900;
	font-display: swap;
}

@font-face {
	font-family: "ATVF";
	src: url("/assets/font/ATVF-Upright.woff2");
	font-weight: 400-900;
	font-display: swap;
}

@font-face {
	font-family: "ATVF";
	src: url("/assets/font/ATVF-Italic.woff2");
	font-style: italic;
	font-weight: 400-900;
	font-display: swap;
}

@font-face {
	font-family: "ACVF";
	src: url("/assets/font/ACVF-Upright.woff2");
	font-weight: 300-700;
	font-display: swap;
}

@font-face {
	font-family: "ACVF";
	src: url("/assets/font/ACVF-Italic.woff2");
	font-style: italic;
	font-weight: 300-700;
	font-display: swap;
}

/* Main styles for Typemedia */

body {
	font-family: "AGVF";
	background: var(--bg-color);
	color: var(--text-color);
	display: grid;
	grid-template-columns:
		[full-start] minmax(var(--content-side-padding), 1fr)
		[content-start] min(var(--content-max-width), 100% - 2 * var(--content-side-padding)) [content-end]
		minmax(var(--content-side-padding), 1fr) [full-end];
	grid-template-rows: auto 1fr auto;

	font-synthesis: none;

	/*make room for the menu*/
	margin-top: var(--header-height);
}

/* Also offset the scroll by the header height plus one line height */

html {
	scroll-padding-top: calc(var(--header-height) + 1lh);
}

body > * {
	grid-column: content;
}

body > main {
	grid-column: full;
	grid-row: 2;
	display: grid;
	grid-template-columns: subgrid;
	row-gap: var(--row-gutter);
	-moz-column-gap: var(--col-gutter);
	     column-gap: var(--col-gutter);
	align-content: start;
}

:is(body > main)  > * {
		grid-column: content;
	}

p{
	font-family: "AGVF";
	font-size: var(--font-text);
	font-weight: var(--font-text-weight);
	line-height: var(--font-text-lineheight);
}

.text{
	font-family: "AGVF";
	font-size: var(--font-text);
	font-weight: var(--font-text-weight);
	line-height: var(--font-text-lineheight);
}

.interview{
	color: rgb(100, 100, 150);
	font-size: var(--font-text);
	line-height: var(--font-text-lineheight);
}

.caption{
	font-size: var(--font-caption);
	margin-top: 10pt;
}

header > nav{
	font-size: var(--font-text);
	padding-right: 2rem;
}

h1{
	font-family: "AGVF";
	font-size: var(--font-text);
	line-height: calc(0.9 * var(--font-title));
	margin-top: calc(2 * var(--font-text));
	margin-bottom: calc(2 * var(--font-text));
}

h2{
	font-family: "AGVF";
	font-size: var(--font-text);
	margin-top: calc(2 * var(--font-text));
	margin-bottom: 7pt;
}

/* Zoomable images */

.zoomable {
	cursor: zoom-in;
}

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(30, 30, 30, 1);
	display: grid;
	place-items: center;
	z-index: var(--z-index-image);
	cursor: zoom-out;
	padding: 1rem;
}

.lightbox img {
	width: calc(100vw - 2rem);
	height: calc(100vh - 2rem);
	-o-object-fit: contain;
	   object-fit: contain;
	max-height: 100%;
}

.year-box{
	margin-bottom: 20pt;
	margin-top: 5pt;
	border-top: 1px dotted gray;

}

.padBottom{
	margin-bottom: 20pt;
}

.padTop{
	margin-top: 10pt;
}

.intro{
	font-size: var(--font-text-intro);
	line-height: var(--font-text-intro-lineheight);
	font-weight: 300;
	padding-top: 10pt;
	padding-bottom: 50pt;
	color: darkslategray;
}

.shelfSize{
	max-height: 25cqi;
	width: auto;
}

.bibliography_item {
	color: rgb(50, 50, 30);
	padding-bottom: 10pt;
}

.navigation-top {
	padding-bottom: 50pt;
}

.navigation-bottom {
	padding-top: 50pt;
	padding-bottom: 20pt;
}

.meaning-pull{
	font-size: var(--font-text);
	line-height: var(--font-text-lineheight);
	padding-top: 5pt;
	margin-left: 5pt;
	font-weight: 600;
}