/* ------------------------------------------------------------------
 * SERAPH HUNTER — BLOCK-PAGE DESIGN SYSTEM  (".shb")
 * Thelma (web lane), 2026-08-09.
 *
 * WHY THIS FILE EXISTS
 * Until today the site's pages were single blobs of hand-written code pasted
 * into one editor box, each carrying its own copy of the same styling. That
 * made every page unmaintainable by Michael and fragile under any ordinary
 * save. The pages are now built from real WordPress blocks, and the styling
 * they share lives here — once, in a proper enqueued stylesheet.
 *
 * Colour and type values are copied verbatim from the club pages of
 * 2026-08-01 so nothing about the look changes.
 *
 * SCOPE: everything is under .shb, a class nothing on this site used before
 * today. It cannot affect a page that does not opt in.
 *
 * ON !important — deliberate, measured, not defensive habit:
 * the dark-background readability rule of 2026-06-13 uses an ID selector
 * (#left-area p), and an ID always outranks a class. Without !important it
 * silently repainted every gold element off-white. Verified by measuring the
 * rendered page, not by reading the code.
 *
 * TO REMOVE ENTIRELY: delete this file and sh-block-pages.php, and the
 * require_once line in sh-header-skin.php.
 * ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

.shb {
	--ink: #09080a;
	--ink2: #110f14;
	--parchment: #f0e6d0;
	--parchment-dim: #c9b896;
	--gold: #c9943a;
	--gold-bright: #e8b84b;
	--gold-dim: #7a5820;
	--mist: rgba(240, 230, 208, 0.06);

	font-family: 'EB Garamond', Georgia, serif;
	background: var(--ink);
	color: var(--parchment);
	line-height: 1.65;
}

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

.shb a { color: var(--gold-bright); text-decoration: none; }
.shb img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.shb figure.wp-block-image img { border: 1px solid rgba(201, 148, 58, 0.28); }

/* --- Bands: the vertical rhythm of a page ------------------------- */
.shb .shb-band { padding: 84px 24px; max-width: 1080px; margin: 0 auto; }
.shb .shb-band--dark {
	background: var(--ink2);
	border-top: 1px solid var(--mist);
	border-bottom: 1px solid var(--mist);
	max-width: none;
}
.shb .shb-band--tight { padding: 56px 24px; }
.shb .shb-band--wide { max-width: 1240px; }

/* --- Type -------------------------------------------------------- */
.shb .shb-eyebrow {
	font-family: 'Cinzel', serif;
	letter-spacing: .34em;
	text-transform: uppercase;
	font-size: clamp(11px, 1.1vw, 13px);
	color: #c9943a !important;
	text-align: center;
	margin: 0 0 22px;
}
.shb h1 {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	font-size: clamp(38px, 7vw, 78px);
	line-height: 1.04;
	color: #f0e6d0 !important;
	text-align: center;
	margin: 0;
}
.shb h2 {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	font-size: clamp(27px, 3.6vw, 42px);
	color: #f0e6d0 !important;
	text-align: center;
	margin: 0 0 24px;
}
.shb h3 {
	font-family: 'Cinzel', serif;
	font-weight: 600;
	font-size: 19px;
	color: #e8b84b !important;
	margin: 0 0 16px;
	letter-spacing: .03em;
}
.shb .shb-sub {
	font-style: italic;
	font-size: clamp(19px, 2.3vw, 29px);
	color: #e8b84b !important;
	text-align: center;
	max-width: 22ch;
	margin: 24px auto 0;
}
.shb .shb-lede {
	max-width: 62ch;
	margin: 0 auto;
	color: #c9b896 !important;
	font-size: 18.5px;
	text-align: center;
}
.shb .shb-body {
	max-width: 68ch;
	margin: 0 auto 1.2em;
	color: #e9e3d4 !important;
	font-size: 18px;
	text-align: left;
}
.shb .shb-rule {
	width: 90px;
	height: 1px;
	margin: 24px auto 44px;
	background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

/* --- Cards ------------------------------------------------------- */
.shb .shb-card {
	background: var(--ink2);
	border: 1px solid rgba(201, 148, 58, 0.22);
	padding: 36px 30px;
}
.shb .shb-card p { margin: 0; color: #c9b896 !important; font-size: 17.5px; }
/* Cards in a row are as tall as the tallest one; without this the "Coming
 * soon" badges sat at four different heights across a four-card row. */
.shb .shb-card { display: flex; flex-direction: column; }
.shb .shb-card .shb-soon { margin-top: auto; align-self: flex-start; white-space: nowrap; }
.shb .shb-card:has(.shb-icon) { text-align: center; }
.shb .shb-card:has(.shb-icon) .shb-soon,
.shb .shb-card:has(.shb-tee-print) .shb-soon { align-self: center; }
.shb .shb-lore { text-align: left; }

/* --- Quotes ------------------------------------------------------ */
.shb blockquote {
	font-size: clamp(21px, 2.7vw, 33px);
	font-style: italic;
	line-height: 1.5;
	color: #f0e6d0 !important;
	max-width: 26ch;
	margin: 0 auto;
	border: 0;
	padding: 0;
	text-align: center;
}
.shb blockquote cite {
	display: block;
	margin-top: 26px;
	font-family: 'Cinzel', serif;
	font-style: normal;
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #c9943a !important;
}

/* --- Buttons -----------------------------------------------------
 * WordPress puts the chosen class on the OUTER wrapper, so the styling has to
 * reach through to the link inside it. This exact mistake is what made the
 * gold button render grey on 2026-08-09. */
.shb .shb-btn-primary .wp-block-button__link {
	background: #c9943a !important;
	color: #0e0d10 !important;
	border: 1px solid #c9943a !important;
	border-radius: 0 !important;
	font-family: 'Cinzel', serif !important;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 15px 30px;
	transition: .25s;
}
.shb .shb-btn-primary .wp-block-button__link:hover {
	background: #e8b84b !important;
	border-color: #e8b84b !important;
}
.shb .shb-btn-ghost .wp-block-button__link {
	background: transparent !important;
	color: #f0e6d0 !important;
	border: 1px solid rgba(201, 148, 58, 0.55) !important;
	border-radius: 0 !important;
	font-family: 'Cinzel', serif !important;
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 15px 30px;
	transition: .25s;
}
.shb .shb-btn-ghost .wp-block-button__link:hover {
	border-color: #e8b84b !important;
	color: #e8b84b !important;
}

/* --- Two ledes in a row would otherwise collide ------------------ */
.shb .shb-lede + .shb-lede { margin-top: 1em; }

/* --- MailerLite embedded form ------------------------------------
 * Added 2026-08-09 for the Home rebuild. MailerLite ships its own white
 * card; these rules strip it back to the page and put the site's gold on
 * the button. This replaces a copy of the same job that used to live
 * inline on the home page as a <style> block plus a JavaScript loop that
 * repainted the button forty times over ten seconds. */
.shb .ml-form-embedContainer,
.shb .ml-form-embedWrapper {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	/* min(), not a flat 440px: MailerLite's own width was pushing the whole
	 * document wider than a phone screen, which shunted every band sideways
	 * and cut the headings off at the right edge. Seen only in a 390px-wide
	 * render — the desktop page looked perfect throughout. */
	width: 100% !important;
	max-width: min(440px, 100%) !important;
	margin: 0 auto !important;
}
.shb #shb-ml { width: 100%; max-width: 100%; }
.shb .ml-form-embedHeader,
.shb .ml-form-embedContent { display: none !important; }
.shb .ml-form-embedBody { padding: 0 !important; background: transparent !important; }
.shb .ml-form-formContent { margin: 0 !important; }
.shb .ml-form-fieldRow { margin: 0 0 14px 0 !important; }
/* THE ONE HARD PART OF THIS SECTION — read before editing it.
 * MailerLite injects its own <style> block at runtime, written against the
 * form's own ID. Measured on this page, 2026-08-09:
 *   #mlb2-44377262.ml-form-embedContainer … .ml-form-fieldRow input
 *     { background-color:#fff !important; font-family:"Open Sans" … }
 * An ID outranks any number of classes, !important or not — and matching the
 * id as an ATTRIBUTE ([id^="mlb2-"]) does not help, because that still counts
 * as a class. The number also changes per form instance, so it cannot be
 * hard-coded. The fix is an ID we own: the page wraps the embed in
 *   <div id="shb-ml"> … </div>
 * and the selectors below carry it. One form per page — an id is unique.
 * WITHOUT THIS the field renders white and the button falls back to Open
 * Sans, while every rule that happens not to collide applies normally. That
 * is the half-working that reads as fine in the code and shows up only when
 * the rendered page is measured. */
.shb .ml-form-embedBody input[type="email"],
.shb .ml-form-embedBody input[type="text"],
.shb .ml-form-embedBody input.form-control,
.shb #shb-ml .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
.shb #shb-ml .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control {
	width: 100% !important;
	border-radius: 0 !important;
	background: #0e0d10 !important;
	background-color: #0e0d10 !important;
	border: 1px solid rgba(201, 148, 58, 0.45) !important;
	color: #f0e6d0 !important;
	font-family: 'EB Garamond', Georgia, serif !important;
	font-size: 17px !important;
	padding: 14px 16px !important;
	box-shadow: none !important;
}
.shb #shb-ml .ml-form-embedBody input::placeholder { color: rgba(201, 184, 150, 0.75) !important; }
.shb .ml-form-embedSubmit { text-align: center !important; margin: 0 !important; }
.shb .ml-form-embedSubmit button,
.shb .ml-form-embedSubmit button.primary,
.shb #shb-ml .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button,
.shb #shb-ml .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary {
	background: #c9943a !important;
	background-color: #c9943a !important;
	color: #0e0d10 !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: 'Cinzel', serif !important;
	font-size: 13px !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
	width: auto !important;
	min-width: 160px !important;
	padding: 15px 34px !important;
	cursor: pointer !important;
	transition: background .25s;
}
.shb .ml-form-embedSubmit button:hover { background: #e8b84b !important; }
.shb .ml-form-successBody { padding: 0 !important; background: transparent !important; }
.shb .ml-form-successContent h4,
.shb .ml-form-successContent p {
	color: #f0e6d0 !important;
	font-family: 'EB Garamond', Georgia, serif !important;
	text-align: center !important;
}

/* --- Divi prints the page title above the designed one ------------
 * Every rebuilt page carries its own <h1>, so Divi's is a duplicate. The
 * trunk page used to fix this with its own <style> block; it belongs here,
 * once, for every page in the system. */
body:has(.shb) .entry-title.main_title { display: none; }

/* --- Tap-to-open cards, used by Brenzel's Trunk ------------------- */
.shb .shb-card--tap { cursor: pointer; transition: border-color .3s, transform .3s, background .3s; }
.shb .shb-card--tap:hover {
	border-color: rgba(201, 148, 58, 0.6);
	background: rgba(201, 148, 58, 0.05);
	transform: translateY(-4px);
}
.shb .shb-icon { font-size: 44px; display: block; margin: 0 0 14px; text-align: center; line-height: 1; }
.shb .shb-lore {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin-top: 0;
	padding-top: 0;
	border-top: 1px solid rgba(139, 111, 71, 0.25);
	transition: max-height .5s ease, opacity .4s ease, margin-top .4s, padding-top .4s;
}
.shb .shb-card--tap.expanded .shb-lore { max-height: 360px; opacity: 1; margin-top: 16px; padding-top: 16px; }
.shb .shb-soon {
	display: inline-block;
	margin-top: 16px;
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 7px 13px;
	border: 1px solid rgba(201, 148, 58, 0.45);
	color: #c9943a !important;
}
.shb .shb-tee-print {
	font-size: 21px;
	line-height: 1.3;
	margin: 0 0 6px !important;
	font-weight: 600;
	color: #f0e6d0 !important;
	text-align: center;
}
.shb .shb-tee-print--big { font-size: 40px; letter-spacing: .14em; }
.shb .shb-tap-hint {
	text-align: center;
	margin: 26px 0 0;
	font-style: italic;
	font-size: 15px;
	color: rgba(201, 184, 150, 0.55) !important;
}

/* --- The trunk itself: the one drawn illustration in the system ----
 * Lifted out of the page's own <style> block, which also carried a
 * universal `* { margin:0; padding:0 }` reset and a `body { … }` rule —
 * both of them site-wide, on a page that had no business restyling the
 * header. Prefix shbt- so nothing here can collide with the .sh- classes
 * the home page uses. */
.shb .shbt-hint {
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #c9943a !important;
	text-align: center;
	margin: 0 0 28px;
	animation: shbt-pulse 2.4s ease-in-out infinite;
}
@keyframes shbt-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.shb .shbt-scene {
	position: relative;
	width: 300px;
	height: 260px;
	margin: 0 auto;
	cursor: pointer;
	user-select: none;
}
.shb .shbt-lid {
	position: absolute;
	bottom: 158px;
	left: 50%;
	transform: translateX(-50%);
	width: 276px;
	height: 82px;
	background: #3a2310;
	border: 2.5px solid #8b6f47;
	border-radius: 3px 3px 0 0;
	transform-origin: 50% 100%;
	transition: transform 1.3s cubic-bezier(.34, 1.15, .64, 1);
	z-index: 10;
}
.shb .shbt-lid.open { transform: translateX(-50%) perspective(600px) rotateX(-115deg); }
.shb .shbt-arch {
	position: absolute;
	top: 12px; left: 14px; right: 14px;
	height: 48px;
	border: 1.5px solid rgba(200, 149, 42, 0.25);
	border-radius: 50% 50% 0 0;
}
.shb .shbt-stripe {
	position: absolute;
	bottom: 16px; left: 0; right: 0;
	height: 14px;
	background: rgba(139, 111, 71, 0.25);
}
.shb .shbt-body {
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 276px;
	height: 162px;
	background: #2e1b0a;
	border: 2.5px solid #8b6f47;
	border-radius: 2px 2px 6px 6px;
	overflow: hidden;
}
.shb .shbt-body::before {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(139, 111, 71, 0.12) 28px, rgba(139, 111, 71, 0.12) 30px);
}
.shb .shbt-strap {
	position: absolute;
	left: 8%; right: 8%;
	height: 20px;
	top: 50%;
	transform: translateY(-50%);
	background: #6b4f2e;
	border-top: 1px solid #8b6f47;
	border-bottom: 1px solid #8b6f47;
	z-index: 2;
}
.shb .shbt-lock {
	position: absolute;
	width: 32px; height: 24px;
	left: 50%; bottom: -5px;
	transform: translateX(-50%);
	background: linear-gradient(160deg, #daa832, #a07218);
	border-radius: 3px;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
	z-index: 3;
}
.shb .shbt-lock::after {
	content: '';
	position: absolute;
	width: 14px; height: 11px;
	top: -9px; left: 50%;
	transform: translateX(-50%);
	border: 3px solid #7a5510;
	border-bottom: none;
	border-radius: 7px 7px 0 0;
}
.shb .shbt-glow {
	position: absolute;
	bottom: 8px; left: 50%;
	transform: translateX(-50%);
	width: 220px; height: 60px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(200, 149, 42, 0.22) 0, transparent 70%);
	opacity: 0;
	transition: opacity 1s ease .7s;
	pointer-events: none;
}
.shb .shbt-scene.open .shbt-glow { opacity: 1; }
@media (max-width: 620px) {
	.shb .shbt-scene { transform: scale(.88); transform-origin: top center; }
}
@media (prefers-reduced-motion: reduce) {
	.shb .shbt-hint { animation: none; opacity: .8; }
	.shb .shbt-lid { transition: none; }
}

/* --- Phones ------------------------------------------------------ */
@media (max-width: 640px) {
	.shb .shb-band { padding: 60px 20px; }
	.shb .shb-band--tight { padding: 44px 20px; }
}