/**
 * Definition - Figma 10:312
 *
 * Canvas (card origin 1013,947, size 217x170 -> the rail is 234 wide, height is
 * content-driven; the design's 170 is a fixed card, so its bottom inset is leftover space
 * rather than a spec):
 *   box     white, radius 13, shadow -2px 8px 24px -8px rgba(0,0,0,.3)
 *   term    1030,963   -> inset 17,16;  Reckless Neue 16px / 21.047, -0.48px (-0.03em)
 *   rule    1030,991   -> 28x2 #E60000, 26px below the term's box top
 *   text    1030,1006  -> 15px below the rule;  10px / 16 (1.6), #000
 *
 * DEVIATIONS:
 *   - padding 17 all round (canvas has the top at 16 and the bottom at 25). 17 is what On
 *     This Page ships and what the term's own left inset is; a 1px top and a bottom that is
 *     only leftover space are not worth making the rail's cards disagree with each other.
 *   - text 13px, not the canvas's 10px - decisions D6/D7 in MODULES.md. Line-height stays
 *     the design's ratio (16/10 = 1.6), so the copy keeps its proportions at the new size.
 *
 * Specificity: two classes throughout - see iron-extensions/README.md.
 */

.iron-def {
	padding: 17px;
	background: #fff;
	border-radius: 13px;
	box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}

/* margin:0 is load-bearing - this is a <p>, so the theme's `.site-iron-main-generic p`
   (0,1,1) puts 1.5rem under it. */
.iron-def .iron-def__term {
	margin: 0;
	font-family: 'Reckless Neue', Georgia, serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.315; /* 21.047 / 16 */
	letter-spacing: -0.03em;
	color: #000;
}

/* The 28x2 red rule - the same mark the section headings and the rest of the rail carry.
   The term's ::after rather than its own element so it travels with the term: the term is
   optional, and a rule on its own marks nothing. Matches on-this-page.css exactly, which
   puts the rule 1-2px below where the canvas draws it - repeated here on purpose, because
   six cards agreeing with each other matters more than each one being 2px closer. */
.iron-def .iron-def__term::after {
	content: '';
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 5px;
	background: var(--iron-red, #e60000);
}

/*--------------------------------------------------------------
# The definition
#
# margin is spelled out on all four sides on purpose. This is a <p> inside post content, so
# `.site-iron-main-generic p` (0,1,1) is already setting `margin-bottom: 1.5rem` - 24px of
# space inside the bottom of the card that no canvas value asks for, and which does not show
# up in the design because the design's card is a fixed height.
--------------------------------------------------------------*/
.iron-def .iron-def__text {
	/* Canvas: rule ends 991, text box starts 1006 -> 15. */
	margin: 15px 0 0;
	/* Caps the MEASURE, not the card. Deliberately not inside a container query: in the
	   rail this is ~200px wide (~32ch), so the cap never applies and the design is
	   untouched. It exists for the stacked state below 700px, where the card joins the
	   article's own column and this paragraph would otherwise run the full ~700px - around
	   190 characters a line at 13px, which is unreadable however faithful it is. */
	max-width: 60ch;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6; /* 16 / 10, the design's ratio */
	letter-spacing: 0;
	color: #000;
}