/**
* Did You Know - Figma 14:343
*
* Canvas (card origin 1013,1517, size 217x170 -> the rail is 234 wide, height is
* content-driven):
* box white, radius 13, shadow -2px 8px 24px -8px rgba(0,0,0,.3)
* title 1030,1533 -> inset 17,16; Reckless Neue 16px / 21.047, -0.48px (-0.03em)
* rule 1030,1559 -> 28x2 #E60000, 26px below the title's box top
* stat 1030,1570 -> 41.294px, box 39 tall, -1.2388px (-0.03em), #E60000, Reckless
* text 1032,1611 -> 10px / 14 (1.4), Graphik Medium, #000
* source 1032,1664 -> 9px / 14, -0.25px (-0.028em), Graphik Medium, #333
* dots 1133,1570.92 214.205 x 209.917 at 26% opacity, masked to the card - i.e.
* bleeding 117 past the right edge and 94 past the bottom
* (measured against Figma's own render: rule ink y=40..41, "57%" ink y=57..84, the
* supporting lines at y=96/110/125 - 14px apart, confirming the 14px line-height - and
* the source at y=151..158)
*
* DEVIATIONS:
* - The 41.294px stat is kept as-is: big display figures are not the scaled-group
* artifact that the small type in this file is.
* - Supporting line 13px, not 10px - decisions D6/D7. Ratio-preserved line-height (1.4).
* - Source 13px too, not 9px. The canvas separates source from supporting line by 1px of
* size (9 vs 10), which is nothing; what actually separates them is the colour (#333 vs
* #000). Since both floor to 13, the size distinction is gone, so the source drops to
* the regular weight while the supporting line keeps the canvas's Medium - which
* restores the hierarchy the design intends without putting a caption under the ~12px
* accessibility floor. (Left at 12px it would read closer to the canvas ratio; that is
* a designer call, not a code one.)
* - x=1032 for the supporting line and source against x=1030 for everything else is 2px
* of drift in the canvas, not a spec. Everything sits on the one 17px inset.
*
* Specificity: two classes throughout - see iron-extensions/README.md.
*/
/*--------------------------------------------------------------
# The box
#
# isolation:isolate creates the stacking context that lets the dot graphic sit at z-index:-1
# - above the card's own white background, below its text - with no z-index on any of the
# content. Without the isolate, -1 escapes to the page's root context and the graphic
# disappears behind the card entirely.
#
# overflow:hidden is what actually clips the graphic: border-radius alone rounds the card's
# own background, but an absolutely-positioned ::before is a descendant and would spill
# straight past the corner. It does not touch the box-shadow, which is painted outside.
--------------------------------------------------------------*/
.iron-dyk {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 17px;
background: #fff;
border-radius: 13px;
box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}
/*--------------------------------------------------------------
# The dot graphic
#
# Decorative, so it is drawn in CSS rather than as an ![]()
a screen reader has to skip -
# the same call pull-quote.css makes for its own graphic.
#
# Anchored to the BOTTOM-RIGHT corner, not to the canvas's top offset of 54px. The canvas
# card is a fixed 170 tall so the two are the same thing there; ours is content-driven, and
# the graphic is a corner burst - its dense centre lands just outside the card's
# bottom-right corner. Anchoring it to the top would drag it down the card as the copy grows.
# At the design's own height the two agree exactly: top = 170 - 210 - (-94) = 54, against the
# canvas's 53.92. Sideways likewise: left = 234 - 214 - (-117) = 137, leaving 97px of the
# graphic showing, which is what the canvas shows (217 - 120).
#
# The asset is the design's own texture with the canvas's 26% opacity baked in (composited
# over white it reproduces Figma's own render of this node exactly: both range 234..255).
# Baked rather than set here so the file cannot be reused at the wrong strength.
--------------------------------------------------------------*/
.iron-dyk::before {
content: '';
position: absolute;
z-index: -1;
right: -117px;
bottom: -94px;
width: 214px;
height: 210px;
/* contain, not `100% 100%`: the box is rounded from the canvas's 214.205 x 209.917, and
contain honours the PNG's own ratio instead of taking the box's word for it. */
background: url('../images/dyk-dots.png') no-repeat center / contain;
pointer-events: none;
}
/*--------------------------------------------------------------
# Title + rule
--------------------------------------------------------------*/
/* margin:0 is load-bearing - `.site-iron-main-generic p` (0,1,1) puts 1.5rem under it. */
.iron-dyk .iron-dyk__title {
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, drawn the same way as every other card in the rail. */
.iron-dyk .iron-dyk__title::after {
content: '';
display: block;
width: 28px;
height: 2px;
margin-top: 5px;
background: var(--iron-red, #e60000);
}
/*--------------------------------------------------------------
# The fact
#
# One : "57%" and the line under it are a single sentence in the design, so they are one
# paragraph with two block-level children rather than two paragraphs that a screen reader
# would read as unrelated.
--------------------------------------------------------------*/
.iron-dyk .iron-dyk__fact {
/* Canvas: rule ends 1559, stat box starts 1570 -> 11 below the rule's y, 8 below where
the rule actually ends here. Spelled out on all four sides: the theme's
rule is
otherwise adding 1.5rem inside the bottom of the card. */
margin: 8px 0 0;
}
/* for the figure - it is the emphatic part of the sentence, and the design says so
in 41px of red. font-weight is restated because 's UA default is bold and Reckless
Neue is used at 400 everywhere on this site. */
.iron-dyk .iron-dyk__stat {
display: block;
font-family: 'Reckless Neue', Georgia, serif;
font-size: 41px;
font-weight: 400;
/* 0.95 = the canvas's 39px box on 41.294px type. The file declares a 48.284 line-height
but sizes the layer to 39, and 39 is what it renders - reproduce what it renders. A
figure long enough to wrap would crowd at this leading, which is why the field's
instructions ask for a few characters. */
line-height: 0.95;
letter-spacing: -0.03em; /* canvas -1.2388 on 41.294 */
color: var(--iron-red, #e60000);
/* Equal-width digits so the figure does not wobble sideways as posts.js counts it up
(a proportional '1' is narrower than '8', which would jitter every frame). */
font-variant-numeric: tabular-nums;
}
.iron-dyk .iron-dyk__text {
display: block;
/* Canvas: stat box ends 1609, text box starts 1611. */
margin-top: 2px;
/* Caps the MEASURE, not the card. Never applies in the rail (~200px = ~32ch); it exists
for the stacked state below 700px, where the card joins the article's column and this
line would otherwise run ~190 characters wide. */
max-width: 60ch;
font-size: 13px;
font-weight: 500; /* Graphik Medium, per canvas */
line-height: 1.4; /* 14 / 10, the design's ratio */
letter-spacing: 0;
color: #000;
}
/*--------------------------------------------------------------
# The source
--------------------------------------------------------------*/
.iron-dyk .iron-dyk__source {
/* Canvas: text box ends 1653, source box starts 1664. */
margin: 11px 0 0;
font-size: 13px;
/* 400 where the supporting line is 500 - see the deviation note at the top. */
font-weight: 400;
line-height: 1.4;
letter-spacing: -0.028em; /* canvas -0.25 on 9px */
color: #333;
}
/* is italic by default and the design's source line is not.
*
* 11px, below the 13px floor and set here rather than on __source: this is an attribution,
* not something anyone reads through - the canvas puts it at 9px, and dropping it clear of
* the supporting line is what makes it read as a footnote rather than a second sentence.
* The parent keeps 13px so the "Source:" spacing and colour logic stay put. */
.iron-dyk .iron-dyk__cite {
font-size: 11px;
font-style: normal;
}