/* Variables
--------------------------------------------- */

:root {

	--color-text: #000;
	--color-background: #FFF;
	--color-hover: #000;
	--color-grey: #EBE8E6;
	--color-yellow: #FFF2C0;
	--color-orange: #FFE0C8;
	--color-hover-grey: #666666;


	--padding-page: 40px;
	--padding-header: 20px;
	--gap-grid-column: 30px;
	--gap-grid-row: 40px;
	--padding-extended-menu: 80px;
	--width-page: 1650px;
	--width-content: 800px;
	--width-quote: 530px;
	--gap-primary-menu: 40px;
	--width-small-logo: 38px;
	--margin-container-footer: 50px;
	--margin-meta: 14px;
	/* --margin-content: 18px; */
	--margin-section-title: 60px;
	--gap-footer: 20px;
	--gap-footer-horizontal: 100px;
	--margin-single-header: 90px;
	--margin-single-image: 70px;
	--margin-quote: 140px;
	--margin-side-image: 80px;
	--margin-title: 0.25em;

/*
	--padding-issue: calc(80px - var(--padding-page)) calc(100px - var(--gap-grid)) calc(80px - var(--padding-page)) calc(100px - var(--padding-page));
*/

	--padding-issue: calc(120px - var(--gap-grid-row)) 100px;
	--padding-cols-big: calc(100px - var(--gap-grid-row)) calc(100px - var(--gap-grid-row));
	--padding-cta: calc(180px - var(--gap-grid-row)) 120px;

	--border: solid 0.5px #000;

	--font-family-h: 'Ark Wide', sans-serif;
	--font-family-h-regular: 'Ark', sans-serif;
	--font-family-p: 'Cosmica', serif;

	--font-size-p: 1.95rem;
	--line-height-p: calc(2.8 / 1.95);
	--letter-spacing-p: 0.00em;

	--font-size-cols-p: 1.55rem;
	--line-height-cols-p: calc(2.0 / 1.55);
	--letter-spacing-cols-p: 0.00em;

	--font-size-cols-big-p: 2.1rem;
	--line-height-cols-big-p: calc(2.8 / 2.1);
	--letter-spacing-cols-big-p: 0.00em;

	--font-size-h1: 5.4rem;
	--line-height-h1: calc(6.4 / 5.4);
	--letter-spacing-h1: -0.02em;

	--font-size-archive-h1: 3.6rem;
	--line-height-archive-h1: 1.2;
	--letter-spacing-archive-h1: 0em;

	--font-size-page-h1: 3.6rem;
	--line-height-page-h1: 1.2;
	--letter-spacing-page-h1: 0em;

	--font-size-h2: 2.4rem;
	--line-height-h2: calc(6.4 / 5.4);
	--letter-spacing-h2: 0.00em;

	--font-size-cols-h2: 2.0rem;
	--line-height-cols-h2: calc(2.4 / 2.0);
	--letter-spacing-cols-h2: -0.01em;

	--font-size-cols-big-h2: 4.8rem;
	--line-height-cols-big-h2: calc(5.7 / 4.8);
	--letter-spacing-cols-big-h2: -0.02em;

	--font-size-cols-section-h2: 2.7rem;
	--line-height-cols-section-h2: 1.2;
	--letter-spacing-cols-section-h2: 0.02em;

	--font-size-teema-issue-h2: 2.7rem;
	--line-height-teema-issue-h2: 1.2;
	--letter-spacing-teema-issue-h2: 0.02em;

	--font-size-cols-3-h2: 2.5rem;
	--line-height-cols-3-h2: calc(3.1 / 2.5);
	--letter-spacing-cols-3-h2: -0.01em;

	--font-size-h3: 1.5rem;
	--line-height-h3: calc(1.7 / 1.5);
	--letter-spacing-h3: 0.01em;

	--font-size-ingressi: 2.6rem;
	--line-height-ingressi: calc(3.6 / 2.6);
	--letter-spacing-ingressi: 0.00em;

	--font-size-meta: 1.3rem;
	--line-height-meta: 1.5;
	--letter-spacing-meta: 0.05em;

	--font-size-author-kohde: 2.6rem;
	--line-height-author-kohde: calc(3.6 / 2.6);
	--letter-spacing-author-kohde: 0.00em;

	--font-size-cols-meta: 1.1rem;
	--line-height-cols-meta: 1.5;
	--letter-spacing-cols-meta: 0.04em;

	--font-size-nav-footer: 1.2rem;
	--line-height-nav-footer: 1.5;
	--letter-spacing-nav-footer: 0.01em;

	--font-size-caption: 1.35rem;
	--line-height-caption: calc(1.75 / 1.35);
	--letter-spacing-caption: 0.00em;

	--font-size-nav: 1.6rem;
	--line-height-nav: calc(2.2 / 1.6);
	--letter-spacing-nav: 0.01em;

	--font-size-big-nav: 3.2rem;
	--line-height-big-nav: calc(3.2 / 3.2);
	--letter-spacing-big-nav: 0.00em;

	--font-size-navcaps: 1.3rem;
	--line-height-navcaps: 1;
	--letter-spacing-navcaps: 0.02em;

	--font-size-button: 1.2rem;
	--line-height-button: 1;
	--letter-spacing-button: 0.02em;

	--font-size-quote: 2.6rem;
	--line-height-quote: calc(3.6 / 2.6);
	--letter-spacing-quote: 0.00em;

	--font-size-author-info: 1.7rem;
	--line-height-author-info: calc(2.6 / 1.8);
	--letter-spacing-author-info: 0.00em;

	--font-size-footnote: 1.4rem;
	--line-height-footnote: calc(2.2 / 1.4);
	--letter-spacing-footnote: 0.00em;


}

@media screen and (max-width: 1200px) {
:root {
	--font-size-cols-big-h2: 3.6rem;
}

/* mobile typography */
@media screen and (max-width: 920px) {
	:root {
		--padding-page: 20px;
		--gap-grid-column: 20px;
		--gap-grid-row: 50px;
		--gap-footer: 20px;
		--gap-footer-horizontal: 10px;

		--width-quote: 295px;

		--margin-single-header: 25px;
		--margin-title: 0.5em;
		--margin-single-image: 40px;
		--margin-quote: 80px;

		--padding-issue: calc(80px - var(--gap-grid-row)) 40px;
		--padding-cta: calc(80px - var(--gap-grid-row)) 60px;

		--font-size-p: 1.55rem;
		--line-height-p: calc(2.2 / 1.55);
		--letter-spacing-p: 0.00em;

		--font-size-cols-p: 1.55rem;
		--line-height-cols-p: calc(2.0 / 1.55);
		--letter-spacing-cols-p: 0.00em;

		--font-size-cols-big-p: 1.7rem;
		--line-height-cols-big-p: calc(2.3 / 1.7);
		--letter-spacing-cols-big-p: 0.01em;

		--font-size-h1: 2.7rem;
		--line-height-h1: calc(3.5 / 2.7);
		--letter-spacing-h1: 0em;

		--font-size-h2: 2.4rem;
		--line-height-h2: calc(6.4 / 5.4);
		--letter-spacing-h2: 0.00em;

		--font-size-cols-h2: 2.0rem;
		--line-height-cols-h2: calc(2.4 / 2.0);
		--letter-spacing-cols-h2: -0.01em;

		--font-size-cols-big-h2: 2.7rem;
		--line-height-cols-big-h2: calc(3.5 / 2.7);
		--letter-spacing-cols-big-h2: 0em;

		--font-size-cols-section-h2: 2.3rem;
		--line-height-cols-section-h2: 1.2;
		--letter-spacing-cols-section-h2: 0.02em;

		--font-size-teema-issue-h2: 2.0rem;
		--line-height-teema-issue-h2: 1.2;
		--letter-spacing-teema-issue-h2: 0.02em;

		--font-size-cols-3-h2: 2.5rem;
		--line-height-cols-3-h2: calc(3.1 / 2.5);
		--letter-spacing-cols-3-h2: -0.01em;

		--font-size-h3: 1.5rem;
		--line-height-h3: calc(1.7 / 1.5);
		--letter-spacing-h3: 0.01em;

		--font-size-ingressi: 1.7rem;
		--line-height-ingressi: calc(2.3 / 1.7);
		--letter-spacing-ingressi: 0.01em;

		--font-size-meta: 1.1rem;
		--line-height-meta: 1.5;
		--letter-spacing-meta: 0.04em;

		--font-size-author-kohde: 2.6rem;
		--line-height-author-kohde: calc(3.6 / 2.6);
		--letter-spacing-author-kohde: 0.00em;

		--font-size-nav-footer: 1.2rem;
		--line-height-nav-footer: 1.5;
		--letter-spacing-nav-footer: 0.01em;

		--font-size-cols-meta: 1.1rem;
		--line-height-cols-meta: 1.5;
		--letter-spacing-cols-meta: 0.05em;

		--font-size-caption: 1.35rem;
		--line-height-caption: calc(1.75 / 1.35);
		--letter-spacing-caption: 0.00em;

		--font-size-nav: 1.4rem;

		--font-size-big-nav: 2.0rem;

		--font-size-navcaps: 1.3rem;
		--line-height-navcaps: 1;
		--letter-spacing-navcaps: 0.02em;

		--font-size-button: 1.2rem;
		--line-height-button: 1;
		--letter-spacing-button: 0.02em;

		--font-size-quote: 2.3rem;
		--line-height-quote: calc(3.2 / 2.3);
		--letter-spacing-quote: 0.00em;

		--font-size-author-info: 1.5rem;
		--line-height-author-info: calc(2.2 / 1.5);
		--letter-spacing-author-info: 0.00em;

		--font-size-footnote: 1.4rem;
		--line-height-footnote: calc(2.2 / 1.4);
		--letter-spacing-footnote: 0.00em;
	}
}

/* Webfonts */

/*
@font-face {
   font-family: 'FooFont';
   src: url('fonts/foofont-regular.woff2') format('woff2'),
        url('fonts/foofont-regular.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'FooFont';
   src: url('fonts/foofont-regular-italic.woff2') format('woff2'),
    url('fonts/foofont-regular-italic.woff') format('woff');
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'FooFont';
   src: url('fonts/foofont-bold.woff2') format('woff2'),
        url('fonts/foofont-bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}
*/