/*
 * About history slides.
 * Positions follow the live 1200×850 desktop canvas and 320×650 mobile canvas.
 * Years use the Vintage Goods script face (see fonts/README.md).
 * The mobile canvas stops growing at 430px wide and its bottom is tighter than
 * live so the arrows stay on screen on short and wide phones.
 */

:root {
	--hr-history-w: min(100vw, 430px);
}

.hr-about-family::before,
.hr-about-family::after {
	content: none !important;
	display: none !important;
}

body.page-id-6 .et_pb_section:has(.hr-about-family) {
	background: var(--hr-cream);
	position: relative;
}

body.page-id-6 .et_pb_section:has(.hr-about-family) :is(.et_pb_row, .et_pb_column, .et_pb_module, .et_pb_text_inner) {
	height: 0;
	margin: 0 !important;
	max-width: none !important;
	min-height: 0;
	padding: 0 !important;
	position: static !important;
	width: 100% !important;
}

.hr-about-family {
	inset: 0;
	position: absolute;
}

.hr-history-stage {
	font-size: calc(var(--hr-history-w) / 320);
	height: 590em;
	left: calc(50% - var(--hr-history-w) / 2);
	position: absolute;
	top: 0;
	width: 320em;
}

.hr-history-viewport {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
}

.hr-history-slide {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	visibility: hidden;
	width: 100%;
}

.hr-history-slide.is-active {
	visibility: visible;
	z-index: 1;
}

.hr-history-stage p,
.hr-history-stage h2 {
	margin: 0 !important;
	padding: 0 !important;
}

.hr-history-kicker,
.hr-history-beef {
	color: var(--hr-khaki);
	font-family: var(--hr-display);
	font-size: calc(50 * var(--hr-history-w) / 390);
	font-weight: 400;
	left: calc(30 * var(--hr-history-w) / 320);
	letter-spacing: calc(2.5 * var(--hr-history-w) / 390);
	line-height: 0.9;
	position: absolute;
	text-transform: uppercase;
	top: calc(32 * var(--hr-history-w) / 320);
	width: calc(231 * var(--hr-history-w) / 320);
}

.hr-history-sub {
	color: var(--hr-charcoal);
	font-family: var(--hr-slab);
	font-size: calc(17 * var(--hr-history-w) / 390);
	font-weight: 500;
	left: calc(29 * var(--hr-history-w) / 320);
	letter-spacing: calc(2.55 * var(--hr-history-w) / 390);
	line-height: 1.4;
	position: absolute;
	text-transform: uppercase;
	top: calc(93 * var(--hr-history-w) / 320);
	width: calc(261 * var(--hr-history-w) / 320);
}

.hr-history-year {
	color: var(--hr-khaki);
	font-family: var(--hr-script);
	font-size: calc(50 * var(--hr-history-w) / 390);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	position: absolute;
	text-transform: none;
}

.hr-history-lead,
.hr-history-copy {
	color: var(--hr-charcoal);
	font-family: var(--hr-body);
	font-size: calc(14 * var(--hr-history-w) / 390);
	font-weight: 400;
	left: calc(29 * var(--hr-history-w) / 320);
	letter-spacing: 0;
	line-height: 1.4;
	position: absolute;
	text-transform: none;
	width: calc(238 * var(--hr-history-w) / 320);
}

.hr-history-copy i {
	font-style: italic;
}

.hr-history-photo,
.hr-history-brand {
	object-fit: cover;
	position: absolute;
}

.hr-history-brand {
	object-fit: contain;
}

.hr-history-photo--portrait,
.hr-history-photo--truck,
.hr-history-brand {
	display: none;
}

.hr-history-photo--historic {
	height: 118em;
	left: 169em;
	top: 182em;
	width: 98em;
	z-index: 3;
}

.hr-history-rule {
	background: var(--hr-charcoal);
	position: absolute;
	z-index: 1;
}

.hr-history-dot {
	border-radius: 50%;
	box-sizing: border-box;
	position: absolute;
	z-index: 3;
}

.hr-history-dot--fill {
	background: #222;
	height: 15em;
	width: 15em;
}

.hr-history-dot--open {
	background: var(--hr-cream);
	border: 2em solid var(--hr-charcoal);
	height: 20em;
	width: 20em;
}

.hr-history-rule--s1-v {
	height: 469em;
	left: 299em;
	top: 182em;
	width: 2em;
}

.hr-history-rule--s1-h {
	height: 2em;
	left: 117em;
	top: 279em;
	width: 185em;
}

.hr-history-dot--s1 {
	left: 290em;
	top: 162em;
}

.hr-history-dot--s1b {
	background: var(--hr-charcoal);
	left: 109em;
	top: 272em;
}

.hr-history-year--1916 {
	left: calc(36 * var(--hr-history-w) / 320);
	top: calc(264 * var(--hr-history-w) / 320);
}

.hr-history-lead {
	top: calc(317 * var(--hr-history-w) / 320);
}

.hr-history-copy--1916 {
	top: calc(387 * var(--hr-history-w) / 320);
	width: calc(238 * var(--hr-history-w) / 320);
}

.hr-history-rule--s2-v1 {
	height: 650em;
	left: 300em;
	top: 0;
	width: 2em;
}

.hr-history-rule--s2-h,
.hr-history-rule--s2-v2 {
	height: 2em;
	left: 128em;
	top: 60em;
	width: 172em;
}

.hr-history-rule--s2-v2 {
	top: 405em;
	width: 174em;
}

.hr-history-dot--s2a {
	left: 113em;
	top: 53em;
}

.hr-history-dot--s2b {
	left: 113em;
	top: 398em;
}

.hr-history-year--1924 {
	left: calc(36 * var(--hr-history-w) / 320);
	top: calc(43 * var(--hr-history-w) / 320);
}

.hr-history-copy--1924 {
	top: calc(96 * var(--hr-history-w) / 320);
	width: calc(238 * var(--hr-history-w) / 320);
}

.hr-history-photo--kitchen {
	height: 136em;
	left: 29em;
	top: 202em;
	width: 197em;
	z-index: 2;
}

.hr-history-year--2020 {
	left: calc(36 * var(--hr-history-w) / 320);
	top: calc(383 * var(--hr-history-w) / 320);
}

.hr-history-copy--2020 {
	top: calc(436 * var(--hr-history-w) / 320);
	width: calc(231 * var(--hr-history-w) / 320);
}

.hr-history-rule--s3-v {
	height: 296em;
	left: 299em;
	top: 0;
	width: 2em;
}

.hr-history-rule--s3-h {
	height: 2em;
	left: 150em;
	top: 60em;
	width: 150em;
}

.hr-history-rule--s3-tick {
	height: 2em;
	left: 255em;
	top: 295em;
	width: 84em;
}

.hr-history-dot--s3 {
	left: 136em;
	top: 53em;
}

.hr-history-year--today {
	left: calc(35 * var(--hr-history-w) / 320);
	top: calc(46 * var(--hr-history-w) / 320);
}

.hr-history-copy--today {
	left: calc(31 * var(--hr-history-w) / 320);
	top: calc(101 * var(--hr-history-w) / 320);
	width: calc(230 * var(--hr-history-w) / 320);
}

.hr-history-photo--sign {
	height: 129em;
	left: 31em;
	top: 250em;
	width: 179em;
	z-index: 2;
}

.hr-history-beef {
	color: var(--hr-charcoal);
	font-size: calc(35 * var(--hr-history-w) / 390);
	left: calc(21 * var(--hr-history-w) / 320);
	letter-spacing: calc(1.75 * var(--hr-history-w) / 390);
	line-height: 0.9;
	text-align: center;
	top: calc(412 * var(--hr-history-w) / 320);
	width: calc(279 * var(--hr-history-w) / 320);
}

.hr-history-cta {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	font-size: calc(12 * var(--hr-history-w) / 390);
	height: calc(50 * var(--hr-history-w) / 320);
	justify-content: center;
	left: calc(73 * var(--hr-history-w) / 320);
	padding: 0;
	position: absolute;
	text-decoration: none;
	top: calc(456 * var(--hr-history-w) / 320);
	width: calc(175 * var(--hr-history-w) / 320);
}

.hr-history-arrow {
	background: transparent;
	border: 0;
	color: var(--hr-khaki);
	cursor: pointer;
	font-size: inherit;
	height: calc(50 * var(--hr-history-w) / 320);
	padding: 0;
	position: absolute;
	width: calc(46 * var(--hr-history-w) / 320);
	z-index: 5;
}

.hr-history-arrow svg {
	display: block;
	height: 100%;
	width: 100%;
}

.hr-history-arrow--prev {
	left: calc(192 * var(--hr-history-w) / 320);
	top: calc(512 * var(--hr-history-w) / 320);
	transform: rotate(270deg);
}

.hr-history-arrow--next {
	left: calc(242 * var(--hr-history-w) / 320);
	top: calc(512 * var(--hr-history-w) / 320);
	transform: rotate(90deg);
}

.hr-history-arrow:hover {
	opacity: 0.7;
}

.hr-history-arrow:focus-visible {
	outline: 3em solid var(--hr-red);
	outline-offset: 3em;
}

@media (max-width: 767px) {
	body.page-id-6 .et_pb_section:has(.hr-about-family) {
		box-sizing: border-box;
		height: calc(var(--hr-history-w) * 590 / 320);
		min-height: calc(var(--hr-history-w) * 590 / 320);
		overflow: hidden;
		padding: 0 !important;
	}
}

@media (min-width: 768px) {
	.hr-history-stage {
		font-size: 1px;
		height: 850px;
		left: 0;
		margin-left: auto;
		margin-right: auto;
		right: 0;
		width: 1200px;
	}

	body.page-id-6 .et_pb_section:has(.hr-about-family) {
		height: 850px;
		min-height: 850px;
		overflow: hidden;
		padding: 0 !important;
	}

	.hr-history-kicker {
		font-size: 65px;
		left: 90px;
		letter-spacing: 3.25px;
		line-height: 1;
		top: 79px;
		width: 475px;
	}

	.hr-history-sub {
		font-size: 20px;
		left: 90px;
		letter-spacing: 3px;
		line-height: 28px;
		top: 156px;
		width: 482px;
	}

	.hr-history-year {
		font-size: 50px;
	}

	.hr-history-lead,
	.hr-history-copy {
		font-size: 16px;
		left: 156px;
		line-height: 1.7;
		width: 466px;
	}

	.hr-history-photo--portrait,
	.hr-history-photo--truck,
	.hr-history-brand {
		display: block;
	}

	.hr-history-photo--historic {
		height: 300px;
		left: 455px;
		top: 242px;
		width: 245px;
	}

	.hr-history-photo--portrait {
		z-index: 2;
		height: 481px;
		left: 657px;
		top: 79px;
		width: 459px;
	}

	.hr-history-brand {
		height: 139px;
		left: 1021px;
		top: 488px;
		width: 123px;
		z-index: 4;
	}

	.hr-history-rule--s1-h {
		height: 2px;
		left: 70px;
		top: 425px;
		width: 1130px;
	}

	.hr-history-rule--s1-v {
		height: 117px;
		left: 116px;
		top: 426px;
		width: 2px;
	}

	.hr-history-dot--s1 {
		left: 50px;
		top: 415px;
	}

	.hr-history-dot--s1b {
		left: 109px;
		top: 534px;
	}

	.hr-history-year--1916 {
		left: 156px;
		top: 512px;
	}

	.hr-history-lead {
		top: 579px;
	}

	.hr-history-copy--1916 {
		top: 622px;
	}

	.hr-history-rule--s2-h {
		height: 2px;
		left: 0;
		top: 425px;
		width: 1200px;
	}

	.hr-history-rule--s2-v1 {
		height: 188px;
		left: 75px;
		top: 238px;
		width: 2px;
	}

	.hr-history-rule--s2-v2 {
		height: 117px;
		left: 540px;
		top: 426px;
		width: 2px;
	}

	.hr-history-dot--s2a {
		left: 69px;
		top: 231px;
	}

	.hr-history-dot--s2b {
		left: 535px;
		top: 535px;
	}

	.hr-history-year--1924 {
		left: 109px;
		top: 198px;
	}

	.hr-history-copy--1924 {
		left: 109px;
		top: 272px;
		width: 466px;
	}

	.hr-history-photo--truck {
		height: 314px;
		left: 581px;
		top: 64px;
		width: 510px;
		z-index: 2;
	}

	.hr-history-year--2020 {
		left: 581px;
		top: 512px;
	}

	.hr-history-copy--2020 {
		left: 581px;
		top: 586px;
		width: 466px;
	}

	.hr-history-photo--kitchen {
		height: 316px;
		left: 69px;
		top: 474px;
		width: 409px;
	}

	.hr-history-rule--s3-h {
		height: 2px;
		left: 0;
		top: 425px;
		width: 622px;
	}

	.hr-history-rule--s3-v {
		height: 188px;
		left: 75px;
		top: 238px;
		width: 2px;
	}

	.hr-history-rule--s3-tick {
		height: 117px;
		left: 621px;
		top: 368px;
		width: 2px;
	}

	.hr-history-dot--s3 {
		left: 69px;
		top: 231px;
	}

	.hr-history-year--today {
		left: 132px;
		top: 200px;
	}

	.hr-history-copy--today {
		left: 132px;
		line-height: 1.45;
		top: 273px;
		width: 423px;
	}

	.hr-history-photo--sign {
		height: 316px;
		left: 103px;
		top: 475px;
		width: 437px;
	}

	.hr-history-beef {
		font-size: 65px;
		left: 766px;
		letter-spacing: 3.25px;
		line-height: 0.95;
		top: 297px;
		width: 265px;
	}

	.hr-history-cta {
		font-size: 12px;
		height: 50px;
		left: 811px;
		padding: 0 8px;
		top: 461px;
		width: 175px;
	}

	.hr-history-arrow {
		height: 50px;
		width: 50px;
	}

	.hr-history-arrow--prev {
		left: 1001px;
		top: 742px;
		transform: rotate(180deg);
	}

	.hr-history-arrow--next {
		left: 1066px;
		top: 742px;
		transform: none;
	}
}