/* ============================================================================
   CAPTAIN PIPE 2.0 — BRAND STORY  (CAPTAIN-01)
   Editorial, cinematic, 2014–2026. Every section below sets its own colour
   tokens so light/dark/warm/burgundy chapters can alternate to mark eras,
   without touching the shared design-system tokens used elsewhere.
   No JS: this file is 100% static CSS - the story works with JS disabled.
   ========================================================================== */

.cs-cp-hero,
.cs-cp-intro,
.cs-chapter,
.cs-cp-closing {
	--cs-cp-carbon:  #15120f;
	--cs-cp-burgundy: #5c1a2e;
	--cs-cp-gold:    #a9793e;
	--cs-cp-warm:    #faf6f0;
	--cs-cp-ivory:   #f5f1e8;
}

/* ---- HERO — dark, high impact, no CTA. ---------------------------------- */
.cs-cp-hero {
	padding-block: clamp(4.5rem, 10vw, 7.5rem) clamp(3.5rem, 7vw, 5.5rem);
	background: var(--cs-cp-carbon);
	color: var(--cs-cp-ivory);
	overflow: hidden;
	position: relative;
}
.cs-cp-hero__inner {
	position: relative;
	max-width: 48rem;
}
.cs-cp-hero__eyebrow {
	color: var(--cs-cp-gold);
}
.cs-cp-hero__title {
	margin: 0.25rem 0 1.75rem;
	font-size: var(--cs-fs-hero);
	line-height: var(--cs-lh-tight);
	color: var(--cs-cp-ivory);
}
.cs-cp-hero__line {
	display: block;
}
.cs-cp-hero__body {
	max-width: 36rem;
	color: rgba(245, 241, 232, 0.82);
}
.cs-cp-hero__body p {
	margin: 0 0 1rem;
}
.cs-cp-hero__body p:last-child {
	margin-bottom: 0;
}
.cs-cp-hero__range {
	position: absolute;
	right: clamp(1rem, 4vw, 3rem);
	bottom: clamp(0.5rem, 2vw, 1.5rem);
	margin: 0;
	font-family: var(--cs-font-serif);
	font-size: clamp(2.5rem, 3vw + 2rem, 6rem);
	line-height: 1;
	color: rgba(245, 241, 232, 0.08);
	white-space: nowrap;
	pointer-events: none;
}
.cs-cp-hero__years {
	margin: 2.25rem 0 0;
	font-family: var(--cs-font-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cs-cp-gold);
}

/* ---- INTRODUCCIÓN — warm, centred, a large faint year-range mark. ------- */
.cs-cp-intro {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 5.5rem);
	background: var(--cs-cp-warm);
	overflow: hidden;
}
.cs-cp-intro__inner {
	position: relative;
	max-width: 42rem;
}
.cs-cp-intro__mark {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--cs-font-serif);
	font-size: clamp(2rem, 2vw + 1.5rem, 3.5rem);
	color: var(--cs-cp-burgundy);
	opacity: 0.16;
}
.cs-cp-intro__body {
	margin: 0;
	font-size: var(--cs-fs-lede);
	color: var(--cs-ink);
}

/* ============================================================
   CAPÍTULOS — shared scaffolding + per-theme colours + per-layout
   composition. Base is a 2-col grid (year | content); layouts override it.
   ============================================================ */
.cs-chapter {
	padding-block: clamp(3.5rem, 8vw, 6rem);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cs-chapter__inner {
	position: relative; /* anchors the timeline thread (::before/::after) added below */
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
.cs-chapter__year {
	margin: 0;
	font-family: var(--cs-font-serif);
	line-height: 0.95;
}
.cs-chapter__head {
	max-width: 34rem;
}
.cs-chapter__title {
	margin: 0.25rem 0 1rem;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	line-height: var(--cs-lh-tight);
}
.cs-chapter__title-line {
	display: block;
}
.cs-chapter__body {
	max-width: 34rem;
	color: var(--cs-ink-soft);
}
.cs-chapter__body p {
	margin: 0 0 0.9rem;
}
.cs-chapter__body p:last-child {
	margin-bottom: 0;
}

/* ---- Theme colour variants ------------------------------------------- */
.cs-chapter--dark {
	background: var(--cs-cp-carbon);
	color: var(--cs-cp-ivory);
	border-bottom-color: rgba(245, 241, 232, 0.1);
}
.cs-chapter--dark .cs-eyebrow {
	color: var(--cs-cp-gold);
}
.cs-chapter--dark .cs-chapter__title,
.cs-chapter--dark .cs-chapter__year {
	color: var(--cs-cp-ivory);
}
.cs-chapter--dark .cs-chapter__body {
	color: rgba(245, 241, 232, 0.78);
}

.cs-chapter--warm {
	background: var(--cs-cp-warm);
}

.cs-chapter--burgundy {
	background: var(--cs-cp-burgundy);
	color: var(--cs-cp-ivory);
	border-bottom-color: rgba(245, 241, 232, 0.12);
}
.cs-chapter--burgundy .cs-eyebrow {
	color: var(--cs-cp-gold);
}
.cs-chapter--burgundy .cs-chapter__title,
.cs-chapter--burgundy .cs-chapter__year {
	color: var(--cs-cp-ivory);
}
.cs-chapter--burgundy .cs-chapter__body {
	color: rgba(245, 241, 232, 0.85);
}

/* ---- Layout: year-left (2014) — huge year, content beside it, the brand's
   own crest reused as a large, near-imperceptible watermark.
   CAPTAIN-HISTORY-VISUAL-03: "2014" is now guaranteed to render on a single
   line (white-space: nowrap + keep-all/normal wrapping as a safety net) at
   every viewport - this was the mandatory bug fix for this ticket. -------- */
.cs-chapter--year-left {
	position: relative;
	overflow: hidden; /* contains the watermark below - never causes page-level horizontal scroll */
}
.cs-chapter--year-left .cs-chapter__inner {
	grid-template-columns: minmax(0, 1fr);
}
.cs-chapter--year-left .cs-chapter__year {
	position: relative;
	z-index: 1;
	font-size: clamp(3.25rem, 8vw + 1.25rem, 9rem);
	line-height: 0.9;
	white-space: nowrap;
	word-break: keep-all;
	overflow-wrap: normal;
	hyphens: none;
	opacity: 0.95;
}
/* Small decorative gold rule under the year, as requested. */
.cs-chapter--year-left .cs-chapter__year::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 1.1rem;
	background: var(--cs-cp-gold);
}
.cs-chapter--year-left .cs-chapter__content {
	position: relative;
	z-index: 1;
}
/* The real Captain Pipe crest (same asset as the Header/2018-2020 badge),
   reused at a much larger size and very low opacity - no 2014-2023
   photography exists (see file header note), so this is the brand's own
   real mark, not a fabricated "archival" photo. Purely decorative. */
.cs-chapter__watermark {
	position: absolute;
	top: 50%;
	right: 0;
	z-index: 0;
	width: clamp(14rem, 60vw, 26rem);
	transform: translateY(-50%);
	opacity: 0.12;
	pointer-events: none;
}
.cs-chapter__watermark-img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Layout: offset-right (2015–2017) — small year + a real representative
   product stacked on the left, content on the right. Explicit
   grid-template-areas (same technique as mark-left) so the new product
   figure has a predictable spot without relying on auto-placement. ------ */
.cs-chapter--offset-right .cs-chapter__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "year" "content" "figure"; /* mobile: text before image, per spec */
	justify-items: end;
	text-align: left;
}
.cs-chapter--offset-right .cs-chapter__year {
	grid-area: year;
	align-self: start;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--cs-muted);
	writing-mode: horizontal-tb;
}
.cs-chapter--offset-right .cs-chapter__content {
	grid-area: content;
	max-width: 34rem;
}
/* A real current Rolling Papers product (content-config.php's `image_sku`) -
   representative of the family the brand's own narrative identifies as
   foundational; no 2015-2017 photography exists, so no fabricated imagery
   is used. */
.cs-chapter--offset-right .cs-chapter__figure {
	grid-area: figure;
	width: 100%;
	max-width: 16rem;
	margin: 0;
	padding: 1.5rem;
	background: rgba(22, 21, 15, 0.03);
	border-radius: 8px;
}
.cs-chapter--offset-right .cs-chapter__figure .cs-cp__product-img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* ---- Layout: mark-left (2018–2020) — brand crest block + content.
   Explicit grid-template-areas (rather than relying on DOM order) so the
   crest mark can sit visually BEFORE the text without reordering the
   actual markup. --------------------------------------------------- */
.cs-chapter--mark-left .cs-chapter__inner {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "year" "mark" "content";
}
.cs-chapter--mark-left .cs-chapter__year {
	grid-area: year;
	/* The crest mark is the visual anchor here, not a giant numeral - the
	   year still reads as a normal small label above the eyebrow. */
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--cs-muted);
}
.cs-chapter--mark-left .cs-chapter__content {
	grid-area: content;
}
.cs-chapter--mark-left .cs-chapter__mark {
	grid-area: mark;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	max-width: 14rem;
	margin-inline: auto;
	padding: 2rem;
	background: var(--cs-bg);
	border: 1px solid var(--cs-line);
	border-radius: 999px;
}
.cs-chapter__crest {
	width: 100%;
	height: auto;
	opacity: 0.9;
}

/* ---- Layout: statement (2021–2023) — full-width centred, high impact. -- */
.cs-chapter--statement .cs-chapter__inner {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
}
.cs-chapter--statement .cs-chapter__year {
	font-size: clamp(3.5rem, 5vw + 2rem, 7rem);
}
.cs-chapter--statement .cs-chapter__head,
.cs-chapter--statement .cs-chapter__body {
	max-width: 38rem;
	margin-inline: auto;
}
.cs-chapter--statement .cs-eyebrow,
.cs-chapter--statement .cs-chapter__title {
	text-align: center;
}

/* ---- Layout: accent-row (2024–2025) — text + a quiet strip of real
   current products (never historical/fabricated imagery). -------------- */
.cs-chapter--accent-row .cs-chapter__inner {
	grid-template-columns: minmax(0, 1fr);
}
.cs-chapter--accent-row .cs-chapter__year {
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--cs-muted);
}
.cs-chapter__accent-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}
.cs-chapter__accent-item {
	flex: 0 0 auto;
	width: clamp(5rem, 18vw, 7rem);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}
.cs-cp__product-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 8px 12px rgba(22, 21, 15, 0.1));
}

/* ============================================================
   TIMELINE THREAD — CAPTAIN-HISTORY-VISUAL-03. A discreet gold line + node
   connecting the five numbered chapters (2014 through 2024-2025). Lives in
   the shared container's own left gutter (inside its padding-inline, never
   inside the content box), so it never overlaps any layout's text
   regardless of that chapter's own alignment - one system for all five,
   including centred ("statement") and end-aligned ("offset-right") text.
   Purely decorative, purely CSS, no markup added, no JS.
   ============================================================ */
.cs-chapter--year-left .cs-chapter__inner::before,
.cs-chapter--offset-right .cs-chapter__inner::before,
.cs-chapter--mark-left .cs-chapter__inner::before,
.cs-chapter--statement .cs-chapter__inner::before,
.cs-chapter--accent-row .cs-chapter__inner::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	width: 1px;
	background: var(--cs-cp-gold);
	opacity: 0.4;
	pointer-events: none;
}
.cs-chapter--year-left .cs-chapter__inner::after,
.cs-chapter--offset-right .cs-chapter__inner::after,
.cs-chapter--mark-left .cs-chapter__inner::after,
.cs-chapter--statement .cs-chapter__inner::after,
.cs-chapter--accent-row .cs-chapter__inner::after {
	content: "";
	position: absolute;
	top: 0.4rem;
	left: 6px;
	width: 8px;
	height: 8px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: var(--cs-cp-gold);
	pointer-events: none;
}
/* Fade both ends of the thread: nothing to connect to above 2014, and the
   "Hoy" closing chapter (already redesigned separately) starts its own
   visual system right after 2024-2025. */
.cs-chapter--year-left .cs-chapter__inner::before {
	background: linear-gradient(180deg, transparent, var(--cs-cp-gold) 20%);
}
.cs-chapter--accent-row .cs-chapter__inner::before {
	background: linear-gradient(180deg, var(--cs-cp-gold) 80%, transparent);
}

/* ============================================================
   2026 — HOY. High impact, four real families.
   CAPTAIN-BRAND-VISUAL-02: visual-only redesign - same copy, same links,
   same SKUs/images, same DOM structure. Bigger editorial header, the four
   families as protagonist product cards (not small grey boxes), tighter
   deliberate spacing, and a near-imperceptible radial glow behind the grid.
   ============================================================ */
.cs-chapter--today {
	position: relative;
	overflow: hidden; /* contains the decorative glow below */
	padding-top: 64px;
	padding-bottom: 0; /* the "gap to the divider" lives in .cs-cp-closing's
	                       own padding-top instead - both sections share the
	                       same dark carbon background, so the two read as
	                       one continuous block with no visible seam. */
	border-bottom: 0;
}
@media (min-width: 768px) {
	.cs-chapter--today {
		padding-top: 88px;
	}
}
@media (min-width: 1024px) {
	.cs-chapter--today {
		padding-top: 120px;
	}
}

/* Subtle burgundy/gold glow behind the product grid - almost imperceptible,
   pure CSS, no image request. */
.cs-chapter--today::before {
	content: "";
	position: absolute;
	top: 55%;
	left: 50%;
	width: min(70vw, 900px);
	height: min(70vw, 900px);
	transform: translate(-50%, -50%);
	background: radial-gradient(circle at center, rgba(169, 121, 62, 0.06), rgba(92, 26, 46, 0.04) 40%, transparent 65%);
	pointer-events: none;
	z-index: 0;
}
.cs-chapter--today .cs-container {
	position: relative;
	z-index: 1;
}

.cs-chapter__head--centered {
	max-width: 56.25rem; /* 900px - hosts the bigger title */
	margin-inline: auto;
	text-align: center;
}
.cs-chapter__title--today {
	max-width: 56.25rem;
	margin-inline: auto;
	margin-bottom: 1.5rem;
	font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.4rem);
	line-height: 1.02;
}
.cs-chapter__body--centered {
	max-width: 38rem; /* ~608px, per spec ~600px */
	margin-inline: auto;
}
.cs-chapter__body--centered p {
	text-align: center;
	line-height: 1.65;
}

.cs-today__families {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* very narrow phones: 1 column */
	gap: 1.25rem;
	max-width: 73rem; /* ~1168px - the grid is allowed to breathe wider than
	                      the surrounding editorial text */
	margin: 56px auto 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 390px) {
	.cs-today__families {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.cs-today__family-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	height: 100%;
	padding: 1.75rem 1.25rem 1.5rem;
	background: rgba(245, 241, 232, 0.045);
	border: 1px solid rgba(245, 241, 232, 0.12);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: transform 220ms var(--cs-ease),
	            border-color 220ms var(--cs-ease),
	            background-color 220ms var(--cs-ease);
}
.cs-today__family-link:hover,
.cs-today__family-link:focus-visible {
	transform: translateY(-4px);
	background: rgba(245, 241, 232, 0.07);
	border-color: rgba(169, 121, 62, 0.55);
}
.cs-today__family-media {
	display: grid;
	place-items: center;
	width: 100%;
	flex: 1 1 auto;
	min-height: 140px;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
}
.cs-today__family-media img {
	width: 100%;
	height: 100%;
	max-height: 190px;
	object-fit: contain; /* protagonist, never cropped or distorted */
	transition: transform 220ms var(--cs-ease);
}
.cs-today__family-link:hover .cs-today__family-media img,
.cs-today__family-link:focus-visible .cs-today__family-media img {
	transform: scale(1.02);
}
.cs-today__family-name {
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--cs-cp-ivory);
}
.cs-today__family-name::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 1px;
	margin-right: 8px;
	vertical-align: middle;
	background: var(--cs-cp-gold);
}

.cs-chapter__closing-line {
	position: relative;
	max-width: 41rem; /* ~650px */
	margin: 44px auto 0;
	padding-top: 28px;
	text-align: center;
	line-height: 1.65;
	color: rgba(245, 241, 232, 0.72);
}
.cs-chapter__closing-line::before {
	content: "";
	display: block;
	width: 48px;
	height: 2px;
	margin: 0 auto 20px;
	background: var(--cs-cp-gold);
	opacity: 0.85;
}

@media (min-width: 768px) {
	.cs-today__family-link {
		min-height: 260px;
	}
}
@media (min-width: 1024px) {
	.cs-today__families {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.cs-today__family-link {
		min-height: 290px;
	}
}

/* ---- CIERRE — dark, centred, two CTAs. ----------------------------------
   CAPTAIN-BRAND-VISUAL-02: visual-only redesign - same copy, same links.
   A thin gold rule (::before) now marks the transition from "HOY" into this
   second, more compact closing moment; both sections share the same dark
   carbon background so the two read as one continuous block. ------------ */
.cs-cp-closing {
	position: relative;
	padding-top: 48px;
	padding-bottom: 64px;
	background: var(--cs-cp-carbon);
	color: var(--cs-cp-ivory);
	text-align: center;
}
@media (min-width: 768px) {
	.cs-cp-closing {
		padding-top: 64px;
		padding-bottom: 88px;
	}
}
@media (min-width: 1024px) {
	.cs-cp-closing {
		padding-top: 90px;
		padding-bottom: 124px;
	}
}
.cs-cp-closing::before {
	content: "";
	display: block;
	width: 72px;
	height: 1px;
	margin: 0 auto 56px;
	background: linear-gradient(90deg, transparent, var(--cs-cp-gold), transparent);
}
@media (min-width: 768px) {
	.cs-cp-closing::before {
		margin-bottom: 70px;
	}
}
@media (min-width: 1024px) {
	.cs-cp-closing::before {
		margin-bottom: 90px;
	}
}
.cs-cp-closing__inner {
	max-width: 41rem; /* ~650px */
	margin-inline: auto;
}
.cs-cp-closing .cs-eyebrow {
	color: var(--cs-cp-gold);
}
.cs-cp-closing__title {
	margin: 0.25rem 0 1.25rem;
	font-size: clamp(2.2rem, 1.6rem + 3vw, 3.8rem);
	line-height: 1.05;
	color: var(--cs-cp-ivory);
}
.cs-cp-closing__body {
	margin: 0 0 2.25rem;
	color: rgba(245, 241, 232, 0.82);
}
.cs-cp-closing__body p {
	margin: 0 0 0.75rem;
	line-height: 1.65;
}
.cs-cp-closing__body p:last-child {
	margin-bottom: 0;
}
.cs-cp-closing__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 8px;
}
.cs-cp-closing .cs-btn {
	min-height: 50px;
	padding-inline: 2rem;
	background: var(--cs-cp-gold);
	border-color: var(--cs-cp-gold);
	color: var(--cs-cp-carbon);
}
.cs-cp-closing .cs-btn:hover,
.cs-cp-closing .cs-btn:focus-visible {
	background: transparent;
	color: var(--cs-cp-gold);
}
/* Secondary CTA: same footprint as the primary button (not the thin
   underlined ".cs-btn--link" text style used elsewhere on the site) - a
   transparent ghost button with a gold border, scoped to this section only. */
.cs-cp-closing .cs-btn--link.cs-cp-closing__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 1.0625rem 2rem;
	background: transparent;
	border: 1px solid var(--cs-cp-gold);
	color: rgba(245, 241, 232, 0.9);
	letter-spacing: 0.09em;
}
.cs-cp-closing .cs-btn--link.cs-cp-closing__secondary:hover,
.cs-cp-closing .cs-btn--link.cs-cp-closing__secondary:focus-visible {
	background: rgba(169, 121, 62, 0.12);
	border-color: var(--cs-cp-gold);
	color: var(--cs-cp-gold);
}

@media (max-width: 479px) {
	.cs-cp-closing__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.cs-cp-closing__actions .cs-btn {
		width: 100%;
	}
}

/* ============================================================
   TABLET — 768–1199px: two-column compositions come alive.
   ============================================================ */
@media (min-width: 768px) {
	.cs-chapter--year-left .cs-chapter__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	}
	.cs-chapter--offset-right .cs-chapter__inner {
		grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
		grid-template-areas: "year content" "figure content";
		align-items: start;
	}
	.cs-chapter--offset-right .cs-chapter__year {
		text-align: right;
		padding-top: 0.5rem;
	}
	.cs-chapter--offset-right .cs-chapter__figure {
		justify-self: start;
		margin-top: 1.5rem;
	}
	.cs-chapter--mark-left .cs-chapter__inner {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		grid-template-areas: "year year" "mark content";
		align-items: center;
	}
	.cs-chapter--mark-left .cs-chapter__mark {
		margin-inline: 0;
	}

	.cs-today__families {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================
   DESKTOP — >=1024px.
   ============================================================ */
@media (min-width: 1024px) {
	.cs-today__families {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.cs-cp-hero__range {
		font-size: clamp(4rem, 3vw + 3rem, 8rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-today__family-link,
	.cs-today__family-media img {
		transition: none;
	}
}