/* Zerof Oil Store — main stylesheet
   Palette: Mineral Ivory / Graphite / Signature Lime (zer0F V2.1 locked brand system) */

:root {
	--ivory: #F3EFE3;
	--ivory-deep: #EAE4D2;
	--graphite: #1B1C18;
	--graphite-soft: #33352E;
	--lime: #D8E45C;
	--muted: #6E6A5C;

	--font-serif: Georgia, 'Times New Roman', serif;
	--font-mono: 'Courier New', Courier, monospace;

	--wrap-width: 1120px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ivory);
	color: var(--graphite);
	font-family: var(--font-serif);
	line-height: 1.6;
}

h1, h2, h3 {
	font-family: var(--font-serif);
	color: var(--graphite);
	margin: 0 0 .5em;
	line-height: 1.2;
}

p { margin: 0 0 1em; }

a {
	color: var(--graphite);
	text-decoration: underline;
	text-decoration-color: var(--lime);
	text-underline-offset: 3px;
}
a:hover { color: var(--graphite-soft); }

.wrap {
	max-width: var(--wrap-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* Buttons */
.btn {
	display: inline-block;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .85rem;
	padding: 14px 28px;
	border: 1px solid var(--graphite);
	border-radius: 2px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.btn--primary {
	background: var(--graphite);
	color: var(--ivory);
}
.btn--primary:hover {
	background: var(--lime);
	border-color: var(--lime);
	color: var(--graphite);
}
.btn--ghost {
	background: transparent;
	color: var(--graphite);
}
.btn--ghost:hover {
	background: var(--graphite);
	color: var(--ivory);
}

/* Eyebrow / tags */
.eyebrow {
	display: inline-block;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75rem;
	color: var(--graphite);
	background: var(--lime);
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: 1em;
}

/* Header */
.site-header {
	background: var(--ivory);
	border-bottom: 1px solid rgba(27,28,24,.1);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 18px;
	padding-bottom: 18px;
	gap: 16px;
}
.site-logo {
	font-family: var(--font-serif);
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--graphite);
	text-decoration: none;
}
.site-nav {
	display: flex;
	gap: 24px;
	font-family: var(--font-mono);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.site-nav a { color: var(--graphite); text-decoration: none; }
.site-nav a:hover { color: var(--graphite-soft); text-decoration: underline; text-decoration-color: var(--lime); }
.site-header__actions .cart-link {
	font-family: var(--font-mono);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--graphite);
	text-decoration: none;
}

/* Section rhythm */
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--graphite { background: var(--graphite); color: var(--ivory); }
.section--graphite h2, .section--graphite h3 { color: var(--ivory); }
.section--deep { background: var(--ivory-deep); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }
.section-head h2 { font-size: 2rem; }
.section-head p { color: var(--muted); }
.section--graphite .section-head p { color: #C9C4B2; }

/* Hero */
.hero {
	padding: 72px 0;
}
.hero__grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: center;
	gap: 48px;
}
.hero h1 {
	font-size: clamp(2rem, 4vw, 3.25rem);
}
.hero__lede {
	max-width: 480px;
	margin: 0 0 2em;
	color: var(--muted);
}
.hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.hero__visual {
	display: flex;
	justify-content: center;
}
.hero__visual img {
	max-width: 100%;
	height: auto;
	max-height: 560px;
}

@media (max-width: 860px) {
	.hero__grid { grid-template-columns: 1fr; text-align: center; }
	.hero__lede { margin-left: auto; margin-right: auto; }
	.hero__actions { justify-content: center; }
	.hero__visual img { max-height: 360px; }
}

/* Minimal hero — bottle animation + short copy + inline waitlist */
.hero--minimal {
	padding: 64px 0 88px;
	text-align: center;
}
.hero__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 860px;
}
.hero__stack h1 {
	font-size: clamp(1.9rem, 4vw, 2.75rem);
	margin-top: .3em;
}
.hero__stack .eyebrow { margin-bottom: 0; }
.hero__stack .hero__lede {
	max-width: 420px;
	margin: 0 auto 1.75em;
	text-align: center;
}
.hero__bottle-anim {
	width: 100%;
	max-width: 260px;
	margin-bottom: 8px;
	animation: zerof-float 5s ease-in-out infinite;
}
.hero__bottle-anim img {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 24px 32px rgba(27,28,24,.18));
}
@keyframes zerof-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

.waitlist-form--inline { width: 100%; max-width: 420px; }

/* Hero product video */
.hero-video {
	position: relative;
	width: 100%;
	max-width: 480px;
	aspect-ratio: 4 / 5;
	margin: 0 auto 20px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--ivory-deep);
	border: 1px solid rgba(27,28,24,.1);
	box-shadow: 0 18px 30px rgba(27,28,24,.14);
}
.hero-video__el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.hero-video__mute {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba(27,28,24,.55);
	color: var(--ivory);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}
.hero-video__mute:hover { background: rgba(27,28,24,.75); }

/* Mobile — full-bleed, taller than native 16:9 */
@media (max-width: 640px) {
	.hero-video {
		max-width: none;
		width: 100vw;
		aspect-ratio: 4 / 5;
		margin-left: 50%;
		transform: translateX(-50%);
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
	.hero-video { max-width: 620px; aspect-ratio: 4 / 5; }
}

/* Laptop / desktop */
@media (min-width: 1025px) {
	.hero-video { max-width: 820px; aspect-ratio: 16 / 10; }
}

/* Brand reel — bottle / label / pour / seed (kept for reuse, unused on homepage) */
.reel { width: 100%; max-width: 300px; margin: 0 auto 20px; }
.reel-viewport {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--ivory-deep);
	border: 1px solid rgba(27,28,24,.1);
	border-radius: 8px;
	overflow: hidden;
}
.reel-scene {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .7s ease;
	pointer-events: none;
}
.reel-scene.is-active { opacity: 1; pointer-events: auto; }
.reel-scene__visual {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 700px;
}
.reel-scene__caption {
	font-family: var(--font-mono);
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
	margin: 10px 0 0;
}

/* Scene: bottle */
.reel-bottle-img {
	max-height: 230px;
	width: auto;
	filter: drop-shadow(0 18px 22px rgba(27,28,24,.18));
	animation: reel-bottle-spin 6s ease-in-out infinite;
	transform-style: preserve-3d;
}
@keyframes reel-bottle-spin {
	0%, 100% { transform: rotateY(-16deg); }
	50% { transform: rotateY(16deg); }
}

/* Scene: label */
.reel-label-card {
	width: 190px;
	padding: 34px 22px;
	text-align: center;
	border-radius: 6px;
	background: linear-gradient(135deg, #B7BB93, #7C7D62);
	box-shadow: 0 16px 28px rgba(27,28,24,.18);
	animation: reel-label-pulse 4s ease-in-out infinite;
}
.reel-label-card__wordmark {
	display: block;
	font-family: var(--font-serif);
	font-weight: bold;
	font-size: 1.9rem;
	color: #201F18;
}
.reel-label-card__zero { color: #A9822F; }
.reel-label-card__hairline {
	display: block;
	width: 70%;
	height: 2px;
	margin: 10px auto;
	background: #A9822F;
}
.reel-label-card__sub {
	display: block;
	font-family: var(--font-mono);
	font-weight: bold;
	font-size: .68rem;
	letter-spacing: .1em;
	color: #201F18;
}
.reel-label-card__sub2 {
	display: block;
	font-family: var(--font-mono);
	font-size: .6rem;
	letter-spacing: .05em;
	color: #3A3B2E;
	margin-top: 4px;
}
@keyframes reel-label-pulse {
	0%, 100% { transform: translateY(0) scale(1); }
	50% { transform: translateY(-6px) scale(1.02); }
}

/* Scene: pour */
.reel-pour { position: relative; width: 120px; height: 200px; }
.reel-pour__stream {
	position: absolute;
	top: 0;
	left: 50%;
	width: 5px;
	height: 0;
	background: linear-gradient(180deg, #D9B84A, #8B6914);
	border-radius: 3px;
	transform: translateX(-50%);
	animation: reel-pour-stream 4s ease-in-out infinite;
}
.reel-pour__pool {
	position: absolute;
	bottom: 6px;
	left: 50%;
	width: 90px;
	height: 16px;
	background: #8B6914;
	border-radius: 50%;
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	animation: reel-pour-pool 4s ease-in-out infinite;
}
@keyframes reel-pour-stream {
	0%, 8%   { height: 0;    opacity: 0; }
	14%      { opacity: 1; }
	48%      { height: 150px; opacity: 1; }
	68%      { height: 150px; opacity: 1; }
	86%,100% { height: 150px; opacity: 0; }
}
@keyframes reel-pour-pool {
	0%, 38%  { transform: translateX(-50%) scaleX(0); opacity: 0; }
	48%      { opacity: 1; }
	68%      { transform: translateX(-50%) scaleX(1); opacity: 1; }
	86%,100% { transform: translateX(-50%) scaleX(1); opacity: 0; }
}

/* Scene: seed */
.reel-seeds {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	max-width: 190px;
}
.reel-seed {
	width: 32px;
	height: 19px;
	background: linear-gradient(135deg, #CDAB78, #8C6C40);
	border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	box-shadow: inset -3px -3px 5px rgba(0,0,0,.18);
	animation: reel-seed-bounce 2.2s ease-in-out infinite;
}
.reel-seed:nth-child(2) { animation-delay: .15s; }
.reel-seed:nth-child(3) { animation-delay: .3s; }
.reel-seed:nth-child(4) { animation-delay: .45s; }
.reel-seed:nth-child(5) { animation-delay: .6s; }
@keyframes reel-seed-bounce {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-8px) rotate(6deg); }
}

/* Dots */
.reel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.reel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(27,28,24,.2);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
.reel-dot.is-active { background: var(--lime); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
	.reel-bottle-img,
	.reel-label-card,
	.reel-pour__stream,
	.reel-pour__pool,
	.reel-seed { animation: none; }
}

/* Entrance reveal */
.reveal {
	opacity: 0;
	transform: translateY(14px);
	animation: zerof-reveal .6s ease-out forwards;
	animation-delay: var(--reveal-delay, 0s);
}
@keyframes zerof-reveal {
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__bottle-anim { animation: none; }
	.reveal { animation: none; opacity: 1; transform: none; }
}

/* Desire moment */
.desire {
	text-align: center;
	background: var(--ivory-deep);
}
.desire__statement {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	max-width: 640px;
	margin: 0 auto;
	color: var(--graphite);
}

/* The zer0F Standard */
.standard__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}
.standard-stage {
	background: var(--ivory);
	border: 1px solid rgba(27,28,24,.12);
	border-radius: 4px;
	padding: 4px 0;
}
.standard-stage__num {
	font-family: var(--font-mono);
	font-size: .75rem;
	color: var(--muted);
}
.standard-stage summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 24px;
}
.standard-stage summary::-webkit-details-marker { display: none; }
.standard-stage summary h3 {
	margin: .3em 0 0;
	font-size: 1.15rem;
}
.standard-stage__philosophy {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: .7rem;
	color: var(--muted);
}
.standard-stage__body {
	padding: 0 24px 20px;
	color: var(--muted);
}
.standard-stage__body p { margin: 0 0 .75em; }
.standard-stage[open] { border-color: var(--lime); }

/* Generic proof/coming-soon cards */
.proof-teaser {
	background: var(--ivory);
	border: 1px solid rgba(27,28,24,.12);
	border-radius: 4px;
	padding: 32px;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.proof-teaser__status {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	background: var(--graphite);
	color: var(--lime);
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: 1em;
}

/* Comparison table */
.compare-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ivory);
	font-size: .95rem;
}
.compare-table th, .compare-table td {
	border: 1px solid rgba(27,28,24,.12);
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
}
.compare-table thead th {
	background: var(--graphite);
	color: var(--ivory);
	font-family: var(--font-mono);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.compare-note {
	font-size: .8rem;
	color: var(--muted);
	margin-top: 12px;
}

/* Journal teaser */
.journal-teaser {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 32px;
	align-items: center;
	max-width: 880px;
	margin: 0 auto;
	background: var(--ivory);
	border: 1px solid rgba(27,28,24,.12);
	border-radius: 4px;
	overflow: hidden;
}
.journal-teaser__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.journal-teaser__body { padding: 28px 28px 28px 0; }
.journal-teaser:not(:has(.journal-teaser__image)) .journal-teaser__body { padding: 28px; grid-column: 1 / -1; }
.journal-teaser__body h3 { margin-bottom: .4em; }
.journal-teaser__body h3 a { color: var(--graphite); }
.journal-teaser__body p { color: var(--muted); }
.journal-teaser__link { font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }

@media (max-width: 640px) {
	.journal-teaser { grid-template-columns: 1fr; }
	.journal-teaser__body { padding: 24px; }
}

/* Purchase module */
.purchase__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.purchase__grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pack-card {
	background: var(--ivory);
	border: 1px solid rgba(27,28,24,.12);
	border-radius: 4px;
	padding: 28px;
	text-align: center;
}
.pack-card--hero { border-color: var(--lime); border-width: 2px; }
.pack-card__label {
	font-family: var(--font-mono);
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--muted);
}
.pack-card__image {
	display: block;
	max-width: 100%;
	height: 220px;
	object-fit: contain;
	margin: 16px auto;
}
.pack-card__image--sm { height: 160px; }
.pack-card h3 { margin: .4em 0; }

/* FAQ */
.faq-item { border-bottom: 1px solid rgba(27,28,24,.12); padding: 18px 0; }
.faq-item summary {
	cursor: pointer;
	list-style: none;
	font-weight: bold;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { color: var(--muted); margin: .75em 0 0; }

/* Waitlist */
.waitlist-card {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
}
.waitlist-card p { color: var(--muted); }
.waitlist-form { margin-top: 24px; }
.waitlist-form__row {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.waitlist-form__row input[type="email"] {
	flex: 1 1 260px;
	max-width: 320px;
	padding: 14px 16px;
	border: 1px solid rgba(27,28,24,.2);
	border-radius: 2px;
	font-family: var(--font-serif);
	font-size: 1rem;
	background: var(--ivory);
	color: var(--graphite);
}
.waitlist-form__row .btn {
	border: none;
	cursor: pointer;
}
.waitlist-form__message {
	margin: 12px 0 0;
	font-family: var(--font-mono);
	font-size: .8rem;
}
.waitlist-form__message--success { color: var(--graphite-soft); }
.waitlist-form__message--error { color: #B3261E; }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}

/* Blog entry content */
.entry-content { font-size: 1.05rem; }
.entry-content h2 { font-size: 1.5rem; margin-top: 1.6em; }
.entry-content h3 { font-size: 1.2rem; margin-top: 1.4em; }
.entry-content p { color: var(--graphite-soft); }
.entry-content ul, .entry-content ol { color: var(--graphite-soft); padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { max-width: 100%; height: auto; border-radius: 4px; }
.entry-content blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--lime);
	font-style: italic;
	color: var(--muted);
}

/* CTA */
.cta { text-align: center; }

/* Footer */
.site-footer {
	background: var(--graphite);
	color: #C9C4B2;
	padding: 64px 0 0;
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 48px;
}
.site-footer .site-logo { color: var(--ivory); }
.site-footer__brand p { color: #C9C4B2; max-width: 320px; }
.site-footer__links h3 {
	font-family: var(--font-mono);
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--ivory);
	margin-bottom: 1em;
}
.site-footer__links a {
	display: block;
	color: #C9C4B2;
	text-decoration: none;
	margin-bottom: .6em;
}
.site-footer__links a:hover { color: var(--lime); }
.site-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.08);
	padding: 20px 0;
	font-family: var(--font-mono);
	font-size: .75rem;
	color: #9A957F;
}

@media (max-width: 720px) {
	.site-nav { display: none; }
	.site-footer__inner { grid-template-columns: 1fr; }
	.section { padding: 64px 0; }
}