:root {
	color-scheme:only light;
	--paper:#FFFBEB;
	--paper-2:#FDF0C8;
	--type:#1A1A1A;
	--type-soft:#5C5A4F;
	--mark:#111111;
	--mark-text:#FFFBEB;
	--hair:rgba(92,90,79,.42);
	--display:"Fraunces",Georgia,"Times New Roman",serif;
	--sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
	--col:680px;
	--gut:20px;
}

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

html {
	background-color:var(--paper-2);
	color:var(--type);
	-webkit-text-size-adjust:100%;
}

body {
	margin:0;
	background-color:var(--paper-2);
	color:var(--type);
	font-family:var(--sans);
	font-size:1.0625rem;
	line-height:1.7;
	overflow-wrap:break-word;
}

body::before {
	content:"";
	position:fixed;
	top:0;
	left:0;
	right:0;
	height:2px;
	background-color:var(--mark);
	z-index:50;
}

img {
	display:block;
	max-width:100%;
	height:auto;
}

a {
	color:var(--mark);
	text-underline-offset:3px;
	transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
	outline:2px solid var(--mark);
	outline-offset:1px;
}

p {
	margin:0 0 1.25rem;
}

.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.skip {
	position:absolute;
	left:12px;
	top:-120px;
	z-index:60;
	display:inline-flex;
	align-items:center;
	min-height:45px;
	padding:0 18px;
	background-color:var(--mark);
	color:var(--mark-text);
	font-weight:600;
	text-decoration:none;
}

.skip:focus {
	top:10px;
}

.masthead {
	background-color:var(--paper);
	color:var(--type);
}

.mast-strip {
	background-color:var(--paper);
	color:var(--type-soft);
	border-bottom:1px solid var(--hair);
	font-size:.75rem;
	letter-spacing:.12em;
	line-height:1.2;
}

.mast-strip-in {
	display:flex;
	justify-content:space-between;
	gap:12px;
	max-width:1100px;
	margin:0 auto;
	padding:11px var(--gut);
}

.brand-row {
	background-color:var(--paper);
	color:var(--type);
}

.brand-in {
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:6px 12px;
	max-width:1100px;
	margin:0 auto;
	padding:14px var(--gut) 18px;
}

.brand {
	display:inline-flex;
	align-items:center;
	gap:9px;
	min-height:45px;
	color:var(--type);
	text-decoration:none;
}

.brand-bars {
	width:30px;
	height:30px;
	flex:none;
}

.brand-name {
	font-family:var(--display);
	font-size:clamp(1.6rem,1.35rem+1.3vw,2.35rem);
	line-height:1;
	letter-spacing:-.02em;
	color:var(--type);
}

.brand-name b {
	font-weight:800;
}

.brand-name i {
	font-weight:300;
	font-style:italic;
}

.brand-sep {
	width:1px;
	height:26px;
	background-color:var(--type-soft);
	flex:none;
}

.ad-label {
	font-size:.75rem;
	font-weight:500;
	letter-spacing:.05em;
	color:var(--type);
	border-bottom:2px solid var(--mark);
	padding-bottom:2px;
	line-height:1.3;
	white-space:nowrap;
}

.hero {
	margin:0;
	background-color:var(--paper-2);
	color:var(--type-soft);
}

.hero img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	object-position:38% 40%;
	box-shadow:0 10px 0 var(--mark);
}

.hero-cap {
	width:calc(100% - 2 * var(--gut));
	max-width:var(--col);
	margin:0 auto;
	padding:24px 0 8px;
	font-size:.875rem;
	line-height:1.5;
	color:var(--type-soft);
}

.desk {
	background-color:var(--paper-2);
	color:var(--type);
	padding:12px 0 0;
}

.sheet {
	background-color:var(--paper);
	color:var(--type);
	max-width:808px;
	margin:0 auto;
	padding:36px var(--gut) 52px;
	border-top:1px solid var(--type-soft);
	border-bottom:1px solid var(--type-soft);
}

.prose {
	max-width:var(--col);
	margin:0 auto;
}

.title-block {
	max-width:var(--col);
	margin:0 auto 2rem;
	text-align:center;
}

h1,h2 {
	font-family:var(--display);
	color:var(--type);
	font-weight:600;
}

h1 {
	font-size:clamp(1.75rem,1.2rem + 2.6vw,2.9rem);
	line-height:1.13;
	letter-spacing:-.015em;
	margin:0 0 1.1rem;
}

h2 {
	font-size:clamp(1.45rem,1.15rem + 1.3vw,2rem);
	line-height:1.2;
	letter-spacing:-.01em;
	margin:0 0 1.1rem;
}

.dek {
	max-width:36rem;
	margin:0 auto 1.4rem;
	font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);
	line-height:1.6;
	color:var(--type-soft);
}

.byline {
	display:inline-block;
	margin:0;
	padding-top:.9rem;
	border-top:1px solid var(--hair);
	font-size:.875rem;
	letter-spacing:.03em;
	color:var(--type-soft);
}

.piece {
	position:relative;
	margin-top:2.75rem;
	padding-top:2.5rem;
	border-top:1px solid var(--hair);
}

.piece::before {
	content:"";
	position:absolute;
	top:-2px;
	left:0;
	width:88px;
	height:3px;
	background-color:var(--mark);
}

.lead-in {
	font-size:1.125rem;
}

.prose strong {
	font-weight:600;
}

.blind-list {
	list-style:none;
	margin:1.5rem 0 1.5rem;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:1.1rem;
}

.blind-list li {
	position:relative;
	padding-left:2.4rem;
}

.blind-list li::before {
	content:"";
	position:absolute;
	left:0;
	top:.28rem;
	width:20px;
	height:20px;
	background-color:var(--mark);
}

.blind-list li::after {
	content:"";
	position:absolute;
	left:6px;
	top:.5rem;
	width:9px;
	height:5px;
	border-left:2px solid var(--mark-text);
	border-bottom:2px solid var(--mark-text);
	transform:rotate(-45deg);
}

.blind-list strong {
	display:block;
	font-family:var(--display);
	font-size:1.15rem;
	font-weight:600;
	line-height:1.35;
	margin-bottom:.15rem;
}

.steps {
	list-style:none;
	margin:1.5rem 0 1.75rem;
	padding:.25rem 0 .25rem 1.4rem;
	border-left:2px solid var(--mark);
	display:flex;
	flex-direction:column;
	gap:1.25rem;
}

.steps li {
	margin:0;
}

.steps strong {
	display:block;
	font-family:var(--display);
	font-size:1.15rem;
	font-weight:600;
	line-height:1.35;
	margin-bottom:.15rem;
}

.concepts {
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
	margin:1.75rem 0 1.75rem;
}

.concepts div {
	background-color:var(--paper-2);
	color:var(--type);
	border:1px solid var(--hair);
	padding:18px 18px 16px;
}

.concepts dt {
	font-family:var(--display);
	font-size:1.2rem;
	font-weight:600;
	line-height:1.25;
	margin:0 0 .45rem;
}

.concepts dd {
	margin:0;
	font-size:.96rem;
	line-height:1.6;
	color:var(--type);
}

.pic {
	margin:2.5rem 10px 2.75rem 0;
}

.pic img {
	width:100%;
	border:1px solid var(--mark);
	box-shadow:10px 10px 0 var(--mark);
	object-fit:cover;
}

.pic-wide img {
	aspect-ratio:4/3;
	object-position:50% 30%;
}

.pic-kitchen img {
	aspect-ratio:16/10;
	object-position:50% 40%;
}

.cta-row {
	margin:2.25rem 0 .5rem;
}

.cta-note {
	margin:0 0 .6rem;
	font-size:.8125rem;
	line-height:1.5;
	color:var(--type-soft);
}

.cta {
	display:inline-flex;
	align-items:center;
	gap:.7rem;
	min-height:48px;
	padding:10px 0 6px;
	font-family:var(--sans);
	font-size:clamp(1.15rem,1rem + .7vw,1.4rem);
	font-weight:600;
	line-height:1.3;
	letter-spacing:-.005em;
	color:var(--mark);
	text-decoration:none;
	border-bottom:4px solid var(--mark);
}

.cta svg {
	width:12px;
	height:12px;
	flex:none;
	transition:transform .2s ease;
}

.cta:hover {
	color:var(--type-soft);
	border-bottom-color:var(--type-soft);
}

.cta:hover svg {
	transform:translateX(5px);
}

.limits {
	margin:0 0 1.25rem;
}

.doc-title {
	font-size:clamp(1.75rem,1.3rem + 2.2vw,2.6rem);
	line-height:1.15;
	margin:0 0 .75rem;
	text-align:left;
}

.legal-meta {
	margin:0 0 1.5rem;
	font-size:.875rem;
	letter-spacing:.03em;
	color:var(--type-soft);
}

.summary {
	margin:0 0 2rem;
	padding-bottom:1.75rem;
	border-bottom:1px solid var(--hair);
	font-size:1.1875rem;
	line-height:1.6;
}

.doc h2 {
	font-size:clamp(1.3rem,1.1rem + .9vw,1.65rem);
	margin:2.25rem 0 .75rem;
}

.doc ul {
	margin:0 0 1.25rem;
	padding-left:1.25rem;
}

.doc li {
	margin-bottom:.5rem;
}

.doc-back {
	margin:2.5rem 0 0;
}

.doc-back a {
	display:inline-flex;
	align-items:center;
	min-height:45px;
	font-weight:600;
}

.timeline {
	margin:1.5rem 0 0 6px;
	padding:0 0 0 1.6rem;
	border-left:2px solid var(--mark);
}

.tl-step {
	position:relative;
	margin:0 0 2.25rem;
}

.tl-step::before {
	content:"";
	position:absolute;
	left:calc(-1.6rem - 8px);
	top:.6rem;
	width:14px;
	height:14px;
	background-color:var(--paper);
	border:2px solid var(--mark);
	border-radius:50%;
}

.tl-step h2 {
	margin:0 0 .5rem;
}

.tl-step p:last-child {
	margin-bottom:0;
}

.contact-list {
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
	margin:1.5rem 0 2rem;
}

.contact-list div {
	background-color:var(--paper-2);
	color:var(--type);
	border:1px solid var(--hair);
	padding:18px;
}

.contact-list dt {
	font-family:var(--display);
	font-size:1.15rem;
	font-weight:600;
	margin:0 0 .35rem;
}

.contact-list dd {
	margin:0;
	line-height:1.6;
}

.tail-area {
	background-color:var(--mark);
	color:var(--paper-2);
	padding:44px var(--gut) 52px;
	text-align:center;
	font-size:.9375rem;
	line-height:1.65;
}

.tail-area a {
	color:var(--mark-text);
	text-decoration:none;
	border-bottom:1px solid transparent;
}

.tail-area a:hover {
	border-bottom-color:var(--mark-text);
}

.tail-area a:focus-visible {
	outline:2px solid var(--mark-text);
	outline-offset:1px;
}

.bottom-links {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:0 6px;
	max-width:720px;
	margin:0 auto 1.75rem;
}

.bottom-links a {
	display:inline-flex;
	align-items:center;
	min-height:45px;
	padding:0 10px;
	font-weight:500;
}

.colophon-info {
	max-width:65ch;
	margin:0 auto 1.75rem;
	padding:1.5rem 0;
	border-top:1px solid rgba(253,240,200,.35);
	border-bottom:1px solid rgba(253,240,200,.35);
	color:var(--paper-2);
}

.publisher-details {
	max-width:760px;
	margin:0 auto;
	font-size:.8125rem;
	line-height:1.7;
	color:var(--paper-2);
}

.imprint-line {
	display:block;
	overflow-wrap:anywhere;
}

.nb {
	white-space:nowrap;
}

@media (min-width:540px) {
	:root {
		--gut:32px;
	}
	.hero img {
		aspect-ratio:16/9;
	}
	.sheet {
		padding-top:48px;
		padding-bottom:64px;
	}
	.concepts {
		gap:16px;
	}
	.brand-bars {
		width:34px;
		height:34px;
	}
	.ad-label {
		font-size:.8125rem;
	}
	.contact-list {
		grid-template-columns:1fr 1fr;
	}
}

@media (min-width:860px) {
	:root {
		--gut:40px;
	}
	body {
		font-size:1.125rem;
	}
	.hero img {
		aspect-ratio:21/9;
		max-height:600px;
		object-position:38% 38%;
	}
	.hero-cap {
		padding-top:28px;
	}
	.desk {
		padding:56px 24px 72px;
	}
	.sheet {
		padding:64px 64px 72px;
		border:1px solid var(--type-soft);
	}
	.piece {
		margin-top:3.5rem;
		padding-top:3rem;
	}
	.concepts {
		grid-template-columns:repeat(3,1fr);
	}
	.concepts dd {
		font-size:.94rem;
	}
	.title-block {
		margin-bottom:2.75rem;
	}
	.tail-area {
		padding:56px var(--gut) 64px;
	}
}

@media (min-width:1180px) {
	.hero img {
		max-height:640px;
	}
	.desk {
		padding-top:72px;
	}
	.pic {
		margin-left:-24px;
		margin-right:34px;
	}
}
