/* =========================================================================
   OREGON DREAMS — main.css
   Dark, gritty, cinematic PNW farm-to-shelf design system.

   Type:   Archivo super-family — expanded black (display) + regular (body)
   Color:  near-black / charcoal / deep forest, cyan accent, cream + amber tones
   Accent: #05f4f7 used sparingly as sharp highlights on dark fields
   ========================================================================= */

/* ----------------------------- Tokens ---------------------------------- */
:root {
	/* Core palette */
	--od-black:    #07090a;
	--od-char:     #14181a;
	--od-char-2:   #1b2123;
	--od-forest:   #0d1f17;
	--od-forest-2: #102a1d;
	--od-accent:   #05f4f7;
	--od-accent-d: #03b9bc;
	--od-cream:    #ece3d0;
	--od-amber:    #d98a3a;
	--od-green:    #5b7d52;

	/* Text */
	--od-fg:       #ece3d0;
	--od-fg-soft:  rgba(236, 227, 208, 0.66);
	--od-fg-dim:   rgba(236, 227, 208, 0.42);
	--od-line:     rgba(236, 227, 208, 0.12);

	/* Type */
	--od-display: "Archivo", system-ui, sans-serif;
	--od-body:    "Archivo", system-ui, sans-serif;
	--od-stretch: 125%;  /* expanded width axis for display type */

	/* Fluid sizing */
	--od-h1: clamp(3rem, 9vw, 8.5rem);
	--od-h2: clamp(2.2rem, 5.6vw, 5rem);
	--od-h3: clamp(1.15rem, 1.6vw, 1.4rem);
	--od-idx: clamp(2.4rem, 6vw, 5rem);

	/* Layout */
	--od-wrap:  1180px;
	--od-gutter: clamp(1.25rem, 4vw, 4rem);
	--od-radius: 3px;

	/* Motion */
	--od-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------ Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.od-body {
	margin: 0;
	background: var(--od-black);
	color: var(--od-fg);
	font-family: var(--od-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Visible focus for keyboard users everywhere. */
a:focus-visible, button:focus-visible, .od-btn:focus-visible {
	outline: 2px solid var(--od-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Skip link */
.od-skip-link {
	position: fixed; top: -100px; left: 16px; z-index: 1000;
	background: var(--od-accent); color: #02100f;
	padding: 10px 16px; border-radius: 8px; font-weight: 700;
	transition: top .2s var(--od-ease);
}
.od-skip-link:focus { top: 16px; }

/* ------------------------------ Layout --------------------------------- */
.od-wrap { width: 100%; max-width: var(--od-wrap); margin-inline: auto; padding-inline: var(--od-gutter); }
.od-wrap--narrow { max-width: 760px; }
.od-main--basic { padding: 22vh 0 18vh; }

/* --------------------------- Film grain -------------------------------- */
/* Fixed overlay across the whole page. SVG turbulence baked into a data URI. */
.od-grain { display: none;
	position: fixed; inset: 0; z-index: 60; pointer-events: none;
	opacity: 0.06; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px 200px;
	animation: od-grain-shift 8s steps(6) infinite;
}
@keyframes od-grain-shift {
	0%   { background-position: 0 0; }
	100% { background-position: 200px 200px; }
}

/* ------------------------------ Topbar --------------------------------- */
.od-topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 70;
	display: flex; align-items: center; justify-content: space-between;
	padding: clamp(0.8rem, 2vw, 1.4rem) var(--od-gutter);
}
/* Soft top scrim so white brand + pill stay legible over any section,
   without inverting an uploaded logo (which mix-blend-mode would). */
.od-topbar::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(180deg, rgba(7,9,10,0.55), rgba(7,9,10,0));
}
.od-brand { display: flex; flex-direction: column; line-height: 1; }
.od-brand--logo { flex-direction: row; align-items: center; }
.od-brand__img { display: block; height: auto; max-width: 50vw; }
.od-brand__mark { font-family: var(--od-display); font-weight: 800; font-stretch: var(--od-stretch); text-transform: uppercase; letter-spacing: -0.005em; font-size: 1.15rem; color: #fff; }
.od-brand__sub  { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; opacity: 0.8; margin-top: 4px; }
.od-age-pill {
	font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
	border: 1px solid #fff; color: #fff; border-radius: 999px;
	padding: 5px 11px; flex: none;
}

/* ------------------------------ Eyebrow -------------------------------- */
.od-eyebrow {
	display: inline-flex; align-items: center; gap: 0.7em;
	font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
	color: var(--od-accent); margin: 0 0 1.6rem; font-weight: 700;
}
.od-eyebrow::before {
	content: ""; width: 1.8em; height: 1px; background: var(--od-accent);
	display: inline-block; opacity: 0.8;
}

/* ------------------------ Chapter masthead ----------------------------- */
/* Index numeral + hairline + kicker, used to give the page chapter rhythm. */
.od-chapter { display: flex; align-items: baseline; gap: 1.1rem; margin: 0 0 clamp(1.8rem, 5vh, 3.2rem); }
.od-chapter__idx {
	font-family: var(--od-display); font-weight: 900; font-stretch: var(--od-stretch);
	font-size: 1rem; color: var(--od-accent); line-height: 1; letter-spacing: -0.01em;
}
.od-chapter__rule { height: 1px; width: clamp(28px, 6vw, 64px); background: var(--od-line); align-self: center; }
.od-chapter__label {
	font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase;
	color: var(--od-fg-dim); font-weight: 700;
}
.od-chapter--center { justify-content: center; }

/* ----------------------------- Headings -------------------------------- */
.od-h2 {
	font-family: var(--od-display);
	font-weight: 800;
	font-stretch: var(--od-stretch);
	font-size: var(--od-h2);
	line-height: 0.92;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	color: var(--od-cream);
	text-wrap: balance;
}
/* Emphasis voice inside a display heading. */
.od-em { color: var(--od-accent); }

/* ------------------------------ Prose ---------------------------------- */
.od-prose { color: var(--od-fg-soft); font-size: 1.08rem; }
.od-prose p { margin: 0 0 1.15rem; }
.od-prose strong { color: var(--od-cream); font-weight: 600; }

/* ----------------------------- Buttons --------------------------------- */
.od-btn {
	position: relative; overflow: hidden;
	display: inline-flex; align-items: center; gap: 0.7em;
	font-family: var(--od-body); font-weight: 700;
	font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
	padding: 1.05em 1.7em; border-radius: 2px;
	border: 1px solid transparent; cursor: pointer;
	transition: color .4s var(--od-ease), border-color .4s var(--od-ease), background .4s var(--od-ease);
}
/* Trailing arrow that nudges on hover. */
.od-btn::after {
	content: "\2192"; font-size: 1.15em; line-height: 1; font-weight: 400;
	transform: translateX(0); transition: transform .4s var(--od-ease);
}
.od-btn:hover::after { transform: translateX(4px); }

.od-btn--solid { background: var(--od-accent); color: #02100f; }
/* Fill sweep: a darker accent slides across on hover (sits behind the label). */
.od-btn--solid::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--od-cream);
	transform: translateX(-101%); transition: transform .45s var(--od-ease);
}
.od-btn--solid:hover { color: #02100f; }
.od-btn--solid:hover::before { transform: translateX(0); }

.od-btn--ghost {
	background: transparent; border-color: var(--od-line); color: var(--od-cream);
}
.od-btn--ghost:hover { border-color: var(--od-accent); color: #fff; }

/* ========================================================================
   HERO
   ===================================================================== */
.od-hero {
	position: relative;
	min-height: var(--od-hero-h, 100vh);
	display: flex; align-items: center;
	overflow: hidden;
	background: var(--od-black);
	padding: clamp(7rem, 16vh, 11rem) 0;
}
.od-hero__bg { position: absolute; inset: 0; z-index: 0; }

/* Gradient style — slow living wash of forest + accent over near-black. */
.od-hero--gradient .od-hero__bg {
	background:
		radial-gradient(80% 60% at 20% 18%, rgba(5,244,247,0.10), transparent 60%),
		radial-gradient(90% 70% at 85% 90%, rgba(91,125,82,0.16), transparent 60%),
		linear-gradient(160deg, var(--od-forest) 0%, var(--od-black) 70%);
	background-size: 160% 160%, 160% 160%, 100% 100%;
	animation: od-hero-drift 24s ease-in-out infinite alternate;
}
@keyframes od-hero-drift {
	0%   { background-position: 0% 0%, 100% 100%, 0 0; }
	100% { background-position: 30% 20%, 70% 80%, 0 0; }
}
/* Image style — cover photo with adjustable dark overlay. */
.od-hero--image .od-hero__bg {
	background-image: var(--od-hero-img); background-size: cover; background-position: center;
}
.od-hero--image .od-hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(7,9,10, var(--od-hero-overlay, 0.55));
}
.od-hero--solid .od-hero__bg { background: var(--od-black); }

/* Drifting motes for ambient life (paused for reduced motion below). */
.od-hero__mote {
	position: absolute; width: 4px; height: 4px; border-radius: 50%;
	background: var(--od-accent); opacity: 0.0; filter: blur(0.5px);
	animation: od-mote-float 9s linear infinite;
}
.od-hero__mote:nth-child(1){ left: 12%; animation-delay: 0s;  }
.od-hero__mote:nth-child(2){ left: 30%; animation-delay: 1.6s; }
.od-hero__mote:nth-child(3){ left: 48%; animation-delay: 3.1s; }
.od-hero__mote:nth-child(4){ left: 66%; animation-delay: 0.8s; }
.od-hero__mote:nth-child(5){ left: 81%; animation-delay: 2.4s; }
.od-hero__mote:nth-child(6){ left: 93%; animation-delay: 4s;  }
@keyframes od-mote-float {
	0%   { transform: translateY(102vh) scale(0.6); opacity: 0; }
	10%  { opacity: 0.5; }
	90%  { opacity: 0.5; }
	100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

.od-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: none;
}
.od-hero__content {
	position: relative; z-index: 3;
	text-align: left; width: 100%; max-width: 64rem;
	padding-inline: var(--od-gutter);
}
.od-hero__headline {
	font-family: var(--od-display);
	font-weight: 900;
	font-stretch: var(--od-stretch);
	font-size: var(--od-h1);
	line-height: 0.86;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 1.8rem;
	color: #fff;
	text-wrap: balance;
}
.od-hero__sub {
	max-width: 46ch; margin: 0 0 2.6rem;
	color: rgba(255,255,255,0.8); font-size: 1.08rem; line-height: 1.6;
}
.od-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: flex-start; }

/* ========================================================================
   TRANSITION
   ===================================================================== */
.od-transition {
	position: relative; overflow: hidden;
	min-height: 88vh; display: grid; place-items: center;
	background: var(--od-black);
}
.od-transition__texture {
	position: absolute; inset: 0; opacity: 0.5;
	background:
		radial-gradient(60% 40% at 20% 20%, rgba(91,125,82,0.14), transparent 60%),
		radial-gradient(50% 50% at 85% 75%, rgba(217,138,58,0.10), transparent 60%);
}
.od-transition__line {
	position: relative; z-index: 2; text-align: center;
	font-family: var(--od-display); font-weight: 800; font-stretch: var(--od-stretch);
	font-size: clamp(1.9rem, 5.2vw, 4rem); line-height: 0.98;
	letter-spacing: -0.01em; text-transform: uppercase; color: var(--od-cream);
	max-width: 18ch; margin-inline: auto; text-wrap: balance;
}
/* Drifting motes (pollen/dust) — decorative */
.od-transition__motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.od-mote {
	position: absolute;
	left: calc((var(--i) * 7%) + 2%);
	bottom: -10px;
	width: 3px; height: 3px; border-radius: 50%;
	background: rgba(236,227,208,0.5);
	filter: blur(0.4px);
	opacity: 0;
	animation: od-mote-rise calc(11s + (var(--i) * 0.7s)) linear infinite;
	animation-delay: calc(var(--i) * -1.3s);
}
@keyframes od-mote-rise {
	0%   { transform: translateY(0) translateX(0); opacity: 0; }
	12%  { opacity: 0.7; }
	100% { transform: translateY(-92vh) translateX(28px); opacity: 0; }
}

/* ========================================================================
   FARM STORY
   ===================================================================== */
.od-story {
	position: relative;
	padding: clamp(8rem, 20vh, 16rem) 0;
	background: var(--od-black);
}
.od-story__grid {
	display: grid; grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 6vw, 6rem); align-items: center; width: 100%;
}
.od-story__text { max-width: 36rem; }

/* Stat ticker — spec-sheet row, accent lead dot, wrap-safe */
.od-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.9rem; padding: 0; margin: 2.4rem 0 0; }
.od-stat {
	display: inline-flex; align-items: center;
	font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
	color: var(--od-fg-soft);
}
.od-stat::before {
	content: ""; width: 5px; height: 5px; border-radius: 50%;
	background: var(--od-accent); margin-right: 0.7em; flex: none;
}

/* Media panel */
.od-story__media {
	position: relative; aspect-ratio: 4 / 5; width: 100%;
	border: 1px solid var(--od-line); border-radius: var(--od-radius);
	overflow: hidden; isolation: isolate;
	background: rgba(236,227,208,0.02);
}
.od-story__glow {
	position: absolute; inset: -10%; z-index: 0;
	background: radial-gradient(circle at 50% 40%, rgba(5,244,247,0.18), rgba(91,125,82,0.08) 45%, transparent 70%);
	filter: blur(30px);
}
.od-story__img {
	position: relative; z-index: 1;
	width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ========================================================================
   WHY FARM-OWNED — editorial numbered list (cardless)
   ===================================================================== */
.od-why { padding: clamp(8rem, 20vh, 16rem) 0; background: var(--od-black); }
.od-why__headline { max-width: 18ch; margin-bottom: clamp(3rem, 8vh, 5rem); }

.od-why__list { border-top: 1px solid var(--od-line); }
.od-row {
	display: grid;
	grid-template-columns: clamp(3rem, 8vw, 7rem) minmax(12rem, 1fr) 1.3fr;
	gap: clamp(1.2rem, 4vw, 3.5rem);
	align-items: start;
	padding: clamp(2rem, 4.5vh, 3.2rem) 0;
	border-bottom: 1px solid var(--od-line);
	transition: background .5s var(--od-ease);
}
.od-row:hover { background: rgba(236,227,208,0.018); }
.od-row__idx {
	font-family: var(--od-display); font-weight: 900; font-stretch: var(--od-stretch);
	font-size: var(--od-idx); line-height: 0.8; color: var(--od-accent);
	letter-spacing: -0.02em;
}
.od-row__title {
	font-family: var(--od-display); font-weight: 800; font-stretch: var(--od-stretch);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	line-height: 0.98; letter-spacing: -0.005em; text-transform: uppercase;
	margin: 0.1em 0 0; color: var(--od-cream); text-wrap: balance;
}
.od-row__text { color: var(--od-fg-soft); margin: 0.35em 0 0; font-size: 1.02rem; line-height: 1.6; }

/* ========================================================================
   GALLERY
   ===================================================================== */
.od-gallery { padding: clamp(6rem, 14vh, 10rem) 0; background: var(--od-black); }
.od-gallery__grid {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.4vw, 2rem);
	align-items: start;
}
.od-gallery__item { position: relative; will-change: transform; }
.od-gallery__item.is-wide { grid-column: 1 / -1; }
.od-gallery__media {
	position: relative; overflow: hidden; border-radius: var(--od-radius);
	background: var(--od-char-2); aspect-ratio: 4 / 3;
}
.od-gallery__item.is-wide .od-gallery__media { aspect-ratio: 21 / 9; }
.od-gallery__media img {
	width: 100%; height: 100%; object-fit: cover;
	transform: scale(1.04);
	transition: transform 1s var(--od-ease), filter 1s var(--od-ease);
	filter: saturate(0.95) brightness(0.92);
}
.od-gallery__item:hover .od-gallery__media img { transform: scale(1.09); filter: saturate(1.05) brightness(1); }
.od-gallery__caption {
	display: flex; align-items: baseline; gap: 0.7em;
	margin-top: 1rem; font-size: 0.74rem; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--od-fg-soft); font-weight: 600;
}
.od-gallery__idx { font-family: var(--od-display); font-weight: 900; font-stretch: var(--od-stretch); letter-spacing: 0; color: var(--od-accent); }

/* ========================================================================
   RETAIL
   ===================================================================== */
.od-retail {
	position: relative; overflow: hidden;
	padding: clamp(8rem, 20vh, 16rem) 0; text-align: center;
	background: var(--od-black);
}
.od-retail__glow {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
	background: radial-gradient(circle, rgba(5,244,247,0.12), transparent 60%);
	filter: blur(30px); pointer-events: none;
}
.od-retail__inner { position: relative; z-index: 2; max-width: 760px; }
.od-retail__headline { margin-bottom: 1.4rem; }
.od-retail__body { color: var(--od-fg-soft); font-size: 1.12rem; max-width: 52ch; margin: 0 auto 2.4rem; }
.od-retail__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ========================================================================
   FOOTER
   ===================================================================== */
.od-footer { background: var(--od-black); border-top: 1px solid var(--od-line); padding: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3rem); }
.od-footer__inner {
	max-width: var(--od-wrap); margin-inline: auto; padding-inline: var(--od-gutter);
	display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-end;
}
.od-footer__name { font-family: var(--od-display); font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; font-stretch: var(--od-stretch); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; color: var(--od-cream); margin: 0 0 0.7rem; }
.od-footer__line { margin: 0.2rem 0; color: var(--od-fg-soft); font-size: 0.95rem; }
.od-footer__compliance { text-align: right; }
.od-footer__disclaimer { color: var(--od-cream); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; margin: 0 0 0.5rem; }
.od-footer__copy { color: var(--od-fg-dim); font-size: 0.78rem; margin: 0; }

/* ========================================================================
   SCROLL REVEAL — style/distance/duration from the Customizer (Animations).
   .od-anim--* body class picks the transform; --od-reveal-d / -t size it.
   Elements hide only when .od-anim-on is present (animations enabled) AND JS
   is active, so no-JS and animations-off users always see content. JS adds
   .is-in to play them in.
   ===================================================================== */
.js .od-anim-on [data-od-fade],
.js .od-anim-on [data-od-card] {
	opacity: 0; will-change: opacity, transform;
	transition: opacity var(--od-reveal-t, 700ms) var(--od-ease), transform var(--od-reveal-t, 700ms) var(--od-ease);
	transition-delay: var(--od-stagger, 0ms);
}
.od-anim--fade-up    [data-od-fade], .od-anim--fade-up    [data-od-card] { transform: translateY(var(--od-reveal-d, 28px)); }
.od-anim--fade       [data-od-fade], .od-anim--fade       [data-od-card] { transform: none; }
.od-anim--zoom       [data-od-fade], .od-anim--zoom       [data-od-card] { transform: scale(0.94); }
.od-anim--slide-left [data-od-fade], .od-anim--slide-left [data-od-card] { transform: translateX(calc(var(--od-reveal-d, 28px) * 1.6)); }
.js [data-od-fade].is-in, .js [data-od-card].is-in { opacity: 1; transform: none; }

/* ----- Header options (Customizer → Header) -------------------------- */
.od-header-sticky .od-topbar { position: fixed; }
body:not(.od-header-sticky) .od-topbar { position: absolute; }
.od-topbar { transition: padding .35s var(--od-ease), background .35s var(--od-ease); }
.od-topbar.is-scrolled { padding-top: 0.55rem; padding-bottom: 0.55rem; background: rgba(7,9,10,0.86); backdrop-filter: blur(8px); }
.od-topbar.is-scrolled::before { opacity: 0; }
body:not(.od-header-transparent) .od-topbar { background: var(--od-black); }
body:not(.od-header-transparent) .od-topbar::before { opacity: 0; }
.od-topbar__spacer { display: block; width: 1px; }

/* ========================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
	.od-story__grid { grid-template-columns: 1fr; gap: 2.6rem; }
	.od-story__media { max-width: 460px; margin-inline: auto; }
	.od-row {
		grid-template-columns: auto 1fr;
		gap: 0.6rem 1.4rem;
		column-gap: 1.4rem;
	}
	.od-row__idx { grid-row: span 2; }
	.od-gallery__grid { grid-template-columns: 1fr; }
	.od-gallery__item.is-wide { grid-column: auto; }
	.od-footer__inner { flex-direction: column; align-items: flex-start; }
	.od-footer__compliance { text-align: left; }
}

@media (max-width: 600px) {
	.od-hero { min-height: 92vh; min-height: 92svh; }
}

/* ========================================================================
   REDUCED MOTION — disable scrub/parallax-driven motion, keep content.
   (JS also reads this; CSS here covers the decorative animations.)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.od-grain { display: none; animation: none; }
	.od-mote { animation: none; opacity: 0; }
	.od-hero__mote { animation: none; opacity: 0; }
	.od-hero--gradient .od-hero__bg { animation: none; }
	.js [data-od-fade], .js [data-od-card] { opacity: 1 !important; transform: none !important; }
	.od-hero__line { opacity: 1 !important; transform: none !important; }
	.od-gallery__media img { transform: none; }
	* { scroll-behavior: auto !important; }
}


/* ---- Minimalist mode: remove decorative texture/particles/glows ---- */
.od-transition__texture,
.od-transition__motes,
.od-hero__mote,
.od-story__glow,
.od-retail__glow,
.od-chapter__rule { display: none !important; }

/* ========================================================================
   SCROLL EFFECTS (dependency-free)
   ===================================================================== */

/* Scroll progress bar */
.od-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 90;
	background: var(--od-accent); transform: scaleX(0); transform-origin: 0 50%;
	pointer-events: none; will-change: transform;
}

/* Hero entrance — pure CSS so the headline ALWAYS lands visible. */
@keyframes od-rise {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: none; }
}
.od-hero__line { opacity: 1; animation: od-rise 0.85s var(--od-ease) both; }
.od-hero__line:nth-child(1) { animation-delay: 0.10s; }
.od-hero__line:nth-child(2) { animation-delay: 0.22s; }
.od-hero__line:nth-child(3) { animation-delay: 0.34s; }
.od-hero__line:nth-child(4) { animation-delay: 0.46s; }
@media (prefers-reduced-motion: reduce) {
	.od-hero__line { opacity: 1; animation: none; }
}

/* Image parallax targets need a transform baseline */
[data-od-parallax] { will-change: transform; }