:root {
	--cream: #f7f2e8;
	--cream-2: #fffaf2;
	--paper: #fffdf8;
	--ink: #243029;
	--muted: #6d756f;
	--mint: #b9d9c5;
	--mint-deep: #547b68;
	--mint-dark: #315746;
	--orange: #f28a52;
	--orange-dark: #d86e38;
	--pink: #efc5c7;
	--yellow: #f6d982;
	--line: rgba(49, 87, 70, .14);
	--shadow: 0 24px 70px rgba(48, 68, 57, .12);
	--serif: "Fraunces", Georgia, serif;
	--sans: "DM Sans", system-ui, sans-serif;
	--wrap: min(1180px, calc(100% - 40px));
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	background: var(--cream-2);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5
}

body.nav-open {
	overflow: hidden
}

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

img {
	max-width: 100%
}

button,
input {
	font: inherit
}

.wrap {
	width: var(--wrap);
	margin-inline: auto
}

.skip-link {
	position: fixed;
	left: 18px;
	top: -80px;
	z-index: 100;
	background: var(--ink);
	color: white;
	padding: 10px 14px;
	border-radius: 8px
}

.skip-link:focus {
	top: 18px
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 250, 242, .88);
	border-bottom: 1px solid rgba(49, 87, 70, .08);
	backdrop-filter: blur(18px)
}

.nav-shell {
	height: 86px;
	display: flex;
	align-items: center;
	gap: 34px
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	flex: 0 0 auto
}

.brand-mark {
	width: 50px;
	height: 50px;
	padding: 5px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	background: var(--orange);
	color: white;
	font: 600 1.65rem/1 var(--serif);
	transform: rotate(-4deg);
	box-shadow: 0 9px 22px rgba(242, 138, 82, .25)
}

.brand-mark span {
	color: var(--mint-dark)
}

.brand-copy {
	display: grid;
	font: 600 1.28rem/1 var(--serif);
	letter-spacing: -.03em
}

.brand-copy small {
	margin-top: 5px;
	color: var(--mint-dark);
	font: 700 .56rem/1 var(--sans);
	letter-spacing: .18em
}

.site-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 5px
}

.site-nav>a {
	padding: 10px 13px;
	border-radius: 999px;
	color: #52605a;
	font-size: .84rem;
	font-weight: 700
}

.site-nav>a:hover,
.site-nav>a[aria-current="page"] {
	background: white;
	color: var(--mint-dark);
	box-shadow: 0 5px 20px rgba(48, 68, 57, .07)
}

.nav-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--mint-dark);
	color: white;
	border-radius: 999px;
	padding: 11px 17px;
	font-size: .82rem;
	font-weight: 800
}

.nav-cta:hover {
	background: var(--orange-dark)
}

.menu-toggle {
	display: none;
	margin-left: auto;
	border: 0;
	background: var(--ink);
	color: white;
	width: 44px;
	height: 44px;
	border-radius: 14px
}

.menu-toggle span,
.menu-toggle:before,
.menu-toggle:after {
	content: "";
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	margin: 4px auto;
	transition: .2s
}

.menu-toggle[aria-expanded="true"] span {
	opacity: 0
}

.menu-toggle[aria-expanded="true"]:before {
	transform: translateY(6px) rotate(45deg)
}

.menu-toggle[aria-expanded="true"]:after {
	transform: translateY(-6px) rotate(-45deg)
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 51px;
	padding: 0 22px;
	border-radius: 999px;
	font-size: .86rem;
	font-weight: 800;
	transition: transform .2s, background .2s
}

.button:hover {
	transform: translateY(-2px)
}

.button.primary {
	background: var(--orange);
	color: white;
	box-shadow: 0 14px 30px rgba(242, 138, 82, .24)
}

.button.primary:hover {
	background: var(--orange-dark)
}

.button.secondary {
	background: white;
	color: var(--mint-dark);
	border: 1px solid var(--line)
}

.button.dark {
	background: var(--ink);
	color: white
}

.text-link {
	font-size: .85rem;
	font-weight: 800;
	color: var(--mint-dark);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px
}

.eyebrow,
.section-kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--orange-dark);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase
}

.eyebrow:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	box-shadow: 0 0 0 5px rgba(242, 138, 82, .13)
}

.hero {
	position: relative;
	min-height: 690px;
	overflow: hidden;
	background: radial-gradient(circle at 78% 10%, rgba(185, 217, 197, .55), transparent 30%), linear-gradient(135deg, var(--cream-2), var(--cream))
}

.hero:before {
	content: "";
	position: absolute;
	left: -90px;
	bottom: -140px;
	width: 350px;
	height: 350px;
	border: 60px solid rgba(239, 197, 199, .25);
	border-radius: 50%
}

.hero-grid {
	min-height: 690px;
	display: grid;
	grid-template-columns: .92fr 1.08fr;
	align-items: center;
	gap: 60px;
	padding-block: 62px
}

.hero-copy {
	position: relative;
	z-index: 2
}

.hero h1,
.page-hero h1 {
	margin: 18px 0 20px;
	font: 600 clamp(3.2rem, 7vw, 6rem)/.94 var(--serif);
	letter-spacing: -.065em
}

.hero h1 em,
.page-hero h1 em,
.section-heading h2 em {
	color: var(--orange);
	font-weight: 500
}

.hero-copy>p {
	max-width: 560px;
	color: var(--muted);
	font-size: 1.08rem;
	line-height: 1.75
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 23px;
	margin-top: 30px
}

.hero-signature {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 43px;
	color: #53615a;
	font-size: .78rem
}

.hero-signature i {
	width: 39px;
	height: 39px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--pink);
	font-style: normal
}

.hero-signature strong {
	display: block;
	color: var(--ink)
}

.hero-visual {
	min-height: 540px;
	position: relative
}

.hero-orbit {
	position: absolute;
	inset: 30px 5px 15px 65px;
	border: 1px solid rgba(49, 87, 70, .14);
	border-radius: 50%;
	transform: rotate(-8deg)
}

.hero-orbit:before,
.hero-orbit:after {
	content: "✦";
	position: absolute;
	color: var(--orange);
	font-size: 2rem
}

.hero-orbit:before {
	right: 9%;
	top: 8%
}

.hero-orbit:after {
	left: 2%;
	bottom: 19%;
	color: var(--mint-dark)
}

.hero-stack {
	position: absolute;
	inset: 0
}

.hero-product {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border: 9px solid white;
	background: white;
	box-shadow: var(--shadow)
}

.hero-product img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.hero-product figcaption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	padding: 8px 11px;
	border-radius: 12px;
	background: rgba(255, 253, 248, .9);
	backdrop-filter: blur(8px);
	font: 600 .78rem var(--serif)
}

.hero-product--1 {
	width: 57%;
	height: 65%;
	right: 8%;
	top: 4%;
	border-radius: 49% 49% 25px 25px
}

.hero-product--2 {
	width: 39%;
	height: 43%;
	left: 4%;
	bottom: 4%;
	border-radius: 28px;
	transform: rotate(-5deg)
}

.hero-product--3 {
	width: 35%;
	height: 35%;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	transform: rotate(6deg)
}

.hero-fallback {
	position: absolute;
	inset: 12% 8%;
	display: grid;
	place-items: center;
	align-content: center;
	border-radius: 48% 48% 26px 26px;
	background: var(--mint);
	color: var(--mint-dark);
	box-shadow: var(--shadow)
}

.hero-fallback>span {
	font: 600 9rem/1 var(--serif)
}

.hero-fallback small {
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase
}

.ticker {
	overflow: hidden;
	background: var(--mint-dark);
	color: #f7f2e8;
	white-space: nowrap
}

.ticker>div {
	width: max-content;
	padding: 14px 0;
	animation: ticker 28s linear infinite;
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .17em
}

.ticker span {
	color: var(--yellow);
	margin: 0 24px
}

@keyframes ticker {
	to {
		transform: translateX(-50%)
	}
}

.section {
	padding: 110px 0
}

.section.soft {
	background: var(--cream)
}

.section-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
	margin-bottom: 42px
}

.section-heading h2 {
	margin: 9px 0 0;
	font: 600 clamp(2.3rem, 5vw, 4.25rem)/1.02 var(--serif);
	letter-spacing: -.045em
}

.section-heading>p {
	max-width: 430px;
	margin: 0;
	color: var(--muted);
	line-height: 1.7
}

.section-link {
	margin-top: 32px;
	text-align: center
}

.product-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px
}

.product-card {
	min-width: 0;
	border-radius: 24px;
	background: var(--paper);
	border: 1px solid var(--line);
	overflow: hidden;
	box-shadow: 0 10px 35px rgba(48, 68, 57, .06);
	transition: transform .25s, box-shadow .25s
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 50px rgba(48, 68, 57, .12)
}

.product-media {
	aspect-ratio: 1/1;
	overflow: hidden;
	background: linear-gradient(145deg, #e5eee5, #f3ddd6)
}

.product-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s
}

.product-card:hover .product-media img {
	transform: scale(1.035)
}

.product-copy {
	padding: 18px
}

.product-category {
	display: block;
	color: var(--orange-dark);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.product-title-row {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 12px;
	margin-top: 7px
}

.product-title-row h3 {
	margin: 0;
	font: 600 1.12rem/1.18 var(--serif)
}

.product-title-row strong {
	white-space: nowrap;
	color: var(--mint-dark);
	font-size: .86rem
}

.product-copy p {
	margin: 9px 0 0;
	color: var(--muted);
	font-size: .75rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden
}

.product-placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .7), transparent 20%), linear-gradient(145deg, var(--mint), var(--pink));
	color: white
}

.product-placeholder>span {
	font: 600 4rem/1 var(--serif);
	text-shadow: 0 8px 25px rgba(49, 87, 70, .16)
}

.product-placeholder>span span {
	color: var(--orange)
}

.story-grid {
	display: grid;
	grid-template-columns: 1fr .92fr;
	gap: 70px;
	align-items: center
}

.story-art {
	min-height: 520px;
	position: relative;
	border-radius: 34px;
	background: var(--mint);
	overflow: hidden
}

.story-art:before {
	content: "y•";
	position: absolute;
	right: -25px;
	bottom: -50px;
	color: rgba(255, 255, 255, .37);
	font: 600 15rem/1 var(--serif)
}

.story-note {
	position: absolute;
	left: 34px;
	top: 38px;
	width: 220px;
	padding: 22px;
	border-radius: 20px;
	background: var(--paper);
	box-shadow: var(--shadow);
	transform: rotate(-4deg)
}

.story-note span {
	color: var(--orange);
	font-size: 1.5rem
}

.story-note strong {
	display: block;
	margin-top: 12px;
	font: 600 1.35rem/1.2 var(--serif)
}

.story-note small {
	display: block;
	margin-top: 9px;
	color: var(--muted)
}

.story-bubble {
	position: absolute;
	right: 35px;
	top: 35px;
	width: 145px;
	height: 145px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--orange);
	color: white;
	text-align: center;
	font: 600 1.05rem/1.2 var(--serif);
	transform: rotate(7deg)
}

.story-lines {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 45px;
	display: grid;
	gap: 11px
}

.story-lines i {
	height: 12px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .5)
}

.story-lines i:nth-child(2) {
	width: 75%
}

.story-lines i:nth-child(3) {
	width: 45%
}

.story-copy h2 {
	margin: 12px 0 20px;
	font: 600 clamp(2.5rem, 5vw, 4.5rem)/1 var(--serif);
	letter-spacing: -.05em
}

.story-copy p {
	color: var(--muted);
	line-height: 1.85
}

.story-points {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px;
	margin: 29px 0
}

.story-point {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: white
}

.story-point strong {
	display: block;
	font: 600 1rem var(--serif)
}

.story-point span {
	display: block;
	color: var(--muted);
	font-size: .72rem;
	margin-top: 4px
}

.visit-band {
	padding: 95px 0;
	background: var(--ink);
	color: white;
	overflow: hidden;
	position: relative
}

.visit-band:after {
	content: "Y";
	position: absolute;
	right: 5%;
	top: -45%;
	color: rgba(255, 255, 255, .035);
	font: 600 32rem/1 var(--serif)
}

.visit-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 50px
}

.visit-band h2 {
	margin: 12px 0;
	font: 600 clamp(2.4rem, 5vw, 4.7rem)/1 var(--serif)
}

.visit-band p {
	color: #cbd4ce
}

.visit-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

.visit-band .button.secondary {
	background: transparent;
	border-color: rgba(255, 255, 255, .25);
	color: white
}

.page-hero {
	padding: 90px 0 70px;
	background: radial-gradient(circle at 85% 25%, rgba(239, 197, 199, .55), transparent 24%), var(--cream)
}

.page-hero-grid {
	display: grid;
	grid-template-columns: 1fr .65fr;
	gap: 60px;
	align-items: end
}

.page-hero h1 {
	font-size: clamp(3.2rem, 7vw, 5.8rem);
	margin-bottom: 0
}

.page-hero p {
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.75
}

.page-doodle {
	justify-self: end;
	width: 240px;
	height: 190px;
	position: relative
}

.page-doodle:before {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid var(--mint-dark);
	border-radius: 50%;
	transform: rotate(-12deg)
}

.page-doodle:after {
	content: "✳";
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--orange);
	font-size: 5rem
}

.menu-tools {
	position: sticky;
	top: 86px;
	z-index: 20;
	background: rgba(255, 250, 242, .94);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line)
}

.menu-tools-inner {
	padding: 17px 0;
	display: flex;
	align-items: center;
	gap: 18px
}

.menu-search {
	flex: 0 0 250px;
	position: relative
}

.menu-search input {
	width: 100%;
	height: 43px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: white;
	padding: 0 18px;
	outline: 0;
	color: var(--ink)
}

.menu-search input:focus {
	border-color: var(--mint-deep);
	box-shadow: 0 0 0 3px rgba(84, 123, 104, .12)
}

.filters {
	display: flex;
	gap: 8px;
	overflow: auto;
	padding: 2px 1px;
	scrollbar-width: none
}

.filters::-webkit-scrollbar {
	display: none
}

.filter-chip {
	flex: 0 0 auto;
	border: 1px solid var(--line);
	background: white;
	color: #53615a;
	border-radius: 999px;
	padding: 10px 14px;
	font-size: .73rem;
	font-weight: 750;
	cursor: pointer
}

.filter-chip.active,
.filter-chip:hover {
	background: var(--mint-dark);
	color: white;
	border-color: var(--mint-dark)
}

.menu-count {
	margin-left: auto;
	white-space: nowrap;
	color: var(--muted);
	font-size: .75rem
}

.menu-page-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr))
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 115px;
	gap: 15px
}

.gallery-item {
	position: relative;
	margin: 0;
	grid-column: span 4;
	grid-row: span 3;
	border-radius: 25px;
	overflow: hidden;
	background: var(--mint);
	box-shadow: 0 10px 35px rgba(48, 68, 57, .08)
}

.gallery-item--0,
.gallery-item--5 {
	grid-column: span 7;
	grid-row: span 4
}

.gallery-item--1,
.gallery-item--6 {
	grid-column: span 5;
	grid-row: span 4
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s
}

.gallery-item:hover img {
	transform: scale(1.035)
}

.gallery-item figcaption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 17px;
	padding: 12px 14px;
	border-radius: 15px;
	background: rgba(255, 253, 248, .9);
	backdrop-filter: blur(10px);
	display: grid
}

.gallery-item figcaption span {
	color: var(--orange-dark);
	font-size: .58rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em
}

.gallery-item figcaption strong {
	font: 600 1rem var(--serif);
	margin-top: 3px
}

.contact-grid {
	display: grid;
	grid-template-columns: .78fr 1.22fr;
	gap: 28px
}

.contact-panel,
.map-panel {
	border: 1px solid var(--line);
	border-radius: 30px;
	background: white;
	overflow: hidden;
	box-shadow: 0 14px 50px rgba(48, 68, 57, .07)
}

.contact-panel {
	padding: 35px
}

.contact-panel h2 {
	font: 600 2.35rem/1.05 var(--serif);
	margin: 10px 0 28px
}

.contact-list {
	display: grid;
	gap: 13px
}

.contact-item {
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 13px;
	align-items: center;
	padding: 15px;
	border-radius: 17px;
	background: var(--cream-2)
}

.contact-item i {
	font-size: 1.8rem;
	align-self: center;
}

.contact-item:hover a {
	color: var(--orange);
	transform: scale(1.1);
	transition: transform 0.5s ease-out;
}

.contact-icon {
	width: 45px;
	height: 45px;
	border-radius: 14px;
	background: var(--mint-dark);
	display: grid;
	place-items: center;
	color: var(--paper);
	font-weight: 800
}

.contact-item strong,
.contact-item span {
	display: grid;
}

.contact-item strong {
	font: 600 1rem var(--serif)
}

.contact-item span {
	margin-top: 4px;	
	font-size: .78rem;
	line-height: 1.55
}

.contact-links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 24px
}

.contact-links .fa-solid {
	font-size: 2rem;
  	display: inline-block;
  	border-radius: 999px;
  	box-shadow: 0 0 2px #888;
  	padding: 10px;
	background: var(--orange);
	color: var(--paper);
  	transition: transform 0.3s ease, color 0.3s ease;
}

.map-panel iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 570px;
	border: 0;
	filter: saturate(.7) contrast(.95)
}

.content-state {
	grid-column: 1/-1;
	min-height: 230px;
	display: grid;
	place-items: center;
	align-content: center;
	text-align: center;
	gap: 7px;
	border: 1px dashed var(--line);
	border-radius: 24px;
	color: var(--muted)
}

.content-state strong {
	font: 600 1.25rem var(--serif);
	color: var(--ink)
}

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s, transform .55s
}

[data-reveal].revealed {
	opacity: 1;
	transform: none
}

.site-footer {
	padding: 55px 0 25px;
	background: #1d2822;
	color: white
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 60px;
	align-items: start
}

.footer-copy p {
	max-width: 340px;
	color: #aebbb3;
	font-size: .78rem;
	line-height: 1.7;
	margin-top: 18px
}

.footer-col {
	display: grid;
	gap: 8px
}

.footer-col strong {
	font: 600 1rem var(--serif);
	margin-bottom: 6px
}

.footer-col a,
.footer-col span {
	color: #bdc8c1;
	font-size: .76rem
}

.footer-col a:hover {
	color: var(--orange)
}

.footer-bottom {
	margin-top: 42px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .09);
	display: flex;
	justify-content: space-between;
	color: #89968e;
	font-size: .68rem
}

/* Digital screen */
.screen-page {
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: #15211b;
	color: white;
	cursor: none
}

.screen-header {
	height: 17vh;
	min-height: 10vh;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 3vw;
	padding: 2.4vh 4vw;
	background: linear-gradient(120deg, #f8f1e5 0 32%, #b9d9c5 32% 100%);
	color: var(--ink);
	position: relative;
	z-index: 2;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .16)
}

.screen-header .brand-mark {
	width: clamp(58px, 5vw, 92px);
	height: clamp(58px, 5vw, 92px);
	font-size: clamp(2rem, 3vw, 3.3rem);
	border-radius: 26px
}

.screen-header .brand-copy {
	font-size: clamp(1.55rem, 2.5vw, 3rem)
}

.screen-header .brand-copy small {
	font-size: clamp(.55rem, .75vw, .9rem)
}

.screen-banner {
	height: 100%;
	min-height: 0;
	border-radius: 15px;
	padding: 2.4vh 3vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .35), transparent 24%), var(--orange);
	color: white;
	overflow: hidden
}

.screen-banner-copy {
	display: grid;		
}

.screen-banner-copy span {
	font-size: clamp(.65rem, .9vw, 1rem);
	font-weight: 800;	
	font-family: var(--serif);
}

.screen-banner-copy strong {
	display: grid;
	font: 600 clamp(0.9rem, 1.9rem, 2.3rem)/.95 var(--serif);
	margin-top: 8px;
	letter-spacing: -.04em
}

.screen-banner-mark {
	font: 600 clamp(5rem, 8vw, 10rem)/1 var(--serif);
	color: rgba(255, 255, 255, .28);
	padding: 10px 14px;
}

.screen-meta {
	height: 5vh;
	min-height: 38px;
	padding: 0 4vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #223229;
	color: #bac8bf;
	font-size: clamp(.62rem, .75vw, .9rem);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase
}

.screen-viewport {
	height: 76vh;
	overflow: hidden;
	padding: 2.1vh 2.6vw;
	background: radial-gradient(circle at 10% 10%, rgba(242, 138, 82, .08), transparent 25%), #15211b
}

.screen-track {
	will-change: transform
}

.screen-track.running {
	animation: screenScroll var(--screen-duration) linear infinite
}

.screen-set {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25vw;
	padding-bottom: 1.25vw
}

.screen-card {
	min-height: 24vh;
	border-radius: 2vw;
	overflow: hidden;
	background: #fffaf2;
	color: var(--ink);
	display: grid;
	grid-template-columns: 46% 54%;
	box-shadow: 0 18px 50px rgba(0, 0, 0, .18)
}

.screen-card-media {
	min-height: 100%;
	background: var(--mint);
	overflow: hidden
}

.screen-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

.screen-card-copy {
	padding: 1.5vw;
	display: flex;
	flex-direction: column;
	align-items: flex-start
}

.screen-card-copy>span {
	color: var(--orange-dark);
	font-size: clamp(.5rem, .65vw, .78rem);
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase
}

.screen-card-copy h2 {
	font: 600 clamp(1.2rem, 1.75vw, 2.3rem)/1.05 var(--serif);
	letter-spacing: -.035em;
	margin: .7vh 0
}

.screen-card-copy p {
	font-size: clamp(.58rem, .72vw, .88rem);
	color: var(--muted);
	line-height: 1.45;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden
}

.screen-card-copy strong {
	margin-top: auto;
	background: var(--mint-dark);
	color: white;
	border-radius: 999px;
	padding: .6vh .9vw;
	font-size: clamp(.8rem, 1vw, 1.2rem)
}

.screen-error {
	height: 60vh;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 10px;
	color: #cbd7cf
}

.screen-error strong {
	font: 600 3rem var(--serif)
}

@keyframes screenScroll {
	to {
		transform: translateY(calc(-1 * var(--screen-distance)))
	}
}

@media(max-width:980px) {
	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 15px;
		padding-top: 85px
	}

	.hero-copy {
		text-align: center
	}

	.hero-copy>p {
		margin-inline: auto
	}

	.hero-actions,
	.hero-signature {
		justify-content: center
	}

	.hero-visual {
		min-height: 500px;
		max-width: 650px;
		width: 100%;
		margin-inline: auto
	}

	.story-grid {
		grid-template-columns: 1fr;
		gap: 45px
	}

	.story-art {
		order: 2
	}

	.menu-page-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.gallery-item {
		grid-column: span 6
	}

	.gallery-item--0,
	.gallery-item--5,
	.gallery-item--1,
	.gallery-item--6 {
		grid-column: span 6
	}

	.contact-grid {
		grid-template-columns: 1fr
	}

	.map-panel iframe {
		min-height: 480px
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr
	}

	.footer-copy {
		grid-column: 1/-1
	}
}

@media(max-width:760px) {
	:root {
		--wrap: min(100% - 28px, 1180px)
	}

	.nav-shell {
		height: 74px
	}

	.site-header .nav-cta {
		display: none
	}

	.menu-toggle {
		display: block
	}

	.site-nav {
		position: fixed;
		inset: 74px 0 auto 0;
		display: grid;
		gap: 3px;
		padding: 15px 20px 24px;
		background: var(--cream-2);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 40px rgba(48, 68, 57, .12);
		transform: translateY(-130%);
		opacity: 0;
		visibility: hidden;
		transition: .25s
	}

	.site-nav.open {
		transform: none;
		opacity: 1;
		visibility: visible
	}

	.site-nav>a {
		padding: 13px 15px
	}

	.hero,
	.hero-grid {
		min-height: auto
	}

	.hero-grid {
		padding: 70px 0 45px
	}

	.hero h1 {
		font-size: clamp(3.1rem, 15vw, 4.6rem)
	}

	.hero-visual {
		min-height: 410px
	}

	.hero-product--1 {
		right: 4%;
		width: 62%
	}

	.hero-product--2 {
		left: 0
	}

	.section {
		padding: 75px 0
	}

	.section-heading {
		display: block
	}

	.section-heading>p {
		margin-top: 16px
	}

	.product-grid,
	.menu-page-grid {
		grid-template-columns: 1fr 1fr;
		gap: 11px
	}

	.product-copy {
		padding: 13px
	}

	.product-title-row {
		display: block
	}

	.product-title-row strong {
		display: block;
		margin-top: 7px
	}

	.product-copy p {
		display: none
	}

	.story-art {
		min-height: 400px
	}

	.story-bubble {
		width: 110px;
		height: 110px;
		right: 20px
	}

	.visit-grid {
		grid-template-columns: 1fr
	}

	.page-hero {
		padding: 65px 0 45px
	}

	.page-hero-grid {
		grid-template-columns: 1fr
	}

	.page-doodle {
		display: none
	}

	.menu-tools {
		top: 74px
	}

	.menu-tools-inner {
		display: grid;
		grid-template-columns: 1fr auto
	}

	.menu-search {
		grid-column: 1/-1;
		flex: auto
	}

	.filters {
		min-width: 0
	}

	.gallery-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 150px;
		gap: 10px
	}

	.gallery-item,
	.gallery-item--0,
	.gallery-item--1,
	.gallery-item--5,
	.gallery-item--6 {
		grid-column: span 1;
		grid-row: span 2
	}

	.gallery-item:nth-child(3n) {
		grid-column: 1/-1
	}

	.contact-panel {
		padding: 24px
	}

	.footer-grid {
		grid-template-columns: 1fr
	}

	.footer-copy {
		grid-column: auto
	}

	.footer-bottom {
		display: grid;
		gap: 8px
	}
}

@media(max-width:430px) {

	.product-grid,
	.menu-page-grid {
		grid-template-columns: 1fr
	}

	.hero-visual {
		min-height: 355px
	}

	.hero-product--2 {
		width: 43%
	}

	.hero-product--3 {
		width: 38%
	}

	.story-points {
		grid-template-columns: 1fr
	}

	.gallery-grid {
		grid-template-columns: 1fr
	}

	.gallery-item,
	.gallery-item--0,
	.gallery-item--1,
	.gallery-item--5,
	.gallery-item--6,
	.gallery-item:nth-child(3n) {
		grid-column: 1;
		grid-row: span 2
	}
}

@media(orientation:portrait) {

	.screen-header {
		height: 10vh;		
	}

	.screen-banner {
		min-height: 0;
		border-radius: 10px
	}

	.screen-banner-copy strong {
		font-size: clamp(1.2rem, 2.5vw, 1.8rem);
	}	
	.screen-meta {
		height: 4vh
	}

	.screen-viewport {
		height: 79vh;
		padding: 1.5vh 2.5vw
	}

    .screen-category-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8vw;
    }

	.screen-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.8vw;
		padding-bottom: 1.8vw
	}

	.screen-card {
		min-height: 16vh;
		grid-template-columns: 40% 60%;
	}

	.screen-card-media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.screen-card-media img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.screen-card-copy {
		padding: 2vw
	}

	.screen-price {
		font-size: clamp(1.25rem, 2.5vw, 1.5rem) !important;
	}

	.screen-card-copy p {
		display: none
	}
}

@media(prefers-reduced-motion:reduce) {
	html {
		scroll-behavior: auto
	}

	.ticker>div {
		animation: none
	}

	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none
	}
}

/* Bootstrap 5 entegrasyonu: marka görünümü korunurken yapısal bileşenler standardize edilir. */
.site-header .navbar {
	padding-block: 0
}

.site-header .navbar-collapse {
	flex-grow: 0
}

.site-header .nav-link {
	color: #52605a;
	padding: 10px 13px !important;
	border-radius: 999px;
	font-size: .84rem;
	font-weight: 700
}

.site-header .nav-link:hover,
.site-header .nav-link[aria-current="page"] {
	background: white;
	color: var(--mint-dark);
	box-shadow: 0 5px 20px rgba(48, 68, 57, .07)
}

.btn.button,
.btn.nav-cta {
	border: 0
}

.btn.button:focus-visible,
.btn.nav-cta:focus-visible,
.filter-chip:focus-visible {
	box-shadow: 0 0 0 .25rem rgba(242, 138, 82, .25)
}

.product-grid.row {
	display: flex;
	grid-template-columns: none;
	gap: 0;
	margin-top: 0
}

.product-grid.row>.col-12 {
	margin-bottom: 0
}

.product-card.card {
	--bs-card-border-width: 0;
	--bs-card-bg: var(--paper);
	border-radius: 24px
}

.product-card .card-body {
	color: var(--ink)
}

.menu-search .form-control {
	height: 43px;
	border-color: var(--line);
	border-radius: 999px;
	padding-inline: 18px
}

.menu-search .form-control:focus {
	border-color: var(--mint-deep);
	box-shadow: 0 0 0 .25rem rgba(84, 123, 104, .12)
}

.filter-chip.btn {
	--bs-btn-border-color: var(--line);
	--bs-btn-bg: white;
	--bs-btn-color: #53615a;
	--bs-btn-hover-bg: var(--mint-dark);
	--bs-btn-hover-border-color: var(--mint-dark);
	--bs-btn-hover-color: white;
	--bs-btn-active-bg: var(--mint-dark);
	--bs-btn-active-border-color: var(--mint-dark);
	--bs-btn-active-color: white
}

.filter-chip.btn.active {
	background: var(--mint-dark);
	border-color: var(--mint-dark);
	color: white
}

.content-state>i {
	color: var(--orange);
	font-size: 1.35rem;
	margin-bottom: 4px
}

.screen-card-copy>span i,
.screen-meta i {
	margin-right: .35em
}

.screen-price {
	display: inline-flex;
	align-items: center;
	gap: .35em
}

.category-filter {
	flex: 0 0 min(360px, 38vw)
}

.category-filter .form-select {
	height: 43px;
	border-color: var(--line);
	border-radius: 999px;
	padding-inline: 18px 42px;
	background-color: white;
	color: var(--ink);
	font-weight: 700
}

.category-filter .form-select:focus {
	border-color: var(--mint-deep);
	box-shadow: 0 0 0 .25rem rgba(84, 123, 104, .12)
}

.product-card {
	border-radius: var(--managed-card-radius, 24px) !important
}

.screen-set {
	display: block
}

.screen-category {
	padding-bottom: 1.7vw
}

.screen-category>h1 {
	margin: 0 0 1vw;
	padding-left: .3vw;
	color: #fff4df;
	font: 600 clamp(1.45rem, 2.2vw, 3rem)/1 var(--serif);
	letter-spacing: -.025em
}

.screen-category-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25vw
}

@media(max-width:767.98px) {
	.category-filter {
		min-width: 0;
		flex: auto
	}

	.screen-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.8vw
	}

	.screen-category {
		padding-bottom: 2.2vw
	}

	.screen-category>h1 {
		margin-bottom: 1.4vw
	}
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px
}

.blog-card {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--managed-card-radius, 24px);
	background: white;
	box-shadow: 0 14px 40px rgba(48, 68, 57, .07)
}

.blog-card img {
	width: 100%;
	aspect-ratio: 1.45/1;
	object-fit: cover
}

.blog-card>div {
	padding: 24px
}

.blog-card small,
.blog-detail small {
	color: var(--orange-dark);
	font-weight: 800
}

.blog-card h2 {
	margin: 10px 0;
	font: 600 1.45rem/1.1 var(--serif)
}

.blog-card p {
	color: var(--muted);
	line-height: 1.65
}

.blog-detail {
	max-width: 900px;
	margin: auto;
	background: white;
	border-radius: 32px;
	overflow: hidden;
	box-shadow: var(--shadow)
}

.blog-detail>img {
	width: 100%;
	max-height: 520px;
	object-fit: cover
}

.blog-detail-copy {
	padding: clamp(28px, 5vw, 65px)
}

.blog-detail h1 {
	font: 600 clamp(2.4rem, 5vw, 4.8rem)/.98 var(--serif);
	margin: 18px 0
}

.blog-lead {
	font-size: 1.15rem;
	color: var(--muted)
}

.blog-body {
	margin-top: 35px;
	line-height: 1.8
}

.blog-body p {
	margin: 0 0 1.25em
}

@media(max-width:800px) {
	.blog-grid {
		grid-template-columns: 1fr
	}

	.blog-detail-copy {
		padding: 25px
	}
}

@media(max-width:767.98px) {
	.site-header .nav-shell {
		position: relative
	}

	.site-header .site-nav {
		position: absolute;
		inset: 100% 0 auto 0;
		display: none !important;
		padding: 15px 20px 24px;
		background: var(--cream-2);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 18px 40px rgba(48, 68, 57, .12);
		transform: none;
		opacity: 1;
		visibility: visible
	}

	.site-header .site-nav.show,
	.site-header .site-nav.collapsing {
		display: grid !important
	}

	.site-header .site-nav.collapsing {
		height: auto !important
	}

	.site-header .nav-link {
		padding: 13px 15px !important
	}

	.navbar-toggler:focus {
		box-shadow: 0 0 0 .2rem rgba(242, 138, 82, .22)
	}
}

/* v2.1 — Premium Pastel Editorial website */
.editorial-site {
	background: #fffdf8;
	background-image: radial-gradient(circle at 8% 13%, rgba(239, 197, 199, .12), transparent 22rem), radial-gradient(circle at 92% 34%, rgba(185, 217, 197, .13), transparent 25rem)
}

.editorial-site .site-header {
	background: rgba(255, 253, 248, .86);
	border-bottom-color: rgba(49, 87, 70, .07)
}

.editorial-site .nav-shell {
	height: 92px
}

.editorial-site .brand-mark {
	border-radius: 50% 45% 48% 42%;
	box-shadow: 0 12px 34px rgba(242, 138, 82, .22)
}

.editorial-site .site-nav {
	padding: 5px;
	border: 1px solid rgba(49, 87, 70, .08);
	border-radius: 999px;
	background: rgba(255, 255, 255, .56)
}

.editorial-site .hero {
	min-height: 720px;
	background: linear-gradient(112deg, #fffaf2 0 54%, #edf3ea 54% 100%)
}

.editorial-site .hero:after {
	content: "";
	position: absolute;
	right: -8%;
	top: -25%;
	width: 46vw;
	height: 46vw;
	border: 1px solid rgba(49, 87, 70, .12);
	border-radius: 50%
}

.editorial-site .hero-grid {
	min-height: 720px
}

.editorial-site .hero h1 {
	max-width: 680px;
	font-size: clamp(3.7rem, 7.4vw, 7rem);
	line-height: .9
}

.editorial-site .hero h1:after {
	content: "";
	display: block;
	width: 96px;
	height: 8px;
	margin-top: 26px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--orange), var(--pink))
}

.editorial-site .hero-product {
	border-width: 12px;
	box-shadow: 0 30px 90px rgba(49, 87, 70, .17)
}

.editorial-site .hero-product--1 {
	border-radius: 52% 52% 28px 28px
}

.editorial-site .hero-product--2 {
	border-radius: 90px 22px 90px 22px
}

.editorial-site .hero-product--3 {
	border-radius: 50%
}

.category-rail {
	position: relative;
	z-index: 3;
	margin-top: -42px
}

.category-rail>.wrap {
	padding: 20px 22px;
	border: 1px solid rgba(49, 87, 70, .09);
	border-radius: 24px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 24px 65px rgba(49, 87, 70, .12);
	backdrop-filter: blur(18px)
}

.category-rail-head {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 13px
}

.category-rail-head span {
	font: 600 1rem var(--serif)
}

.category-rail-head small {
	color: var(--muted)
}

.category-shortcuts {
	display: flex;
	gap: 9px;
	overflow-x: auto;
	scrollbar-width: none
}

.category-shortcuts::-webkit-scrollbar {
	display: none
}

.category-shortcut {
	min-width: 150px;
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 17px;
	border-radius: 15px;
	background: #f8eee8;
	color: #673e2c;
	font-size: .77rem;
	font-weight: 800;
	transition: .2s
}

.category-shortcut:nth-child(4n+2) {
	background: #e8f1e9;
	color: var(--mint-dark)
}

.category-shortcut:nth-child(4n+3) {
	background: #f7eadf
}

.category-shortcut:nth-child(4n) {
	background: #f4e7ea
}

.category-shortcut:hover {
	transform: translateY(-2px);
	box-shadow: 0 9px 24px rgba(49, 87, 70, .1)
}

.category-shortcut-skeleton {
	min-width: 180px;
	height: 49px;
	border-radius: 15px;
	background: linear-gradient(90deg, #f2ece3, #fff, #f2ece3);
	background-size: 200%;
	animation: categoryShimmer 1.4s linear infinite
}

@keyframes categoryShimmer {
	to {
		background-position: -200%
	}
}

.editorial-site .section {
	padding: 120px 0
}

.editorial-site .section-heading {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line)
}

.editorial-site .section-heading h2 {
	font-size: clamp(2.7rem, 5.5vw, 5rem)
}

.editorial-site .product-card {
	position: relative;
	border: 0 !important;
	border-radius: var(--managed-card-radius, 28px) !important;
	background: #fff;
	box-shadow: 0 14px 45px rgba(49, 87, 70, .07)
}

.editorial-site .product-media {
	aspect-ratio: 4/5
}

.editorial-site .product-card--compact .product-media {
	aspect-ratio: 4/4.65
}

.editorial-site .product-copy {
	padding: 21px 21px 23px
}

.editorial-site .product-title-row h3 {
	font-size: 1.28rem
}

.editorial-site .product-title-row strong {
	padding: 7px 10px;
	border-radius: 999px;
	background: #edf3ea;
	color: var(--mint-dark)
}

.product-detail-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--line);
	background: transparent;
	color: var(--mint-dark);
	font-size: .76rem;
	font-weight: 800
}

.product-detail-trigger i {
	transition: transform .2s
}

.product-detail-trigger:hover i {
	transform: translateX(4px)
}

.editorial-site .story-art {
	border-radius: 50% 50% 32px 32px;
	box-shadow: 0 28px 70px rgba(49, 87, 70, .12)
}

.editorial-gallery-section {
	background: #f4eee6
}

.home-gallery-preview {
	display: grid;
	grid-template-columns: 1.12fr .88fr .88fr;
	grid-template-rows: 260px 260px;
	gap: 16px
}

.home-gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 26px
}

.home-gallery-item:first-child {
	grid-row: 1/3
}

.home-gallery-item:nth-child(4) {
	grid-column: 2/4
}

.home-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s
}

.home-gallery-item:hover img {
	transform: scale(1.04)
}

.home-gallery-item:after {
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(transparent, rgba(23, 38, 29, .7))
}

.home-gallery-item span {
	position: absolute;
	z-index: 1;
	left: 20px;
	right: 20px;
	bottom: 18px;
	color: white;
	font: 600 1.1rem var(--serif)
}

.home-blog-section {
	background: #fffdf8
}

.home-blog-grid {
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 22px
}

.home-blog-card {
	display: grid;
	grid-template-columns: 180px 1fr;
	min-height: 190px;
	overflow: hidden;
	border-radius: 26px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: 0 15px 45px rgba(49, 87, 70, .06)
}

.home-blog-card--featured {
	grid-row: span 2;
	display: block
}

.home-blog-card>a,
.home-blog-card>a img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.home-blog-card--featured>a {
	display: block;
	height: 330px
}

.home-blog-card>div {
	padding: 25px
}

.home-blog-card small {
	color: var(--orange-dark);
	font-weight: 800
}

.home-blog-card h3 {
	margin: 9px 0;
	font: 600 1.45rem/1.1 var(--serif)
}

.home-blog-card p {
	color: var(--muted);
	font-size: .82rem;
	line-height: 1.6
}

.editorial-site .page-hero {
	padding: 110px 0 82px;
	background: linear-gradient(120deg, #f8f1e8, #edf3ea)
}

.editorial-site .page-hero-grid {
	position: relative
}

.editorial-site .page-hero h1 {
	font-size: clamp(3.6rem, 7.5vw, 6.7rem)
}

.editorial-site .page-hero p {
	padding: 25px 0 0;
	border-top: 1px solid rgba(49, 87, 70, .18)
}

.editorial-site .menu-tools {
	top: 92px;
	background: rgba(255, 253, 248, .92)
}

.editorial-site .menu-tools-inner {
	padding: 15px 0
}

.editorial-site .menu-search,
.editorial-site .category-filter {
	flex-basis: min(390px, 39vw)
}

.editorial-site .menu-search input,
.editorial-site .category-filter .form-select {
	height: 50px;
	border: 0;
	box-shadow: 0 8px 28px rgba(49, 87, 70, .08)
}

.editorial-site .gallery-grid {
	display: block;
	column-count: 3;
	column-gap: 18px
}

.editorial-site .gallery-item,
.editorial-site .gallery-item--0,
.editorial-site .gallery-item--1,
.editorial-site .gallery-item--5,
.editorial-site .gallery-item--6 {
	display: inline-block;
	width: 100%;
	height: auto;
	min-height: 250px;
	margin: 0 0 18px;
	break-inside: avoid;
	grid-column: auto;
	grid-row: auto;
	border-radius: 28px
}

.editorial-site .gallery-item:nth-child(4n+1) {
	min-height: 440px
}

.editorial-site .gallery-item:nth-child(4n+2) {
	min-height: 330px
}

.gallery-item>button {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	border: 0;
	background: transparent;
	cursor: zoom-in
}

.gallery-item:focus-within {
	outline: 3px solid rgba(242, 138, 82, .45);
	outline-offset: 3px
}

.editorial-site .blog-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px
}

.editorial-site .blog-card {
	border: 0;
	border-radius: 30px;
	box-shadow: 0 18px 55px rgba(49, 87, 70, .08)
}

.editorial-site .blog-card--featured {
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: 1.18fr .82fr
}

.editorial-site .blog-card--featured .blog-card-media {
	min-height: 430px
}

.editorial-site .blog-card--featured>div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(35px, 6vw, 75px)
}

.editorial-site .blog-card--featured h2 {
	font-size: clamp(2.2rem, 4vw, 4rem)
}

.editorial-site .blog-card-media {
	display: block;
	overflow: hidden
}

.editorial-site .blog-card img {
	height: 100%;
	min-height: 280px;
	aspect-ratio: auto;
	transition: transform .55s
}

.editorial-site .blog-card:hover img {
	transform: scale(1.035)
}

.editorial-site .blog-detail {
	border-radius: 38px
}

.editorial-site .blog-body {
	font-size: 1.05rem
}

.editorial-dialog {
	width: min(920px, calc(100% - 30px));
	max-width: none;
	max-height: calc(100dvh - 30px);
	padding: 0;
	border: 0;
	border-radius: 34px;
	background: #fffdf8;
	box-shadow: 0 35px 110px rgba(27, 45, 35, .34);
	overflow: hidden
}

.editorial-dialog::backdrop {
	background: rgba(24, 38, 30, .65);
	backdrop-filter: blur(7px)
}

.dialog-close {
	position: absolute;
	z-index: 4;
	right: 16px;
	top: 16px;
	width: 45px;
	height: 45px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: var(--ink);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12)
}

.product-dialog-layout {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	min-height: 570px
}

.product-dialog-media {
	min-height: 570px;
	background: var(--mint)
}

.product-dialog-media img,
.product-dialog-media .product-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.product-dialog-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(34px, 6vw, 72px)
}

.product-dialog-copy h2 {
	margin: 12px 0 18px;
	font: 600 clamp(2.7rem, 5vw, 5rem)/.93 var(--serif);
	letter-spacing: -.055em
}

.product-dialog-copy p {
	color: var(--muted);
	line-height: 1.75
}

.product-dialog-copy>strong {
	margin: 18px 0 30px;
	font: 600 1.6rem var(--serif);
	color: var(--mint-dark)
}

.gallery-lightbox {
	width: min(1100px, calc(100% - 30px));
	background: #17241d
}

.gallery-lightbox figure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	max-height: calc(100dvh - 30px);
	margin: 0
}

.gallery-lightbox img {
	width: 100%;
	height: 100%;
	max-height: calc(100dvh - 30px);
	object-fit: contain;
	background: #0f1813
}

.gallery-lightbox figcaption {
	display: flex;
	flex-direction: column;
	justify-content: end;
	padding: 45px 32px;
	color: white
}

.gallery-lightbox h2 {
	font: 600 2.2rem/1 var(--serif)
}

.gallery-lightbox p {
	color: #b8c6bd;
	line-height: 1.7
}

.editorial-site .contact-panel,
.editorial-site .map-panel {
	border: 0;
	border-radius: 34px;
	box-shadow: 0 20px 65px rgba(49, 87, 70, .09)
}

.editorial-site .contact-item {
	background: #f7f2e8
}

@media(max-width:980px) {
	.editorial-site .hero {
		background: linear-gradient(180deg, #fffaf2 0 52%, #edf3ea 52% 100%)
	}

	.home-gallery-preview {
		grid-template-columns: 1fr 1fr
	}

	.home-gallery-item:nth-child(4) {
		grid-column: auto
	}

	.home-gallery-item:first-child {
		grid-row: span 2
	}

	.home-blog-grid {
		grid-template-columns: 1fr
	}

	.home-blog-card--featured {
		grid-row: auto
	}

	.editorial-site .gallery-grid {
		column-count: 2
	}

	.editorial-site .blog-card--featured {
		grid-template-columns: 1fr
	}

	.editorial-site .blog-card--featured .blog-card-media {
		min-height: 340px
	}
}

@media(max-width:767.98px) {
	.editorial-site .nav-shell {
		height: 76px
	}

	.editorial-site .site-nav {
		border-radius: 0
	}

	.editorial-site .hero-grid {
		min-height: auto
	}

	.category-rail {
		margin-top: -22px
	}

	.category-rail>.wrap {
		width: calc(100% - 20px);
		padding: 16px
	}

	.category-rail-head small {
		display: none
	}

	.editorial-site .section {
		padding: 82px 0
	}

	.home-gallery-preview {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 230px 180px
	}

	.home-gallery-item:first-child {
		grid-column: 1/-1;
		grid-row: auto
	}

	.home-gallery-item:nth-child(n+4) {
		display: none
	}

	.home-blog-card {
		grid-template-columns: 120px 1fr
	}

	.home-blog-card--featured {
		display: block
	}

	.home-blog-card--featured>a {
		height: 250px
	}

	.editorial-site .menu-tools {
		top: 76px
	}

	.editorial-site .menu-tools-inner {
		grid-template-columns: 1fr 1fr;
		gap: 10px
	}

	.editorial-site .menu-search {
		grid-column: 1/-1
	}

	.editorial-site .menu-search,
	.editorial-site .category-filter {
		width: 100%;
		min-width: 0;
		flex: auto
	}

	.editorial-site .gallery-grid {
		column-count: 2;
		column-gap: 10px
	}

	.editorial-site .gallery-item,
	.editorial-site .gallery-item--0,
	.editorial-site .gallery-item--1,
	.editorial-site .gallery-item--5,
	.editorial-site .gallery-item--6,
	.editorial-site .gallery-item:nth-child(4n+1),
	.editorial-site .gallery-item:nth-child(4n+2) {
		min-height: 220px;
		margin-bottom: 10px
	}

	.editorial-site .blog-grid {
		grid-template-columns: 1fr
	}

	.editorial-site .blog-card--featured {
		grid-column: auto
	}

	.product-dialog-layout {
		grid-template-columns: 1fr;
		min-height: 0;
		max-height: calc(100dvh - 30px);
		overflow: auto
	}

	.product-dialog-media {
		min-height: 0;
		aspect-ratio: 1.2/1
	}

	.product-dialog-copy {
		padding: 28px
	}

	.product-dialog-copy h2 {
		font-size: 2.7rem
	}

	.gallery-lightbox figure {
		display: block;
		overflow: auto
	}

	.gallery-lightbox img {
		height: auto;
		max-height: 70dvh
	}

	.gallery-lightbox figcaption {
		padding: 25px
	}

	.editorial-dialog {
		border-radius: 24px
	}
}

@media(max-width:480px) {
	.home-gallery-preview {
		display: block
	}

	.home-gallery-item {
		display: block !important;
		height: 270px;
		margin-bottom: 12px
	}

	.home-gallery-item:nth-child(n+4) {
		display: none !important
	}

	.home-blog-card {
		display: block
	}

	.home-blog-card>a {
		display: block;
		height: 210px
	}

	.editorial-site .gallery-grid {
		column-count: 1
	}

	.editorial-site .gallery-item,
	.editorial-site .gallery-item:nth-child(n) {
		min-height: 310px
	}

	.editorial-site .blog-card>div {
		padding: 22px
	}

	.editorial-site .product-media {
		aspect-ratio: 1.05/1
	}

	.editorial-site .product-title-row {
		display: flex
	}

	.editorial-site .product-copy p {
		display: -webkit-box
	}
}