/* ===========================================================================
   OUR STORY — bespoke brand-narrative page (page-our-story.php).
   Consumes the design tokens from style.css; works in both dark (default)
   and light themes. Loaded only on the our-story page (see inc/enqueue.php).
   =========================================================================== */

.story { overflow-clip-margin: 1px; }

/* ---------- HERO ---------- */
.story-hero {
	position: relative;
	min-height: min(92vh, 820px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}
.story-hero__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: story-kenburns 18s ease-out forwards;
}
@keyframes story-kenburns { to { transform: scale(1); } }
.story-hero__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.86) 4%, rgba(0,0,0,0.42) 38%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.30) 100%);
}
:root[data-theme="light"] .story-hero__scrim {
	background: linear-gradient(to top, rgba(18,14,8,0.78) 4%, rgba(18,14,8,0.34) 42%, rgba(18,14,8,0.12) 72%, rgba(18,14,8,0.22) 100%);
}
.story-hero__inner {
	position: relative; z-index: 2;
	max-width: 760px;
	padding: 0 var(--gutter) clamp(3.4rem, 8vh, 6rem);
	color: #fff;
}
.story-hero__inner .eyebrow { color: var(--gold-bright); }
.story-hero__title {
	font-family: var(--f-display);
	font-weight: 400;
	color: #fff;
	font-size: clamp(2.6rem, 7vw, 5rem);
	line-height: 1.04;
	margin: 1rem 0 0;
	letter-spacing: 0.01em;
}
.story-hero__title em { font-family: var(--f-accent); font-style: italic; color: var(--gold-bright); }
.story-hero__inner .flourish { margin: 1.4rem 0; }
.story-hero__sub {
	max-width: 540px;
	margin: 0 auto;
	color: rgba(255,255,255,0.86);
	font-size: clamp(0.98rem, 1.4vw, 1.15rem);
	line-height: 1.7;
}
/* ---------- SECTION HEAD (home.css isn't enqueued on this page) ---------- */
.story .home-head {
	text-align: center;
	max-width: 660px;
	margin: 0 auto;
	padding-bottom: clamp(2.4rem, 5vw, 3.4rem);
}
.story .home-head .section-kicker { color: var(--gold); }
.story .home-head h2 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.8vw, 2.9rem);
	line-height: 1.12;
	margin: 0.5rem 0 0;
}
.story .home-head p {
	color: var(--ink-soft);
	line-height: 1.75;
	font-size: var(--fs-sm);
	margin: 0.9rem auto 0;
	max-width: 52ch;
}
.story .home-head .flourish { margin-top: 1.3rem; }

/* ---------- OPENING STATEMENT ---------- */
.story-lead { text-align: center; padding-top: clamp(3.5rem, 8vw, 6rem); }
.story-lead__text {
	font-family: var(--f-accent);
	font-size: clamp(1.5rem, 3.4vw, 2.5rem);
	line-height: 1.5;
	color: var(--ink);
	margin-top: 1rem;
	font-weight: 500;
}
.story-lead .section-kicker { color: var(--gold); }

/* ---------- IMAGE + TEXT SPLITS ---------- */
.story-split {
	display: grid;
	grid-template-columns: 360px minmax(0, 30rem);
	justify-content: center;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}
.story-split--reverse { grid-template-columns: minmax(0, 30rem) 360px; }
.story-split--reverse .story-split__media { order: 2; }
.story-split__media { position: relative; width: 100%; }
.story-split__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	box-shadow: var(--shadow);
}
.story-split__media::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(198,166,87,0.45);
	pointer-events: none;
}
.story-split__tag {
	position: absolute;
	left: 0; bottom: 1.7rem;
	background: var(--gold);
	color: #1a140b;
	font-family: var(--f-body);
	font-size: var(--fs-2xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	padding: 0.55rem 1.2rem;
}
.story-split__body .section-kicker { color: var(--gold); }
.story-split__body h2 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2rem, 4.4vw, 3.2rem);
	line-height: 1.1;
	margin: 0.4rem 0 1.4rem;
}
.story-split__body p {
	color: var(--ink-soft);
	line-height: 1.85;
	margin-bottom: 1.1rem;
	max-width: 46ch;
}

/* ---------- HERITAGE NARRATIVE ---------- */
.story-heritage__grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(1.6rem, 5vw, 4.5rem);
	align-items: start;
}
.story-heritage__quote {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	line-height: 1.34;
	color: var(--ink);
	position: relative;
	padding-left: 1.6rem;
}
.story-heritage__quote::before {
	content: '';
	position: absolute; left: 0; top: 0.2em; bottom: 0.2em;
	width: 2px;
	background: linear-gradient(var(--gold), transparent);
}
.story-heritage__detail p { color: var(--ink-soft); line-height: 1.9; margin-bottom: 1.1rem; }

/* ---------- FULL-BLEED FEATURE IMAGE ---------- */
.story-feature {
	position: relative;
	min-height: min(70vh, 620px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.story-feature__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-feature__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0) 75%); }
.story-feature__cap {
	position: relative; z-index: 2;
	max-width: 540px;
	padding: clamp(2rem, 6vw, 4.5rem);
	color: #fff;
}
.story-feature__cap .eyebrow { color: var(--gold-bright); }
.story-feature__cap p {
	font-family: var(--f-accent);
	font-size: clamp(1.3rem, 2.6vw, 2rem);
	line-height: 1.5;
	margin-top: 0.8rem;
	color: rgba(255,255,255,0.94);
}

/* ---------- PILLARS ---------- */
.story-pillar-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.4vw, 1.8rem);
	max-width: var(--container);
	margin-inline: auto;
}
.story-pillar {
	text-align: center;
	padding-bottom: 1.8rem;
	background: var(--surface);
	border: 1px solid var(--line-soft);
	overflow: hidden;
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.story-pillar:hover {
	transform: translateY(-6px);
	border-color: var(--line);
	box-shadow: var(--shadow-card);
}
.story-pillar__img {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.story-pillar__img img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.story-pillar:hover .story-pillar__img img { transform: scale(1.06); }
.story-pillar__badge {
	width: 54px; height: 54px;
	margin: -27px auto 0.7rem;
	display: grid; place-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	position: relative; z-index: 2;
}
.story-pillar__badge i { font-size: 1.5rem; color: var(--gold); }
.story-pillar h3 {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.4rem;
	margin-bottom: 0.5rem;
}
.story-pillar p { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.65; padding-inline: 1.2rem; }

/* ---------- SIGNATURE SPIRIT (pull quote) ---------- */
.story-spirit { text-align: center; }
.story-spirit__mark { font-size: 3rem; color: var(--gold); opacity: 0.55; }
.story-spirit__quote {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.6vw, 2.7rem);
	line-height: 1.42;
	color: var(--ink);
	margin: 1rem auto 0;
	max-width: 22ch;
	border: 0;
}

/* ---------- VISION / LEGACY ---------- */
.story-vision {
	text-align: center;
	background: var(--hero-tint);
	border-block: 1px solid var(--line);
}
.story-vision .section-kicker { color: var(--gold); }
.story-vision__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	margin: 0.4rem 0 1.6rem;
}
.story-vision__text {
	font-family: var(--f-accent);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	line-height: 1.55;
	color: var(--ink);
	max-width: 30ch;
	margin: 0 auto 1.6rem;
}
.story-vision__line { color: var(--ink-soft); line-height: 1.8; max-width: 52ch; margin: 0 auto 2.4rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
	.story-split,
	.story-split--reverse { grid-template-columns: 1fr; gap: 2rem; }
	.story-split--reverse .story-split__media { order: 0; }
	.story-split__media { max-width: 360px; margin-inline: auto; }
	.story-split__body { text-align: center; }
	.story-split__body p { margin-inline: auto; }
	.story-heritage__grid { grid-template-columns: 1fr; }
	.story-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.story-pillar-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.story-hero__img { animation: none; transform: none; }
}