/**
 * DS—SPECIFIC Main Styles
 * Base mobile-first styles (0-767px)
 */

 @font-face {
    font-family: 'AkzidenzBE';
    src: url('fountain/akzidenzgroteskbe-light-webfont.woff2') format('woff2'),
         url('fountain/akzidenzgroteskbe-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

 @font-face {
    font-family: 'AkzidenzBE';
    src: url('fountain/akzidenzgroteskbe-light-webfont.woff2') format('woff2'),
         url('fountain/akzidenzgroteskbe-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

 @font-face {
    font-family: 'AkzidenzBE';
    src: url('fountain/akzidenzgroteskbe-md-webfont.woff2') format('woff2'),
         url('fountain/akzidenzgroteskbe-md-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'AkzidenzBE';
    src: url('fountain/akzidenzgroteskbe-regular-webfont.woff2') format('woff2'),
         url('fountain/akzidenzgroteskbe-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'AkzidenzBE';
    src: url('fountain/akzidenzgroteskbe-regularit-webfont.woff2') format('woff2'),
         url('fountain/akzidenzgroteskbe-regularit-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'AkzidenzBE';
    src: url('fountain/akzidenzgroteskbe-bold-webfont.woff2') format('woff2'),
         url('fountain/akzidenzgroteskbe-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'AkzidenzBE';
    src: url('fountain/akzidenzgroteskbe-boldit-webfont.woff2') format('woff2'),
         url('fountain/akzidenzgroteskbe-boldit-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

/*
——————————————————————————————————————————
VARIABLES & RESET
——————————————————————————————————————————
*/

:root {
	/* Colors */
	--K00: #FFFFFF;
	--K01: #000000;
	--K02: #999999;

	/* Fonts */
	--F01: "AkzidenzBE", sans-serif;
	
	/* Font sizes */
	--FS00: 0.875rem; /* 14px */
	--FS01: 1.00rem;  /* 16px */
	--FS02: 1.25rem;  /* 20px */
	--FS03: 1.50rem;  /* 24px */
	--FS04: 2.00rem;  /* 32px */
	--FS05: 2.25rem;  /* 36px */
	--FS06: 2.50rem;  /* 40px */
	--FS07: 3.00rem;  /* 48px */
	--FS08: 4.00rem;  /* 64px */
	--FS09: 5.00rem;  /* 80px */
	--FS10: 6.00rem; /* 96px */
	
	/* Spacing */
	--S00: 0.50rem; /*  8px */
	--S01: 1.00rem; /* 16px */
	--S02: 1.25rem; /* 20px */
	--S03: 1.50rem; /* 24px */
	--S04: 2.00rem; /* 32px */
	--S05: 2.50rem; /* 40px */
	--S06: 3.00rem; /* 48px */
	--S07: 4.00rem; /* 64px */
	--S08: 5.00rem; /* 80px */
	--S09: 6.00rem; /* 96px */
	--S10: 7.00rem; /* 112px */
	--S11: 8.00rem; /* 128px */
	--S12: 10.00rem; /* 160px */

	/* SIZES */
	--bar: 80px; 

	/* GRID */
	--G01: repeat(6, 1fr); /* 6 columns grid */
	
	/* Aceleration & Transitions */
	--A01: 0.2s ease;
	--A02: 0.3s ease;
	--A03: 0.5s ease;
	--A04: 0.7s ease;
	--A05: 1.0s ease;
}

*													{ box-sizing: border-box; }
*:not(p)											{ margin: 0; padding: 0; }
img 												{ max-width: 100%; height: auto; display: block; }
a 													{ color: var(--K01); text-decoration: none; transition: color var(--A01); }
a:hover 											{ color: var(--K01); text-decoration: underline; }
p:first-child										{ margin-top: 0; }
p:last-child										{ margin-bottom: 0; }


/*
——————————————————————————————————————————
TYPOGRAPHY
——————————————————————————————————————————
*/

/* FONT FAMILIES */
body, .tool-btn 									{ font-family: var(--F01); font-weight: 400; }

/* FONT SIZES & VARIANTS */
body 												{ font-size: var(--FS01); line-height: 1.50em; }

.site-branding 										{ font-size: var(--FS04); line-height: 1.00em; }
.site-branding h1									{ font-size: 25vw; line-height: 1.00em; }
.site-branding strong 								{ font-weight: 500; line-height: 1.00em; }
.site-branding span 								{ font-weight: 300; line-height: 1.00em; }
.site-branding em 									{ font-weight: 300; font-style: normal; }
.entry-header-title 								{ font-weight: 300; font-size: var(--FS04); line-height: 1.00em; text-transform: lowercase; }
.entry-header-title span 							{ font-weight: 300; }

.main-navigation a 									{ font-weight: 500; font-size: var(--FS04); line-height: 1.00em; letter-spacing: 0.02em; text-transform: lowercase; }

h1 													{ font-size: var(--FS06); line-height: 1.15em; font-weight: 700; }
h2 													{ font-size: var(--FS04); line-height: 1.15em; font-weight: 700; letter-spacing: normal; }
h3 													{ font-size: var(--FS03); line-height: 1.15em; font-weight: 400; }
h4 													{ font-size: var(--FS02); line-height: 1.15em; font-weight: 400; }
h5 													{ font-size: var(--FS01); line-height: 1.15em; font-weight: 400; }
h6 													{ font-size: var(--FS00); line-height: 1.15em; font-weight: 400; }

h1, h2, h3, h4, h5, h6								{ display: block; /* text-box: trim-both cap alphabetic; */ }

.entry-card											{ font-size: var(--FS01); line-height: 1.40em; letter-spacing: 0.02em; text-transform: lowercase;}
.entry-card__badge									{ text-transform: uppercase; color: var(--K02); }
.entry__meta										{ font-size: var(--FS01); line-height: 1.40em; letter-spacing: 0.02em; text-transform: lowercase;}
.entry-card span									{ font-weight: 400; }

.text-regular 										{ font-size: var(--FS01); line-height: 1.40em; }
.text-medium 										{ font-size: var(--FS03); line-height: 1.30em; }
.text-large 										{ font-size: var(--FS03); line-height: 1.30em; font-weight: 700; }

.toolbar 											{ font-size: var(--FS01); line-height: 1.00em; font-weight: 500; letter-spacing: 0.02em; }
.tool-btn 											{ font-size: var(--FS01); line-height: 1.00em; font-weight: 500; letter-spacing: 0.02em; }
.tool-btn__count 									{ font-size: var(--FS01); line-height: 1.00em; font-weight: 400; letter-spacing: 0; }

.colophon 											{ font-size: var(--FS01); line-height: 1.40em; }

.site-footer 										{ font-size: var(--FS01); line-height: 1.00em; font-weight: 700; letter-spacing: 0.02em; text-transform: lowercase; }

/*
——————————————————————————————————————————
LAYOUT
——————————————————————————————————————————
*/

html, body 											{ width: 100%; height: 100%; margin: 0; padding: 0; background: var(--K00); color: var(--K01); }

main 												{ width: 100%; height: auto; margin: 0; padding: 0; position: relative; background-color: var(--K00); }
article 											{ width: 100%; height: auto; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; }

.home main 											{ z-index: 20; }

/*
——————————————————————————————————————————
MAIN HEADER & NAV
——————————————————————————————————————————
*/

#masthead 											{ width: 100%; height: 50dvh; margin: 0; padding: var(--S04) var(--S02); display: flex; flex-direction: column; gap: var(--S04); z-index: 900; transition: all var(--A03); position: relative; pointer-events: none; }
#masthead *											{ pointer-events: all; }
.home #masthead .site-branding,
.home #masthead .site-branding *					{ pointer-events: none; }

.site-branding 										{ display: flex; align-self: flex-start; }
.site-branding a 									{ color: var(--K01); text-decoration: none; align-self: flex-start; justify-self: flex-start;  display: flex; flex-direction: column; gap: 0.30em; }
.site-branding a:hover 								{ color: var(--K01); text-decoration: none; }
.site-branding a > * 								{ display: block; text-box: trim-both cap alphabetic; }
.site-branding em 									{ position: relative; top: 0.29em; display: inline-block; }

.entry-header-title 								{ padding-right: var(--S02); text-box: trim-both cap alphabetic; align-self: flex-start; }

.home #masthead										{ height: 100dvh; margin: 0 0 30dvh 0; }
.home .site-branding 								{ grid-column: 1 / span 6; margin-top: 15vh; pointer-events: none; }
.home .site-branding *								{ pointer-events: none; }

/* PRIMARY NAVIGATION */
.main-navigation 									{ width: 100%; height: 100dvh; margin: 0; padding: var(--S06) var(--S02);  background: var(--K00); position: fixed; top: 0; right: 0; transform: translateX(100%); visibility: hidden; transition: transform var(--A03), visibility var(--A03); overflow-y: auto; z-index: 999; }
.main-navigation.toggled 							{ transform: translateX(0); visibility: visible; transition: transform var(--A03), visibility 0s 0s; }

.main-navigation ul 								{ width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--S02); }
.main-navigation li 								{ margin: 0; padding: 0; display: flex; }
.main-navigation a 									{ color: var(--K01); text-decoration: none; border-bottom: solid 2px transparent; padding-bottom: 8px; margin-bottom: -8px; display: inline-block; text-box: trim-both cap alphabetic; transition: all var(--A03); }
.main-navigation a:hover, 						
.main-navigation li.current-menu-item a,
.single-works .main-navigation li.menu-item-178 a,
.single-updates .main-navigation li.menu-item-176 a	{ color: var(--K01); text-decoration: none; border-bottom: solid 2px var(--K01); }
.main-navigation a span 							{ text-box: trim-both cap alphabetic; }

/* MENU TOGGLE  */
.menu-toggle 										{ width: var(--S05); height: var(--bar); margin: 0; padding: 0; position: fixed; top: 0; right: 12px; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; z-index: 1000; }
.menu-toggle span 									{ width: var(--S03); height: 2px; display: block; background: var(--K01); transition: all var(--A02); }
.menu-toggle.toggled 								{ gap: 0;}
.menu-toggle.toggled span:nth-child(1) 				{ position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); }
.menu-toggle.toggled span:nth-child(2) 				{ opacity: 0; }
.menu-toggle.toggled span:nth-child(3) 				{ position: absolute; top: 50%; transform: translateY(-50%) rotate(-45deg); }


/*
——————————————————————————————————————————
TOOLBARS
——————————————————————————————————————————
*/

.toolbar 											{ width: 100%; height: auto; min-height: var(--bar); margin: 0; padding: 0 var(--S02); position: sticky; left: 0; top: 0; background-color: var(--K00); display: grid; grid-template-columns: var(--G01); gap: 0; z-index: 200; }
.toolbar.top										{ margin-top: calc(var(--bar) * -1); scroll-margin-top: 0; }	
.toolbar.bottom										{ margin-top: var(--S06); }
.toolbar.bottom.is-hidden 							{ display: none; }

.toolbar__tabs 										{ grid-column: 1 / span 6; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--S06); height: var(--bar); }
.toolbar__controls 									{ grid-column: 1 / span 6; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--S06); height: var(--bar); }
.toolbar__filters 									{ grid-column: 1 / span 6; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: var(--S02); flex-wrap: nowrap; margin: 0; max-height: 0; padding: 0; overflow: hidden; opacity: 0; transition: all var(--A03); }
.toolbar__pager										{ grid-column: 1 / span 6; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--S02); height: var(--bar); }

.toolbar__filters.is-open 							{ max-height: 800px; padding: 0 0 var(--S06) 0; opacity: 1; }
.toolbar__options 									{ flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: var(--S00); }
.toolbar__pages 									{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--S02); }

.tool-btn 											{ margin: 0; padding: 6px 0; background: none; -webkit-tap-highlight-color: transparent; border: none; border-bottom: solid 2px transparent; cursor: pointer; text-box: trim-both cap alphabetic; transition: all var(--A02); position: relative; }
.tool-btn:hover 									{ color: var(--K01); border-bottom: solid 2px var(--K01); }
.tool-btn.is-active 								{ color: var(--K01); border-bottom: solid 2px var(--K01); }
.tool-btn:disabled 									{ opacity: 0.3; cursor: default; }

.tool-btn__count 									{ position: absolute; left: 120%; display: none;}
.tool-btn__count::before 							{ content: '('; }
.tool-btn__count::after 							{ content: ')'; }
.tool-btn--toggle.is-active .tool-btn__count 		{ display: inline; }

.tool-btn--option 									{ color: var(--K02); }
.tool-btn--option:hover 							{ color: var(--K01); border-bottom: solid 2px transparent; }
.tool-btn--option.is-active							{ color: var(--K01); border-bottom: solid 2px var(--K01); }

.tool-btn--number.is-active							{ cursor: default; }
.tool-btn--prev, .tool-btn--next					{ width: 24px; height: 24px; background: no-repeat center center; background-size: 24px; transition: all var(--A03); border-bottom: none;}
.tool-btn--prev:hover, .tool-btn--next:hover		{ border-bottom: none; }
.tool-btn--prev 									{ background-image: url('img/icons/arrow-left.svg'); }
.tool-btn--next 									{ background-image: url('img/icons/arrow-right.svg');}

/*
——————————————————————————————————————————
LISTS
——————————————————————————————————————————
*/

.entries-grid										{ width: 100%; height: auto; margin: 0; padding: 0 var(--S02); display: grid; grid-template-columns: var(--G01); gap: var(--S08) 0; }

.entry-card 										{ will-change: transform, opacity; opacity: 1; transition: opacity var(--A02), transform var(--A02); }
.entry-card[hidden] 								{ display: none; }
.entry-card.is-hiding 								{ opacity: 0; }

.entry-card--media 									{ grid-column: span 6; }
.entry-card--text 									{ grid-column: span 6; padding-top: var(--S04); border-top: solid 1px var(--K01); }

.entry-card__link 									{ width: 100%; height: auto; margin: 0; padding: 0; text-decoration: none; color: var(--K01); display: flex; flex-direction: column; gap: var(--S02); }
.entry-card__link:hover								{ text-decoration: none; }
.entry-card__link:hover .entry-card__thumb img		{ transform: scale(1.10); }

.entry-card__cover 									{ width: 100%; height: auto; margin: 0; padding: 0; }
.entry-card__thumb 									{ width: 100%; height: auto; margin: 0; padding: 0; aspect-ratio: 16 / 9; display: block; background-color: var(--K01); overflow: hidden; }
.entry-card__thumb img 								{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--A03); }

.entry-card__info 									{ width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--S02); }
.entry-card__header 								{ width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--S01); }
.entry-card__meta 									{ width: 100%; height: auto; margin: 0; padding: 0; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; gap: var(--S02); }
.entry-card__meta-date 								{ flex: 4 1 0; min-width: 0; }
.entry-card__meta-cat 								{ flex: 6 1 0; min-width: 0; }

.home .entry-card--text 							{ border-top: solid 1px var(--K00); }
.home .entry-card__link								{ color: var(--K00); }

/*
——————————————————————————————————————————
CONTENT
——————————————————————————————————————————
*/

/* HOME */
.featured-block 									{ width: 100%; height: 50dvh; margin: 0; padding: 0; position: fixed; top: 50dvh; display: flex; flex-direction: row; gap: 10px; transition: all var(--A03); z-index: 1; }
.featured-item 										{ flex: 1; height: 100%; position: relative; overflow: hidden; }
.featured-item.desktop-only 						{ display: none; }
.featured-item a 									{ width: 100%; height: 100%; display: block; position: relative; }
.featured-image 									{ width: 100%; height: 100%; overflow: hidden; }
.featured-image img 								{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--A03); }
.featured-text 										{ width: 100%; height: 100%; margin: 0; padding: var(--S02); position: absolute; left: 0; bottom: 0; background: linear-gradient(to top, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0) 50%); opacity: 0; transition: opacity var(--A03); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }

.featured-item:hover .featured-text 				{ opacity: 1;  }
.featured-item:hover .featured-image img 			{ transform: scale(1.10); }

.featured-updates 									{ padding-top: var(--S06); background-color: var(--K01); color: var(--K00); }

/* SINGLE */
.entry-content 										{ width: 100%; height: auto; margin: 0; padding: 0 var(--S02); display: flex; flex-direction: column; gap: var(--S10); }
.content-block 										{ width: 100%; height: auto; margin: 0; padding: 0 var(--S02); display: grid; grid-template-columns: var(--G01); gap: var(--S10) var(--S02); position: relative; z-index: 20; }
.content-block--full								{ min-height: 50dvh; padding: 0 var(--S02) var(--S02) var(--S02); }

.single-updates .content-block 						{ padding: var(--S06) var(--S02);  gap: var(--S04) var(--S02); }
.single-updates .content-block:last-of-type			{ padding-bottom: 0; }

.content-block + .content-block 					{ padding-top: 0 !important; }

.cover-image 										{ width: 100%; height: 50dvh; margin: 0; padding: 0; display: block; position: fixed; top: 0; left: 0; z-index: 0; isolation: isolate; }
.cover-image__overlay								{ width: 100%; height: 100%; margin: 0; padding: 0; position: absolute; top: 0; left: 0; background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0)); opacity: 0; transition: opacity var(--A03); z-index: 2; }
.cover-image figure 								{ width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; position: relative; z-index: 1; }
.cover-image img 									{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--A03); }

.cover-image:hover .cover-image__overlay,
.cover-image.is-hovered .cover-image__overlay							{ opacity: 1; }

.entry__meta 										{ grid-column: 1 / span 6; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: var(--S06); }
.content 											{ grid-column: 1 / span 6; }
.content-block--full .content						{ grid-column: 1 / span 6; align-self: flex-end; }

.colophon 											{ grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--S04); }
.colophon-row 										{ display: flex; flex-direction: column; gap: var(--S00); }
.colophon-label 									{ display: block; text-decoration: underline; text-transform: lowercase; }

/* BIOS */
.bios-block											{ grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--S08); }

/* UL */
.content-block ul									{  list-style-type: '- '; list-style: none; display: flex; flex-direction: column; gap: 1.00em; }

/* TAB BLOCK */
.tab-block 											{ width: 100%; position: relative;  scroll-margin: var(--bar);}
#tab-gallery										{ scroll-margin: var(--bar); }
#tab-info											{ scroll-margin: var(--bar); }

/* TABS CONTAINER & INDIVIDUAL TABS */
.tabs 												{ position: relative; overflow: hidden; transition: height var(--A03); }
.tab 												{ width: 100%; }
.tab:not(.is-active) 								{ position: absolute; top: 0; left: 0; visibility: hidden; pointer-events: none; }


/*
——————————————————————————————————————————
NO RESULTS / 404
——————————————————————————————————————————
*/

.no-results 										{ width: 100%; height: auto; margin: 0; padding: var(--S02); display: grid; grid-template-columns: var(--G01); gap: var(--S02); }
.no-results[hidden] 								{ display: none; }
.no-results__message								{ grid-column: 1 / span 6; }

.no-content											{ width: 100%; height: auto; margin: 0; padding: 0 var(--S02); display: grid; grid-template-columns: var(--G01); gap: var(--S02); }
.no-content__message								{ grid-column: 1 / span 6; }


/*
——————————————————————————————————————————
FOOTER
——————————————————————————————————————————
*/

.site-footer 										{ width: 100%; height: 30vh; margin: 0; padding: var(--S02); background: var(--K00); color: var(--K01); display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; position: relative; }

.footer-copy 										{ padding-bottom: 6px; display: block; text-box: trim-both cap alphabetic; }

.footer-navigation 									{ margin: 0; padding: 0; }
.footer-navigation ul 								{ margin: 0; padding: 0; list-style: none;  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: var(--S02); }
.footer-navigation li 								{ margin: 0; }
.footer-navigation a 								{ color: var(--K01); text-decoration: none; border-bottom: solid 1px transparent; padding-bottom: 6px; transition: all var(--A03); text-box: trim-both cap alphabetic; display: block; }
.footer-navigation a:hover 							{ color: var(--K01); text-decoration: none; border-bottom: solid 1px var(--K01); }
.footer-navigation li.current-menu-item a			{ color: var(--K01); text-decoration: none; border-bottom: solid 1px	var(--K01); }

.home .site-footer  								{ background-color: var(--K01); color: var(--K00); z-index: 20; }
.home .footer-navigation a 							{ color: var(--K00); }
.home .footer-navigation a:hover 					{ color: var(--K00);  border-bottom: solid 1px var(--K00); }

/*
——————————————————————————————————————————
IMAGE ORIENTATION CLASSES
——————————————————————————————————————————
*/

img.landscape { display: block; }
img.portrait { display: block; }
img.square { display: block; }