:root {
		--iron-950: #101010;
		--iron-900: #161616;
		--iron-850: #1c1b1a;
		--iron-800: #232220;
		--line: #3b3934;
		--line-soft: #322f2b;
		--bone: #f1ede5;
		--bone-dim: #b9b3a8;
		--steel: #8f8b82;
		--oak: #d9a521;
		--oak-bright: #eabc42;
		--display: 'Oswald', sans-serif;
		--body: 'Archivo', sans-serif;
		--mono: 'IBM Plex Mono', monospace;
		--script: 'Great Vibes', cursive;
		--radius: 4px;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box
	}

	html {
		scroll-behavior: smooth
	}

	body {
		background: var(--iron-950);
		color: var(--bone);
		font-family: var(--body);
		font-size: 16px;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased
	}

	a {
		color: inherit;
		text-decoration: none
	}

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

	button,
	input,
	textarea {
		font: inherit
	}

	:focus-visible {
		outline: 2px solid var(--oak);
		outline-offset: 3px
	}

	::selection {
		background: var(--oak);
		color: var(--iron-950)
	}

	.topbar {
		position: sticky;
		top: 0;
		z-index: 50;
		background: rgba(16, 16, 16, .92);
		backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--line)
	}

	.topbar-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 32px;
		height: 64px;
		display: flex;
		align-items: center;
		gap: 40px
	}

	.logo {
		display: flex;
		align-items: baseline;
		gap: 10px;
		color: var(--bone)
	}

	.logo .script {
		font-family: var(--script);
		font-size: 30px;
		line-height: 1;
		color: var(--bone)
	}

	.logo .caps {
		font-family: var(--mono);
		font-size: 10px;
		letter-spacing: .42em;
		text-transform: uppercase;
		color: var(--oak);
		position: relative;
		top: -2px
	}

	.nav {
		display: flex;
		gap: 28px;
		margin-left: auto
	}

	.nav a {
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--bone-dim);
		transition: color .15s
	}

	.nav a:hover {
		color: var(--oak-bright)
	}

	.topbar-phone {
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .05em;
		background: var(--oak);
   	 	color: var(--iron-950);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		padding: 8px 14px;
		transition: border-color .15s, color .15s
	}

	.topbar-phone:hover {
		border-color: var(--oak);
		color: var(--oak-bright)
	}

	.hero {
		max-width: 1280px;
		margin: 0 auto;
		padding: 72px 32px 88px;
		display: grid;
		grid-template-columns: 1.1fr .9fr;
		gap: 64px;
		align-items: center
	}

	.eyebrow {
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .18em;
		text-transform: uppercase;
		color: var(--oak);
		margin-bottom: 20px
	}

	.hero h1 {
		font-family: var(--display);
		font-size: clamp(48px, 6.5vw, 88px);
		line-height: 1.02;
		letter-spacing: .015em;
		text-transform: uppercase;
		font-weight: 500
	}

	.hero h1 em {
		font-style: normal;
		color: var(--oak)
	}

	.hero p {
		margin-top: 24px;
		max-width: 52ch;
		color: var(--bone-dim);
		font-size: 17px
	}

	.hero-ctas {
		margin-top: 36px;
		display: flex;
		gap: 16px;
		flex-wrap: wrap
	}

	.btn {
		display: inline-block;
		font-family: var(--mono);
		font-size: 13px;
		letter-spacing: .1em;
		text-transform: uppercase;
		padding: 16px 28px;
		border: 1px solid var(--oak);
		border-radius: var(--radius);
		transition: background .15s, color .15s;
		cursor: pointer
	}

	.btn-solid {
		background: var(--oak);
		color: var(--iron-950);
		font-weight: 600
	}

	.btn-solid:hover {
		background: var(--oak-bright);
		border-color: var(--oak-bright)
	}

	.btn-shine {
		position: relative;
		overflow: hidden
	}

	.btn-shine::before {
		content: "";
		position: absolute;
		top: -25%;
		bottom: -25%;
		left: -95%;
		width: 38%;
		background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 50%, transparent 100%);
		transform: skewX(-20deg);
		pointer-events: none
	}

	.btn-shine:hover::before {
		animation: shine .6s ease forwards
	}

	@keyframes shine {
		to {
			left: 160%
		}
	}

	.btn-ghost {
		color: var(--oak)
	}

	.btn-ghost:hover {
		background: color-mix(in srgb, var(--oak) 8%, transparent)
	}

	.hero-facts {
		margin-top: 44px;
		display: flex;
		gap: 0;
		border-top: 1px solid var(--line)
	}

	.fact {
		padding: 16px 24px 0 0;
		margin-right: 24px
	}

	.fact+.fact {
		border-left: 1px solid var(--line);
		padding-left: 24px
	}

	.fact b {
		display: block;
		font-family: var(--mono);
		font-size: 15px;
		font-weight: 600;
		color: var(--bone)
	}

	.fact span {
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--steel)
	}

	.door-draw {
		position: relative;
		min-height: 560px;
		border: 1px solid var(--line);
		background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
		overflow: hidden;
		border-radius: var(--radius)
	}

	.door-draw svg {
		width: 100%;
		height: 100%;
		display: block
	}

	.dwg-label {
		font-family: var(--mono);
		font-size: 16px;
		letter-spacing: .06em;
		fill: var(--steel)
	}

	.dwg-dim {
		font-family: var(--mono);
		font-size: 22px;
		font-weight: 600;
		fill: var(--oak)
	}

	.door-draw .trace {
		stroke-dasharray: 2400;
		stroke-dashoffset: 2400;
		animation: trace 2.4s ease-out forwards
	}

	@keyframes trace {
		to {
			stroke-dashoffset: 0
		}
	}

	.strip {
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		background: var(--iron-900)
	}

	.strip-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 14px 32px;
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		justify-content: space-between
	}

	.strip span {
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--steel)
	}

	.strip b {
		color: var(--bone);
		font-weight: 500
	}

	.section {
		max-width: 1280px;
		margin: 0 auto;
		padding: 88px 32px
	}

	.section-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 24px;
		margin-bottom: 32px;
		border-bottom: 1px solid var(--line);
		padding-bottom: 20px
	}

	.section-head h2 {
		font-family: var(--display);
		font-size: clamp(30px, 3.5vw, 44px);
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing: .02em
	}

	.section-head .tag {
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--oak)
	}

	.builder {
		display: grid;
		grid-template-columns: 1.15fr .85fr;
		gap: 48px;
		align-items: start
	}

	.controls {
		display: grid;
		gap: 28px
	}

	.field label {
		display: block;
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--steel);
		margin-bottom: 10px
	}

	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px
	}

	.chip {
		font-family: var(--mono);
		font-size: 13px;
		padding: 10px 16px;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		background: var(--iron-900);
		color: var(--bone-dim);
		cursor: pointer;
		transition: border-color .12s, color .12s, background .12s
	}

	.chip:hover {
		border-color: var(--steel);
		color: var(--bone)
	}

	.chip[aria-pressed="true"] {
		border-color: var(--oak);
		color: var(--oak-bright);
		background: color-mix(in srgb, var(--oak) 7%, transparent)
	}

	.chip small {
		display: block;
		font-size: 10px;
		color: var(--steel);
		letter-spacing: .05em
	}

	.note-field textarea {
		width: 100%;
		background: var(--iron-900);
		border: 1px solid var(--line);
		color: var(--bone);
		font-family: var(--mono);
		font-size: 13px;
		padding: 12px;
		min-height: 84px;
		resize: vertical
	}

	.louvre {
		border: 1px solid var(--line);
		border-radius: var(--radius);
		background: var(--iron-900);
		overflow: hidden
	}

	.louvre summary {
		list-style: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 16px 18px;
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--bone)
	}

	.louvre summary::-webkit-details-marker {
		display: none
	}

	.louvre summary::after {
		content: "+";
		margin-left: auto;
		font-size: 16px;
		color: var(--oak);
		transition: transform .15s
	}

	.louvre[open] summary::after {
		transform: rotate(45deg)
	}

	.louvre summary:hover {
		color: var(--oak-bright)
	}

	.louvre .preview {
		font-size: 12px;
		letter-spacing: .04em;
		text-transform: none;
		color: var(--oak)
	}

	.louvre .louvre-body {
		padding: 4px 18px 20px;
		display: grid;
		gap: 24px;
		border-top: 1px solid var(--line-soft)
	}

	.louvre .louvre-body .field:first-child {
		padding-top: 16px
	}

	.louvre-hi {
		border-color: var(--oak)
	}

	.louvre-hi summary {
		background: var(--oak);
		color: #101010
	}

	.louvre-hi summary:hover {
		background: var(--oak-bright);
		color: #101010
	}

	.louvre-hi summary::after {
		color: #101010
	}

	.louvre-hi .preview {
		color: rgba(10, 10, 10, .95)
	}

	.louvre-hi .louvre-body {
		border-top: none
	}

	.ticket {
		position: sticky;
		top: 88px;
		background: var(--iron-850);
		border: 1px solid var(--line)
	}

	.ticket-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px 20px;
		border-bottom: 1px dashed var(--line)
	}

	.ticket-head .wo {
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .1em;
		color: var(--steel)
	}

	.ticket-head .status {
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--oak);
		border: 1px solid var(--oak);
		padding: 4px 10px
	}

	.ticket-body {
		padding: 20px
	}

	.ticket-row {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		font-family: var(--mono);
		font-size: 13px;
		padding: 9px 0;
		border-bottom: 1px solid var(--line-soft)
	}

	.ticket-row .k {
		color: var(--steel);
		letter-spacing: .05em;
		text-transform: uppercase;
		font-size: 11px;
		padding-top: 2px
	}

	.ticket-row .v {
		color: var(--bone);
		text-align: right
	}

	.ticket-row .v small {
		display: block;
		color: var(--oak);
		font-size: 11px
	}

	.ticket-total {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 20px;
		border-top: 1px dashed var(--line)
	}

	.ticket-total .k {
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--steel)
	}

	.ticket-total .v {
		font-family: var(--display);
		font-size: 40px;
		color: var(--oak);
		letter-spacing: .02em
	}

	.ticket-actions {
		padding: 0 20px 20px;
		display: grid;
		gap: 10px
	}

	.qty {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		font-family: var(--mono);
		overflow: hidden
	}

	.qty button {
		background: none;
		border: none;
		color: var(--bone);
		font-size: 18px;
		width: 48px;
		height: 48px;
		cursor: pointer
	}

	.qty button:hover {
		color: var(--oak-bright)
	}

	.qty output {
		font-size: 14px
	}

	.ticket-fine {
		padding: 0 20px 20px;
		font-family: var(--mono);
		font-size: 11px;
		color: var(--steel);
		line-height: 1.7
	}

	.cats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1px;
		background: var(--line)
	}

	.cat {
		background: var(--iron-900);
		padding: 32px 24px 40px;
		transition: background .15s;
		position: relative
	}

	.cat:hover {
		background: var(--iron-850)
	}

	.cat .idx {
		font-family: var(--mono);
		font-size: 11px;
		color: var(--steel);
		letter-spacing: .1em
	}

	.cat h3 {
		color: #fff;
		font-family: var(--display);
		font-size: 26px;
		text-transform: uppercase;
		font-weight: 400;
		margin: 14px 0 10px
	}

	.cat p {
		font-size: 14px;
		color: var(--bone-dim)
	}

	.cat .go {
		position: absolute;
		top: 28px;
		right: 24px;
		color: var(--oak);
		font-family: var(--mono);
		opacity: 0;
		transition: opacity .15s
	}

	.cat:hover .go {
		opacity: 1
	}

	.cat-flip {
		background: var(--oak)
	}

	.cat-flip .idx {
		color: rgba(10, 10, 10, .92)
	}

	.cat-flip h3 {
		color: #101010
	}

	.cat-flip p {
		color: rgba(10, 10, 10, .95)
	}

	.cat-flip .go {
		color: #101010
	}

	.cat-flip:hover {
		background: var(--oak-bright)
	}

	.uses {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 1px;
		background: var(--line)
	}

	.use {
		background: var(--iron-900);
		padding: 22px
	}

	.use .chiprow {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 12px
	}

	.use .colorchip {
		width: 34px;
		height: 34px;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		flex-shrink: 0
	}

	.use .tok {
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .06em;
		color: var(--bone);
		line-height: 1.4
	}

	.use .tok small {
		display: block;
		color: var(--steel);
		font-size: 10px;
		letter-spacing: .08em;
		text-transform: uppercase
	}

	.use p.role {
		font-size: 13px;
		color: var(--bone-dim);
		margin-bottom: 14px;
		min-height: 58px
	}

	.use .demo {
		border: 1px dashed var(--line-soft);
		border-radius: var(--radius);
		padding: 14px;
		font-size: 13px;
		line-height: 1.5
	}

	.use .demo .d-head {
		font-family: var(--display);
		font-size: 18px;
		text-transform: uppercase;
		font-weight: 500;
		color: var(--bone)
	}

	.use .demo .d-body {
		color: var(--bone-dim);
		font-size: 13px
	}

	.use .demo .d-label {
		font-family: var(--mono);
		font-size: 10px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--steel)
	}

	.use .demo .d-btn {
		display: inline-block;
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .1em;
		text-transform: uppercase;
		background: var(--oak);
		color: var(--iron-950);
		border-radius: var(--radius);
		padding: 8px 14px;
		font-weight: 600
	}

	.use .demo .d-link {
		font-family: var(--mono);
		font-size: 12px;
		color: var(--oak-bright)
	}

	.use .demo .d-panel {
		border-radius: var(--radius);
		padding: 10px 12px;
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .08em;
		color: var(--bone-dim)
	}

	.uses.type-grid {
		grid-template-columns: repeat(4, 1fr)
	}

	.use .fname {
		font-size: 20px;
		color: var(--bone);
		line-height: 1.2
	}

	.use .fname small {
		display: block;
		font-family: var(--mono);
		font-size: 10px;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--steel);
		margin-top: 4px
	}

	.use .demo .t-script {
		font-family: var(--script);
		font-size: 40px;
		line-height: 1.1;
		color: var(--bone)
	}

	.use .demo .t-display {
		font-family: var(--display);
		font-size: 24px;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .02em;
		color: var(--bone);
		line-height: 1.05
	}

	.use .demo .t-body {
		font-family: var(--body);
		font-size: 14px;
		color: var(--bone-dim)
	}

	.use .demo .t-body b {
		color: var(--bone);
		font-weight: 600
	}

	.use .demo .t-mono {
		font-family: var(--mono);
		font-size: 12px;
		color: var(--bone-dim)
	}

	.use .demo .t-mono .k {
		display: block;
		font-size: 10px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--steel);
		margin-bottom: 4px
	}

	.use .demo .t-mono .v {
		color: var(--oak-bright)
	}

	.swatches {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 1px;
		background: var(--line)
	}

	.swatch {
		background: var(--iron-900);
		padding: 18px;
		cursor: pointer;
		border: none;
		text-align: left;
		transition: background .15s;
		font-family: var(--mono)
	}

	.swatch:hover {
		background: var(--iron-850)
	}

	.swatch .bars {
		display: grid;
		grid-template-columns: 1fr 1fr 1.6fr;
		height: 56px;
		border: 1px solid var(--line)
	}

	.swatch .bars i {
		display: block
	}

	.swatch .name {
		display: block;
		font-size: 12px;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--bone);
		margin-top: 12px
	}

	.swatch .hex {
		display: block;
		font-size: 10px;
		letter-spacing: .05em;
		color: var(--steel);
		margin-top: 4px
	}

	.swatch[data-active="true"] {
		background: var(--iron-850);
		box-shadow: inset 0 0 0 1px var(--oak)
	}

	.swatch[data-active="true"] .name {
		color: var(--oak-bright)
	}

	.swatch-hint {
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--steel);
		margin-top: 20px
	}

	.swatch-hint b {
		color: var(--oak);
		font-weight: 500
	}

	footer {
		border-top: 1px solid var(--line);
		background: var(--iron-900)
	}

	.foot-inner {
		max-width: 1280px;
		margin: 0 auto;
		padding: 64px 32px 40px;
		display: grid;
		grid-template-columns: 1.2fr .8fr .8fr 1fr;
		gap: 48px
	}

	.foot h4 {
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--steel);
		margin-bottom: 18px
	}

	.foot-logo {
		margin-bottom: 6px
	}

	.foot-logo .script {
		font-family: var(--script);
		font-size: 52px;
		line-height: 1;
		color: var(--bone);
		display: block
	}

	.foot-logo .caps {
		display: flex;
		align-items: center;
		gap: 12px;
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .5em;
		text-transform: uppercase;
		color: var(--oak);
		margin: 6px 0 0 8px
	}

	.foot-logo .caps::before,
	.foot-logo .caps::after {
		content: "";
		height: 1px;
		width: 34px;
		background: var(--line)
	}

	.foot p,
	.foot a {
		font-size: 14px;
		color: var(--bone-dim);
		line-height: 1.9
	}

	.foot ul {
		list-style: none
	}

	.foot ul a:hover {
		color: var(--oak-bright)
	}

	.news {
		display: flex;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		overflow: hidden
	}

	.news input {
		flex: 1;
		background: none;
		border: none;
		color: var(--bone);
		font-family: var(--mono);
		font-size: 13px;
		padding: 12px 14px
	}

	.news input:focus {
		outline: none
	}

	.news button {
		background: var(--oak);
		border: none;
		color: var(--iron-950);
		font-family: var(--mono);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: .08em;
		padding: 0 18px;
		cursor: pointer;
		text-transform: uppercase
	}

	.news button:hover {
		background: var(--oak-bright)
	}

	.foot-base {
		max-width: 1280px;
		margin: 0 auto;
		padding: 20px 32px;
		border-top: 1px solid var(--line);
		display: flex;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap
	}

	.foot-base span {
		font-family: var(--mono);
		font-size: 11px;
		letter-spacing: .1em;
		color: var(--steel);
		text-transform: uppercase
	}

	@media(max-width:980px) {
		.hero {
			grid-template-columns: 1fr;
			padding-top: 48px
		}

		.wc-door-configurator__main {
			grid-template-columns: 1fr !important
		}

		.wc-door-configurator__summary {
			position: static !important
		}

		.cats,
		.uses,
		.uses.type-grid {
			grid-template-columns: repeat(2, 1fr)
		}

		.foot-inner {
			grid-template-columns: 1fr 1fr
		}

		.nav {
			display: none
		}
	}

	@media(max-width:560px) {
		.hero {
			padding-left: 20px;
			padding-right: 20px
		}

		.section {
			padding-left: 20px;
			padding-right: 20px
		}

		.cats,
		.uses,
		.uses.type-grid,
		.swatches,
		.foot-inner {
			grid-template-columns: 1fr
		}

		.hero-facts {
			flex-direction: column;
			gap: 16px
		}

		.fact+.fact {
			border-left: none;
			padding-left: 0;
			border-top: 1px solid var(--line);
			padding-top: 16px
		}
	}

	/* ---------- base wp content ---------- */
	.nav-menu {
		display: flex;
		gap: 28px;
		list-style: none;
		margin: 0;
		padding: 0;
		flex-wrap: wrap
	}

	.nav-menu a {
		font-family: var(--mono);
		font-size: 12px;
		letter-spacing: .12em;
		text-transform: uppercase;
		color: var(--bone-dim);
		transition: color .15s
	}

	.nav-menu a:hover {
		color: var(--oak-bright)
	}

	.site-main {
		max-width: 1280px;
		margin: 0 auto;
		padding: 88px 32px
	}

	.site-main .page,
	.site-main .post,
	.site-main .attachment {
		max-width: 920px;
		margin: 0 auto
	}

	.page-header {
		margin-bottom: 28px;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--line)
	}

	.page-title {
		font-family: var(--display);
		font-size: clamp(34px, 4vw, 56px);
		line-height: 1.04;
		letter-spacing: .02em;
		text-transform: uppercase;
		font-weight: 500;
		color: var(--bone)
	}

	.archive-description {
		margin-top: 14px;
		font-family: var(--body);
		color: var(--bone-dim);
		font-size: 16px;
		line-height: 1.7
	}

	.entry-header {
		margin-bottom: 28px;
		padding-bottom: 20px;
		border-bottom: 1px solid var(--line)
	}

	.entry-title {
		font-family: var(--display);
		font-size: clamp(34px, 4vw, 56px);
		line-height: 1.04;
		letter-spacing: .02em;
		text-transform: uppercase;
		font-weight: 500
	}

	.entry-meta,
	.entry-footer,
	.comments-area,
	.comment-respond {
		font-family: var(--mono);
		color: var(--bone-dim)
	}

	.entry-content,
	.entry-summary {
		font-family: var(--body);
		color: var(--bone-dim);
		font-size: 16px;
		line-height: 1.8
	}

	.entry-content > *,
	.entry-summary > * {
		max-width: 72ch
	}

	.entry-content a,
	.entry-summary a,
	.entry-footer a {
		color: var(--oak-bright)
	}

	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-summary h2,
	.entry-summary h3,
	.entry-summary h4 {
		font-family: var(--display);
		text-transform: uppercase;
		font-weight: 500;
		letter-spacing: .02em;
		color: var(--bone);
		margin: 2.2em 0 .65em
	}

	.entry-content p,
	.entry-content ul,
	.entry-content ol,
	.entry-summary p {
		margin: 0 0 1.1em
	}

	.entry-content ul,
	.entry-content ol {
		padding-left: 1.35em
	}

	.entry-content blockquote {
		margin: 1.8em 0;
		padding: 1.1em 1.25em;
		border-left: 2px solid var(--oak);
		background: color-mix(in srgb, var(--oak) 7%, transparent);
		color: var(--bone)
	}

	.entry-content img,
	.entry-summary img,
	.post-thumbnail img {
		border: 1px solid var(--line);
		border-radius: var(--radius)
	}

	.post-navigation,
	.posts-navigation,
	.comment-navigation {
		margin-top: 44px;
		padding-top: 20px;
		border-top: 1px solid var(--line)
	}

	.comments-area {
		margin-top: 56px;
		padding-top: 24px;
		border-top: 1px solid var(--line)
	}

	.comment-list {
		list-style: none;
		padding: 0
	}

	.comment-body {
		padding: 16px 0;
		border-bottom: 1px solid var(--line-soft)
	}

	@media(max-width:980px) {
		.site-main {
			padding-left: 24px;
			padding-right: 24px
		}
	}

	@media(max-width:560px) {
		.site-main {
			padding-left: 20px;
			padding-right: 20px
		}
	}