/* Constelor Core: shared tokens and utilities used by every Constelor block. */
:root {
	--cn-ink: var(--wp--preset--color--contrast, #17141A);
	--cn-muted: var(--wp--preset--color--muted, #4D4852);
	--cn-subtle: var(--wp--preset--color--subtle, #5E5257);
	--cn-accent: var(--wp--preset--color--accent, #9E414D);
	--cn-accent-ink: var(--wp--preset--color--accent-ink, #85343F);
	--cn-accent-soft: var(--wp--preset--color--accent-soft, #F3E3E5);
	--cn-deep: var(--wp--preset--color--deep, #4A1822);
	--cn-deepest: var(--wp--preset--color--deepest, #1A0F16);
	--cn-cream: var(--wp--preset--color--cream, #FDE9D7);
	--cn-surface: var(--wp--preset--color--surface, #F4F3F1);
	--cn-line: var(--wp--preset--color--line, #DDD6CE);
	--cn-on-deep: var(--wp--preset--color--on-deep, #FBF7F4);
	--cn-base: var(--wp--preset--color--base, #FFFFFF);
	--cn-ease: cubic-bezier(.16, 1, .3, 1);
	--cn-gutter: clamp(20px, 3.5vw, 52px);
	--cn-section: clamp(96px, 10vw, 140px);
	--cn-max: 1400px;
}

.cn-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cn-block { position: relative; box-sizing: border-box; overflow-x: clip; }
.cn-block *, .cn-block *::before, .cn-block *::after { box-sizing: border-box; }
:where(.cn-block) a { color: inherit; }
.cn-block :focus-visible { outline: 2px solid var(--cn-accent); outline-offset: 4px; }
.cn-dark :focus-visible, .cn-block.cn-dark :focus-visible { outline-color: var(--cn-cream); }
.cn-dark { color: var(--cn-on-deep); }

.cn-wrap { max-width: var(--cn-max); margin: 0 auto; padding: var(--cn-section) var(--cn-gutter); }
.cn-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 48px; margin-bottom: 56px; }
.cn-h2 { margin: 0; font-weight: 300; font-size: clamp(38px, 4.2vw, 64px); line-height: 1; letter-spacing: -0.045em; color: inherit; }
.cn-lead { margin: 0; max-width: 440px; font-size: 19px; font-weight: 300; line-height: 1.6; color: var(--cn-muted); }
.cn-dark .cn-lead { color: rgba(251, 247, 244, 0.82); }
.cn-kick { margin: 0 0 18px; font-size: 14px; font-weight: 500; color: var(--cn-accent); }
.cn-dark .cn-kick { color: var(--cn-cream); }
.cn-note { margin: 0; font-size: 13px; color: var(--cn-accent); }
.cn-dark .cn-note { color: var(--cn-cream); }

/* Reveal on scroll. Hidden only once JavaScript is running, so nothing is lost without it. */
.cn-js .cn-rv { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--cn-ease), transform 1.2s var(--cn-ease); }
.cn-js [data-on="true"] .cn-rv, .cn-js .cn-rv[data-on="true"] { opacity: 1; transform: none; }
@keyframes cn-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cn-up { animation: cn-up 1.1s var(--cn-ease) both; }
@keyframes cn-drift { from { transform: scale(1.03); } to { transform: scale(1.12) translate(-1%, -1%); } }
.cn-kb { animation: cn-drift 26s ease-in-out infinite alternate; }

/* Links and buttons */
.cn-ul { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 500; color: var(--cn-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: rgba(158, 65, 77, 0.35); transition: text-decoration-color .3s ease; }
.cn-ul:hover { text-decoration-color: currentColor; color: var(--cn-accent); }
.cn-dark .cn-ul { color: var(--cn-cream); text-decoration-color: rgba(253, 233, 215, 0.4); }
.cn-ul svg, .cn-pill svg { flex: none; transition: transform .5s var(--cn-ease); }
.cn-ul:hover svg, .cn-pill:hover svg { transform: translateX(4px); }
.cn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; text-decoration: none; font: inherit; font-weight: 500; font-size: 15px; line-height: 1.2; cursor: pointer; transition: background .3s ease, color .3s ease; }
.cn-pill--light { background: var(--cn-on-deep); color: var(--cn-deepest); }
.cn-pill--light:hover { background: var(--cn-accent); color: #FFFFFF; }
.cn-pill--accent { background: var(--cn-accent); color: #FFFFFF; }
.cn-pill--accent:hover { background: var(--cn-deep); color: #FFFFFF; }
.cn-pill--ghost { min-height: 46px; padding: 0 24px; border: 1px solid rgba(251, 247, 244, 0.35); color: var(--cn-on-deep); background: transparent; }
.cn-pill--ghost:hover { background: rgba(251, 247, 244, 0.12); }

/* Breadcrumbs */
.cn-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; color: rgba(251, 247, 244, 0.72); }
.cn-crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.cn-crumbs li + li::before { content: "/"; margin-right: 10px; color: rgba(251, 247, 244, 0.4); }
.cn-crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; color: inherit; }
.cn-crumbs a:hover { color: #FFFFFF; }
.cn-crumbs--light ol { color: var(--cn-subtle); }
.cn-crumbs--light li + li::before { color: rgba(23, 20, 26, 0.3); }
.cn-crumbs--light a:hover { color: var(--cn-accent); }

/* Images */
.cn-im { position: relative; display: block; overflow: hidden; background: #EDE7E2; }
.cn-im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--cn-ease); }
.cn-lift:hover .cn-im img { transform: scale(1.045); }

/* Portraits */
.cn-portrait { position: relative; display: block; overflow: hidden; border-radius: 20px; background: linear-gradient(160deg, #EDE7E2 0%, #E2D3CB 100%); }
.cn-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-portrait--empty { display: flex; align-items: flex-end; padding: 16px; font-size: 12px; color: var(--cn-subtle); }
.cn-dark .cn-portrait--empty { background: linear-gradient(160deg, rgba(251, 247, 244, 0.14), rgba(251, 247, 244, 0.06)); color: rgba(251, 247, 244, 0.75); }

/* Tags and labels */
.cn-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: rgba(158, 65, 77, 0.1); color: var(--cn-accent); }
.cn-dark .cn-tag { background: rgba(253, 233, 215, 0.16); color: var(--cn-cream); }

/* Round arrow buttons and horizontal rails */
.cn-go { width: 48px; height: 48px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cn-accent); background: rgba(158, 65, 77, 0.08); transition: background .4s ease, color .4s ease, transform .5s var(--cn-ease); }
.cn-rbtns { display: flex; gap: 10px; }
.cn-rbtn { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--cn-deep); color: #FFFFFF; transition: background .3s ease, opacity .3s ease; }
.cn-rbtn:hover { background: var(--cn-accent); }
.cn-rbtn--prev svg { transform: rotate(180deg); }
.cn-rbtn[aria-disabled="true"] { opacity: .3; cursor: default; background: var(--cn-deep); }
.cn-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.cn-rail::-webkit-scrollbar { display: none; }
.cn-rail > * { scroll-snap-align: start; }

/* Shared work card */
.cn-wc { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.cn-wc .cn-im { aspect-ratio: 4 / 3; border-radius: 22px; }
.cn-wm { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 20px; font-size: 14px; color: var(--cn-subtle); }
.cn-wm b { font-weight: 500; color: var(--cn-accent); }
.cn-wt { display: block; margin-top: 10px; font-weight: 300; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.16; letter-spacing: -0.03em; transition: color .4s ease; }
.cn-wc:hover .cn-wt { color: var(--cn-accent); }
.cn-wr { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--cn-deep); }
.cn-wr::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cn-accent); transform: translateY(-1px); }

/* Shared insight card */
.cn-ic { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.cn-ic .cn-im { aspect-ratio: 3 / 2; border-radius: 20px; }
.cn-imeta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 18px; font-size: 13px; color: var(--cn-subtle); }
.cn-imeta b { font-weight: 500; color: var(--cn-accent); }
.cn-ict { display: block; margin-top: 10px; font-weight: 300; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.18; letter-spacing: -0.03em; transition: color .4s ease; }
.cn-ic:hover .cn-ict { color: var(--cn-accent); }
.cn-icb { display: block; margin-top: 12px; font-size: 14px; color: var(--cn-subtle); }

.cn-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 40px 28px; }

/* Editor previews never hide content. */
.editor-styles-wrapper .cn-rv { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
	.cn-js .cn-rv { opacity: 1; transform: none; transition: none; }
	.cn-up, .cn-kb { animation: none; }
	.cn-im img, .cn-ul svg, .cn-pill svg { transition: none; }
	.cn-rail { scroll-behavior: auto; }
}
.cn-static .cn-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
.cn-static .cn-up, .cn-static .cn-kb { animation: none !important; }

/* Wine hero glow and jump links */
.cn-glow { position: absolute; right: -10%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(158, 65, 77, 0.55) 0%, rgba(158, 65, 77, 0) 65%); pointer-events: none; }
.cn-jmp { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(251, 247, 244, 0.3); color: var(--cn-on-deep); text-decoration: none; font-size: 15px; transition: background .3s ease, border-color .3s ease; }
.cn-jmp:hover { background: rgba(251, 247, 244, 0.1); border-color: rgba(251, 247, 244, 0.6); color: var(--cn-on-deep); }
.cn-block [id], .cn-sec[id] { scroll-margin-top: 24px; }
.cn-h1 { margin: 0; font-weight: 300; font-size: clamp(56px, 8vw, 128px); line-height: .95; letter-spacing: -0.06em; color: inherit; }
.cn-label { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 500; background: rgba(158, 65, 77, 0.1); color: var(--cn-accent); }
.cn-av { width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; }
.cn-av.cn-portrait--empty { padding: 0; align-items: center; justify-content: center; font-size: 11px; }
.cn-avatar { position: relative; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, #EDE7E2, #E2D3CB); font-size: 11px; color: var(--cn-subtle); }
.cn-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-block [hidden] { display: none !important; }
/* Page containers measure their content width, as in the design. */
.cn-block .cn-wrap, .cn-wrap, .cn-block .cn-ph__in, .cn-block .cn-prh__in, .cn-block .cn-prh__img, .cn-cc, .cn-block .cn-lh__img { box-sizing: content-box; }

/* Shared heroes: page hero (also used by the Insights library) and the cream header (case studies and insights). */
.cn-ph { background: var(--cn-deep); color: var(--cn-on-deep); overflow: hidden; }
.cn-ph__in { position: relative; max-width: var(--cn-max); margin: 0 auto; padding: clamp(56px, 7vw, 104px) var(--cn-gutter) clamp(72px, 8vw, 120px); }
.cn-ph__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px 64px; margin-top: 28px; }
.cn-ph__long { max-width: 900px; font-size: clamp(48px, 6.6vw, 108px); line-height: .98; letter-spacing: -0.055em; }
.cn-ph__side { max-width: 520px; }
.cn-ph__side .cn-lead { max-width: none; }
.cn-ph__note { margin: 18px 0 0; font-size: 13px; color: var(--cn-cream); }
.cn-ph__jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(40px, 5vw, 64px); }
.cn-ph__search { display: flex; align-items: center; gap: 14px; max-width: 720px; margin-top: clamp(40px, 5vw, 64px); padding: 0 24px; min-height: 64px; border-radius: 999px; background: rgba(251, 247, 244, 0.1); box-shadow: inset 0 0 0 1px rgba(251, 247, 244, 0.28); color: var(--cn-on-deep); }
.cn-ph__search:focus-within { box-shadow: inset 0 0 0 1px var(--cn-cream); background: rgba(251, 247, 244, 0.14); }
.cn-ph__search input { all: unset; flex: 1; min-width: 0; font-size: 18px; color: var(--cn-on-deep); }
.cn-ph__search input::placeholder { color: rgba(251, 247, 244, 0.7); }
.cn-lh__band { background: var(--cn-cream); color: var(--cn-ink); }
.cn-lh__g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(40px, 6vw, 104px); align-items: end; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); }
.cn-lh__tags { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cn-lh__h { margin: 20px 0 0; font-weight: 300; font-size: clamp(40px, 5vw, 80px); line-height: 1.02; letter-spacing: -0.055em; color: inherit; }
.cn-lh__l { margin-top: 24px; max-width: 620px; }
.cn-lh__dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 28px; padding: 32px; border-radius: 24px; background: #FFFFFF; }
.cn-lh__dl dt { font-size: 13px; font-weight: 500; color: var(--cn-accent); }
.cn-lh__dl dd { margin: 4px 0 0; font-size: 17px; }
.cn-lh__imgband { background: linear-gradient(var(--cn-cream) 50%, var(--cn-base) 50%); }
.cn-lh__img { max-width: var(--cn-max); margin: 0 auto; padding: 0 var(--cn-gutter); }
.cn-lh__img .cn-im { aspect-ratio: 24 / 9; border-radius: 28px; }
@media (max-width: 1000px) { .cn-lh__g { grid-template-columns: 1fr; } .cn-lh__img .cn-im { aspect-ratio: 16 / 10; } }
@media (max-width: 480px) { .cn-lh__dl { grid-template-columns: 1fr; } }