/*
 * Cross J Farms sub-brand.
 * Everything is scoped to sections with the .sh-cj class, so it never
 * affects the rest of stonehillwinery.com.
 *
 * Paper  #EFE6D2   Paper 2 #E4D8BD   Ink #2A1E16   Body #4A3B2E
 * Maroon #6D1A24   Deep #5A141D      Gold #B08D3C (lines only)
 * Gold text #76591D (5.3:1 on paper)  Gold light #D9BE7A (on deep, 7.5:1)
 */

.sh-cj {
	--cj-paper: #EFE6D2;
	--cj-paper-2: #E4D8BD;
	--cj-ink: #2A1E16;
	--cj-body: #4A3B2E;
	--cj-maroon: #6D1A24;
	--cj-deep: #5A141D;
	--cj-gold: #B08D3C;
	--cj-gold-text: #76591D;
	--cj-gold-light: #D9BE7A;
	--cj-display: "Cinzel", "Engravers MT", "Copperplate", Georgia, serif;
	color: var(--cj-body);
}

/* Sections sit flush against each other */
.entry-content > .sh-cj.alignfull { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Paper backgrounds with a faint grain, like the label stock */
.sh-cj.sh-cj--paper {
	background-color: var(--cj-paper) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sh-cj.sh-cj--paper-2 { background-color: var(--cj-paper-2) !important; }
.sh-cj.sh-cj--deep { background-color: var(--cj-deep) !important; color: var(--cj-paper); }

/* Type */
.sh-cj h1, .sh-cj h2, .sh-cj h3, .sh-cj h4 {
	font-family: var(--cj-display);
	color: var(--cj-ink);
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.2;
}
.sh-cj h1 { font-size: clamp(38px, 6vw, 68px); letter-spacing: .08em; }
.sh-cj h2 { font-size: clamp(28px, 3.4vw, 40px); }
.sh-cj h3 { font-size: 22px; }
.sh-cj h1 em, .sh-cj h2 em, .sh-cj h3 em { font-style: normal; color: var(--cj-maroon); }
.sh-cj p, .sh-cj li { color: var(--cj-body); font-size: 17px; line-height: 1.75; }
.sh-cj .sh-cj-eyebrow {
	font-family: var(--cj-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--cj-gold-text);
	margin-bottom: 12px;
}
.sh-cj .sh-cj-lead { font-size: 20px; line-height: 1.65; color: var(--cj-ink); }

.sh-cj.sh-cj--deep h1, .sh-cj.sh-cj--deep h2, .sh-cj.sh-cj--deep h3 { color: var(--cj-paper); }
.sh-cj.sh-cj--deep h2 em, .sh-cj.sh-cj--deep h3 em { color: var(--cj-gold-light); }
.sh-cj.sh-cj--deep p, .sh-cj.sh-cj--deep li { color: #E9DCC0; }
.sh-cj.sh-cj--deep .sh-cj-eyebrow { color: var(--cj-gold-light); }

/* Links */
.sh-cj a:not(.wp-block-button__link) { color: var(--cj-maroon); text-decoration: underline; text-underline-offset: 3px; }
.sh-cj.sh-cj--deep a:not(.wp-block-button__link) { color: var(--cj-gold-light); }
.sh-cj a:focus-visible, .sh-cj .wp-block-button__link:focus-visible { outline: 3px solid var(--cj-maroon); outline-offset: 3px; }
.sh-cj.sh-cj--deep a:focus-visible, .sh-cj.sh-cj--deep .wp-block-button__link:focus-visible { outline-color: var(--cj-gold-light); }

/* Buttons: maroon, like the capsule */
.sh-cj .wp-block-button .wp-block-button__link {
	background: var(--cj-maroon);
	color: var(--cj-paper);
	border: 1px solid var(--cj-maroon);
	border-radius: 0;
	font-family: var(--cj-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 15px 30px;
	min-height: 44px;
}
.sh-cj .wp-block-button .wp-block-button__link:hover { background: var(--cj-ink); border-color: var(--cj-ink); color: var(--cj-paper); }
.sh-cj .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--cj-maroon); border-color: var(--cj-maroon); }
.sh-cj .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--cj-maroon); color: var(--cj-paper); }
.sh-cj.sh-cj--deep .wp-block-button .wp-block-button__link { background: var(--cj-gold-light); border-color: var(--cj-gold-light); color: var(--cj-deep); }
.sh-cj.sh-cj--deep .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--cj-paper); border-color: var(--cj-gold-light); }
.sh-cj.sh-cj--deep .wp-block-button .wp-block-button__link:hover { background: var(--cj-paper); border-color: var(--cj-paper); color: var(--cj-deep); }

/* Ornament rule: thin gold lines with a small cross in the middle */
.sh-cj .sh-cj-rule {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin: 0 auto 20px; max-width: 220px; color: var(--cj-gold);
}
.sh-cj .sh-cj-rule::before, .sh-cj .sh-cj-rule::after { content: ""; flex: 1; height: 1px; background: currentColor; }

/* Hero: the bottle label itself. An arch cap (inline SVG with the foil mark)
   sits on a rectangular body, the same shape as the Cross J label. */
.sh-cj.sh-cj-hero .wp-block-cover__inner-container { display: flex; justify-content: center; }
.sh-cj .sh-cj-label {
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
	filter: drop-shadow(0 26px 40px rgba(20, 10, 5, .45));
}
.sh-cj .sh-cj-label > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.sh-cj .sh-cj-cap { display: block; width: 100%; height: auto; margin-bottom: -1px; }
.sh-cj .sh-cj-label-body {
	position: relative;
	background: var(--cj-paper);
	border: 1px solid var(--cj-gold);
	border-top: 0;
	padding: 8px 9% 40px;
	text-align: center;
}
.sh-cj .sh-cj-label-body::before {
	content: "";
	position: absolute;
	top: 0; left: 1.6%; right: 1.6%; bottom: 8px;
	border: 1px solid var(--cj-gold);
	border-top: 0;
	pointer-events: none;
}
.sh-cj .sh-cj-label-body > * { position: relative; }
.sh-cj .sh-cj-label h1 { margin: 0; font-size: clamp(40px, 7vw, 64px); letter-spacing: .06em; line-height: 1; }
.sh-cj .sh-cj-label h1 .sh-cj-sub { display: block; font-size: .44em; letter-spacing: .16em; margin-top: 8px; }
.sh-cj .sh-cj-tagline { font-family: var(--cj-display); color: #8E2A1C; font-size: 19px; letter-spacing: .03em; margin: 18px 0 6px; line-height: 1.4; }
.sh-cj .sh-cj-label p { color: var(--cj-body); }
.sh-cj .sh-cj-label .sh-cj-planted { font-family: var(--cj-display); letter-spacing: .26em; font-size: 12px; color: var(--cj-gold-text); text-transform: uppercase; margin: 0 0 18px; }
.sh-cj .sh-cj-fine { font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5 !important; margin: 26px 0 0; color: var(--cj-body); }

/* Label-shaped photos with a thin gold line around them */
.sh-cj .sh-cj-arch { position: relative; max-width: 440px; margin-left: auto; margin-right: auto; }
.sh-cj .sh-cj-arch img {
	position: relative; z-index: 2;
	display: block; width: 100%;
	aspect-ratio: 1268 / 1832; object-fit: cover;
	-webkit-mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
	mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
}
.sh-cj .sh-cj-arch::before, .sh-cj .sh-cj-arch::after {
	content: ""; position: absolute; z-index: 1;
	-webkit-mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
	mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
}
.sh-cj .sh-cj-arch::before { inset: -12px; background: var(--cj-gold); }
.sh-cj .sh-cj-arch::after { inset: -11px; background: var(--cj-arch-bg, var(--cj-paper-2)); }
.sh-cj.sh-cj--paper .sh-cj-arch { --cj-arch-bg: var(--cj-paper); }
.sh-cj .sh-cj-arch figcaption { position: relative; z-index: 2; }

/* Small cross J mark in the section rules */
.sh-cj .sh-cj-rule span {
	display: block; width: 15px; height: 26px; font-size: 0;
	background: currentColor;
	-webkit-mask: url(../img/cross-j-mark.svg) center / contain no-repeat;
	mask: url(../img/cross-j-mark.svg) center / contain no-repeat;
}

/* Facts strip */
.sh-cj .sh-cj-facts { border-top: 1px solid var(--cj-gold); border-bottom: 1px solid var(--cj-gold); }
.sh-cj .sh-cj-facts .wp-block-column { text-align: center; padding: 26px 12px; }
.sh-cj .sh-cj-facts .wp-block-column + .wp-block-column { border-left: 1px solid rgba(176, 141, 60, .5); }
.sh-cj .sh-cj-fact-num { font-family: var(--cj-display); font-size: 34px; color: var(--cj-maroon); margin: 0; line-height: 1.1; }
.sh-cj .sh-cj-fact-label { font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 0; color: var(--cj-body); }
@media (max-width: 781px) {
	.sh-cj .sh-cj-facts .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid rgba(176, 141, 60, .5); }
}

/* Framed photos */
.sh-cj .sh-cj-frame img { border: 1px solid var(--cj-gold); padding: 8px; background: var(--cj-paper); }

/* Farming practice cards */
.sh-cj .sh-cj-card {
	background: rgba(255, 252, 244, .55);
	border: 1px solid rgba(176, 141, 60, .6);
	padding: 30px 28px;
	height: 100%;
}
.sh-cj .sh-cj-card h3 { font-size: 19px; margin: 0 0 10px; }
.sh-cj .sh-cj-card p { font-size: 16px; margin: 0; }
.sh-cj .sh-cj-card .sh-cj-num {
	width: 40px; height: 58px; margin: 0 0 18px; padding-top: 22px;
	font-family: var(--cj-display); font-weight: 600; font-size: 14px !important; line-height: 1 !important;
	text-align: center; letter-spacing: .04em; color: var(--cj-paper);
	background: var(--cj-maroon);
	-webkit-mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
	mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
}

/* Vintage library: each vintage drawn as a label outline */
.sh-cj .sh-cj-vintage {
	position: relative;
	padding: 34% 9% 30px;
	text-align: center;
	height: 100%;
	color: var(--cj-gold);
}
.sh-cj.sh-cj--deep .sh-cj-vintage { color: var(--cj-gold-light); }
.sh-cj .sh-cj-vintage::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0;
	aspect-ratio: 1268 / 830;
	background: currentColor;
	-webkit-mask: url(../img/cap-line.svg) center / 100% 100% no-repeat;
	mask: url(../img/cap-line.svg) center / 100% 100% no-repeat;
}
.sh-cj .sh-cj-vintage::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	top: 0; margin-top: 65.4%;
	border: 1px solid currentColor; border-top: 0;
	pointer-events: none;
}
.sh-cj .sh-cj-vintage > * { position: relative; }
.sh-cj .sh-cj-year { font-family: var(--cj-display); font-size: 44px; line-height: 1; color: var(--cj-maroon); margin: 0 0 16px; letter-spacing: .04em; }
.sh-cj.sh-cj--deep .sh-cj-year { color: var(--cj-gold-light); }
.sh-cj .sh-cj-vintage ul { list-style: none; padding: 0; margin: 16px 0 0; }
.sh-cj .sh-cj-vintage li { font-size: 14px; line-height: 1.5; padding: 6px 0; }

/* Bottle */
.sh-cj .sh-cj-bottle { position: relative; padding: 40px 0 24px; }
.sh-cj .sh-cj-bottle::before {
	content: ""; position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%);
	aspect-ratio: 1268 / 1832; max-width: 100%;
	background: var(--cj-paper);
	-webkit-mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
	mask: url(../img/label-shape.svg) center / 100% 100% no-repeat;
}
.sh-cj .sh-cj-bottle img { position: relative; max-height: 500px; width: auto; margin: 0 auto; display: block; filter: drop-shadow(0 24px 30px rgba(42, 30, 22, .25)); }

/* Quote */
.sh-cj .sh-cj-quote { font-family: var(--cj-display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.45; color: var(--cj-ink); letter-spacing: .02em; }
.sh-cj .sh-cj-cite { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--cj-gold-text); }
.sh-cj.sh-cj--deep .sh-cj-quote { color: var(--cj-paper); }
.sh-cj.sh-cj--deep .sh-cj-cite { color: var(--cj-gold-light); }

/* Placeholder boxes in Cross J colors */
.sh-cj .sh-ph { background: var(--cj-paper-2); border: 1px dashed var(--cj-gold); }
.sh-cj .sh-ph .sh-ph-label { color: var(--cj-body); }

@media (prefers-reduced-motion: reduce) {
	.sh-cj * { transition: none !important; }
}

/* Portrait pairs in the label-shaped frame (0.3.18):
   Wilhelm and Theodora Poeschel, Jim and Betty Held. Files: assets/img/people/ */
.sh-cj .sh-cj-people { gap: 30px !important; margin: 40px 0 0 !important; }
.sh-cj .sh-cj-person { width: 172px; text-align: center; }
.sh-cj .sh-cj-person .sh-cj-arch { max-width: 172px; margin: 0 auto 16px !important; }
.sh-cj .sh-cj-person .sh-cj-arch::before { inset: -7px; }
.sh-cj .sh-cj-person .sh-cj-arch::after { inset: -6px; }
.sh-cj .sh-cj-person .sh-cj-cite { margin: 0 !important; font-size: 13px !important; }
.sh-cj.sh-cj--deep .sh-cj-arch { --cj-arch-bg: var(--cj-deep); }
.sh-cj.sh-cj--deep .sh-cj-person .sh-cj-cite { color: var(--cj-gold-light); }
@media (max-width: 781px) {
	.sh-cj .sh-cj-people { justify-content: center !important; }
	.sh-cj .sh-cj-person { width: 140px; }
	.sh-cj .sh-cj-person .sh-cj-arch { max-width: 140px; }
}
/* 0.3.19: keep the pair level and the names on one line */
.sh-cj .sh-cj-people { align-items: flex-start !important; }
.sh-cj .sh-cj-person { width: 190px; }
.sh-cj .sh-cj-person .sh-cj-cite { white-space: nowrap; letter-spacing: .1em; }
@media (max-width: 781px) { .sh-cj .sh-cj-person { width: 150px; } .sh-cj .sh-cj-person .sh-cj-cite { white-space: normal; } }
/* 0.3.21: "The site" as an edge-to-edge split */
.sh-cj.sh-split-bleed .sh-split-text { align-self: center; }
.sh-cj.sh-split-bleed .sh-split-media { min-height: 600px; }
.sh-cj.sh-split-bleed .sh-fill img { object-position: 55% 50%; }
@media (max-width: 781px) { .sh-cj.sh-split-bleed .sh-split-media { min-height: 360px; } }

/* 0.3.23: "Two families, one hilltop": the Poeschels + the Helds, with the
   Cross J mark standing in for the plus sign */
.sh-cj .sh-cj-people--families { gap: 0 !important; align-items: flex-start !important; margin-top: 48px !important; }
.sh-cj .sh-cj-couple { gap: 26px !important; flex-wrap: nowrap !important; align-items: flex-start !important; }
.sh-cj .sh-cj-plus {
	flex: 0 0 auto; width: 44px; height: 76px; margin: 86px 44px 0 !important; padding: 0; font-size: 0;
	background: var(--cj-gold);
	-webkit-mask: url(../img/cross-j-mark.svg) center / contain no-repeat;
	mask: url(../img/cross-j-mark.svg) center / contain no-repeat;
}
.sh-cj .sh-cj-families-note { max-width: 620px; margin: 36px auto 0 !important; font-size: 16px; }
@media (max-width: 900px) {
	.sh-cj .sh-cj-people--families { flex-direction: column !important; align-items: center !important; }
	.sh-cj .sh-cj-plus { margin: 22px auto 26px !important; width: 34px; height: 58px; }
	.sh-cj .sh-cj-couple { gap: 18px !important; }
}
/* 0.3.24: center the families row on every screen width */
.sh-cj .sh-cj-people--families { margin-left: auto !important; margin-right: auto !important; width: auto !important; max-width: none !important; }