/* ============================================================
   Brand typography
   ------------------------------------------------------------
   The Foundation uses two faces, both already loaded by the
   parent theme's style.css:

     Family      — display serif, used for headings   (--heading-font)
     Avenir Next — sans, used for body copy            (--body-font)

   The builder inherits those variables so the microsite matches
   hluce.org automatically. If the theme ever changes its fonts,
   these follow. The fallbacks after each var() only apply if the
   theme's variables are missing.
   ============================================================ */
:root {
	--sic-heading-font: var(--heading-font, 'Family', Georgia, 'Times New Roman', serif);
	--sic-body-font:    var(--body-font, 'Avenir Next', Arial, Helvetica, sans-serif);

	/* Small labels — eyebrows, stat labels, tags, meta lines, badges.
	   The Foundation's site loads only two families (Family and Avenir
	   Next) and no monospace, so these use the body font. Their uppercase
	   treatment and wide letter-spacing are what mark them as labels.
	   To restore the monospaced look from the Figma mockups, change this
	   one line back to:  ui-monospace, Menlo, Consolas, monospace; */
	--sic-label-font:   var(--body-font, 'Avenir Next', Arial, Helvetica, sans-serif);

	/* Kept as an alias so nothing breaks if a stray reference remains. */
	--sic-mono-font:    var(--sic-label-font);
}

/* Body copy across every block follows the brand sans. */
.sic-design,
.cb-block {
	font-family: var(--sic-body-font);
}

/* ============================================================
   SIC Design Layer — the rules that consume the design variables.
   Every builder block is wrapped in .sic-design, so these apply
   universally. Each property falls back to `unset`/`inherit`
   style defaults, meaning an untouched control leaves the
   component's own CSS completely alone.
   ============================================================ */

.sic-design {
	/* Spacing. Fallback to the component's own padding by using
	   `revert`, which returns the property to the previous origin
	   rather than forcing a zero. */
	padding-top:    var(--d-pt, revert);
	padding-bottom: var(--d-pb, revert);
	padding-left:   var(--d-px, revert);
	padding-right:  var(--d-px, revert);

	background-color: var(--d-bg, revert);

	border-top-width:    var(--d-bt, 0);
	border-bottom-width: var(--d-bb, 0);
	border-top-style:    solid;
	border-bottom-style: solid;
	border-color: var(--d-bc, transparent);

	border-radius: var(--d-radius, 0);
}

/* Anything with a radius must clip its children, or a full-bleed
   image inside a component will square off the corners. */
.sic-design[style*="--d-radius"] { overflow: hidden; }

/* Content width + alignment apply to the inner wrapper so the
   block's own background still spans full width. */
.sic-design-inner {
	max-width: var(--d-maxw, none);
	/* Align sets these two alongside --d-align, so the same control both
	   aligns the text and places the block on screen. Centred unless told
	   otherwise, which is what it always did. */
	margin-left: var(--d-ml, auto);
	margin-right: var(--d-mr, auto);
	text-align: var(--d-align, revert);
}

/* When a max width is set, the inner wrapper needs to be a block
   in normal flow — some components use grid at the top level. */
.sic-design-inner[style*="--d-maxw"],
.sic-design[style*="--d-maxw"] > .sic-design-inner { display: block; }

/* Hidden-on-device is emitted as display:none in the block's own
   scoped rule; this is only the editor's dimmed state. */
.sic-design[data-d-hidden="1"] { position: relative; }
.sic-design[data-d-hidden="1"]::after {
	content: "Hidden on this device";
	position: absolute; top: 8px; right: 8px; z-index: 50;
	background: rgba(20,27,51,.85); color: #ffffff;
	font-family: var(--sic-label-font);
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
	padding: 5px 9px; border-radius: 3px;
	pointer-events: none;
}
/* ============================================================
   Numbered eyebrows
   ------------------------------------------------------------
   Switched on per block with the Design tab's "Number this
   eyebrow"; boot.js inserts the numeral and adds .has-eyenum.
   Shared here rather than per component, so the treatment is
   identical wherever it is used.

   The numeral is a large ghosted figure sitting behind and above
   the eyebrow, in the reference's manner. It is positioned
   absolutely so it cannot push the eyebrow text sideways or add
   height to the block — turning numbering on never reflows the
   page, it only paints over it.
   ============================================================ */
/* Keyed off the marker class alone, never off the eyebrow's own class
   name: boot.js adds has-eyenum to that same element, so the attribute
   no longer *ends* with "-eyebrow" and [class$="-eyebrow"] would stop
   matching the moment numbering was switched on.

   position: relative and NO z-index. It gives the figure something to
   centre against without creating a stacking context — the context
   belongs on the section below, which is what lets the figure sit
   behind the heading it overhangs. */
.has-eyenum { position: relative; }

/* boot.js puts this on the component's own <section>: the element that
   paints the background. Making it the stacking context is what keeps
   the figure visible AND behind everything: a negative index resolves
   here, which is above this element's background but below all of its
   content. Without it the figure resolved against a distant ancestor
   and disappeared behind the section's own opaque background. */
.has-eyenum-root { position: relative; z-index: 0; }
/* `.has-eyenum > .sic-eyenum`, not `.sic-eyenum` alone. Every component
   draws its eyebrow rule with a bare descendant selector — for example
   `.siccabout-eyebrow span { width:34px; height:1px; background:accent }`
   — and the numeral is a <span> inside that eyebrow, so those rules were
   claiming it too: the figure was being painted as a second 34px dash
   beside the digits. Two classes (0,2,0) outrank the component's class +
   element (0,1,1), so the resets below win everywhere, and the eyebrow's
   own dash is untouched. */
.has-eyenum > .sic-eyenum {
	position: absolute;
	/* Undo the rule treatment those selectors impose. */
	width: auto; height: auto; background: none;
	/* Anchored to the eyebrow's own left edge and lifted so the
	   figure straddles the line above, which is what makes it read
	   as a chapter mark rather than a prefix. */
	left: -.06em;
	/* Centred on the eyebrow line, so the eyebrow's dash and text cut
	   the figure in half. Anchored to the eyebrow's mid-point rather
	   than either edge, which keeps it centred whatever the eyebrow's
	   own height turns out to be.

	   The trimmed line-height below is what makes this safe: the glyph
	   box is .78em, so at the largest size the figure drops roughly 29px
	   past the eyebrow, just inside the ~30px the components leave
	   before their heading. That margin matters because the eyebrow is a
	   stacking context and paints as a unit — anything of the figure
	   falling past it would land on TOP of the heading rather than
	   behind it. If a component ever tightens that gap, reduce
	   line-height here rather than moving the anchor. */
	/* Centred by stretching the box and letting flex do it, rather than
	   `top:50% + translateY(-50%)`. That transform lands the figure on a
	   half pixel whenever the eyebrow's height is odd, and macOS renders
	   a fractionally-placed layer soft while Windows snaps it — which is
	   why the numeral looked blurred on one and crisp on the other. No
	   transform, no fractional layer. */
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	/* Trims the glyph box to the digits, so the gap above the eyebrow is
	   the one set here rather than the font's own leading. Declared once:
	   a second line-height further down used to silently win. */
	line-height: .78;
	font-family: var(--sic-heading-font);
	font-weight: 400; font-style: normal;
	font-size: clamp(56px, 6vw, 92px);
	letter-spacing: -.02em;
	/* currentColor is the eyebrow's own colour — the same value its dash
	   is drawn in — so leaving Number colour blank matches the dash
	   automatically, in every component and whatever the page sets.
	   Blank follows the eyebrow's own colour at low alpha — accent on
	   light grounds, pale on dark — with no second control to keep in
	   sync. Set a Number colour and it is used exactly as typed, which
	   is why the alpha companion drops the dimming to 1: an rgba()
	   already carries its own transparency. */
	color: var(--d-eyenum-color, currentColor);
	opacity: var(--d-eyenum-op, .16);
	/* Behind every piece of text in the section — the eyebrow's own
	   words and the heading it overhangs — while still in front of the
	   section's background, because the context is .has-eyenum-root. */
	z-index: -1;
	pointer-events: none;
	user-select: none;
}

@media (max-width: 900px) {
	.has-eyenum > .sic-eyenum { font-size: clamp(44px, 13vw, 64px); opacity: var(--d-eyenum-op, .13); }
}

/* ============================================================
   Body copy and quotes — shared letter-spacing
   ------------------------------------------------------------
   0.5px on every running-text element in every component, so
   paragraphs and pull quotes are set the same way across the
   microsite. Listed here rather than in seventeen component
   files: one place to read, one place to change.

   Defaults only. A Design-tab Letter space value for one of
   these elements is emitted as `[data-sd="…"] .sicabout-body`,
   which outranks the plain class below — so a block set by hand
   keeps its value, and clearing it falls back here. Headings,
   eyebrows, labels, names, tags and numerals are deliberately
   absent: their spacing is part of each component's own voice.
   ============================================================ */
.sichero-text,
.sicabout-body, .sicabout-note,
.sicmap-intro, .sicmap-quote,
.sicstories-quote, .sicstories-cap,
.sicstats-introtext, .sicstats-copy, .sicstats-quote,
.sicres-intro, .sicres-desc,
.sicpress-body, .sicpress-excerpt,
.sicwheel-intro, .sicwheel-cap,
.siccity-intro,
.siccabout-body, .siccabout-facts, .siccabout-pull, .siccabout-caption-text,
.sicthemes-intro, .sicthemes-text, .sicthemes-steptext, .sicthemes-qtext,
.sicvoices-intro, .sicvoices-intro2, .sicvoices-quote,
.sicmsg-quote, .sicmsg-note, .sicmsg-ptext,
.sicpartners-intro, .sicpartners-text,
.sicres2-intro, .sicres2-text,
.sicstats2-caption,
.sicstats-table tbody th, .sicstats-table tbody td,
.sicstats-matrix tbody th, .sicstats-matrix tbody td {
	letter-spacing: .5px;
}

/* The elements above are containers: the visible text is usually the
   <p>, <li> or <blockquote> INSIDE them, and letter-spacing reaches
   those by inheritance. Inheritance only applies where nothing else
   matches the child, so any rule anywhere that names those tags — the
   parent theme's own paragraph styling, most often — silently wins and
   the container's value never shows. This makes the children take the
   container's value explicitly: whatever that value is, the default
   here or one set in the Design tab, the text below follows it. Two
   classes' worth of specificity, so an ordinary theme rule cannot
   outrank it. */
:is(.sichero-text, .sicabout-body, .sicabout-note, .sicmap-intro, .sicmap-quote, .sicstories-quote, .sicstories-cap, .sicstats-introtext, .sicstats-copy, .sicstats-quote, .sicres-intro, .sicres-desc, .sicpress-body, .sicpress-excerpt, .sicwheel-intro, .sicwheel-cap, .siccity-intro, .siccabout-body, .siccabout-facts, .siccabout-pull, .siccabout-caption-text, .sicthemes-intro, .sicthemes-text, .sicthemes-steptext, .sicthemes-qtext, .sicvoices-intro, .sicvoices-intro2, .sicvoices-quote, .sicmsg-quote, .sicmsg-note, .sicmsg-ptext, .sicpartners-intro, .sicpartners-text, .sicres2-intro, .sicres2-text, .sicstats2-caption, .sicstats-table tbody th, .sicstats-table tbody td, .sicstats-matrix tbody th, .sicstats-matrix tbody td) :is(p, li, blockquote, td, th, dd, dt, figcaption, span, em, strong, b, i, a) {
	letter-spacing: inherit;
}

/* ============================================================
   Body copy on phones — shared mobile size
   ------------------------------------------------------------
   16px on every body and intro text below the design system's
   own mobile breakpoint (600px, matching design.js), hero
   included. 20px is a desktop reading size; on a phone it sets
   only a few words per line.

   The selector list is doubled through :is() on purpose: this
   file loads BEFORE the component stylesheets, and their
   unqualified 20px rules would out-cascade a plain class here.
   Two classes' worth of specificity wins regardless of order,
   while the Design tab still outranks everything: its per-block
   Phone values are printed as [data-sd] rules AFTER this file,
   so at equal specificity the hand-set value takes the text.
   Quotes keep their components' own mobile sizing except where
   listed. */
@media (max-width: 600px) {
	:is(.sichero-text, .sicabout-body, .sicabout-note, .sicstats-introtext, .sicstats-copy p, .sicstats-quote, .sicres-intro, .sicres-desc, .sicpress-body, .sicpress-excerpt, .sicwheel-intro, .siccity-intro, .siccabout-body, .siccabout-pull, .sicthemes-intro, .sicthemes-text, .sicthemes-steptext, .sicvoices-intro, .sicvoices-intro2, .sicvoices-quote, .sicmsg-quote, .sicmsg-note, .sicmsg-ptext, .sicpartners-intro, .sicpartners-text, .sicres2-intro, .sicres2-text):is(.sichero-text, .sicabout-body, .sicabout-note, .sicstats-introtext, .sicstats-copy p, .sicstats-quote, .sicres-intro, .sicres-desc, .sicpress-body, .sicpress-excerpt, .sicwheel-intro, .siccity-intro, .siccabout-body, .siccabout-pull, .sicthemes-intro, .sicthemes-text, .sicthemes-steptext, .sicvoices-intro, .sicvoices-intro2, .sicvoices-quote, .sicmsg-quote, .sicmsg-note, .sicmsg-ptext, .sicpartners-intro, .sicpartners-text, .sicres2-intro, .sicres2-text) {
		font-size: 16px;
	}
}


/* ------------------------------------------------------------
   ...and the same for size
   ------------------------------------------------------------
   The parent theme sizes paragraphs directly:

       @media (max-width: 59.375rem) { p, ul, ol { font-size: 18px } }

   A declaration on the <p> itself beats any size INHERITED from
   its container, whatever the container's specificity — so the
   20px desktop and 16px phone defaults above reached the
   container and stopped there, and the text kept the theme's
   18px on every screen under 950px.

   Making the children inherit hands the container's value back
   to the text, whether that value is a default here, a
   component's own, or one set by hand in the Design tab.

   blockquote, figcaption and span are deliberately absent: pull
   quotes and captions carry their own size on purpose, and a
   span may be carrying a legacy sic-rt-sz-* token. */
:is(.sichero-text, .sicabout-body, .sicabout-note, .sicmap-intro, .sicmap-quote, .sicstories-quote, .sicstories-cap, .sicstats-introtext, .sicstats-copy, .sicstats-quote, .sicres-intro, .sicres-desc, .sicpress-body, .sicpress-excerpt, .sicwheel-intro, .sicwheel-cap, .siccity-intro, .siccabout-body, .siccabout-facts, .siccabout-pull, .siccabout-caption-text, .sicthemes-intro, .sicthemes-text, .sicthemes-steptext, .sicthemes-qtext, .sicvoices-intro, .sicvoices-intro2, .sicvoices-quote, .sicmsg-quote, .sicmsg-note, .sicmsg-ptext, .sicpartners-intro, .sicpartners-text, .sicres2-intro, .sicres2-text, .sicstats2-caption, .sicstats-table tbody th, .sicstats-table tbody td, .sicstats-matrix tbody th, .sicstats-matrix tbody td) :is(p, li, ul, ol, dd, dt, td, th, a) {
	font-size: inherit;
}