:root{
	--ink:#5b3b2e;
	--ink2:#8a6755;
	--paper:#f3efe7;
	--frame:#3a2a22;
	--line:rgba(91,59,46,.25);
	--btn:#6a5647;
	--btnText:#f7f2ea;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	color:var(--ink);
	/* was: background: #4b3b30; */
	background: var(--paper);
	font-family: ui-serif, Georgia, "Times New Roman", serif;
}

.page{
	/* was: max-width + margin + border/frame look */
	width: 100%;
	min-height: 100dvh;
	margin: 0;
	background: var(--paper);
	border: 0;
	box-shadow: none;
	position:relative;
	overflow:hidden;
}

/* Optional: slightly widen on large screens without reintroducing a card look */
.topbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
	padding: 30px 44px 10px;
	/* Add space below header */
	margin-bottom: 60px;
}
.logo{
	/* Removed text-specific styles (font-style, font-weight, etc.) */
	display: block;
	width: 140px; /* Adjust width as desired */
	flex-shrink: 0;
}
.logo img{
	width: 100%;
	height: auto;
	display: block;
	/* blended so white background becomes transparent against the page color */
	mix-blend-mode: multiply; 
}
.nav{
	display:flex;
	gap:54px;
	align-items:center;
	justify-content:center;
	flex: 1;
	padding: 0 18px;
}
.nav__link{
	text-decoration:none;
	color: var(--ink2);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 13px;
	letter-spacing:.02em;
}
.nav__link.is-active{color:var(--ink); font-weight:700}

.topbar__right{display:flex;align-items:center;gap:14px}
.search{
	position:relative;
	width: 170px;
	height: 26px;
	border: 1px solid rgba(91,59,46,.35);
	border-radius: 999px;
	background: rgba(255,255,255,.25);
}
.search__input{
	position:absolute; inset:0;
	width:100%;
	border:0;
	outline:none;
	background:transparent;
	padding: 0 30px 0 12px;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 12px;
	color: var(--ink);
}
.search__icon{
	position:absolute; right:10px; top:50%;
	transform:translateY(-50%);
	font-family: ui-sans-serif, system-ui;
	font-size: 12px;
	color: rgba(91,59,46,.7);
}
.menu{
	border:0;
	background:transparent;
	padding:6px;
	cursor:pointer;
}
.menu__bar{
	display:block;
	width:18px;
	height:2px;
	background: rgba(91,59,46,.7);
	margin:3px 0;
	border-radius:2px;
}

.hero{padding: 8px 44px 46px; position:relative}
.grid{
	display:grid;
	/* Increased column width from 360px to 420px for larger side panels */
	grid-template-columns: minmax(300px, 420px) 1fr minmax(300px, 420px);
	gap: 40px; /* Increased gap */
	align-items: center; /* Center items vertically */
	justify-content: center;
	width: 100%;
	max-width: 1400px; /* Increased from 1180px */
	margin: 0 auto;
}

.panel{
	margin:0;
	border-radius: 220px 220px 26px 26px;
	overflow:hidden;
	align-self: center; /* Center images vertically */
	box-shadow: 0 10px 24px rgba(0,0,0,.12);
	border: 1px solid rgba(91,59,46,.18);
	background: #efe7dc;
}
.panel img{
	width:100%;
	height: 640px; /* Increased from 520px to fill vertical space */
	object-fit: cover;
	display:block;
}

.copy{
	text-align:center;
	/* Remove top padding to ensure true center alignment */
	padding: 0 10px;
}
.title{
	margin: 6px 0 4px;
	font-size: 92px; /* Increased from 74px */
	letter-spacing:.01em;
	color: #c7a27f;
	font-weight: 800;
	white-space: nowrap;
}
.subtitle{
	margin:0;
	font-size: 52px; /* Increased from 44px */
	font-style: italic;
	color: var(--ink);
}
.rule{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px;
	margin: 18px auto 14px;
	color: rgba(91,59,46,.85);
}
.rule span{
	display:inline-block;
	width: 86px;
	height: 1px;
	background: rgba(91,59,46,.3);
}
.rule i{font-style:normal; font-size: 12px}

.tagline{
	margin: 10px 0 20px;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: rgba(91,59,46,.8);
	font-size: 14px;
	letter-spacing:.03em;
}
.desc{
	margin: 0 auto 20px;
	max-width: 52ch;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(91,59,46,.8);
}
.cta{
	display:inline-block;
	padding: 10px 34px;
	border-radius: 999px;
	background: var(--btn);
	color: var(--btnText);
	text-decoration:none;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 13px;
	letter-spacing:.02em;
}

.social{
	display:flex;
	gap:10px;
	justify-content:center;
	margin-top: 18px;
}
.social__btn{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	border: 1px solid rgba(91,59,46,.25);
	color: rgba(91,59,46,.55);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 12px;
	background: rgba(255,255,255,.3);
}

.coming{
	margin: 18px auto 0;
	max-width: 520px;
	padding: 14px 14px 10px;
	border: 1px solid rgba(91,59,46,.18);
	border-radius: 16px;
	background: rgba(255,255,255,.34);
}
.coming__row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 12px;
	color: rgba(91,59,46,.75);
	margin-bottom: 10px;
}
.coming__label{
	text-transform:uppercase;
	letter-spacing:.12em;
	font-weight: 700;
}
.timer{
	display:grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 10px;
}
.timebox{
	border: 1px solid rgba(91,59,46,.18);
	border-radius: 12px;
	padding: 10px 8px;
	background: rgba(243,239,231,.65);
}
.num{
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 800;
	font-size: 18px;
	color: var(--ink);
}
.lbl{
	margin-top: 4px;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 10px;
	letter-spacing:.18em;
	text-transform:uppercase;
	color: rgba(91,59,46,.65);
}
.status{
	margin: 10px 0 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 12px;
	color: rgba(91,59,46,.7);
}

.footer{
	display:flex;
	justify-content:center;
	padding: 12px 0 24px;
	color: rgba(91,59,46,.55);
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-size: 12px;
}

/* Decorative corner line-art */
.decor{
	position:absolute;
	/* Adjust decor position to be relative to centered hero */
	top: 50%;
	transform: translateY(-50%);
	width: 280px;
	height: 220px;
	opacity:.26;
	background:
		radial-gradient(circle at 20% 80%, transparent 52%, rgba(91,59,46,.35) 53%, transparent 54%),
		repeating-linear-gradient(165deg, rgba(91,59,46,.25) 0 1px, transparent 1px 10px);
	mask: radial-gradient(circle at 20% 80%, #000 0 55%, transparent 56%);
	pointer-events:none;
}
.decor--left{left: -40px; transform: translateY(-50%) rotate(-10deg)}
.decor--right{right: -40px; transform: translateY(-50%) rotate(10deg) scaleX(-1)}

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

/* Responsive */
@media (max-width: 1080px){
	.grid{grid-template-columns: 280px 1fr 280px}
	.panel img{height: 480px}
	.title{font-size: 62px}
	.subtitle{font-size: 38px}
}
@media (max-width: 900px){
	.topbar{flex-wrap:wrap; gap:12px}
	.nav{order:3; width:100%; justify-content:space-between; gap:14px}
	.grid{grid-template-columns: 1fr; gap:18px}
	.panel{border-radius: 26px}
	.panel img{height: 360px}
	.copy{padding-top: 10px}
	.title{font-size: 54px}
	.subtitle{font-size: 34px}
}

/* Prevent accidental horizontal scroll on small screens */
html, body { overflow-x: hidden; }

/* --- Mobile-first improvements (add near the end of the file) --- */
@media (max-width: 600px){
	/* Comfortable gutters + iOS safe areas */
	.topbar{
		padding: 16px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
		gap: 10px;
	}
	.hero{
		padding: 10px max(16px, env(safe-area-inset-left)) 26px max(16px, env(safe-area-inset-right));
	}

	/* Make logo + menu fit nicely */
	.logo{ font-size: 14px; }

	/* Nav: allow horizontal scroll instead of wrapping into multiple lines */
	.nav{
		order: 3;
		width: 100%;
		justify-content: flex-start;
		gap: 14px;
		padding: 6px 0 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.nav::-webkit-scrollbar{ display:none; }
	.nav__link{
		white-space: nowrap;
		font-size: 12px;
	}

	/* Search: icon-only on mobile */
	.search{
		width: 34px;
		height: 34px;
		border-radius: 12px;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.search__input{ display:none; }
	.search__icon{
		position: static;
		transform: none;
		font-size: 14px;
	}

	/* Grid: single column and place copy first */
	.grid{
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.copy{ order: 1; padding: 6px 0 0; }
	.panel--left{ order: 2; }
	.panel--right{ order: 3; }

	/* Panels: reduce height and remove extreme rounding */
	.panel{ border-radius: 18px; }
	.panel img{ height: auto; }

	/* Typography: scale down for small screens */
	.title{
		font-size: 44px;
		line-height: 1.05;
		white-space: normal;
	}
	.subtitle{
		font-size: 26px;
		line-height: 1.1;
	}
	.rule span{ width: 54px; }
	.desc{ font-size: 13px; }

	/* CTA + social: larger tap targets */
	.cta{ padding: 11px 28px; }
	.social__btn{
		width: 34px;
		height: 34px;
		font-size: 13px;
	}

	/* Countdown: ensure it never overflows */
	.coming{
		max-width: 100%;
		border-radius: 14px;
	}
	.coming__row{
		flex-direction: column;
		align-items: center;
		gap: 6px;
		text-align:center;
	}
	.timer{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Small tablets: slightly refined (optional but helps) */
@media (min-width: 601px) and (max-width: 900px){
	.panel img{ height: 320px; }
	.title{ font-size: 52px; }
	.subtitle{ font-size: 32px; }
}