/*
 * Hi Subscribe — sign-up card, header/footer dialog, event slide-in, /hi page.
 * Uses the Living card look (paper #fbf7f5, rule #e6e2de, navy #212934) and the
 * site's Domine/Inter where they're loaded, Georgia/Arial where they aren't
 * (richmondhillreflections.com). Everything is scoped under .hi-sub / .hi-landing.
 */
.hi-sub {
	--hi-navy: #212934;
	--hi-ink: #343a4c;
	--hi-muted: #5f6570;
	--hi-paper: #fbf7f5;
	--hi-rule: #e6e2de;
	--hi-serif: Domine, Georgia, "Times New Roman", serif;
	--hi-sans: Inter, Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	font-family: var(--hi-sans);
	color: var(--hi-ink);
	background: var(--hi-paper);
	border: 1px solid var(--hi-rule);
	border-radius: 8px;
	padding: 32px 36px 26px;
	margin: 48px auto 8px;
	max-width: 720px;
	text-align: left;
	clear: both;
	container-type: inline-size; /* stacks the form when the card sits in a narrow column */
}
.hi-sub *,
.hi-sub *::before,
.hi-sub *::after { box-sizing: border-box; }
.hi-sub__eyebrow {
	font: 700 11px/1.3 var(--hi-sans);
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--hi-muted);
	margin: 0 0 10px;
}
.hi-sub .hi-sub__title {
	font: 700 26px/1.25 var(--hi-serif);
	color: var(--hi-navy);
	margin: 0 0 10px;
	padding: 0;
	letter-spacing: 0;
	text-transform: none;
}
.hi-sub__lede {
	font: 400 16px/1.55 var(--hi-sans);
	color: var(--hi-muted);
	margin: 0 0 18px;
}
.hi-sub__form {
	display: flex;
	gap: 10px;
	margin: 0;
}
.hi-sub__form[hidden] { display: none; }
.hi-sub__label,
.hi-sub__hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: -1px !important;
}
.hi-sub .hi-sub__email {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	font: 400 16px/1 var(--hi-sans); /* 16px keeps iOS from zooming in */
	color: var(--hi-navy);
	background: #fff;
	border: 1px solid #cfc9c3;
	border-radius: 6px;
	box-shadow: none;
	margin: 0;
}
.hi-sub .hi-sub__email:focus {
	outline: 2px solid var(--hi-navy);
	outline-offset: 1px;
	border-color: var(--hi-navy);
}
.hi-sub .hi-sub__button {
	flex: 0 0 auto;
	height: 50px;
	padding: 0 26px;
	font: 700 15px/1 var(--hi-sans);
	letter-spacing: .3px;
	color: #fff;
	background: var(--hi-navy);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	margin: 0;
	text-transform: none;
}
.hi-sub .hi-sub__button:hover { background: #343a4c; }
.hi-sub .hi-sub__button:focus-visible { outline: 2px solid var(--hi-navy); outline-offset: 2px; }
.hi-sub .hi-sub__button:disabled { opacity: .6; cursor: default; }
.hi-sub__fine {
	font: 400 13px/1.5 var(--hi-sans);
	color: var(--hi-muted);
	margin: 12px 0 0;
}
.hi-sub__fine[hidden] { display: none; }
.hi-sub a { color: var(--hi-navy); text-decoration: underline; text-underline-offset: 2px; }
.hi-sub__msg {
	font: 400 14px/1.5 var(--hi-sans);
	color: var(--hi-muted);
	margin: 8px 0 0;
	min-height: 0;
}
.hi-sub__msg:empty { display: none; }
.hi-sub__msg.is-error { color: #a12a1f; }
.hi-sub__done[hidden] { display: none; }
.hi-sub__done p { font: 400 16px/1.55 var(--hi-sans); color: var(--hi-ink); margin: 0 0 10px; }
.hi-sub__done .hi-sub__done-title { font: 700 22px/1.3 var(--hi-serif); color: var(--hi-navy); }
.hi-sub__done .hi-sub__now a { font-weight: 700; }
.hi-sub__done .hi-sub__print { font-size: 14px; color: var(--hi-muted); border-top: 1px solid var(--hi-rule); padding-top: 12px; margin: 14px 0 0; }

@media (max-width: 640px) {
	.hi-sub { padding: 24px 20px 20px; margin-top: 36px; }
	.hi-sub .hi-sub__title { font-size: 22px; }
	.hi-sub__form { flex-direction: column; }
	.hi-sub .hi-sub__button { width: 100%; }
}

@container (max-width: 460px) {
	.hi-sub__form { flex-direction: column; }
	.hi-sub .hi-sub__button { width: 100%; }
}

/* ---------- Header/footer dialog ---------- */
.hi-sub-dialog {
	border: 0;
	padding: 0;
	background: transparent;
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	overflow: visible;
}
.hi-sub-dialog::backdrop { background: rgba(33, 41, 52, .55); }
.hi-sub-dialog .hi-sub { margin: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.hi-sub-dialog__close,
.hi-sub-slide__close {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	font: 400 26px/36px Arial, sans-serif;
	color: #5f6570;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.hi-sub-dialog__close:hover,
.hi-sub-slide__close:hover { color: #212934; }

/* ---------- Event slide-in ---------- */
/* Sits above the GTranslate "EN" switcher that floats in the bottom-right corner. */
.hi-sub-slide {
	position: fixed;
	right: 20px;
	bottom: 76px;
	z-index: 2147483000;
	width: 380px;
	max-width: calc(100vw - 32px);
	transform: translateY(calc(100% + 40px));
	opacity: 0;
	transition: transform .35s ease, opacity .35s ease;
}
.hi-sub-slide[hidden] { display: none; }
.hi-sub-slide.is-open { transform: none; opacity: 1; }
.hi-sub-slide .hi-sub {
	margin: 0;
	padding: 22px 22px 18px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
}
.hi-sub--compact .hi-sub__title { font-size: 19px !important; padding-right: 22px !important; }
.hi-sub--compact .hi-sub__form { flex-direction: column; }
.hi-sub--compact .hi-sub__button { width: 100%; height: 46px; }
.hi-sub--compact .hi-sub__email { height: 46px; }
@media (max-width: 640px) {
	/* A bottom sheet that covers well under a third of the screen. */
	.hi-sub-slide { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; }
	.hi-sub-slide .hi-sub { padding: 16px 16px 14px; }
	.hi-sub--compact .hi-sub__eyebrow { margin-bottom: 4px; }
	.hi-sub--compact .hi-sub__title { font-size: 17px !important; margin-bottom: 10px; }
	.hi-sub--compact .hi-sub__form { flex-direction: row; }
	.hi-sub--compact .hi-sub__button { width: auto; padding: 0 18px; }
}

/* ---------- /hi landing page ---------- */
.hi-landing {
	--hi-navy: #212934;
	--hi-ink: #343a4c;
	--hi-muted: #5f6570;
	--hi-paper: #fbf7f5;
	--hi-rule: #e6e2de;
	--hi-serif: Domine, Georgia, "Times New Roman", serif;
	--hi-sans: Inter, Arial, Helvetica, sans-serif;
	max-width: 960px;
	margin: 0 auto;
	padding: 36px 20px 56px; /* the page uses Avada's 100% width template: no side padding of its own */
	font-family: var(--hi-sans);
	color: var(--hi-ink);
}
.hi-landing h2 {
	font: 700 28px/1.25 var(--hi-serif);
	color: var(--hi-navy);
	margin: 0 0 22px;
	letter-spacing: 0;
	text-transform: none;
}
.hi-landing a { color: var(--hi-navy); text-decoration: underline; text-underline-offset: 2px; }

/* Hero: the Hi! panel beside the form */
.hi-landing__hero {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 32px;
	align-items: center;
}
.hi-landing__masthead {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(33, 41, 52, .14);
}
.hi-landing .hi-sub--hero { margin: 0; max-width: none; padding: 36px 38px 30px; }
.hi-landing .hi-sub--hero .hi-sub__title { font-size: 38px; line-height: 1.15; }
.hi-landing .hi-sub--hero .hi-sub__lede { font-size: 18px; color: var(--hi-ink); }

/* Proof strip */
.hi-landing__proof {
	list-style: none;
	margin: 36px 0 0;
	padding: 22px 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--hi-rule);
	border-bottom: 1px solid var(--hi-rule);
	text-align: center;
}
.hi-landing__proof li { margin: 0; padding: 0 12px; }
.hi-landing__proof li + li { border-left: 1px solid var(--hi-rule); }
.hi-landing__proof strong { display: block; font: 700 26px/1.2 var(--hi-serif); color: var(--hi-navy); }
.hi-landing__proof span { font-size: 14px; color: var(--hi-muted); }

/* The Human Intelligence promise */
.hi-landing__promise {
	margin: 56px auto 0;
	max-width: 760px;
	text-align: center;
}
.hi-landing__kicker {
	font: 700 13px/1.3 var(--hi-sans);
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--hi-muted);
	margin: 0 0 14px;
}
.hi-landing__promise blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
}
.hi-landing__promise blockquote::before,
.hi-landing__promise blockquote::after { content: none; }
.hi-landing__promise blockquote p {
	font: 400 24px/1.5 var(--hi-serif);
	color: var(--hi-navy);
	margin: 0;
}
.hi-landing__promise-foot { margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--hi-muted); }

/* Sections */
.hi-landing__what { margin-top: 64px; }
.hi-landing__sections {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.hi-landing__sections li {
	margin: 0;
	padding: 0 0 16px;
	background: #fff;
	border: 1px solid var(--hi-rule);
	border-radius: 8px;
	overflow: hidden;
}
.hi-landing__sections img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin: 0 0 12px;
}
/* Long Story Short and The Week Ahead have no art yet: navy cards, so they read as
   the issue's two fixed openers rather than missing pictures. */
.hi-landing__sections li.no-art {
	background: var(--hi-navy);
	border-color: var(--hi-navy);
	padding-top: 20px;
}
.hi-landing__sections li.no-art strong { color: #fff; font-size: 19px; }
.hi-landing__sections li.no-art span { color: #d9dbe8; }
.hi-landing__sections strong {
	display: block;
	font: 700 17px/1.3 var(--hi-serif);
	color: var(--hi-navy);
	margin: 0 14px 6px;
}
.hi-landing__sections span { display: block; font-size: 14px; line-height: 1.5; color: var(--hi-muted); margin: 0 14px; }

/* Sample issue */
.hi-landing__sample { margin-top: 64px; scroll-margin-top: 90px; }
.hi-landing__sample-note { color: var(--hi-muted); margin: -12px 0 18px; font-size: 15px; }
.hi-landing__frame {
	position: relative;
	border: 1px solid var(--hi-rule);
	border-radius: 8px;
	overflow: hidden;
	background: #edebe4;
}
.hi-landing__frame iframe {
	display: block;
	width: 100%;
	height: 860px;
	border: 0;
}
.hi-landing__frame:not(.is-open)::after { /* fade the cut-off so it reads as "more below" */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	background: linear-gradient(rgba(237, 235, 228, 0), #edebe4 85%);
	pointer-events: none;
}
.hi-landing .hi-landing__expand {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 1;
	transform: translateX(-50%);
	height: 44px;
	padding: 0 22px;
	font: 700 14px/1 var(--hi-sans);
	color: var(--hi-navy);
	background: #fff;
	border: 1px solid var(--hi-navy);
	border-radius: 22px;
	cursor: pointer;
}
.hi-landing__frame.is-open .hi-landing__expand { display: none; }

/* Closing form + FAQ */
.hi-landing__again .hi-sub { margin-top: 64px; max-width: 760px; }
.hi-landing__faq { margin: 64px auto 0; max-width: 760px; }
.hi-landing__faq dl { margin: 0; }
.hi-landing__faq dt { font: 700 17px/1.4 var(--hi-serif); color: var(--hi-navy); margin: 0; padding-top: 16px; border-top: 1px solid var(--hi-rule); }
.hi-landing__faq dd { margin: 6px 0 16px; font-size: 16px; line-height: 1.55; color: var(--hi-muted); }

@media (max-width: 900px) {
	.hi-landing__sections { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.hi-landing { padding-top: 20px; }
	.hi-landing__hero { grid-template-columns: 1fr; gap: 14px; }
	.hi-landing__masthead { display: none; } /* phones: the form has to clear the fold (and the EN badge) */
	.hi-landing .hi-sub--hero { padding: 22px 18px 20px; }
	.hi-landing .hi-sub--hero .hi-sub__title { font-size: 30px; }
	.hi-landing .hi-sub--hero .hi-sub__lede { font-size: 16px; }
	.hi-landing__proof { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
	.hi-landing__proof li + li { border-left: 0; }
	.hi-landing__promise blockquote p { font-size: 20px; }
	.hi-landing__sections { gap: 12px; }
	.hi-landing__sections span { font-size: 13px; }
	.hi-landing__frame iframe { height: 620px; }
}
@media (max-width: 420px) {
	.hi-landing__sections { grid-template-columns: 1fr; }
}