/* ============================================================
   SIC City Message — a featured quote with its attribution on
   the left, and a numbered list of points on the right.
   ============================================================ */

.sicmsg {
	--sm2-bg:      #021859;
	--sm2-text:    #ffffff;
	--sm2-muted:   rgba(255,255,255,.72);
	--sm2-accent:  #bf1304;
	/* Fallbacks for markup rendered before these controls existed. */
	--sm2-mark:    #f2e0df;
	--sm2-name:    #ffffff;
	--sm2-role:    rgba(255,255,255,.72);
	--sm2-quote:   #f2e0df;
	--sm2-rule:    rgba(255,255,255,.14);
	--sm2-num:     rgba(255,255,255,.30);

	background: var(--sm2-bg);
	color: var(--sm2-text);
	padding: 104px 48px 112px;
	font-family: var(--sic-body-font);
}
.sicmsg-inner { max-width: 1240px; margin: 0 auto; }

.sicmsg-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 88px;
	align-items: start;
}

/* ---- left: quote ---- */
.sicmsg-eyebrow {
	display: flex; align-items: center; gap: 12px; margin: 0 0 34px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: var(--sm2-muted);
}
.sicmsg-eyebrow span { width: 34px; height: 1px; background: var(--sm2-muted); display: inline-block; }

.sicmsg-mark {
	/* Tight against the quote it opens. The glyph's box already carries a
	   good deal of empty space beneath it, so -6px reads as touching
	   rather than overlapping. */
	margin: 0 0 -6px;
	font-family: var(--sic-heading-font);
	font-size: 32px; line-height: 1; color: var(--sm2-mark);
}
.sicmsg-quote {
	margin: 0 0 44px;
	font-family: var(--sic-heading-font); font-style: italic; font-weight: 400;
	font-size: clamp(30px, 3.6vw, 52px); line-height: 1.16;
	color: var(--sm2-quote);
}

/* attribution */
/* Portrait above, name and role beneath it: at 200px the picture is a
   subject in its own right rather than an avatar beside a line of text,
   so the row becomes a column. */
.sicmsg-by {
	display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.sicmsg-avatar {
	flex: 0 0 auto;
	width: 200px; height: 200px;
	border-radius: 999px;
	overflow: hidden;
	border: 2px solid var(--sm2-accent);
	background: rgba(255,255,255,.08);
}
@media (max-width: 560px) {
	/* 200px is most of a phone's width, so it gives some back. */
	.sicmsg-avatar { width: 140px; height: 140px; }
}
.sicmsg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sicmsg-name {
	margin: 0;
	font-size: clamp(16px, 1.3vw, 19px); font-weight: 600;
	color: var(--sm2-name);
}
.sicmsg-role {
	display: block; margin-top: 7px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--sm2-role);
}
.sicmsg-note {
	margin: 34px 0 0;
	max-width: 46ch;
	color: var(--sm2-muted);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.7;
}

/* ---- right: numbered list ---- */
.sicmsg-listlabel {
	margin: 0 0 26px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: var(--sm2-muted);
}
.sicmsg-list { margin: 0; padding: 0; list-style: none; }
.sicmsg-point {
	display: grid; grid-template-columns: 46px 1fr;
	gap: 18px; align-items: start;
	padding: 26px 0;
	border-bottom: 1px solid var(--sm2-rule);
}
.sicmsg-point:first-child { padding-top: 0; }
.sicmsg-num {
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(22px, 2vw, 30px); line-height: 1.1;
	color: var(--sm2-num);
}
.sicmsg-ptitle {
	margin: 0 0 8px;
	font-size: clamp(16px, 1.35vw, 20px); font-weight: 600;
	color: var(--sm2-text);
}
.sicmsg-ptext {
	margin: 0; color: var(--sm2-muted);
	/* 20px default — the shared body size. A Design-tab Font size for
	   this element outranks the plain class, so a hand-set block keeps
	   its own value. */
	font-size: 20px; line-height: 1.65;
}

@media (max-width: 960px) {
	.sicmsg { padding: 64px 24px 72px; }
	.sicmsg-grid { grid-template-columns: 1fr; gap: 52px; }
	.sicmsg-point { grid-template-columns: 36px 1fr; gap: 14px; padding: 20px 0; }
}