/* ==========================================================================
5 — WHAT MAKES US DIFFERENT
Uncontained thirds, heading centred. Medium density. Gold. NO blend shape.
"Uncontained" is the entire specification. Three columns separated by
hairlines and nothing else — no surface, no border box, no radius, no
padding shell. The difference between this and a three-card grid is one
decision, and it is the decision that keeps sections 3–7 editorial.
Ordinals take the section's dominant accent in a SINGLE tone. 01/02/03 are
not quantities, so the accent-per-instance rule for comparative numerals
(§12a) does not apply — applying it here produces confetti.
========================================================================== */
/* R14g — the eyebrow is an inline-flex box inside a centred flex column, so
it already sits on the centre line; this only stops the stretching to
the column's full width and taking the frame with it. */
.principles__eyebrow { display: flex; }
/* R14h — the heading and its subtitle bind at 16px (§4: heading -> paragraph)
while .section__title's 32px gap keeps the eyebrow clear of both. Nesting
is what gives the group two intervals; one flex column can only give one. */
.principles__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-heading-to-paragraph);
}
/* .t-lead caps at --measure-prose-wide and centres here through the parent's
text-align; margin-inline: auto is what actually centres the BOX once the
cap bites. */
.principles__sub { margin-inline: auto; }
/* R15g — one clause per line. Blocks rather than a
: at widths where the
first clause wraps on its own, a
would leave its tail alone above the
second clause; a block wraps inside itself and only the clause division is
forced. .t-lead's max-width and the parent's text-align still govern both. */
.principles__sub-line { display: block; }
.principles__grid {
display: grid;
gap: var(--gap-grid);
list-style: none;
margin: 0;
/* ⚠ margin-block-start MUST FOLLOW THE `margin: 0` SHORTHAND, and it is not
decoration. layout.css sets `.section__title + *` to the
heading-to-content interval, and this list IS that adjacent sibling — but
`margin: 0` here resets all four sides, this stylesheet loads after
layout.css, and both selectors are (0,1,0), so the shorthand won and the
gap vanished. It was masked for months by a style="" attribute in the
markup; removing that attribute at R17i is what exposed it.
The shorthand still has to stay — it is what clears the UA's default
margin. The longhand after it re-supplies the one side that is wanted. */
margin-block-start: var(--gap-heading-to-content);
padding: 0;
}
@media (min-width: 768px) {
.principles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
.principles__grid { grid-template-columns: repeat(3, 1fr); }
}
/* THE CARD. --color-surface-panel, square, the page's own container — so the
section reads as using a device it already owns rather than importing the
reference's rounded, glowing one.
MIN-HEIGHT, NOT A RATIO. The three copy blocks are different lengths and a
fixed ratio would either crop the longest or leave the shortest hollow;
a floor lets the tallest set the row and keeps the other two from
collapsing to their text. --space-6xl * 2.5 = 400px.
isolation: isolate confines the photograph's scrim to the card. */
.principles__item {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-sm);
min-block-size: calc(var(--space-6xl) * 2.5);
padding: var(--gap-card-padding);
background-color: var(--color-surface-panel);
/* R14f — THE SAME HAIRLINE THE PAGE'S SEPARATORS USE, by direction:
--border-hairline (1px) in --color-border-strong (white at 0.20).
THAT VALUE, NOT --color-border-default. 0.10 is the card spec's border
and is tuned for an edge against a lifted surface; on a card that reads
as black it is 1.3:1 and all but absent. 0.20 is what §3's separators,
§5's own former column rules and §11's lattice all settled on, for the
same reason each time — a rule on or near pure black needs it. Using the
card spec's 0.10 here would have matched a document and not the page. */
border: var(--border-hairline) solid var(--color-border-strong);
border-radius: var(--radius-control); /* 0 — the reference rounds; §14 does not */
}
/* --------------------------------------------------------------------------
THE PHOTOGRAPH
Ground, not a row: absolutely positioned so the copy sits over it rather
than beside it.
⚠ .ph--on-panel IS REQUIRED. .ph fills with --color-surface-hover #1A1A1A,
which against the card's #171717 measures 1.03:1 — the placeholder would
not be visible at all. --on-panel swaps it to black, 1.17:1 the other way.
The same trap this project has hit five times.
-------------------------------------------------------------------------- */
/* R15y — IT IS AN ![]()
ON CARD 1 AND STILL A .ph DIV ON 2 AND 3, so the rule
has to serve both. The three object-fit lines are inert on the div and
load-bearing on the image.
⚠ block-size: 100% IS THE SIXTH TIME THIS PAGE HAS HAD TO SAY SO. A height
attribute in the markup is a presentational hint that wins wherever no CSS
sets a height — it is what made the Hero's cards 1800px tall at R12v. The
attribute stays, because it reserves the box while the file loads; the CSS
is what stops it doing anything else.
object-position is left at centre deliberately. The card is ~410x400 and
the file is 818x796 — 1.025 against 1.028 — so cover crops essentially
nothing and there is no composition to protect. */
.principles__shot {
position: absolute;
inset: 0;
z-index: var(--layer-base);
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
/* --------------------------------------------------------------------------
THE SCRIM — R16a
⚠⚠ IT WAS ::before AND IT NEVER APPLIED. This is a fix, not a new feature.
.principles__shot and this pseudo-element both sat at --layer-base, and for
two positioned boxes at the SAME z-index paint order falls back to tree
order — where ::before is generated as the element's FIRST child. So the
photograph painted on top of its own scrim and the copy sat on the raw
image. It went unnoticed for as long as the "photograph" was a flat grey
placeholder, which looks identical either way.
::after is the last child in tree order, so at the same --layer-base it
paints AFTER the image; the copy is at --layer-raised and stays above both.
No z-index was added to fix this — the ordering does it.
MEASURED, against Assets/USP HEC/HEC_USP 1.jpg, over the boxes the type
actually occupies rather than the whole card:
no scrim with this needs
ordinal 01 6.03:1 6.03:1 3.0 (untouched)
title 16.12:1 17.80:1 3.0
body 3.00:1 5.52:1 4.5 <- was FAILING
THE BODY WAS THE ONLY FAILURE and it was a real one: 3.00:1 against a
4.5:1 floor, worst at the right-hand end of the second line. The title and
the ordinal never needed help.
BOTTOM-WEIGHTED, BECAUSE THE COPY IS. R15z pushed the title and body to the
foot; the old gradient was left-weighted for copy that used to run down the
card. 0.65 at the very bottom, gone by 55% — the top 45% is untouched, so
the badge and the logo in the photograph read exactly as shot. That is as
light as it goes while keeping the body a full point above its floor.
⚠ IT MUST BE RE-MEASURED FOR CARDS 2 AND 3. A scrim tuned to one
photograph is tuned to one photograph — the standing cost this project has
paid five times in §6. The numbers above are for card 1's file only.
⚠ A SIXTH PAGE GRADIENT. §9 permits five. Same argument as §9's venue
scrim: a black-to-transparent legibility scrim carries no hue and exists so
type stays readable, which §17 requires. Recorded, not hidden.
-------------------------------------------------------------------------- */
.principles__item::after {
content: "";
position: absolute;
inset: 0;
z-index: var(--layer-base);
background-image: linear-gradient(
to top,
rgba(0, 0, 0, var(--scrim-foot, 0.65)) 0%,
rgba(0, 0, 0, var(--scrim-head, 0)) var(--scrim-reach, 55%)
);
pointer-events: none;
}
/* --------------------------------------------------------------------------
THE DENSE VARIANT — R16c
⚠ CARD 3's PHOTOGRAPH CANNOT CARRY LIGHT TYPE AT THE SECTION'S SCRIM, and
this is measurement rather than preference. HEC_USP 3.jpg is a lilac report
document filling the frame, brightest exactly where the copy sits:
no scrim 0.65/55% flat 60% flat 70% flat 75%
title 1.10:1 2.39:1 6.16:1 8.99:1 10.85:1
body 1.01:1 1.71:1 3.23:1 4.63:1 5.53:1
✗ ✗ pass pass
A body ratio of 1.01:1 is white-on-white in all but name. Nothing shaped
like the section's scrim reaches it — the gradient is transparent at the
top by design, and this image is bright top to bottom. It needs a FLAT
scrim at roughly 0.75, which is why this variant exists.
⚠⚠ AT THAT DENSITY THE PHOTOGRAPH IS TEXTURE, NOT AN IMAGE. That is the
real cost and it is not recoverable by tuning: the numbers above are the
whole range, and every value that passes has already flattened the picture.
TWO THINGS WOULD ACTUALLY FIX IT — a darker export of this frame, or a
plate behind the copy as the Hero's name cards and §6's video cards use.
The plate is the better of the two and the page already owns it: an opaque
--color-surface-panel block measures 17.93:1 and 8.65:1 against ANY image,
costs only the area the words cover, and would leave MORE of this
photograph visible than this scrim does. It is not built because it would
change all three cards and was not asked for. See design-rules R16c.
THE VARIANT IS THREE CUSTOM PROPERTIES, not a second rule. The gradient
above reads them, so the shape stays in one place and a card can only
change its density, never its construction.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
THE BARE VARIANT — R16e
⚠⚠ CARD 3 HAS NO SCRIM AT ALL, by direction, after "still too dark, remove
the scrim completely". THE COPY ON THIS CARD IS NOT LEGIBLE. That is not a
judgement, it is the measurement:
body #B4B4B4 on this photograph 1.01:1 floor 4.5
title white on this photograph 1.10:1 floor 3.0
1.01:1 is white on white to two decimal places. This is not "below AA" in
the way a 4.2 is below 4.5 — the words are very nearly invisible against
the report page behind them, for every reader, not only for readers with
low vision.
THE SCRIM RANGE IS EXHAUSTED and was walked down in full: 0.80/0.72 gave
the body 6.23:1, 0.76/0.60 gave 5.11:1, 0.74/0.55 gave 4.65:1 and 0.72/0.50
already failed at 4.23:1. Every value that passes was called too dark, and
every value light enough fails — which is the finding, not a failure to
tune. THE IMAGE AND LIGHT TYPE OVER IT CANNOT BOTH BE HAD.
WHAT WOULD GIVE BOTH, and the page already owns it: a plate behind the copy
— an opaque --color-surface-panel block, as the Hero's eight name cards and
§6's two video cards use. It measures 17.93:1 and 8.65:1 against ANY
photograph, needs no re-measuring when a file changes, and covers only the
area the words occupy — SO MORE OF THIS PHOTOGRAPH WOULD SHOW THAN UNDER
ANY SCRIM THAT WORKED. A darker export of the frame is the other answer.
Recorded in design-rules R16e as an accepted failure rather than an
oversight. The modifier is kept as the hook: restoring legibility is
changing two numbers here, or deleting the class.
-------------------------------------------------------------------------- */
.principles__item--bare {
--scrim-foot: 0;
--scrim-head: 0;
--scrim-reach: 100%;
}
.principles__ordinal,
.principles__title,
.principles__body { position: relative; z-index: var(--layer-raised); }
/* R15q — THE ICON DISC AND ITS GLYPH ARE REMOVED, by direction. A violet
circle carrying the Hero's marker star sat above each ordinal.
IT WAS ALWAYS A PLACEHOLDER AND IT WAS THE WEAKEST THING IN THE SECTION.
The note here used to read: "the star means nothing, three times over...
the reference's three glyphs each say something about their card and this
says the same thing about all three." Removing it is the cheaper of the two
ways to settle that; the other was commissioning three glyphs.
THE GOLD ORDINAL NOW OPENS THE CARD, which is what §17 named as this
section's decorative device in the first place ("ordinal numerals ·
full-height hairlines"). The disc was never in that budget.
⚠ IT ALSO TAKES THE PAGE'S ONLY 50%-RADIUS SHAPE OUT OF §5. §14 lists five
consumers of the circular carve-out; this was one of them and they are now
four, all in §3-§4. Nothing else changes: .principles__item is a flex
column with a 16px gap, so one fewer child simply closes up.
The star itself is not gone page-wide — the Hero's three markers still
carry it, so §13's icon audit is unaffected. */
/* Title and body were t-h4 / t-body utilities in the markup; they are named
now because the card sets their colour and spacing.
R15z — margin-block-start: auto PUSHES THE COPY TO THE FOOT, by direction,
and the ordinal stays where it is. One `auto` on the first of the two does
it: in a flex column an auto margin absorbs all the free space, so
everything above it holds at the top and everything from here down is
pressed to the bottom. The 16px gap between title and body is untouched —
the free space is taken before the gap, not out of it.
IT IS ON THE SECTION, NOT ON CARD 1. Only card 1 has its photograph so far,
but this is how the card is laid out rather than how this card is laid out
— three cards in a row with one bottom-aligned and two top-aligned would
read as a fault. Say if it was meant for card 1 alone. */
.principles__title {
margin-block-start: auto;
font-family: var(--font-family-heading);
font-size: var(--font-size-h4);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-heading);
color: var(--color-text-heading);
}
.principles__body {
max-inline-size: var(--measure-prose);
font-size: var(--font-size-body);
font-weight: var(--font-weight-light);
line-height: var(--line-height-body);
color: var(--color-text-body); /* 8.65:1 on the card */
}
/* R14e — THE TERMINAL MARK IS REMOVED, by direction.
⚠ IT WAS ALSO THE CARD'S FLOOR. `margin-block-start: auto` on that element
was what pushed it — and only it — to the bottom of the card, which is how
the three landed on one line however long the copy above ran. With it gone
the copy stacks from the top and the min-block-size leaves open space
beneath. Fine while all three blocks are short; if one grows, the cards
read as ragged at the foot, and the fix is `justify-content: space-between`
on the item rather than the mark coming back. */
/* --------------------------------------------------------------------------
R14c — THE HAIRLINE IS GONE, and it is the thing that has to go.
It was the section's whole argument: R8w's own note said the partial rule
"was the device that kept this section UNCONTAINED", and the file's header
called uncontained "the entire specification". A hairline BETWEEN cards
draws a second edge beside an edge the card already has.
The rules are deleted rather than commented out because a card grid can
never want them back; if §5 ever returns to uncontained thirds, the R8w
note in design-rules carries the values.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
ORDINAL NUMERAL
Display scale, single tone, weight 700, tabular. A compositional object —
the content sets around it, never beneath it as a caption.
-------------------------------------------------------------------------- */
/* R9p — LOOS, by direction, matching §8's figures.
✅ AND HERE IT COSTS NOTHING, which is the difference from §8. §5's rule
"numerals stay Mundial" exists for ONE reason: counters must not reflow
while counting, and Loos's tabular figures are unconfirmed. These are
ORDINALS — 01 / 02 / 03, static, no data-counter, nothing animates them —
so the reflow case cannot arise and the rule's own rationale does not
reach them. §8's figures needed a pinned 4ch box to be safe; these need
nothing.
tabular-nums is kept anyway: it costs nothing, and it keeps the three
ordinals optically aligned across the columns if Loos does publish a
tabular set.
700 is a published Loos weight (the kit ships 400 and 700 only), so this is
a real face rather than a synthesised one. */
/* R15z — H2 -> H3, by direction ("slightly reduce"). 48 -> 34 at desktop.
⚠ IT IS A BIGGER STEP THAN "SLIGHTLY" SUGGESTS, and there is nothing
between them: the type scale runs 48 · 34 · 26 and picking 40 would put a
value on the page that the scale does not have.
⚠ IT IS ALSO THE FLOOR. §12a: a display numeral is "never below H3". This
is now sitting on that line, so the next reduction is not available without
amending that rule. */
.principles__ordinal {
font-family: var(--font-family-heading);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
font-variant-numeric: tabular-nums lining-nums;
line-height: var(--line-height-display);
letter-spacing: var(--letter-spacing-display);
color: var(--color-accent-emphasis-dim);
}