/* ============================================================
   SIC About — eyebrow + heading + rich text (left),
   video card (right), stats row below.
   ============================================================ */

.sicabout {
	--sa-bg:      #f2e0df;
	--sa-text:    #021859;
	--sa-muted:   rgba(2,24,89,.66);
	--sa-accent:  #bf1304;
	--sa-card:    #0c0a11;

	background: var(--sa-bg);
	color: var(--sa-text);
	padding: 96px 48px;
	font-family: inherit;
}
/* Widened from 1200px so the video can grow without squeezing the text
   column as hard. 1320px also matches the Stats block, so the two line up. */
.sicabout-inner { max-width: 1320px; margin: 0 auto; }

.sicabout-grid {
	display: grid;
	/* The video column takes the larger share: 5% wider than the previous
	   step, and about 37% wider than the original layout. Deliberately
	   modest — pushing it further starts to squeeze the text column hard. */
	grid-template-columns: minmax(0, 0.412fr) minmax(0, 0.588fr);
	gap: 64px;
	align-items: start;
}

/* ---- left column ---- */
.sicabout-eyebrow {
	display: flex; align-items: center; gap: 12px;
	margin: 0 0 26px;
	font-family: var(--sic-label-font);
	/* line-height is set rather than left to `normal` so the offset below
	   is an exact figure instead of a guess at how the browser renders it. */
	font-size: 12px; line-height: 1.2; letter-spacing: .22em; text-transform: uppercase;
	color: var(--sa-accent);
}
.sicabout-eyebrow span { width: 34px; height: 2px; background: var(--sa-accent); display: inline-block; }

.sicabout-heading {
	margin: 0 0 32px;
	font-family: var(--sic-heading-font);
	font-weight: 400;
	font-size: clamp(30px, 3.6vw, 54px);
	line-height: 1.06;
	color: var(--sa-text);
	/* Rows are evened out rather than leaving one word alone on the
	   last line. A line break typed in the editor still wins: it is
	   rendered as a <br>, and balancing only applies to what remains.
	   Note this heading sits in the narrower grid column (about 517px
	   of the 1320px inner width), and the line above needs roughly
	   1170px at this size — so it cannot be set on one row while it
	   stays in that column. Spanning it across both columns is the
	   only way to fit one row without shrinking the type. */
	text-wrap: balance;
}

/* rich-text body — style whatever the WYSIWYG emits */
/* 20px default. A Design-tab Font size for this element outranks the
   plain class, so a block set by hand keeps its own value. */
.sicabout-body { font-size: 20px; line-height: 1.7; color: var(--sa-muted); }
.sicabout-body > *:first-child { margin-top: 0; }
.sicabout-body > *:last-child { margin-bottom: 0; }
.sicabout-body p { margin: 0 0 20px; }
.sicabout-body a { color: var(--sa-accent); text-decoration: underline; }
.sicabout-body strong { color: var(--sa-text); font-weight: 600; }
.sicabout-body em { font-style: italic; }
.sicabout-body ul, .sicabout-body ol { margin: 0 0 20px; padding-left: 22px; }
.sicabout-body li { margin: 0 0 8px; }
.sicabout-body h3 {
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: 1.4em; line-height: 1.2; color: var(--sa-text);
	margin: 28px 0 12px;
}
.sicabout-body blockquote {
	margin: 20px 0; padding-left: 18px;
	border-left: 3px solid var(--sa-accent);
	color: var(--sa-text); font-style: italic;
}

/* ---- right column: video card ---- */
/* The video starts level with the heading, not the eyebrow. The two
   columns are siblings, so the media is pushed down by exactly the height
   the eyebrow occupies: its line box plus its margin. Applied only when
   there is an eyebrow to clear. */
.sicabout-grid { --sa-eyebrow-h: calc((12px * 1.2) + 26px); }
.sicabout-media { position: relative; }
.sicabout-grid[data-eyebrow="1"] .sicabout-media { margin-top: var(--sa-eyebrow-h); }
.sicabout-card {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 6px;
	overflow: hidden;
	background: var(--sa-card);
}
.sicabout-card video,
.sicabout-card img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
.sicabout-card-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
	pointer-events: none;
}
.sicabout-card-body {
	position: absolute; inset: 0; z-index: 2;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; color: #ffffff; padding: 24px;
}
.sicabout-card-kicker {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	color: rgba(255,255,255,.75);
	margin: 0 0 12px;
}
.sicabout-card-title {
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(20px, 2vw, 28px); margin: 0 0 10px;
}
.sicabout-card-meta {
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.6);
}
.sicabout-card-foot {
	position: absolute; left: 20px; bottom: 18px; z-index: 2;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.7);
}



.sicabout-card.is-playing .sicabout-card-body,
.sicabout-card.is-playing .sicabout-card-scrim { opacity: 0; transition: opacity .3s ease; }

.sicabout-note {
	margin: 12px 2px 0;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .04em; color: var(--sa-muted);
}

/* ---- stats row ---- */
.sicabout-stats {
	display: flex; gap: 72px; flex-wrap: wrap;
	margin-top: 64px; padding-top: 40px;
	border-top: 1px solid rgba(22,32,63,.14);
}
/* Where the row sits. justify-content moves the whole group; the cells
   keep their own left-aligned text, so a centred row reads as one block
   rather than a column of centred figures. The rule above still spans
   the section either way, which is what anchors the row to the layout. */
.sicabout-stats.is-left   { justify-content: flex-start; }
.sicabout-stats.is-center { justify-content: center; }
.sicabout-stats.is-right  { justify-content: flex-end; }
.sicabout-stat-num {
	display: block;
	font-family: var(--sic-heading-font); font-weight: 400;
	font-size: clamp(34px, 4vw, 56px); line-height: 1; color: var(--sa-text);
}
.sicabout-stat-label {
	display: block; margin-top: 10px;
	font-family: var(--sic-label-font);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-accent);
}

@media (max-width: 900px) {
	.sicabout { padding: 60px 24px; }
	/* minmax(0,1fr) rather than 1fr: a plain track will not shrink below
	   its content, which is what let a wide element widen the page. */
	.sicabout-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	/* Stacked, so the video follows the text rather than sitting beside it. */
	.sicabout-grid[data-eyebrow="1"] .sicabout-media { margin-top: 0; }
	.sicabout-stats { gap: 40px; margin-top: 44px; }
}
/* ============================================================
   Video transport
   ------------------------------------------------------------
   The <video> keeps no `controls` attribute: the native controls
   cannot be styled to match anything. WebKit's
   ::-webkit-media-controls-* pseudo-elements are undocumented
   and have changed repeatedly; Firefox exposes none at all.
   ============================================================ */
.sicabout-transport {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px;
	background: linear-gradient(to top, rgba(2,24,89,.86), rgba(2,24,89,0));
	font-family: var(--sic-label-font);
	/* Always visible: it is now the only way to start the video, since the
	   round overlay button was removed. */
}

.sicabout-transport button {
	flex: 0 0 auto;
	/* Larger than the 32px they were: these are the only controls now, and
	   44px is the smallest comfortable touch target. */
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	padding: 0; border: 0; border-radius: 999px;
	background: rgba(255,255,255,.16);
	color: #fff; cursor: pointer;
	transition: background .15s ease;
}
.sicabout-transport button:hover { background: rgba(255,255,255,.3); }
.sicabout-transport button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sicabout-transport svg { width: 21px; height: 21px; fill: currentColor; display: block; }

/* One button, two icons: which shows follows the element's real state,
   never the last click. */
.sicabout-transport .sicabout-i-pause,
.sicabout-transport.is-playing .sicabout-i-play { display: none; }
.sicabout-transport.is-playing .sicabout-i-pause { display: block; }
.sicabout-transport .sicabout-i-muted { display: none; }
.sicabout-transport.is-muted .sicabout-i-muted { display: block; }
.sicabout-transport.is-muted .sicabout-i-sound { display: none; }

.sicabout-t-time {
	flex: 0 0 auto;
	font-size: 11px; letter-spacing: .04em;
	color: rgba(255,255,255,.92);
	font-variant-numeric: tabular-nums;   /* so the row does not jitter */
	white-space: nowrap;
}

/* A real <input type="range">: arrow keys scrub it and a screen reader
   announces the position, neither of which has to be written. Its default
   appearance has to be removed on each engine separately. */
.sicabout-t-seek {
	flex: 1 1 auto; min-width: 0;
	height: 18px; margin: 0; padding: 0;
	background: none; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.sicabout-t-seek:disabled { cursor: default; opacity: .5; }
.sicabout-t-seek::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,.32); }
.sicabout-t-seek::-moz-range-track            { height: 3px; border-radius: 999px; background: rgba(255,255,255,.32); }
.sicabout-t-seek::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 12px; height: 12px; border-radius: 999px;
	background: #fff; border: 0;
	margin-top: -4.5px;                   /* centres it on a 3px track */
}
.sicabout-t-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 999px; background: #fff; border: 0; }
.sicabout-t-seek:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The round button sits above the bar rather than on top of it. */
.sicabout-card.is-playing 

/* The volume slider is deliberately short — it is a trim, not a
   destination — and the fullscreen button sits at the end. */
.sicabout-t-vol {
	flex: 0 0 74px; width: 74px;
	height: 18px; margin: 0; padding: 0;
	background: none; cursor: pointer;
	-webkit-appearance: none; appearance: none;
}
.sicabout-t-vol::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,.32); }
.sicabout-t-vol::-moz-range-track            { height: 3px; border-radius: 999px; background: rgba(255,255,255,.32); }
.sicabout-t-vol::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 11px; height: 11px; border-radius: 999px;
	background: #fff; border: 0; margin-top: -4px;
}
.sicabout-t-vol::-moz-range-thumb { width: 11px; height: 11px; border-radius: 999px; background: #fff; border: 0; }
.sicabout-t-vol:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.sicabout-transport .sicabout-i-shrink { display: none; }
.sicabout-transport.is-full .sicabout-i-shrink { display: block; }
.sicabout-transport.is-full .sicabout-i-expand { display: none; }

/* YouTube supplies its own element; it has to fill the card the way a
   <video> does. */
.sicabout-yt,
.sicabout-card iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	border: 0;
}

/* Full screen: the card becomes the whole screen, so the picture should
   letterbox inside it rather than being cropped. */
.sicabout-card:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.sicabout-card:fullscreen video { object-fit: contain; }
.sicabout-card:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; }
.sicabout-card:-webkit-full-screen video { object-fit: contain; }

@media (max-width: 560px) {
	/* The clock and the volume trim go first: the bar already shows the
	   position, and the mute button still covers the sound. */
	.sicabout-transport { gap: 6px; padding: 10px 12px; }
	.sicabout-t-time,
	.sicabout-t-vol { display: none; }
	.sicabout-transport button { width: 40px; height: 40px; }
	.sicabout-transport svg { width: 19px; height: 19px; }
}

/* Declared last so it wins on source order. */
@media (prefers-reduced-motion: reduce) {
	.sicabout-transport { transition: none; }
	.sicabout-transport button { transition: none; }
}