.dearborn-inn {
	
	--brand-color--gold: #c5a878;
	
	.content-heading {
		text-transform: capitalize;
		margin-bottom: 0.25em;
	}
	.content-heading + * {
		margin-top: 0;
	}	
	
	.hero-introduction {
		padding-bottom: 4rem;
		background-image: url(/assets/work/dearborn-inn/intro-historic-bg.webp);
		background-size: 50%;
		background-repeat: no-repeat;
		background-position: 70% bottom;
	}
	
	.quote.henry-ford {
		
		color: white;
		
		background-image: url(/assets/work/dearborn-inn/inter-henry-ford-quote-bg.webp);
		background-size: cover;
		background-position: bottom;

		.subsection {
			padding-block: 10rem !important;
		}
		
		blockquote {
			margin-block: 0;
			margin-inline: auto;
			max-width: 35ch;
			
			font-family: Corbert;
			font-size: 1.5rem;
			font-style: normal;
			font-stretch: expanded;
			font-weight: 700;
			line-height: 1.2666667;
			text-align: center;

			cite {
				display: block;
				margin-block-start: 1.5rem !important;

				font-size: 1rem;
				font-style: normal;
				font-weight: 300;
			}
		}
	}
	
	.brand-idea {
				
		background-image: url("/assets/work/dearborn-inn/brand-idea-bg.webp");
		background-size: cover;
		background-position: center;
		
		.subsection {
			padding-block: 14rem !important;
		}
		
		&>*last-child {
			margin-block-end: 0;
		}
		
		font-family: Corbert;
		font-size: 3rem;
		font-style: normal;
		font-stretch: expanded;
		font-weight: 300;
		line-height: 1;
		text-align: center;
		
		strong {
			font-family: Corbert;
			font-stretch: expanded;
			font-weight: 700;
		}
		
	}
	
	.verbal-identity {

		.verbal-identity-content {
			background-image: url("/assets/work/dearborn-inn/verbal-paper-texture-white.webp");
			background-position-x: 100%;
			background-repeat: repeat-y;
			background-size: 45%;
		}

		.narrative-container {
			margin-block-start: 4rem;
			grid-column-start: page-left;
			grid-column-end: page-right;
			max-width: 100%;

			background-image: url("/assets/work/dearborn-inn/verbal-paper-texture-beige.webp");
			background-position-x: right max( ((100vw - var(--contentWidthMax-normal)) / 2), var(--subsectionSpacing-width) );
			background-position-y: 6rem;
			background-repeat: no-repeat;
			background-size: 100% calc(100% - 16rem);

		}
		.narrative {
			display: grid;
			width: min(58ch, 100%);
			margin-block: 4rem;
			margin-inline: auto;
			padding-block-end: 9em;
			padding-inline: 0 10%;
			max-width: 80ch;
			border-image-source: url("/assets/work/dearborn-inn/narrative-border.webp");
			border-image-slice: 100;
			border-image-width: 30px;
			
			font-family: Corbert;
			font-size: 1.2rem;
			line-height: 1.333334;
			
			.content-heading {
				margin-block-start: -0.5em !important;
				margin-block-end: 6em;
				color: var(--brand-color--gold);
				font-family: Corbert;
				font-size: 1.5rem;
				font-stretch: expanded;
				font-weight: 700;				
			}
			
			p:first-of-type {
				margin-bottom: 1.5em;
			}
			p:first-of-type::first-letter {
				margin-right: 0.15em;
				color: var(--brand-color--gold);
				font-family: Corbert;
				font-size: 4.5em;
				font-stretch: expanded;
				font-weight: 900;
				line-height: 0.6;
				float: left;
			}
		}
		
	}
	
	.visual-identity {
		
		.logo-horiz-lockup {
			width: 100%;
			height: auto;
			margin-block: 3rem !important;
		}
		
		
		.brand-logo-white {
			padding-block: var(--subsectionSpacing-height) !important;
			background-image: url("/assets/work/dearborn-inn/inter-logo-bg.webp");
			background-size: cover;
			background-position: center top;
			
			img {
				margin-inline: auto;
				width: min(920px, 100%);
			}
		}

		.brand-colors {

			--column-width: calc( 100vw - (2 * var(--subsectionSpacing-width)) );
			display: grid;
			grid-template-columns: 
				[page-start] 
					var(--subsectionSpacing-width) 
				[intro-start more-start rules-start] 
					var(--column-width)
				[intro-end more-end] 
					var(--subsectionSpacing-width)
				[rules-end page-end];
				
			grid-template-rows: [subsection-start intro-start rules-start] auto [intro-end] 7.5rem [rules-end more-start] auto [more-end subsection-end];
			gap: 0;
			overflow: clip;
			width: 100vw;


			.intro {
				grid-area: intro;
				width: min(500px, 100%);
				justify-self: start;
				
				&>:last-child {
					margin-bottom: 3rem;
				}
			}
			.more {
				grid-area: more;
				width: min(500px, 100%);
				justify-self: start;

				&>*:first-child {
					margin-top: 3rem;
				}
			}
			.color-rules {
				grid-area: rules;
				align-content: end;
				
				img {
					width: 100%;
					height: 27.5rem;
					object-fit: cover;
					object-position: left bottom;
				}
			}
			.color-rules-ext {
				display: none;
			}
			
			@media ( width > 700px) {
				
				--column-width: min( (var(--contentWidthMax) - var(--gap-width)) /2, (100vw - var(--gap-width)) / 2);
				display: grid;
				grid-template-columns: 
					[page-start] 
						var(--subsectionSpacing-width) 
					[margin-left-start]
						1fr
					[intro-start more-start rules-start content-start] 
						var(--column-width)
					[intro-end more-end gutter-start]
						var(--gap-width) 
					[gutter-end] 
						var(--column-width)
					[content-end] 
						1fr
					[margin-right-start]
						var(--subsectionSpacing-width)
					[rules-end page-end];
					
				grid-template-rows: [subsection-start intro-start rules-start] auto [intro-end] 7.5rem [rules-end more-start] auto [more-end subsection-end];
				gap: 0;
			
				.intro,
				.more {
					width: 100%;
				}
				.color-rules-ext {
					display: block;
					grid-column-start: content-end;
					grid-column-end: page-end;
					grid-row-start: rules-start;
					grid-row-end: rules-end;
					overflow: clip;
					
					img {
						width: 100%;
						height: 27.5rem;
						object-fit: cover;
						object-position: left bottom;
					}
				}
			
			}
		}
		
		.brand-patterns {
			
			.content-group {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax( min(194px, 100%), 1fr));
				gap: 3rem;
			}
			
		}
		
		.gallery + .gallery {
			margin-top: 2rem !important;
		}
		
		.gallery-1 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
			img {
				align-self: stretch;
				object-fit: cover;
				object-position: center
			}

			@media (width > 700px) {
				display: grid;
				grid-template-columns: 1.8fr 1fr;
			}
		}

		.gallery-2 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
			img {
				align-self: stretch;
				object-fit: cover;
				object-position: center
			}
		
			@media (width > 700px) {
				display: grid;
				grid-template-columns: 7fr 41fr;
			}
		}
		
		.gallery-3 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
			img {
				width: 100%;
				height: auto;
				align-self: center;
			}
			
			img:nth-child(1) {
				aspect-ratio: 1150/800;
			}
			img:nth-child(2) {
				aspect-ratio: 800/800;
			}
			img:nth-child(3) {
				width: 86%;
				aspect-ratio: 620/980;
				justify-self: start;
			}
		
			@media (width > 700px) {
				display: grid;
				grid-template-columns: 0.399fr 0.278fr 0.323fr;
			}
		}
		
		.gallery-4 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
			img {
			}
			
			img:nth-child(1) {
			}
			img:nth-child(2) {
			}
			img:nth-child(3) {
			}
		
			@media (width > 700px) {
				margin-inline: auto;
				width: 72%;
				display: grid;
				grid-template-columns: 0.257fr 0.486fr 0.257fr;
			}
		}
		
		.gallery-5 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
			img {
				align-self: stretch;
				object-fit: cover;
				object-position: center
			}
		
			@media (width > 700px) {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}
		}
		
		.gallery-6 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
			img {
				align-self: center;
			}
			
			img:nth-child(1) {
			}
			img:nth-child(2) {
			}
			img:nth-child(3) {
			}
			img:nth-child(4) {
			}
		
			@media (width > 700px) {
				margin-inline: auto;
				width: 76%;
				display: grid;
				grid-template-columns: 0.302fr 0.233fr 0.233fr 0.233fr;
			}
		}
		
		.gallery-7 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
			img {
				align-self: stretch;
				object-fit: cover;
				object-position: center
			}
		
			@media (width > 700px) {
				display: grid;
				grid-template-columns: 41fr 7fr;
			}
		}
		
		
		.gallery-8 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
					
			@media (width > 700px) {
				margin-inline: auto;
				width: 76%;
				display: grid;
				gap: 0;
				grid-template-columns: [ia-start] 43% [ic-start] 7% [ia-end ib-start] 7% [] 36% [ic-end] 7% [ib-end];
				grid-template-rows: [ib-start] 1fr [ia-start] 1fr [ib-end ic-start] 1fr [ia-end] 0.7fr [ic-end];
				
				img {
				}
				
				img:nth-child(1) {
					aspect-ratio: 1260/1100;
					grid-area: ib;
					align-self: start;
				}
				img:nth-child(2) {
					aspect-ratio: 1260/910;
					grid-area: ia;
					align-self: start;
				}
				img:nth-child(3) {
					aspect-ratio: 1260/910;
					grid-area: ic;
					align-self: start;
				}
				
			}
		}
		
		.gallery-9 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
					
			@media (width > 700px) {
				margin-inline: auto;
				display: grid;
				gap: 4rem;
				grid-template-columns: [grid-start] 0.13fr [col1-start] 0.42fr [col1-end col2-start] 0.34fr [col2-end] 0.13fr [grid-end];
				grid-template-rows: 
					[row1-start] 
						0.87fr 
					[row1-end row2-start] 
						0.13fr 
					[row2-end row3-start]
						auto
					[row3-end row4-start]
						auto
					[row4-end row5-start]
						auto
					[row5-end grid-end];
				
				img {
				}
				
				img:nth-child(1) {
					aspect-ratio: 2880/1600;
					align-self: start;
					grid-column-start: grid-start;
					grid-column-end: grid-end;
					grid-row-start: row1-start;
					grid-row-end: row2-end;
				}
				img:nth-child(2) {
					aspect-ratio: 1080/1080;
					align-self: start;
					grid-column-start: col2-start;
					grid-column-end: col2-end;
					grid-row-start: row2-start;
					grid-row-end: row3-end;
				}
				img:nth-child(3) {
					aspect-ratio: 1320/1200;
					align-self: start;
					grid-column-start: col1-start;
					grid-column-end: col1-end;
					grid-row-start: row3-start;
					grid-row-end: row4-end;
				}
				img:nth-child(4) {
					width: 80%;
					aspect-ratio: 850/1010;
					align-self: start;
					justify-self: start;
					grid-column-start: col2-start;
					grid-column-end: col2-end;
					grid-row-start: row4-start;
					grid-row-end: row5-end;
				}
				img:nth-child(5) {
					width: 70%;
					aspect-ratio: 980/700;
					align-self: start;
					justify-self: end;
					grid-column-start: col1-start;
					grid-column-end: col1-end;
					grid-row-start: row5-start;
					grid-row-end: row5-end;
				}	
			}
		}
		
		.gallery-11 {
			display: grid;
			grid-template-columns: 1fr;
			gap: 2rem;
			
					
			@media (width > 700px) {
				display: grid;
				gap: 1rem;
				grid-template-columns: [grid-start ia-start] 0.264fr [ia-end ib-start] 0.222fr [ib-end ic-start] 0.438fr [ic-end] auto [ic-end grid-end];
				
				img {
					align-self: center;
				}
				
				img:nth-child(1) {
					aspect-ratio: 760/440;
					grid-area: ia;
				}
				img:nth-child(2) {
					aspect-ratio: 640/900;
					grid-area: ib;
				}
				img:nth-child(3) {
					aspect-ratio: 1260/940;
					grid-area: ic;
				}
				
			}
		}
		
		.gallery-13 {
			background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.5)),url("/assets/work/dearborn-inn/gallery-the-mark-bg-01.webp");
			background-size: 100% 100%, 100% auto;
			background-position: 0 0;
			background-repeat: no-repeat;
			background-origin: border-box;
			
			@media (width > 700px) {
				background-image: url("/assets/work/dearborn-inn/gallery-the-mark-bg-01.webp");
				background-size: 2100px 450px;			
				background-position: center top;
			}
			
			.diagram {
				grid-column-start: page-left;
				grid-column-end: page-right;
				width: 100%;
				height: 920px;
				margin-top: -4rem;
				object-fit: cover;
				object-position: center top;
			}
		}

	}
	
	.claras-table-hero {
		background-image: url("/assets/work/dearborn-inn/claras-table-hero-bg.webp");
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;

		.content-group {
			display: grid;
			height: max(10rem, 80vh);
		}		
		img {
			width: min(128px, 30%);
			align-self: center;
			justify-self: center;
		}
	}
	
	.claras-table-intro {

		.content-group {
			margin-inline: var(--subsectionSpacing-width);
			display: grid;
			gap: 2rem;
			grid-template-columns: 0.5fr 0.5fr;
			grid-template-areas:
				"cp-a cp-a"
				"im-1 im-4"
				"im-2 im-4"
				"im-3 im-4"
				"cp-b cp-b";
		}
		
		@media (width > 700px) {

			.content-group {
				grid-template-columns: 0.9fr 0.45fr 0.45fr 1.2fr;
				grid-template-areas:
					"cp-a cp-a .    im-4"
					".    im-3 im-3 im-4"
					"im-1 im-3 im-3 im-4"
					"im-1 im-2 im-2 im-4"
					".    im-2 im-2 .   "
					"cp-b cp-b .    .   ";
			}
			
		}
		
		.intro-copy-a {
			grid-area: cp-a;
		}
		.intro-copy-b {
			grid-area: cp-b;
		}
		.intro-image-1 {
			grid-area: im-1;
		}
		.intro-image-2 {
			grid-area: im-2;
		}
		.intro-image-3 {
			grid-area: im-3;
		}
		.intro-image-4 {
			grid-area: im-4;
			align-self: center;
		}
	}
	
	.claras-table-inter-bar {
		display: block;
		img {
			width: 100%;
			height: auto;
		}
	}
	
	.claras-table-id {
		
		.wordmark,
		.monogram,
		.colors {
			margin-inline: auto;
			margin-block: 6rem;
		}
		.interior {
			margin-inline: auto;
			margin-block-end: 6rem;
		}

		.wordmark {
			width: min(577px, 80%);
		}
		.monogram {
			width: min(170px, 30%);
		}
		
		.colors {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto auto;
			gap: 2rem;
		}				
		@media (width > 700px) {
			.colors {
				display: grid;
				grid-template-columns: 69fr 52fr;
				grid-template-rows: auto;
				gap: 2rem;
			}				
		}
	}

	.four-vagabonds-hero {
		aspect-ratio: 19/10;
		
		background-image: url("/assets/work/dearborn-inn/four-vagabounds-hero-bg.webp");
		background-size: cover;
		background-postiion: center;
		background-repeat: no-repeat;
		
		.content-group {
			display: grid;
		}
		
		img {
			width: min(765px, 80%);
			height: auto;
			align-self: center;
			justify-self: center;
		}
	}

	.four-vagabonds-logo {
		width: min(767px, 80%);
		margin-inline: auto;
	}

	.four-vagabonds-colors {
		width: min(1240px, 80%);
		margin-inline: auto;
	}
	
	.four-vegabonds-collage {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto;
		gap: 0;
		background-color: black;
		
		.brand-on-wood {
			grid-column-start: 1;
			grid-column-end: 2;
			grid-row-start: 1;
			grid-row-end: 3;
			align-self: stretch;
			object-fit: cover;
			object-position: center center;
		}
		.diagram{
			grid-column-start: 1;
			grid-column-end: 2;
			grid-row-start: 3;
			grid-row-end: 4;
			aspect-ratio: 2/1;
			object-fit: cover;
			object-position: center top;
		}
		.whisky {
			margin-block-start: 12rem;
			grid-column-start: 1;
			grid-column-end: 2;
			grid-row-start: 4;
			grid-row-end: 6;
			aspect-ratio: 4/1;
			align-self: stretch;
			object-fit: cover;
			object-position: center center;
		}
		.bartender {
			grid-column-start: 1;
			grid-column-end: 2;
			grid-row-start: 2;
			grid-row-end: 4;
			width: 80%;
			justify-self: center;
			align-self: end;
		}
		.menu {
			margin-block: 2rem 0;
			grid-column-start: 1;
			grid-column-end: 2;
			grid-row-start: 5;
			grid-row-end: 6;
			width: 70%;
			justify-self: start;
			align-self: end;
		}
	}
	
	@media (width > 700px) {
	
		.four-vegabonds-collage {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto auto auto auto auto;
			gap: 0;		
			
			.brand-on-wood {
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row-start: 1;
				grid-row-end: 3;
			}
			.diagram{
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row-start: 3;
				grid-row-end: 4;
				aspect-ratio: 2880/860;
				object-fit: cover;
				object-position: center top;
			}
			.whisky {
				margin-block: 0;
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row-start: 4;
				grid-row-end: 6;
				aspect-ratio: revert;
			}
			.bartender {
				grid-column-start: 2;
				grid-column-end: 3;
				grid-row-start: 2;
				grid-row-end: 4;
				width: 80%;
				justify-self: center;
				align-self: end;
			}
			.menu {
				margin-block: 0;
				grid-column-start: 1;
				grid-column-end: 2;
				grid-row-start: 3;
				grid-row-end: 5;
				aspect-ratio: revert;
				width: 52%;
				justify-self: center;
				align-self: center;
			}
		}
	
	}
	


	.summary {
		color: white;
		background-image: url("/assets/work/dearborn-inn/summary-bg.webp");
		background-size: cover;
		
		.heading-summary + * {
			max-width: 40ch;
		}
		
		.brand-icon-container {
			margin-block-start: var(--subsectionSpacing-height);
			grid-column-start: content-left;
			grid-column-end: conetnt-right;
		}
		.brand-icon {
			margin-inline: auto;
			width: min(180px, 80%);
			height: auto;
		}
	}
	
}

.logo-before-after {
	margin-block: 3rem !important;
	padding: 0 !important;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	background-color: #333333;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax( min(400px, 100%), 1fr));
	gap: 1px;
	justify-content: center;
	
	.logo-before,
	.logo-after {
		align-items: center;
		justify-content: center;
		justify-self: stretch;
		padding-block: 2rem;
		padding-inline: 2rem;
		background-color: white;
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		img {
			margin: 2rem;
			width: max(300px, 80%);
			justify-self: center;
		}
	}
	
	.label {
		color: #777;
		font-weight: 700;
		font-size: 1.2rem;
		text-transform: uppercase;
		text-align: center;
	}
}