/* =====================================================================
   FOUNDER'S PICK — standalone editorial journal (/founders-pick/).

   Everything is scoped under .fp so nothing in the preserved styles.css
   (hero / featured / waitlist / founder-journal / categories / karigars /
   footer) is touched. The one deliberate exception is the page background,
   because the brief requires white rather than the site-wide cream -- see
   the body.founders-pick-body rule.

   Palette: pure white ground, deep Sitaara maroon type, hairline maroon
   rules. No card shadows, no radius language, no Instagram affordances.
   ===================================================================== */

body.founders-pick-body {
	background: #ffffff;
}

.fp {
	--fp-maroon: #5a1825;
	--fp-ink: #171311;
	--fp-body: #4a4038;
	--fp-muted: rgba(90, 24, 37, .62);
	--fp-faint: rgba(90, 24, 37, .42);
	--fp-line: rgba(90, 24, 37, .14);
	--fp-line-soft: rgba(90, 24, 37, .08);
	--fp-ground: #ffffff;
	--fp-plate: #f8f5f2;
	--fp-e: cubic-bezier(.22, 1, .36, 1);
	--fp-measure: min(720px, 100% - clamp(40px, 9vw, 96px));
	--fp-head-w: min(760px, 100% - clamp(24px, 6vw, 64px));

	position: relative;
	background: var(--fp-ground);
	color: var(--fp-ink);
	padding: clamp(56px, 7vw, 104px) 0 clamp(72px, 8vw, 120px);
}

.fp *,
.fp *::before,
.fp *::after {
	box-sizing: border-box;
}

/* ---------- shared editorial type ---------- */
.fp-kicker {
	margin: 0;
	font-size: var(--fs-micro);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(90, 24, 37, .66);
}

.fp em {
	font-style: italic;
}

/* ---------- entrance motion (armed by JS so a no-JS visit stays visible) ---------- */
.fp-fx {
	opacity: 1;
	transform: none;
}

/* Reveal is armed by JS and released per element as it enters view, so the
   long feed animates as it is scrolled rather than all at once. Without JS
   nothing is ever hidden. */
.fp.fp-armed .fp-fx {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .85s var(--fp-e), transform .85s var(--fp-e);
}

.fp.fp-armed .fp-fx.is-in,
.fp.fp-armed.is-in > .fp-head .fp-fx {
	opacity: 1;
	transform: none;
}

.fp.fp-armed .fp-head .fp-fx[data-fx="1"] { transition-delay: .02s; }
.fp.fp-armed .fp-head .fp-fx[data-fx="2"] { transition-delay: .09s; }
.fp.fp-armed .fp-head .fp-fx[data-fx="3"] { transition-delay: .16s; }

/* =====================================================================
   1. PAGE HEADER
   ===================================================================== */
.fp-head {
	max-width: var(--fp-head-w);
	margin: 0 auto clamp(56px, 7vw, 104px);
	text-align: center;
}

.fp-title {
	margin: clamp(14px, 1.6vw, 22px) 0 0;
	font: 400 clamp(46px, 7.6vw, 104px)/.94 var(--serif);
	color: var(--fp-maroon);
	letter-spacing: -.014em;
}

.fp-sub {
	max-width: 46ch;
	margin: clamp(18px, 2.2vw, 28px) auto 0;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.8;
	color: var(--fp-body);
}

/* =====================================================================
   2. FEED
   ===================================================================== */
.fp-feed {
	max-width: var(--fp-measure);
	margin: 0 auto;
}

.fp-post {
	margin: 0 0 clamp(88px, 10vw, 150px);
}

.fp-post[hidden] {
	display: none;
}

/* ---------- media ---------- */
.fp-media {
	position: relative;
	/*
	 * 4:5 editorial frame — the same proportion the homepage Founder's Pick uses,
	 * so the teaser and the journal read as one publication.
	 *
	 * The frame is never allowed to break that ratio: instead of a max-height
	 * (which would silently deform the box) the WIDTH is capped from the viewport
	 * height, so a short laptop screen shows a smaller 4:5 frame rather than a
	 * cropped one. Photography still uses object-fit:contain, so the 2:3 source
	 * images sit complete inside the 4:5 window with no crop at all.
	 */
	aspect-ratio: 4 / 5;
	width: min(100%, calc((100vh - 130px) * .8));
	width: min(100%, calc((100dvh - 130px) * .8));
	margin-inline: auto;
	background: var(--fp-plate);
	touch-action: pan-y;
}

.fp-carousel,
.fp-carousel .swiper-wrapper {
	width: 100%;
	height: 100%;
}

.fp-carousel {
	overflow: hidden;
	outline: none;
}

.fp-carousel:focus-visible {
	outline: 1px solid var(--fp-line);
	outline-offset: 5px;
}

.fp-carousel .swiper-wrapper {
	align-items: center;
	transition-timing-function: var(--fp-e) !important;
}

.fp-slide {
	width: 100%;
	flex-shrink: 0;
	height: 100%;
	visibility: visible;
}

.fp-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	background: var(--fp-plate);
	overflow: hidden;
}

/* contain, never cover: the photograph is never cropped. */
.fp-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 1.15s var(--fp-e), opacity .5s var(--fp-e);
}

/* Cursor-driven drift on fine pointers only; --mx/--my come from JS. */
.fp.fp-parallax .fp-media:hover .fp-frame {
	transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(var(--fp-scale, 1));
	transition: none;
}

.fp.fp-parallax .fp-media:hover .fp-frame .fp-image {
	transform: scale(var(--fp-zoom, 1.015));
}

/* ---------- arrows: revealed on hover, desktop only ---------- */
.fp-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 12;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	color: var(--fp-maroon);
	background: rgba(255, 255, 255, .82);
	border: 1px solid var(--fp-line);
	border-radius: 50%;
	opacity: 0;
	transition: opacity .35s ease, border-color .3s ease, gap .3s var(--fp-e), background-color .3s ease;
}

.fp-arrow svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.fp-arrow-prev { left: clamp(10px, 2vw, 22px); }
.fp-arrow-next { right: clamp(10px, 2vw, 22px); }

.fp-media:hover .fp-arrow,
.fp-arrow:focus-visible {
	opacity: 1;
}

.fp-arrow:hover {
	border-color: rgba(90, 24, 37, .42);
	background: #fff;
}

.fp-arrow:focus-visible {
	outline: 1px solid var(--fp-maroon);
	outline-offset: 3px;
}

/* ---------- pagination dots ---------- */
/*
 * Swiper stamps `swiper-pagination` / `swiper-pagination-horizontal` onto this
 * element and the bundle positions those absolutely with a translateZ. The rule
 * below wins on load order and centres the dots with flex instead, so no
 * transform fight.
 */
.fp-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(12px, 1.8vw, 20px);
	z-index: 12;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: auto;
	max-width: none;
	transform: none;
	text-align: center;
	/* Always visible: on touch they are the only forward affordance. */
	opacity: .92;
	transition: opacity .35s ease;
}

.fp-media:hover .fp-dots {
	opacity: .62;
}

.fp-dots .swiper-pagination-bullet {
	position: relative;
	display: block;
	width: 22px;
	height: 1px;
	margin: 0 !important;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(90, 24, 37, .28);
	opacity: 1;
	transform: none;
	cursor: pointer;
	transition: background-color .35s var(--fp-e), transform .35s var(--fp-e);
}

.fp-dots .swiper-pagination-bullet-active {
	background: var(--fp-maroon);
	transform: scaleY(2.4);
}

.fp-dots .swiper-pagination-bullet:focus-visible {
	outline: 1px solid var(--fp-maroon);
	outline-offset: 4px;
}

/* =====================================================================
   3. POST META
   ===================================================================== */
.fp-meta {
	/* V6: was max-width:56ch. With Inter loaded, 56ch === 560px exactly;
	   the literal keeps the box font-metric independent (WooCommerce's
	   Inter is font-display:fallback — until it swaps, 56ch falls back to
	   Arial's 8.9px digit and renders a 498px box). */
	max-width: 560px;
	margin: clamp(22px, 2.6vw, 34px) auto 0;
	text-align: center;
}

.fp-meta-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--fp-line);
}

.fp-name {
	margin: 0;
	font: 400 clamp(18px, 1.5vw, 23px)/1.3 var(--serif);
	letter-spacing: .01em;
	color: var(--fp-ink);
}

.fp-num {
	margin: 0;
	font-size: var(--fs-micro);
	letter-spacing: .18em;
	color: var(--fp-maroon);
	font-variant-numeric: tabular-nums;
}

.fp-textile {
	margin: clamp(14px, 1.6vw, 18px) 0 0;
	font-size: var(--fs-micro);
	letter-spacing: .22em;
	text-transform: uppercase;
	/* Was var(--fp-faint) rgba(90,24,37,.42) — 2.46:1 on the white ground,
	   below WCAG AA 4.5:1. .66 matches .fp-kicker and measures 4.80:1. */
	color: rgba(90, 24, 37, .66);
}

.fp-desc {
	margin: clamp(10px, 1.2vw, 14px) 0 0;
	font-size: clamp(15px, 1.06vw, 17px);
	line-height: 1.85;
	color: var(--fp-body);
	text-wrap: pretty;
}

.fp-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2.4vw, 30px);
	margin-top: clamp(22px, 2.6vw, 32px);
}

/* ---------- heart ----------
   Unselected: a delicate thin circle holding a hairline burgundy outline
   heart — minimal, no fill.
   Hover:      one small lift: the ring firms to a blush, the glyph gains
   presence. Nothing large.
   Selected:   a filled Sitaara burgundy heart on a warm blush disc with the
   faintest radiating glow; a single restrained beat on activation, never a
   loop.
   The two glyphs share one grid cell and cross-fade, so the state change
   reads as a transition rather than a pop; both are server-rendered, so the
   state is correct on first paint without JavaScript. */
.fp-heart {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	color: var(--fp-muted);
	background: transparent;
	border: 1px solid rgba(90, 24, 37, .18);
	border-radius: 50%;
	cursor: pointer;
	transition: border-color .35s ease, background-color .35s ease,
		box-shadow .45s ease, color .35s ease, transform .4s var(--fp-e);
}

.fp-heart-glyph {
	display: grid;
	font-size: 21px;
	line-height: 1;
	transform: translateY(-1px);
	transition: transform .45s var(--fp-e);
}

.fp-heart-glyph > span {
	grid-area: 1 / 1;
	transition: opacity .35s ease;
}

.fp-heart-outline {
	opacity: 1;
}

.fp-heart-filled {
	opacity: 0;
	color: var(--fp-maroon);
}

.fp-heart:hover {
	border-color: rgba(90, 24, 37, .46);
	background: rgba(90, 24, 37, .05);
	color: var(--fp-maroon);
	transform: scale(1.05);
}

.fp-heart:hover .fp-heart-glyph {
	transform: translateY(-1px) scale(1.05);
}

.fp-heart:focus-visible {
	outline: 1px solid var(--fp-maroon);
	outline-offset: 3px;
}

.fp-heart[aria-pressed="true"] {
	border-color: var(--fp-maroon);
	color: var(--fp-maroon);
	background: rgba(90, 24, 37, .07);
	box-shadow: 0 0 0 4px rgba(90, 24, 37, .05);
}

.fp-heart[aria-pressed="true"]:hover {
	/* The liked state keeps its blush disc on hover; only it deepens. */
	background: rgba(90, 24, 37, .09);
	box-shadow: 0 0 0 4px rgba(90, 24, 37, .07);
}

.fp-heart[aria-pressed="true"] .fp-heart-outline {
	opacity: 0;
}

.fp-heart[aria-pressed="true"] .fp-heart-filled {
	opacity: 1;
}

/* One restrained beat: lift, settle, and a brief blush halo. No bounce loop. */
.fp-heart.is-pulsing .fp-heart-glyph {
	animation: fp-heart-beat .52s var(--fp-e);
}

@keyframes fp-heart-beat {
	0%   { transform: translateY(-1px) scale(1); }
	32%  { transform: translateY(-3px) scale(1.18); }
	62%  { transform: translateY(-1px) scale(.96); }
	100% { transform: translateY(-1px) scale(1); }
}

.fp-heart.is-pulsing {
	animation: fp-heart-ring .52s var(--fp-e);
}

@keyframes fp-heart-ring {
	0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(90, 24, 37, .18); }
	45%  { transform: scale(1.05); }
	100% { transform: scale(1); box-shadow: 0 0 0 7px rgba(90, 24, 37, 0); }
}

/* ---------- no-catalogue fallback ---------- */
.fp-empty-page {
	min-height: 40vh;
}

.fp-empty-copy {
	max-width: 40ch;
	margin: clamp(32px, 5vw, 60px) auto 0;
	text-align: center;
	font-size: var(--fs-ui);
	line-height: 1.8;
	color: var(--fp-body);
}
/* =====================================================================
   2b. SINGLE COVER CAROUSEL
   One Featured-style coverflow for all eight frames. The frame itself
   (sizing, --ar ratio frames, side blur/opacity via --d, pointer gating,
   reduced-motion behaviour) comes from the preserved styles.css coverflow
   rules, so this page and the homepage Featured carousel share one
   architecture. Only the page-specific affordances live here: the shell's
   editorial width and the maroon-on-white arrows (the homepage arrows are
   white glass for the maroon stage and would be invisible on this white
   ground, and unlike .fp-arrow they are always visible, not hover-gated).
   ===================================================================== */
.fp-cover {
	max-width: 1560px;
	margin: 0 auto;
}

.fp-cover-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--fp-maroon);
	background: rgba(255, 255, 255, .85);
	border: 1px solid var(--fp-line);
	border-radius: 50%;
	cursor: pointer;
	transition: opacity .2s ease, background-color .3s ease, border-color .3s ease;
}

.fp-cover-arrow svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.fp-cover-arrow:hover {
	background: #fff;
	border-color: rgba(90, 24, 37, .42);
}

.fp-cover-arrow:focus-visible {
	outline: 1px solid var(--fp-maroon);
	outline-offset: 3px;
}

.fp-cover-prev { left: clamp(6px, 2vw, 26px); }
.fp-cover-next { right: clamp(6px, 2vw, 26px); }

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */
@media (max-width: 760px) {
	.fp {
		--fp-measure: 100% - clamp(32px, 9vw, 44px);
		/* Clear the fixed mobile header: the first editorial line must start
		   below the white header, not behind it. Desktop padding is untouched. */
		padding-top: calc(var(--headerH) + 16px);
	}

	/* Comfortable side breathing room for the introductory description so it
	   never touches the viewport edges on a phone. */
	.fp-sub {
		padding-inline: 5vw;
	}

	.fp-media {
		/* Near-full-width on a phone; still a strict 4:5. */
		aspect-ratio: 4 / 5;
		width: min(100%, calc((100vh - 100px) * .8));
		width: min(100%, calc((100dvh - 100px) * .8));
	}

	/* Arrows would cover the photograph on a small screen; dots only. */
	.fp-arrow {
		display: none;
	}

	/* The coverflow arrows stay: on this page they are the only tap affordance
	   besides the swipe itself, and they sit in the swiper's side padding. */
	.fp-cover-arrow {
		width: 38px;
		height: 38px;
	}

	.fp-meta {
		text-align: center;
	}

	/* V7 — the name/num counter and the action row mirror the centred prose:
	   the short stacked name and status over the carousel, the two buttons
	   directly under it. The heart stays right of the read-more toggle. */
	.fp-meta-top {
		justify-content: center;
		gap: 18px;
	}

	/* V5 — the description box is measured directly against the viewport.
	   main.fp has no horizontal gutter and .fp-meta's 56ch max-width exceeds
	   every phone width, so the parent block is full-bleed: margin: auto
	   resolved against a viewport-wide container was a no-op and only 4vw of
	   padding (≈16px at 390) separated the copy from the edges. An explicit
	   viewport-derived width plus a 34ch cap gives the text its own centred
	   column with at least 24px of clear space on both sides. Name, counter,
	   textile and .fp-sub spacing are untouched. */
	.fp-desc {
		box-sizing: border-box;
		width: calc(100% - 48px);
		max-width: 34ch;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.fp-actions {
		justify-content: center;
	}

	/* Comfortably tappable on touch. */
	.fp-heart {
		width: 52px;
		height: 52px;
	}

	.fp-heart-glyph {
		font-size: 23px;
	}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.fp.fp-armed .fp-fx {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.fp .fp-frame,
	.fp .fp-image,
	.fp .fp-arrow,
	.fp .fp-cover-arrow,
	.fp .fp-dots .swiper-pagination-bullet,
	.fp .fp-heart,
	.fp .fp-heart-glyph,
	.fp .fp-heart-glyph > span,
	.fp .fp-carousel .swiper-wrapper {
		transition: none !important;
	}

	.fp .fp-frame {
		transform: none !important;
	}

	.fp .fp-image {
		transform: none !important;
	}

	.fp .fp-heart.is-pulsing .fp-heart-glyph,
	.fp .fp-heart.is-pulsing {
		animation: none;
	}
}

/* V4 — the journal coverflow's arrows are removed visually. The Swiper still
   loops and accepts swipe/drag, keyboard stays on via the focusable
   #fpCoverSwiper container, and the meta block + View Piece CTA continue to
   follow the centred frame as before. The journal renders no pagination dots
   (Swiper is configured without a pagination element), so nothing else hides. */
.fp-cover-arrow {
	display: none;
}