.secret-campaign .page-top,
.secret-campaign .main-content-wrap > .sidebar-overlay {
	display: none;
}

.secret-campaign .header-wrapper,
.secret-campaign .header-main {
	background-color: #080808;
}

.secret-campaign #main,
.secret-campaign #main > .container,
.secret-campaign #main > .container-fluid,
.secret-campaign .main-content-wrap,
.secret-campaign .main-content {
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
}

.secret-campaign #main {
	overflow: clip;
}

html:has(body.secret-campaign) {
	scrollbar-width: none;
}

html:has(body.secret-campaign)::-webkit-scrollbar {
	display: none;
}

.secret-page {
	--secret-ink: #0b0b0a;
	--secret-paper: #f5f1e8;
	--secret-cream: #fffdf8;
	--secret-gold: #c9a84b;
	--secret-burgundy: #761629;
	--secret-line: rgba(11, 11, 10, 0.16);
	--secret-cards: 3;
	--secret-card-gap: clamp(18px, 2vw, 32px);
	background: var(--secret-paper);
	color: var(--secret-ink);
	display: flex;
	flex-direction: column;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.secret-page > * {
	flex: 0 0 auto;
}

.secret-visually-hidden {
	clip-path: inset(50%);
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

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

.secret-page > section {
	scroll-margin-top: calc(var(--secret-sticky-height, 72px) + 16px);
}

.secret-page img,
.secret-page video {
	max-width: 100%;
}

.secret-page h1,
.secret-page h2,
.secret-page h3,
.secret-page p {
	margin-top: 0;
}

.secret-page h1,
.secret-page h2,
.secret-page h3 {
	color: inherit;
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
	letter-spacing: 0;
}

.secret-page h1 {
	font-size: clamp(4.25rem, 8vw, 8.5rem);
	line-height: 0.82;
	margin-bottom: 1.75rem;
}

.secret-page h2 {
	font-size: clamp(2.45rem, 5vw, 5.25rem);
	line-height: 0.97;
}

.secret-page h3 {
	font-size: 1.75rem;
	line-height: 1.05;
}

.secret-shell {
	margin: 0 auto;
	max-width: 1440px;
	padding-left: clamp(24px, 5vw, 80px);
	padding-right: clamp(24px, 5vw, 80px);
}

.secret-eyebrow,
.secret-kicker {
	color: var(--secret-gold);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.secret-kicker {
	color: var(--secret-burgundy);
}

.secret-notices {
	padding-top: 20px;
}

.secret-hero {
	background: #000;
	color: var(--secret-cream);
	position: relative;
}

.secret-hero__stage {
	align-items: center;
	background: #000;
	display: flex;
	height: calc(100svh - var(--secret-hero-offset, 156px));
	justify-content: center;
	min-height: 300px;
	overflow: hidden;
	position: relative;
}

.secret-hero.is-scroll-controlled {
	height: calc(100svh - var(--secret-hero-offset, 156px) + clamp(3200px, 500svh, 5400px));
}

/* `.secret-cinema` is set on <html> before first paint, so keying the scroll
   story off it too means the tall hero exists from the first frame instead of
   appearing whenever the footer script gets its turn. */
.secret-cinema .secret-hero,
.secret-cinema .secret-hero.is-scroll-controlled {
	height: calc(100svh + clamp(3200px, 500svh, 5400px));
}

.secret-hero.is-scroll-controlled .secret-hero__stage {
	position: sticky;
	top: var(--secret-sticky-height, 80px);
}

/* Cinema mode: on large screens the hero fills the viewport and the site chrome
   waits off-stage until the scroll story reaches its last frame. Taking the
   header out of flow lets the video start at y=0 with no pull-up to clip. */
.secret-cinema .header-wrapper {
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1001;
}

/* Porto's sticky script pins the navbar to the top on its own, which leaves the
   infobar behind to scroll away. The wrapper is already fixed here, so the
   navbar stays in flow beneath the infobar and both remain visible. */
.secret-cinema #header.sticky-header .header-main {
	position: relative !important;
	top: auto !important;
}

.secret-cinema .secret-hero__stage,
.secret-cinema .secret-hero.is-scroll-controlled .secret-hero__stage {
	height: 100svh;
	position: sticky;
	top: 0;
}

.secret-cinema .secret-hero__media {
	aspect-ratio: auto;
	height: 100%;
	max-height: none;
	width: 100%;
}

.secret-cinema .secret-hero__media video {
	object-fit: cover;
}

/* One shared curve so the header and the floating buttons ease in together. */
.secret-cinema .header-wrapper,
.secret-cinema .cky-btn-revisit-wrapper,
.secret-cinema .cky-consent-container {
	transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1), opacity 800ms ease;
}

.secret-cinema:not(.secret-revealed) .header-wrapper {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(0, -100%, 0);
}

.secret-cinema:not(.secret-revealed) .buttonizer.buttonizer-group {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(calc(100% + 40px), 0, 0);
}

/* Buttonizer ships its own `all .25s` transition that outranks ours, so the chat
   button is eased in with an animation instead - that wins over a transition
   without overriding it, leaving the widget's hover behaviour untouched. */
.secret-cinema.secret-revealed .buttonizer.buttonizer-group {
	animation: secret-slide-in-right 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes secret-slide-in-right {
	from {
		opacity: 0;
		transform: translate3d(calc(100% + 40px), 0, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.secret-cinema:not(.secret-revealed) .cky-btn-revisit-wrapper,
.secret-cinema:not(.secret-revealed) .cky-consent-container {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(calc(-100% - 40px), 0, 0);
}

/* While the collection is on screen the chrome steps aside so the products get
   the client's full attention. Porto sets its own transition on the sticky
   navbar, so the id in the selector is what makes ours win. */
.secret-campaign #header .header-main {
	transition: left 300ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 500ms ease;
}

.secret-cinema.secret-focus .header-wrapper,
html:not(.secret-cinema).secret-focus #header.sticky-header .header-main {
	opacity: 0;
	pointer-events: none;
	transform: translate3d(0, -100%, 0);
}

/* Language switch, injected into the navbar on this page only. */
.secret-lang {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 4px;
	margin-left: auto;
}

.secret-lang a {
	border: 1px solid rgba(255, 255, 255, 0.32);
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	padding: 7px 10px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.secret-lang a:hover,
.secret-lang a:focus-visible {
	border-color: #c9a84b;
	color: #fff;
	text-decoration: none;
}

.secret-lang a[aria-current="true"] {
	background: #c9a84b;
	border-color: #c9a84b;
	color: #0b0b0a;
}

.secret-buy {
	display: grid;
	grid-template-columns: auto 76px minmax(210px, 280px);
	max-width: 460px;
}

.secret-buy label {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-right: 0;
	display: flex;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0 14px;
	text-transform: uppercase;
}

.secret-buy input[type="number"] {
	appearance: textfield;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 0;
	color: var(--secret-cream);
	font-size: 1rem;
	height: 58px;
	margin: 0;
	padding: 0 10px;
	text-align: center;
	width: 100%;
}

.secret-buy button,
.secret-button {
	align-items: center;
	background: var(--secret-gold);
	border: 1px solid var(--secret-gold);
	border-radius: 0;
	color: var(--secret-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 700;
	gap: 20px;
	justify-content: space-between;
	min-height: 58px;
	padding: 0 22px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, color 180ms ease;
}

.secret-buy button:hover,
.secret-buy button:focus-visible,
.secret-button:hover,
.secret-button:focus-visible {
	background: var(--secret-cream);
	border-color: var(--secret-cream);
	color: var(--secret-ink);
	text-decoration: none;
}

.secret-hero__media {
	aspect-ratio: 16 / 9;
	background: #000;
	max-height: 100%;
	position: relative;
	width: min(100%, calc((100svh - var(--secret-hero-offset, 156px)) * 16 / 9));
}

.secret-hero__media video {
	display: block;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

/* Right-clicks land here instead of the video, so the browser shows the normal
   page menu rather than its Loop / Save video / Controls menu. */
.secret-hero__shield {
	display: block;
	inset: 0;
	position: absolute;
	z-index: 1;
}

.secret-cinema .secret-hero__play,
.secret-hero.is-scroll-controlled .secret-hero__play {
	display: none;
}

.secret-hero__play {
	align-items: center;
	background: rgba(11, 11, 10, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	color: var(--secret-cream);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 104px;
	justify-content: center;
	left: 50%;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
	width: 104px;
	z-index: 2;
}

.secret-hero__play:hover,
.secret-hero__play:focus-visible {
	background: var(--secret-gold);
	border-color: var(--secret-gold);
	color: var(--secret-ink);
	outline: 0;
}

.secret-hero__play-icon {
	border-bottom: 10px solid transparent;
	border-left: 15px solid currentColor;
	border-top: 10px solid transparent;
	display: block;
	margin-left: 4px;
}

.secret-hero__play-label {
	font-size: 0.58rem;
	font-weight: 700;
	text-transform: uppercase;
}

.secret-hero__media.is-playing .secret-hero__play {
	bottom: 16px;
	flex-direction: row;
	gap: 0;
	height: 44px;
	left: 16px;
	top: auto;
	transform: none;
	width: 44px;
}

.secret-hero__media.is-playing .secret-hero__play-icon {
	border: 0;
	height: 15px;
	margin: 0;
	position: relative;
	width: 13px;
}

.secret-hero__media.is-playing .secret-hero__play-icon::before,
.secret-hero__media.is-playing .secret-hero__play-icon::after {
	background: currentColor;
	content: "";
	height: 15px;
	position: absolute;
	top: 0;
	width: 4px;
}

.secret-hero__media.is-playing .secret-hero__play-icon::before {
	left: 0;
}

.secret-hero__media.is-playing .secret-hero__play-icon::after {
	right: 0;
}

.secret-hero__media.is-playing .secret-hero__play-label {
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Scroll cue. The video only moves while the page does, so the first frame needs
   to say so. It is hidden until the script confirms the scroll story is running,
   which also keeps it away from the play button on small screens. */
.secret-hero__scroll {
	align-items: center;
	bottom: clamp(24px, 4svh, 56px);
	color: var(--secret-cream);
	display: none;
	flex-direction: column;
	gap: 14px;
	left: 50%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translate3d(-50%, 0, 0);
	transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 3;
}

.secret-cinema .secret-hero__scroll,
.secret-hero.is-scroll-controlled .secret-hero__scroll {
	display: flex;
}

.secret-hero__scroll.is-visible {
	opacity: 1;
}

.secret-hero__scroll-label {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
}

.secret-hero__scroll-arrow {
	animation: secret-scroll-float 2400ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: block;
	filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.5));
	height: 12px;
	width: 12px;
}

@keyframes secret-scroll-float {
	0%,
	100% {
		opacity: 0.45;
		transform: translate3d(0, -5px, 0) rotate(45deg);
	}

	50% {
		opacity: 1;
		transform: translate3d(0, 5px, 0) rotate(45deg);
	}
}

@media (max-width: 991px) {
	.secret-cinema .secret-hero__scroll,
	.secret-hero.is-scroll-controlled .secret-hero__scroll {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.secret-cinema .secret-hero__scroll,
	.secret-hero.is-scroll-controlled .secret-hero__scroll {
		display: none;
	}
}

.secret-intro {
	background: var(--secret-paper);
	padding: clamp(80px, 10vw, 150px) 0;
}

.secret-intro__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1.55fr);
}

.secret-intro h2 {
	max-width: 900px;
}

.secret-intro__grid > div > p {
	font-size: 1.08rem;
	margin: 2rem 0 0;
	max-width: 690px;
}

.secret-products {
	align-items: center;
	background: #e9e2d5;
	display: flex;
	min-height: calc(100svh - var(--secret-sticky-height, 80px));
	padding: clamp(28px, 4vh, 48px) 0;
}

.secret-products > .secret-shell {
	width: 100%;
}

.secret-products__heading {
	align-items: end;
	display: grid;
	gap: clamp(24px, 5vw, 80px);
	grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
	margin-bottom: clamp(18px, 3vh, 32px);
}

.secret-products__heading h2 {
	font-size: clamp(2.7rem, 4vw, 4.5rem);
	margin-bottom: 0;
	max-width: 850px;
}

.secret-products__aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.secret-products__aside > p {
	color: rgba(11, 11, 10, 0.68);
	margin: 0;
}

.secret-products__nav {
	display: flex;
	gap: 12px;
}

.secret-products__nav[hidden] {
	display: none;
}

.secret-products__arrow {
	align-items: center;
	background: transparent;
	border: 1px solid rgba(11, 11, 10, 0.3);
	border-radius: 50%;
	color: var(--secret-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.05rem;
	height: 52px;
	justify-content: center;
	padding: 0;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity 200ms ease, transform 200ms ease;
	width: 52px;
}

.secret-products__arrow:hover,
.secret-products__arrow:focus-visible {
	background: var(--secret-ink);
	border-color: var(--secret-ink);
	color: var(--secret-cream);
	outline: 0;
	transform: translate3d(0, -2px, 0);
}

.secret-products__arrow[disabled] {
	cursor: default;
	opacity: 0.28;
	transform: none;
}

/* The rail runs the full width of the screen so cards can travel through the
   gutters on either side of the shell, where they blur out. The gutter mirrors
   .secret-shell: its max-width, then its own padding. */
.secret-products__viewport {
	--secret-gutter: calc(max(0px, (100vw - 1440px) / 2) + clamp(24px, 5vw, 80px));
	--secret-fade-start: var(--secret-gutter);
	--secret-fade-end: var(--secret-gutter);
	--secret-blur: 7px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--secret-fade-start), #000 calc(100% - var(--secret-fade-end)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--secret-fade-start), #000 calc(100% - var(--secret-fade-end)), transparent 100%);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* At either end of the rail there is nothing left to reveal, so that side
   stops fading and the first or last card meets the edge cleanly. */
.secret-products__viewport.is-start {
	--secret-fade-start: 0px;
}

.secret-products__viewport.is-end {
	--secret-fade-end: 0px;
}

.secret-products__track {
	-ms-overflow-style: none;
	cursor: grab;
	display: grid;
	gap: var(--secret-card-gap);
	grid-auto-columns: calc((100vw - 2 * var(--secret-gutter) - (var(--secret-cards) - 1) * var(--secret-card-gap)) / var(--secret-cards));
	grid-auto-flow: column;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding: 4px var(--secret-gutter) 18px;
	scroll-padding-inline: var(--secret-gutter);
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
}

.secret-products__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.secret-products__track::-webkit-scrollbar {
	display: none;
}

.secret-products__track:focus-visible {
	outline: 2px solid var(--secret-ink);
	outline-offset: 4px;
}

/* --secret-dim is written per card by the slider script: 0 while the card sits
   in the clear middle of the rail, rising to 1 as it slides into a gutter. */
.secret-product {
	--secret-dim: 0;
	background: var(--secret-cream);
	border-top: 3px solid var(--secret-ink);
	display: flex;
	filter: blur(calc(var(--secret-dim) * var(--secret-blur, 7px)));
	flex-direction: column;
	min-width: 0;
	opacity: calc(1 - var(--secret-dim) * 0.55);
	position: relative;
	scroll-snap-align: start;
	transition: box-shadow 260ms ease, transform 260ms ease;
}

/* One card per swipe. A touch flick carries its own momentum, and on an endless
   rail there is no end to run out against, so without this a single swipe sends
   the cards blurring past unread. */
@media (pointer: coarse) {
	.secret-product {
		scroll-snap-stop: always;
	}
}

.secret-product:hover {
	box-shadow: 0 24px 48px rgba(11, 11, 10, 0.16);
	transform: translate3d(0, -4px, 0);
}

.secret-product__media {
	align-items: center;
	background: var(--secret-ink);
	display: flex;
	height: clamp(210px, 32svh, 380px);
	justify-content: center;
	overflow: hidden;
	padding: clamp(10px, 1.1vw, 18px);
	position: relative;
}

.secret-product__index {
	color: rgba(255, 255, 255, 0.08);
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(7rem, 12vw, 12rem);
	line-height: 0.7;
	position: absolute;
	right: -2%;
	top: 6%;
}

.secret-product__media img {
	height: 100%;
	object-fit: contain;
	position: relative;
	transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 100%;
	will-change: transform;
	z-index: 1;
}

.secret-product:hover .secret-product__media img {
	transform: scale3d(1.06, 1.06, 1);
}

.secret-product__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	padding: clamp(18px, 1.6vw, 28px);
}

.secret-product__content h3 {
	font-size: clamp(1.85rem, 2vw, 2.4rem);
	margin-bottom: 6px;
}

/* The whole card opens the product page. The buy controls sit above this overlay
   so adding to cart still works. */
.secret-product__link {
	color: inherit;
	text-decoration: none;
}

.secret-product__link::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

.secret-product__link:focus-visible {
	outline: 2px solid var(--secret-ink);
	outline-offset: 3px;
}

.secret-product__description {
	color: rgba(11, 11, 10, 0.72);
	font-family: "Cormorant Garamond", serif;
	font-size: 1.05rem;
	line-height: 1.3;
	margin-bottom: 10px;
}

.secret-product__contents {
	border-top: 1px solid var(--secret-line);
	list-style: none;
	margin: 0 0 12px;
	padding: 8px 0 0;
}

.secret-product__contents li {
	font-size: 0.74rem;
	padding: 2px 0 2px 16px;
	position: relative;
}

.secret-product__contents li::before {
	color: var(--secret-burgundy);
	content: "+";
	font-weight: 700;
	left: 0;
	position: absolute;
}

.secret-product__customization {
	align-items: flex-start;
	background: #f2ead8;
	border-left: 3px solid var(--secret-gold);
	display: flex;
	font-size: 0.72rem;
	font-weight: 600;
	gap: 10px;
	margin: 0 0 14px;
	padding: 9px 12px;
}

.secret-product__customization span {
	color: var(--secret-burgundy);
}

.secret-product__footer {
	margin-top: auto;
}

/* A single CTA slot keeps the price line and the footer links on one baseline
   across every card, even when a product falls back to the availability link.
   The raised stacking context keeps it clear of the card-wide product link. */
.secret-product__cta {
	align-items: end;
	display: grid;
	min-height: 92px;
	position: relative;
	z-index: 2;
}

.secret-product__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 0 0 10px;
}

.secret-product__price del {
	color: rgba(11, 11, 10, 0.56);
	font-size: 1rem;
	text-decoration-thickness: 1px;
}

.secret-product__price .secret-product__saving {
	color: #236344;
	flex-basis: 100%;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: none;
}

.secret-product__price strong {
	font-family: "Cormorant Garamond", serif;
	font-size: 2rem;
	font-weight: 500;
}

.secret-product__price span {
	color: rgba(11, 11, 10, 0.52);
	font-size: 0.66rem;
	text-transform: uppercase;
}

.secret-buy--product {
	grid-template-columns: auto 68px;
	max-width: none;
}

.secret-buy--product label,
.secret-buy--product input[type="number"] {
	border-color: rgba(11, 11, 10, 0.28);
	color: var(--secret-ink);
}

.secret-buy--product input[type="number"] {
	height: 46px;
}

.secret-buy--product button {
	grid-column: 1 / -1;
	min-height: 46px;
	width: 100%;
}

.secret-buy--product button,
.secret-button--product {
	background: var(--secret-ink);
	border-color: var(--secret-ink);
	color: var(--secret-cream);
}

.secret-buy--product button:hover,
.secret-buy--product button:focus-visible,
.secret-button--product:hover,
.secret-button--product:focus-visible {
	background: var(--secret-burgundy);
	border-color: var(--secret-burgundy);
	color: var(--secret-cream);
}

.secret-product__links {
	display: flex;
	font-size: 0.62rem;
	justify-content: space-between;
	margin-top: 10px;
	text-transform: uppercase;
}

.secret-product__links span {
	/* Matches the link underline so the row keeps the same height on cards
	   that have no product permalink. */
	border-bottom: 1px solid transparent;
	color: rgba(11, 11, 10, 0.54);
}

.secret-product__links a {
	border-bottom: 1px solid currentColor;
	color: var(--secret-ink);
	font-weight: 700;
	text-decoration: none;
}

.secret-contents {
	align-items: center;
	background: var(--secret-cream);
	display: flex;
	min-height: 100svh;
	padding: clamp(32px, 5vh, 64px) 0;
}

.secret-contents > .secret-shell {
	width: 100%;
}

.secret-section-heading {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1.55fr);
	margin-bottom: clamp(24px, 4vh, 44px);
}

.secret-section-heading h2 {
	max-width: 780px;
}

.secret-contents__list {
	border-top: 1px solid var(--secret-line);
	display: grid;
	gap: 0 clamp(30px, 5vw, 80px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.secret-contents__list li {
	align-items: baseline;
	border-bottom: 1px solid var(--secret-line);
	display: grid;
	gap: 28px;
	grid-template-columns: 52px 1fr;
	padding: clamp(12px, 2vh, 22px) 0;
}

.secret-contents__list li > span {
	color: var(--secret-burgundy);
	font-size: 0.72rem;
	font-weight: 700;
}

.secret-contents__list h3 {
	margin-bottom: 6px;
}

.secret-contents__list p {
	color: rgba(11, 11, 10, 0.68);
	margin-bottom: 0;
}

.secret-help {
	background: var(--secret-gold);
	padding: clamp(60px, 8vw, 110px) 0;
}

.secret-help__grid {
	display: grid;
	gap: 60px;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
}

.secret-help .secret-kicker {
	color: var(--secret-ink);
}

.secret-help h2 {
	font-size: clamp(2.4rem, 4.2vw, 4.5rem);
	margin-bottom: 18px;
}

.secret-help__body {
	margin-bottom: 0;
	max-width: 46ch;
}

.secret-help__links {
	display: flex;
	flex-direction: column;
	margin-top: 24px;
}

.secret-help__links a {
	border-bottom: 1px solid rgba(11, 11, 10, 0.35);
	color: var(--secret-ink);
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(1.35rem, 2.3vw, 2rem);
	overflow-wrap: anywhere;
	padding: 10px 0;
	text-decoration: none;
}

.secret-contact {
	align-content: start;
	display: grid;
	gap: 16px;
}

.secret-contact__row {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.secret-contact__field {
	display: grid;
	gap: 7px;
	margin: 0;
}

.secret-contact__field label {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-indent: 0.16em;
	text-transform: uppercase;
}

.secret-contact__field input,
.secret-contact__field textarea {
	background: rgba(255, 253, 248, 0.55);
	border: 1px solid rgba(11, 11, 10, 0.32);
	border-radius: 0;
	color: var(--secret-ink);
	font-family: inherit;
	font-size: 1rem;
	padding: 15px 16px;
	width: 100%;
}

.secret-contact__field input {
	min-height: 56px;
}

.secret-contact__field textarea {
	min-height: 132px;
	resize: vertical;
}

.secret-contact__field input::placeholder,
.secret-contact__field textarea::placeholder {
	color: rgba(11, 11, 10, 0.45);
}

.secret-contact__field input:focus-visible,
.secret-contact__field textarea:focus-visible {
	background: var(--secret-cream);
	border-color: var(--secret-ink);
	outline: 0;
}

.secret-contact__submit {
	justify-self: start;
}

.secret-contact__note {
	color: rgba(11, 11, 10, 0.62);
	font-size: 0.68rem;
	margin-bottom: 0;
}

.secret-contact__status {
	border-left: 2px solid var(--secret-ink);
	font-size: 0.78rem;
	margin-bottom: 0;
	padding-left: 14px;
}

.secret-contact__status--error {
	border-left-color: #8f2f28;
}

/* Under 16px iOS zooms the whole page in when a field takes focus. */
@media (max-width: 767px) {
	.secret-contact__field input,
	.secret-contact__field textarea {
		font-size: 16px;
	}
}

.secret-newsletter {
	background: var(--secret-ink);
	color: var(--secret-cream);
	padding: clamp(60px, 8vw, 110px) 0;
}

.secret-newsletter__grid {
	display: grid;
	gap: 60px;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
}

.secret-newsletter .secret-kicker {
	color: var(--secret-gold);
}

.secret-newsletter h2 {
	font-size: clamp(2.4rem, 4.2vw, 4.5rem);
	margin-bottom: 18px;
}

.secret-newsletter__lead {
	color: rgba(255, 253, 248, 0.72);
	margin-bottom: 0;
	max-width: 46ch;
}

.secret-newsletter__form {
	align-content: end;
	display: grid;
	gap: 14px;
}

.secret-newsletter__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

.secret-newsletter__field input[type="email"] {
	background: transparent;
	border: 1px solid rgba(255, 253, 248, 0.34);
	border-radius: 0;
	border-right: 0;
	color: var(--secret-cream);
	font-family: inherit;
	font-size: 1rem;
	min-height: 58px;
	padding: 0 18px;
	width: 100%;
}

.secret-newsletter__field input[type="email"]::placeholder {
	color: rgba(255, 253, 248, 0.45);
}

.secret-newsletter__field input[type="email"]:focus-visible {
	border-color: var(--secret-gold);
	outline: 0;
}

/* Bot trap: never shown, so anything typed here is not a person. */
.secret-contact__hp,
.secret-newsletter__hp {
	left: -9999px;
	position: absolute;
}

.secret-newsletter__note {
	color: rgba(255, 253, 248, 0.55);
	font-size: 0.68rem;
	margin-bottom: 0;
}

.secret-newsletter__status {
	border-left: 2px solid var(--secret-gold);
	font-size: 0.78rem;
	margin-bottom: 0;
	padding-left: 14px;
}

.secret-newsletter__status--error {
	border-left-color: #e0736b;
}

@media (max-width: 1200px) {
	.secret-page {
		--secret-cards: 2;
	}
}

@media (max-width: 991px) {
	.secret-page {
		--secret-cards: 1;
	}

	.secret-hero,
	.secret-hero.is-scroll-controlled {
		height: auto;
		order: 1;
	}

	.secret-hero__stage,
	.secret-hero.is-scroll-controlled .secret-hero__stage {
		height: auto;
		min-height: 0;
		padding: clamp(10px, 2.5vw, 22px) 0;
		position: relative;
		top: auto;
	}

	.secret-hero__media {
		max-height: none;
		width: 100%;
	}

	.secret-products {
		min-height: 0;
		order: 2;
	}

	.secret-intro {
		order: 3;
	}

	.secret-contents {
		order: 4;
	}

	.secret-help {
		order: 5;
	}

	.secret-newsletter {
		order: 6;
	}

	.secret-products__heading {
		grid-template-columns: minmax(0, 1fr);
	}

	.secret-products__nav {
		display: none;
	}

	/* Blurring a card costs more than it is worth during momentum scrolling. */
	.secret-products__viewport {
		--secret-blur: 3px;
	}

	.secret-products__track {
		grid-auto-columns: min(86%, 420px);
	}
}

@media (min-width: 992px) and (max-height: 820px) {
	.secret-products {
		padding-bottom: 12px;
		padding-top: 12px;
	}

	.secret-products__heading {
		margin-bottom: 10px;
	}

	.secret-products__heading h2 {
		font-size: 2.85rem;
	}

	.secret-products__heading .secret-kicker {
		margin-bottom: 4px;
	}

	.secret-products__arrow {
		height: 44px;
		width: 44px;
	}

	.secret-product__media {
		height: clamp(170px, 26svh, 270px);
	}

	.secret-product__content {
		padding-bottom: 16px;
		padding-top: 16px;
	}
}

@media (min-width: 992px) and (max-height: 700px) {
	.secret-product__description,
	.secret-product__links {
		display: none;
	}

	.secret-product__content h3 {
		font-size: 1.7rem;
	}

	.secret-product__contents li {
		font-size: 0.7rem;
	}

	.secret-product__customization {
		margin-bottom: 10px;
	}
}

@media (max-width: 767px) {
	.secret-page {
		font-size: 15px;
	}

	.secret-page h2 {
		font-size: clamp(2.35rem, 12vw, 3.7rem);
	}

	.secret-hero__play {
		height: 84px;
		width: 84px;
	}

	.secret-intro__grid,
	.secret-section-heading,
	.secret-products__heading,
	.secret-help__grid,
	.secret-newsletter__grid {
		grid-template-columns: 1fr;
	}

	.secret-intro__grid,
	.secret-section-heading {
		gap: 16px;
	}

	.secret-section-heading {
		margin-bottom: 20px;
	}

	.secret-products__heading {
		align-items: start;
		gap: 14px;
	}

	.secret-product__content {
		padding: 20px;
	}

	.secret-product__content h3 {
		font-size: 2.1rem;
	}

	.secret-product__description {
		font-size: 1.02rem;
	}

	.secret-help__grid {
		gap: 36px;
	}

	.secret-newsletter__grid {
		gap: 36px;
	}

	.secret-contents__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.secret-products,
	.secret-contents {
		padding-bottom: 20px;
		padding-top: 20px;
	}

	.secret-contents {
		min-height: 100svh;
	}

	.secret-products__heading {
		margin-bottom: 14px;
	}

	.secret-products__heading h2 {
		font-size: 2.7rem;
	}

	.secret-products__aside > p {
		display: none;
	}

	.secret-products__track {
		grid-auto-columns: min(88%, 400px);
	}

	.secret-product__media {
		height: clamp(210px, 30svh, 300px);
		padding: 14px;
	}

	.secret-product__customization {
		margin-bottom: 10px;
	}

	.secret-product__links {
		align-items: center;
		flex-direction: row;
		font-size: 0.58rem;
		gap: 10px;
	}

	.secret-contents__list li {
		gap: 14px;
		grid-template-columns: 34px 1fr;
		padding: 7px 0;
	}

	.secret-contents__list h3 {
		font-size: 1.35rem;
		margin-bottom: 2px;
	}

	.secret-contents__list p {
		font-size: 0.76rem;
		line-height: 1.4;
	}
}

@media (max-width: 380px) {
	.secret-shell {
		padding-left: 18px;
		padding-right: 18px;
	}

	.secret-products__viewport {
		--secret-gutter: 18px;
	}

	.secret-products__track {
		grid-auto-columns: min(92%, 360px);
	}

	.secret-help__links a {
		font-size: 1.2rem;
	}
}

@media (max-width: 767px) and (max-height: 720px) {
	.secret-hero__play {
		height: 68px;
		width: 68px;
	}

	.secret-products {
		padding-bottom: 8px;
		padding-top: 8px;
	}

	.secret-products__heading {
		gap: 6px;
		margin-bottom: 6px;
	}

	.secret-products__heading .secret-kicker {
		margin-bottom: 2px;
	}

	.secret-products__heading h2 {
		font-size: 2.2rem;
	}

	.secret-product__media {
		height: clamp(160px, 24svh, 220px);
	}

	.secret-product__content {
		padding: 14px 18px;
	}

	.secret-product__content h3 {
		font-size: 1.85rem;
	}

	.secret-product__description,
	.secret-product__links {
		display: none;
	}
}

@media (orientation: landscape) and (max-width: 991px) and (max-height: 500px) {
	.secret-hero__stage,
	.secret-hero.is-scroll-controlled .secret-hero__stage {
		padding: 8px 0;
	}

	.secret-hero__media {
		max-height: calc(100svh - var(--secret-hero-offset, 90px) - 16px);
		width: min(100%, calc((100svh - var(--secret-hero-offset, 90px)) * 16 / 9));
	}

	.secret-hero__play {
		height: 64px;
		width: 64px;
	}

	.secret-products,
	.secret-contents {
		padding-bottom: 8px;
		padding-top: 8px;
	}

	.secret-products__track {
		grid-auto-columns: min(58%, 380px);
	}

	.secret-products__heading {
		margin-bottom: 4px;
	}

	.secret-products__heading h2 {
		font-size: 1.6rem;
	}

	.secret-products__heading .secret-kicker {
		font-size: 0.55rem;
		margin-bottom: 2px;
	}

	.secret-product__media {
		height: clamp(96px, 22svh, 140px);
		padding: 6px;
	}

	.secret-product__content {
		padding: 10px 16px;
	}

	.secret-product__content h3 {
		font-size: 1.5rem;
		margin-bottom: 3px;
	}

	.secret-product__description,
	.secret-product__contents,
	.secret-product__links {
		display: none;
	}

	.secret-product__customization {
		font-size: 0.62rem;
		line-height: 1.3;
		margin-bottom: 6px;
		padding: 6px 8px;
	}

	.secret-product__price {
		margin-bottom: 5px;
	}

	.secret-product__price strong {
		font-size: 1.6rem;
	}

	.secret-buy--product label,
	.secret-buy--product input[type="number"] {
		height: 38px;
		min-height: 38px;
	}

	.secret-buy--product button {
		font-size: 0.6rem;
		min-height: 38px;
		padding: 0 10px;
	}

	.secret-contents > .secret-shell {
		display: grid;
		gap: 24px;
		grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
	}

	.secret-section-heading {
		display: block;
		margin-bottom: 0;
	}

	.secret-section-heading h2 {
		font-size: 2.35rem;
	}

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

	.secret-contents__list li {
		gap: 7px;
		grid-template-columns: 22px 1fr;
		padding: 4px 0;
	}

	.secret-contents__list h3 {
		font-size: 1.05rem;
	}

	.secret-contents__list p {
		font-size: 0.6rem;
		line-height: 1.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.secret-page *,
	.secret-page *::before,
	.secret-page *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}