/* ==========================================================================
   VALLERYAN — Main Stylesheet
   Quiet luxury design system. Desktop-first values; responsive.css refines.
   ========================================================================== */

:root {
	--v-dark-brown: #291d11;
	--v-muted-brown: #6e483c;
	--v-near-black: #231f20;
	--v-beige: #e1d4c2;
	--v-white: #ffffff;
	--v-ivory: #f8f5ef;
	--v-cream: #f4efe7;

	--v-font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
	--v-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--v-max-width: 1440px;
	--v-gap-desktop: 64px;
	--v-pad-x-desktop: clamp(48px, 4vw, 72px);
	--v-pad-x-tablet: 40px;
	--v-pad-x-mobile: 20px;

	--v-section-pad-desktop: clamp(80px, 8vw, 120px);
	--v-section-pad-tablet: 70px;
	--v-section-pad-mobile: 48px;

	--v-header-height: 128px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--v-font-sans);
	color: var(--v-near-black);
	background: var(--v-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
input { font-family: inherit; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.valleryan-skip-link {
	position: absolute;
	top: -60px;
	left: 10px;
	background: var(--v-dark-brown);
	color: var(--v-white);
	padding: 10px 18px;
	z-index: 9999;
	transition: top .2s ease;
}
.valleryan-skip-link:focus { top: 10px; }

*:focus-visible {
	outline: 2px solid var(--v-muted-brown);
	outline-offset: 2px;
}

.valleryan-container {
	max-width: var(--v-max-width);
	margin: 0 auto;
	padding: 0 var(--v-pad-x-desktop);
}

h1, h2, h3, h4 { font-family: var(--v-font-serif); font-weight: 500; margin: 0; line-height: 1.15; }

.valleryan-eyebrow {
	font-family: var(--v-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--v-muted-brown);
	margin: 0 0 18px;
}
.valleryan-eyebrow--light { color: var(--v-beige); }

.valleryan-heading-lg {
	font-family: var(--v-font-serif);
	font-size: clamp(32px, 3vw, 44px);
	font-weight: 500;
	color: var(--v-dark-brown);
	margin: 0 0 28px;
}
.valleryan-heading-lg--light { color: var(--v-white); }

.valleryan-body-copy { font-size: 16px; line-height: 1.7; color: var(--v-muted-brown); margin: 0 0 28px; max-width: 44ch; }
.valleryan-body-copy--light { color: var(--v-beige); }

.valleryan-divider {
	display: block;
	width: 56px;
	height: 1px;
	background: var(--v-dark-brown);
	margin: 20px 0 28px;
}
.valleryan-divider--light { background: var(--v-beige); }

.valleryan-text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--v-dark-brown);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, opacity .25s ease;
	padding-bottom: 3px;
}
.valleryan-text-link:hover { border-color: currentColor; opacity: .85; }
.valleryan-text-link--light { color: var(--v-beige); }

.valleryan-btn {
	display: inline-block;
	padding: 16px 40px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 1px;
	transition: background-color .25s ease, color .25s ease;
	border: 1px solid transparent;
}
.valleryan-btn--light {
	background: var(--v-white);
	color: var(--v-dark-brown);
}
.valleryan-btn--light:hover {
	background: var(--v-dark-brown);
	color: var(--v-white);
}
.valleryan-btn--dark {
	background: var(--v-dark-brown);
	color: var(--v-white);
	border-color: var(--v-dark-brown);
}
.valleryan-btn--dark:hover {
	background: transparent;
	color: var(--v-dark-brown);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.valleryan-header {
	position: relative;
	background: var(--v-white);
	border-bottom: 1px solid rgba(41, 29, 17, 0.08);
	z-index: 500;
}
.valleryan-header[data-stuck="true"] {
	position: sticky;
	top: 0;
	box-shadow: 0 4px 20px rgba(41,29,17,0.06);
}

.valleryan-header-row {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0 var(--v-pad-x-desktop);
}
.valleryan-header-row--utility { height: 84px; }
.valleryan-header-row--nav { height: 44px; border-top: 1px solid rgba(41,29,17,0.06); }

.valleryan-header-left, .valleryan-header-right {
	display: flex;
	align-items: center;
	gap: 20px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.valleryan-header-left { left: var(--v-pad-x-desktop); }
.valleryan-header-right { right: var(--v-pad-x-desktop); }

.valleryan-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--v-dark-brown);
	position: relative;
}
.valleryan-menu-toggle { display: none; }

.valleryan-header-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-height: 52px;
	display: flex;
	align-items: center;
}
.valleryan-header-logo img,
.valleryan-header-logo .custom-logo {
	max-height: 52px;
	width: auto;
}
.valleryan-logo-fallback {
	display: flex;
	align-items: center;
	gap: 10px;
}
.valleryan-logo-mark { height: 34px; width: auto; }
.valleryan-logo-word {
	font-family: var(--v-font-serif);
	font-size: 22px;
	letter-spacing: 0.12em;
	color: var(--v-dark-brown);
	font-weight: 500;
}

.valleryan-nav-list {
	display: flex;
	align-items: center;
	gap: 34px;
}
.valleryan-nav-list a {
	font-family: var(--v-font-serif);
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--v-dark-brown);
	position: relative;
	padding-bottom: 4px;
}
.valleryan-nav-list a::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--v-dark-brown);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.valleryan-nav-list a:hover::after { transform: scaleX(1); }

.valleryan-cart-link { position: relative; }
.valleryan-cart-count {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 50%;
	background: var(--v-dark-brown);
	color: var(--v-white);
	font-size: 10px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.valleryan-search-panel {
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	background: var(--v-white);
	border-bottom: 1px solid rgba(41,29,17,0.08);
	padding: 18px var(--v-pad-x-desktop);
}
.valleryan-search-form { display: flex; align-items: center; gap: 12px; max-width: 480px; margin: 0 auto; }
.valleryan-search-field {
	flex: 1;
	border: none;
	border-bottom: 1px solid var(--v-dark-brown);
	background: transparent;
	padding: 8px 4px;
	font-size: 15px;
	color: var(--v-near-black);
}
.valleryan-search-field:focus { outline: none; }

/* Mobile drawer (hidden on desktop by default, toggled via JS + responsive.css) */
.valleryan-mobile-drawer {
	position: fixed;
	top: 0; left: 0;
	width: min(320px, 84vw);
	height: 100vh;
	background: var(--v-white);
	z-index: 900;
	padding: 28px 28px;
	transform: translateX(-100%);
	transition: transform .3s ease;
}
.valleryan-mobile-drawer.is-open { transform: translateX(0); }
.valleryan-mobile-drawer .valleryan-nav-list {
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	margin-top: 50px;
}
.valleryan-mobile-drawer .valleryan-nav-list a { font-size: 20px; }
.valleryan-drawer-close { position: absolute; top: 24px; right: 24px; color: var(--v-dark-brown); }
.valleryan-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(35,31,32,.4);
	z-index: 850;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}
.valleryan-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.valleryan-hero {
	position: relative;
	min-height: 720px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	overflow: hidden;
}
.valleryan-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(35,31,32,.55) 0%, rgba(35,31,32,.15) 55%, rgba(35,31,32,0) 75%);
}
.valleryan-hero-inner { position: relative; width: 100%; }
.valleryan-hero-content { max-width: 560px; }
.valleryan-hero-heading {
	font-family: var(--v-font-serif);
	font-weight: 500;
	font-size: clamp(56px, 6.2vw, 88px);
	line-height: 1.02;
	color: var(--v-white);
	margin: 0;
	white-space: normal;
}
.valleryan-hero-body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--v-beige);
	margin: 0 0 34px;
}

/* ==========================================================================
   ESSENCE
   ========================================================================== */
.valleryan-essence { background: var(--v-cream); padding: var(--v-section-pad-desktop) 0; }
.valleryan-essence-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr 1fr;
	gap: var(--v-gap-desktop);
	align-items: center;
}
.valleryan-essence-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.valleryan-essence-copy p { font-size: 16px; line-height: 1.75; color: var(--v-muted-brown); }

/* ==========================================================================
   EXPLORE COLLECTIONS
   ========================================================================== */
.valleryan-collections { background: var(--v-ivory); padding: var(--v-section-pad-desktop) 0; }
.valleryan-section-head { text-align: center; margin-bottom: 52px; }
.valleryan-eyebrow-title {
	font-family: var(--v-font-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--v-dark-brown);
	margin: 0;
}
.valleryan-section-head .valleryan-divider { margin: 18px auto 0; }

.valleryan-collections-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
.valleryan-collection-card { display: block; }
.valleryan-collection-image { display: block; overflow: hidden; aspect-ratio: 3/4; }
.valleryan-collection-image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .5s ease;
}
.valleryan-collection-card:hover .valleryan-collection-image img { transform: scale(1.03); }
.valleryan-collection-caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 16px;
}
.valleryan-collection-title {
	font-family: var(--v-font-serif);
	font-size: 17px;
	letter-spacing: 0.06em;
	color: var(--v-dark-brown);
}
.valleryan-collection-cta {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--v-muted-brown);
}

/* ==========================================================================
   HERITAGE BANNER
   ========================================================================== */
.valleryan-heritage {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
}
.valleryan-heritage-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(41,29,17,.78) 0%, rgba(41,29,17,.4) 60%, rgba(41,29,17,.15) 100%);
}
.valleryan-heritage-inner { position: relative; }
.valleryan-heritage-text { max-width: 540px; }
.valleryan-heritage-body { color: var(--v-beige); font-size: 16px; line-height: 1.7; margin: 0 0 28px; }

/* ==========================================================================
   CRAFTSMANSHIP
   ========================================================================== */
.valleryan-craft { background: var(--v-cream); padding: var(--v-section-pad-desktop) 0; }
.valleryan-craft-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.3fr;
	gap: var(--v-gap-desktop);
	align-items: center;
}
.valleryan-craft-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.valleryan-craft-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; margin-bottom: 14px; }
.valleryan-craft-card span {
	display: block;
	font-family: var(--v-font-serif);
	font-size: 15px;
	color: var(--v-dark-brown);
	text-align: center;
}

/* ==========================================================================
   WOLF / BRAND PHILOSOPHY
   ========================================================================== */
.valleryan-wolf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 620px;
}
.valleryan-wolf-image { overflow: hidden; }
.valleryan-wolf-image img { width: 100%; height: 100%; object-fit: cover; min-height: 620px; }
.valleryan-wolf-text {
	background: var(--v-near-black);
	display: flex;
	align-items: center;
	padding: 0 var(--v-pad-x-desktop);
}
.valleryan-wolf-text-inner { max-width: 460px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.valleryan-footer { background: var(--v-ivory); border-top: 1px solid rgba(41,29,17,.08); }
.valleryan-footer-top {
	display: grid;
	grid-template-columns: 1.3fr 0.8fr 0.8fr 0.8fr 1.2fr;
	gap: 40px;
	padding: var(--v-section-pad-desktop) var(--v-pad-x-desktop) 60px;
}
.valleryan-footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.valleryan-footer-logo img { max-height: 40px; width: auto; }
.valleryan-footer-logo span { font-family: var(--v-font-serif); font-size: 20px; color: var(--v-dark-brown); }
.valleryan-footer-tagline {
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--v-muted-brown);
	margin: 0 0 24px;
}
.valleryan-social-icons { display: flex; gap: 14px; }
.valleryan-social-icon { color: var(--v-dark-brown); }

.valleryan-footer-col h3 {
	font-family: var(--v-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v-dark-brown);
	margin-bottom: 20px;
}
.valleryan-footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.valleryan-footer-col a { font-size: 14px; color: var(--v-muted-brown); }
.valleryan-footer-col a:hover { color: var(--v-dark-brown); }

.valleryan-footer-newsletter h3 {
	font-family: var(--v-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--v-dark-brown);
	margin-bottom: 14px;
}
.valleryan-footer-newsletter p { font-size: 14px; color: var(--v-muted-brown); margin: 0 0 20px; }
.valleryan-newsletter-form {
	display: flex;
	border-bottom: 1px solid var(--v-dark-brown);
	padding-bottom: 10px;
}
.valleryan-newsletter-form input {
	flex: 1;
	border: none;
	background: transparent;
	font-size: 14px;
	padding: 4px;
}
.valleryan-newsletter-form input:focus { outline: none; }
.valleryan-newsletter-form button { color: var(--v-dark-brown); }

.valleryan-footer-bottom { border-top: 1px solid rgba(41,29,17,.08); }
.valleryan-footer-bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 22px var(--v-pad-x-desktop);
	font-size: 12px;
	color: var(--v-muted-brown);
}
.valleryan-footer-legal { display: flex; gap: 20px; }
.valleryan-footer-legal a:hover { color: var(--v-dark-brown); }

/* ==========================================================================
   GENERIC PAGE / JOURNAL / SEARCH / 404
   ========================================================================== */
.valleryan-page, .valleryan-single, .valleryan-journal, .valleryan-404 {
	padding: var(--v-section-pad-desktop) 0;
}
.valleryan-page-title { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 30px; color: var(--v-dark-brown); }
.valleryan-page-content { max-width: 760px; font-size: 16px; line-height: 1.8; color: var(--v-muted-brown); }
.valleryan-page-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 40px; }

.valleryan-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.valleryan-journal-card h2 { font-size: 20px; margin: 16px 0 8px; }
.valleryan-journal-card p { font-size: 14px; color: var(--v-muted-brown); }
.valleryan-journal-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.valleryan-404 { text-align: center; }
.valleryan-404 p { color: var(--v-muted-brown); margin-bottom: 30px; }