- — the items are a list to anything that isn't looking at
the screen — with the markers turned off and a middot supplied between
items instead. The middot is set slightly back from full ink so the items
read and the separators recede. The tight top margin binds the run to its
lead-in line; without it the two would sit a paragraph apart and the
sentence would come apart again. */
.prose ul.inline-bullets {
list-style: none;
/* Measured: house prose rhythm is margin-bottom 16px on every
, and adjacent margins collapse, so a top margin here can only ever lose to the lead-in's 16px. The bind has to come from the paragraph side (rule below); this side just restores the normal 16px gap BELOW the run, which the browser would otherwise leave at zero and jam the next line against the items. Left alone the spacing came out exactly backwards — a full gap above the list and none below. */ margin: 0 0 1rem; padding: 0; } /* Kill the lead-in's bottom margin so the run sits directly under the line it finishes. Scoped by :has to paragraphs that actually precede one of these runs, so no other prose spacing moves. Browsers without :has just show the normal paragraph gap — looser than intended, never broken. */ .prose p:has(+ ul.inline-bullets) { margin-bottom: .2rem; } .prose ul.inline-bullets > li { display: inline; margin: 0; /* Items break BETWEEN themselves, never inside. In a run-on list the only thing telling the reader where one item ends is the separator, so an item split across a line break ("have stress or / trauma") reads as two items. The run itself still wraps freely — this only moves where. Longest item here is 21 characters against a 280px column at 320px, so nothing is at risk of overflowing instead. */ white-space: nowrap; } /* The separator IS this list's bullet — there is no marker anywhere else, so the dot carries the whole job of saying "new item". At body size a middot is a punctuation mark and it read as one: too faint to divide the run at a glance. Enlarged at the author's request. It is DRAWN, not typed. Scaling the "\00B7" glyph was the obvious way and it is wrong: a middot sits a fixed fraction of its own em above the baseline, so at 1.7em it rose with its size and the dots ended up level with the ascenders instead of the middle of the text (measured, and plainly visible in a screenshot at 1280). A border-radius box takes vertical-align: middle, which puts it on the parent's own x-height centre and keeps it there at every clamped font size on the page. Sized in em so it tracks the text down to 320px. .34em is 6.8px against the 20px body — roughly twice the ink of the old glyph, which is what was asked for. The inline box is far shorter than the 31px line box, so no line grows; measured old-vs-new, both runs keep identical heights and identical wrap positions at 1440/1280/1024/768/414/375/320. The margins are trimmed from .6em to .5em to pay for the dot's extra width, which is what holds those wrap positions still. Opacity drops as size rises, since both read as weight and the mark should divide the items, not compete. */ .prose ul.inline-bullets > li + li::before { content: ""; display: inline-block; vertical-align: middle; width: .34em; height: .34em; border-radius: 50%; background: rgba(28, 28, 28, .38); margin: 0 .5em; } /* --led adds the SAME dot in front of the first item, at the author's request (2026-08-28), so every item in the run carries one and the dot reads as an item marker rather than as a separator between items. ON BOTH RUNS at position 43. It went on the first one alone to begin with, on the argument that its lead-in ends "…have the ability to" with no colon while the other's ends on a colon that already marks where the items start. True about the grammar, wrong about the pair: the two runs are the visual rhyme the two panels are built on, and a marker on one and not the other reads as a difference before it reads as a reason. Kept as a modifier rather than folded into .inline-bullets because the class is site-wide and other pages' runs are not part of a matched pair. Left margin trimmed to zero on this one dot only. The separator's .5em is there to hold two items apart; in front of the first item there is nothing to its left but the list's own edge, and .5em of it pushed the run visibly off the flush left the paragraph above sets. The right margin stays, so the gap between dot and word is identical to every other dot in the run. */ .prose ul.inline-bullets--led > li:first-child::before { content: ""; display: inline-block; vertical-align: middle; width: .34em; height: .34em; border-radius: 50%; background: rgba(28, 28, 28, .38); margin: 0 .5em 0 0; } /* The two problem panels at position 43 — one movement each, boxed at the author's request (2026-08-28), each closing on "(This is a problem.)". NOT NAMED .problem-box, THOUGH THAT WAS THE OBVIOUS NAME. That class already exists further down this file (search "Problem box — a raised") and is in use on /science-confirms for the Beautiful Problem callout. It is a *different* card: --paper on a paper-2 ground, centred, with its own p sizing. Writing `.prose .problem-box` here out-specified it and silently restyled that page — the callout's background flipped to paper-2, the exact colour of the band it is supposed to lift off, so the card all but disappeared. Caught by measuring a 640px box inside a 646px column: the 640 was that rule's max-width:40rem leaking in, not anything set here. Hence a name of its own. PAPER-2 ON A PAPER BAND, which is the house relationship: a card is the slightly warmer thing settled into a lighter surround. This is deliberately the OPPOSITE of .key-box at position 42, which inverts that relationship to make itself the exception. Two boxes that both wanted to be exceptional would leave neither one exceptional, and the key box is the page's one stopping point. THE PANELS CARRY NO INTERNAL TREATMENT beyond the frame. Everything inside is at body size — including the pivot line, which the author dropped to the surrounding scale in this same pass. That is the point of boxing: the panel marks the movement off, so nothing inside it needs to be raised to say "this group belongs together" a second time. The first and last children give up their outer margins so the padding is the only thing setting the box's interior. That matters here because both panels end on .problem-tally, whose 1.75rem bottom margin would otherwise add to the padding and leave the verdict floating well above the floor. */ .prose .problem-panel { background: var(--paper-2, #EADFC2); border: 1px solid rgba(28, 28, 28, .16); border-radius: var(--radius-md, 8px); padding: clamp(20px, 3vw, 32px) clamp(20px, 3.2vw, 36px); margin: clamp(20px, 2.8vw, 30px) 0; } .prose .problem-panel > :first-child { margin-top: 0; } .prose .problem-panel > :last-child { margin-bottom: 0; } /* The band already sets its own floor (128px at desktop, shared by every .lo-sec on the site). Whatever ends the band gives up its bottom margin rather than adding to that floor — the space below the band is the band's business. Covers both the panels and the two-column split that now closes the beat below them. */ .prose > .problem-panel:last-child, .prose > .problem-split:last-child { margin-bottom: 0; } /* The claim each panel opens on, boxed and enlarged at the author's request (2026-08-28). Panel one's box holds the lead-in and its inline list as one unit — they are one sentence — and panel two's holds the opening paragraph with its .restate continuation. THIS IS THE SECOND CREAM-ON-PAPER-2 CARD ON THIS PAGE, and the note on .key-box below says that inversion is "most of why it looks special". That claim is now weaker and it is worth being honest about it. What keeps the key box distinct is the other two things it does and this does not: the double frame (the inset hairline 6px inside the border, which is on nothing else on the site) and display type, centred. This card is body face, ragged left, single frame — it reads as a raised sentence, not as a plaque. If the key box ever stops feeling exceptional, this is the first place to look. ON A PAPER BAND the cream fill lands on the same colour as the band showing past the panel, so the box reads as a hole punched back through the card to the page. That is the intended effect, not an accident of the token: the claim is what the panel is about, so it sits at the level of the page rather than in the card's own warmer surface. SIZE IS SET ON THE BOX, NOT ON ITS PARAGRAPHS, so everything inside comes up together. Both the inline-bullet separator (.34em) and the .restate hanging indent (1.1em) are already in em, so they track the new size without a second rule; setting --fs-24 on the
s alone would have left the
- in
panel one at body size and split the sentence across two scales. */
.prose .panel-claim {
background: var(--paper, #FBF6EA);
border: 1px solid rgba(28, 28, 28, .20);
border-radius: var(--radius-md, 8px);
padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.6vw, 30px);
/* No top margin: the box IS the top of the panel, and the panel's own
padding is the only thing that should separate it from the frame. The
bottom margin clears the 16px house rhythm so the working below reads as
a response to the claim rather than as its next paragraph. */
margin: 0 0 1.75rem;
font-size: var(--fs-24);
/* Tighter than body's line-height: at 24px the default leading opens gaps
the box then has to pay for in height, and the claim is at most three
lines. */
line-height: 1.35;
}
.prose .panel-claim > :first-child { margin-top: 0; }
.prose .panel-claim > :last-child { margin-bottom: 0; }
/* The verdict of the whole problem stretch, added 2026-08-28: two headings
that name where the problem is NOT, then the same claim drawn as two
columns. Sits below the two .problem-panel boxes and closes the band.
THE TWO HEADINGS ARE A MATCHED BLUE PAIR. .lo-blue falls on "not" and
"before" — the two words the contrast turns on — at the author's direction.
That also repairs something the earlier cut broke: blue was introduced on
this page as a pair ("wrong problem" / "right problem"), and deleting the
opening of position 42 left "right problem" as a single unpaired mark. Two
marks that answer each other put the device back on its feet.
THE COLUMNS ARE NOT THE HOUSE .two-column BLOCK, though the content maps
onto it. That block paints column 1 rose, and rose is this site's colour
for the EDUCATING column — including at "Solving it happens in two columns"
further down THIS page. A rose column here would say "solution" exactly
where the text says "problem". So column 1 takes the same paper-2 as the
problem panels above it and column 2 takes green, which already means
"Learning" everywhere else. The colours then carry the headings' argument
on their own: the problem is the left column, and the right column —
learning — is untouched.
Column 2 keeps --font-learning, the site's serif for learning, but NOT the
house --chalkboard fill. The reason is written out at
.problem-split__col--learning below; read it before repainting. */
.prose .problem-split {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
column-gap: clamp(12px, 1.8vw, 20px);
row-gap: 0;
align-items: stretch;
margin: clamp(20px, 2.8vw, 30px) 0;
}
/* Two explicit rows: captions on top, boxes beneath. Placement is explicit
rather than left to auto-flow because the source order has to stay
caption, box, caption, box — that is the order the block reads in when it
stacks, and the order a screen reader takes it in. Explicit rows also keep
the two boxes starting at the same y if one caption ever wraps and the
other does not; auto-flow would let each column set its own top. */
.prose .problem-split__cap { grid-row: 1; }
.prose .problem-split__col { grid-row: 2; }
.prose .problem-split__cap--a,
.prose .problem-split__col--before { grid-column: 1; }
.prose .problem-split__cap--b,
.prose .problem-split__col--learning { grid-column: 2; }
/* 720px, which is where .lo-twocol stacks (home_v1.css:1611) — that is the
page's other two-column block, at positions 52/53. The house .two-column
stacks at 720px too (tokens.css:479), so the number is right either way,
but .lo-twocol is the one that actually renders here. Keep them equal:
two two-column blocks stacking at two different widths reads as a bug. */
@media (max-width: 720px) {
.prose .problem-split {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.prose .problem-split__cap,
.prose .problem-split__col { grid-column: auto; grid-row: auto; }
}
.prose .problem-split__col {
border-radius: var(--radius-md, 8px);
padding: clamp(18px, 2.6vw, 26px) clamp(16px, 2.4vw, 24px);
/* Both columns carry the same hairline, so neither variant has to argue for
an exception. box-sizing is border-box, so this costs no geometry: at
1280px the two columns measure 479x197 at the same top with or without. */
border: 1px solid rgba(28, 28, 28, .16);
}
.prose .problem-split__col--before {
background: var(--paper-2, #EADFC2);
}
.prose .problem-split__col--learning {
/* NOT --chalkboard, which is the house fill for a Learning column. This one
is an argument diagram whose whole claim is "the problem is NOT here" —
and at --chalkboard it was the loudest object in the block, so the eye
landed on the column being dismissed. A Learning column that is being
offered can shout; one that is being ruled out should not.
Nothing else on the page has to match: the lead-out two-column block at
positions 52/53 uses .lo-col-edu / .lo-col-lrn, which carry no fill at
all. The house .two-column > .col-learning rule at tokens.css:464 does
paint --chalkboard, but its only consumer is parts/_two_column.html.erb
and no two_column part exists in the database (checked 2026-08-28), so
that rule currently renders nowhere.
Measured against the real sage band #D9E4D4 (2026-08-28), fill-vs-band:
--chalkboard #2F4A3A 7.40:1 <- shouts; column 1 is only 1.09:1
#46614F 5.19:1 <- still a dark panel
this #A7C09E 1.50:1 <- reads as a box, doesn't lead
#C3D8BC 1.15:1 <- fill all but vanishes into the band
Text stays well clear: ink on #A7C09E is 8.66:1 for body, and the mono
__label at opacity .75 composites to #3f453d = 5.01:1 (was 5.32:1 on the
chalkboard), so lightening the fill did not cost the label its AA pass.
A deeper tint of the band itself was chosen over a paper/near-white fill
because green is this site's colour for learning and this column carries
half the argument the two columns make. */
background: #A7C09E;
color: var(--ink, #1C1C1C);
font-family: var(--font-learning);
}
.prose .problem-split__col > :first-child { margin-top: 0; }
.prose .problem-split__col > :last-child { margin-bottom: 0; }
/* Column labels, in the house mono eyebrow the .two-column block uses, so the
two two-column blocks on the page label their columns the same way.
The one departure is size: the house .col-label is --fs-12, and these are
--fs-16, enlarged at the author's request (2026-08-28). At 12px they were
the smallest type in a block that had just grown to the full band width and
gained a 36px heading, and the eyebrow stopped registering as a label and
started reading as a caption someone forgot to delete. The tracking and
the opacity still hold it below the lead line beneath it, so the hierarchy
inside the box is unchanged. */
.prose .problem-split__label {
font-family: var(--font-mono);
font-size: var(--fs-16);
letter-spacing: .08em;
text-transform: uppercase;
opacity: .75;
margin: 0 0 var(--sp-3, 12px);
}
.prose .problem-split__lead {
font-weight: 600;
margin: 0 0 .5rem;
}
/* The inside/outside pair, hanging-indented exactly as .bp-statement sets it:
at this column width both lines wrap, and without the hang the continuation
would sit under the branded glyph instead of under the words after it, so
the two lines would stop reading as a pair. The rule is restated rather than
shared because .bp-line is scoped to .bp-statement, whose display serif and
sizing do NOT apply here. */
.prose .problem-split__line {
display: block;
padding-left: 1.15em;
text-indent: -1.15em;
margin: 0 0 .35rem;
}
.prose .problem-split__line:last-child { margin-bottom: 0; }
/* Weld each branded glyph to its own letters. The mark is an
, and tokens.css caps every
at `max-width: var(--prose-max)` — 65ch, 646px. The breakout applied its negative margin-inline, the cap held the width at 646, and the line started on the band edge and stopped 236px short of the box it introduces: worse than not breaking out at all. It is an
now (see below) so the `p` cap no longer reaches it — and this line is exactly one edit away from being a
again. Keeping the reset costs nothing and means that edit cannot silently re-break the alignment. */ max-width: none; /* A HEADING NOW, at the author's request on 2026-08-28: "Make this a heading". It was body copy, which put the sentence that names the whole idea at the same weight as the prose describing the columns. 30px, NOT 36. It sits under a 36px lead heading in the same band, and the second heading there is already 30px — so this takes the same step, and the band reads as one two-level structure (36 opens, 30 turns, 30 concludes) instead of growing a third heading size. It does not need to out-shout the lead: the callout directly beneath it is the emphasis. Display face and 600 to match .split-head exactly; the only difference between them is the extra space above, which .split-head--lead also takes, because this line closes one movement and opens another. */ font-family: var(--font-display); font-weight: 600; font-size: clamp(1.375rem, 3.2vw, var(--fs-30)); line-height: 1.15; letter-spacing: -.01em; margin-top: clamp(28px, 3.4vw, 40px); margin-bottom: .9rem; } /* The band sets its own 128px floor; whatever ends the band gives up its bottom margin rather than adding to it. The statement card is the last thing in this one, so it joins the pair already listed above. SCOPED THE SAME WAY THE BREAKOUT IS, and for the same reason: .bp-callout is a site-wide component, and a bare `.prose > .bp-callout:last-child` would strip the bottom margin off callouts on other pages where nothing is supplying a floor underneath them. */ .prose:has(.problem-split) > .bp-callout:last-child { margin-bottom: 0; } /* "(This is a problem.)" — the verdict that closes each half of the right-problem beat. The pair is the spine of the section, and the only thing they need in order to read as a matched pair is room: the parentheses already mark them as asides, so any further styling would be a second signal saying the same thing. The space above sets each one off from the line it judges; the space below opens the next movement. */ .prose .problem-tally { /* Measured against the house rhythm: prose paragraphs are 16px apart, so 1.1rem (17.6px) collapsed to a gap of 18px and the verdicts read as two more paragraphs. 1.75rem clears it properly. */ margin-top: 1.75rem; margin-bottom: 1.75rem; } /* A dash-led restatement set on its own line inside the sentence it belongs to ("…are not able to use freedom / — freedom they need to…"). A block span rather than a second
because it is the same sentence: a paragraph break
would put house rhythm between a noun and its own gloss.
The hanging indent is the point of the rule. The dash sits out in the
margin and the continuation's own wrapped lines align to the text after it,
so the dash reads as a mark introducing a clause instead of drifting into
the left margin like a list bullet — which is how it looked flush, since
the line below it starts a run of ordinary paragraphs. 1.1em is the em dash
plus its following space at body size.
USED TWICE IN A ROW as of 2026-08-28, where it was written for one: the
author split the gloss into two dash-led clauses ("— freedom they need to
learn / — and help each other learn"). Two consecutive blocks need no
margin between them — they are lines of one sentence, so the box's own
line-height is the correct gap and anything more would make them read as
two paragraphs. The hanging indent then does a second job it was not
designed for and happens to do well: it stacks the two dashes in the same
column, so the pair reads as a pair. */
.prose .restate {
display: block;
padding-left: 1.1em;
text-indent: -1.1em;
}
/* The tail the dash-led clauses share ("in their own learning zones (for
parts of the day)."), on its own line and NOT dash-led — it belongs to both
clauses above it, so giving it a dash of its own would make it a third
sibling instead of their common ending.
FLUSH LEFT, aligning with the paragraph's first line rather than with the
text after the dashes. That is what makes the grammar visible: the sentence
is "…are not able to use freedom … in their own learning zones", and the
two dashed lines are an aside inside it. Indented to 1.1em instead, it read
as a continuation of "and help each other learn" alone, which is not what
it means. Set as its own block span rather than left as bare text after the
second .restate because bare text would simply run on to the end of that
clause's line. */
.prose .restate-tail { display: block; }
/* The pivot of the beat — the one-and-many stated in a single line.
IT NO LONGER SITS ABOVE BODY SIZE. It used to take the section's
context-text scale, clamp(1.2rem, 2.6vw, 1.5rem), on the reasoning that it
was doing the work the deleted Beautiful-Problem callout panel used to do.
The author dropped it to the surrounding size on 2026-08-28, and the boxing
in the same pass is why that reads correctly now: the box is the thing
marking this movement off, so a raised line inside it was a second frame
around content that already had one, and it made the pivot compete with the
panel instead of sitting inside it.
What is left still sets the line apart, without size: the author's italic,
and room above and below that clears the 16px house rhythm. */
.prose .pivot-line {
line-height: 1.4;
max-width: 40rem;
/* Same arithmetic as .problem-tally: 1.1rem collapsed against the 16px
prose rhythm to an 18px gap, which is no separation at all. */
margin: 1.75rem 0;
text-wrap: balance;
}
/* The key box — the one panel on this page that is meant to stop the reader.
It closes the provocation ladder by naming what the whole beat has been
building to, so it has to look unlike every other box on the site rather
than like a slightly warmer .choice-box.
Three things make it distinct, and each is doing work:
1. CREAM ON PAPER-2. Every other panel in the house style is a paper-2 card
on a paper band. This sits on the paper-2 band at position 42, so it
inverts the relationship — the card is the lighter thing, lifted out of
its surroundings instead of settled into them. It is the only panel on
the site that reads that way, which is most of why it looks special.
2. A DOUBLE FRAME. The outer border plus an inset hairline 6px inside it.
Drawn with two inset shadows: the first paints a 6px ring in the card's
own fill (invisible), the second draws the hairline at its edge. Nothing
else on the site is framed twice.
3. DISPLAY TYPE, CENTRED. The lines are statements, not prose, so they take
the display face at the context scale rather than the body face.
The accent inside is TERRACOTTA, not ink-blue, and that is deliberate: this
section already spends its blue on the matched pair "wrong problem" /
"right problem" (position 42's subtitle and its question). A blue "key"
would make that pair a run of three and spend the device. Terracotta is the
house's other text accent (.lo-terra) and appears nowhere else in the
section, so it reads as this box's own colour.
Bold would buy nothing here — the type is already display serif at 600 —
which is why the author's ** on "key" is carried by colour, and his * on
"heart" by the italic he asked for. */
.prose .key-box {
background: var(--paper, #FBF6EA);
border: 1px solid rgba(28, 28, 28, .24);
border-radius: var(--radius-md, 8px);
box-shadow: inset 0 0 0 6px var(--paper, #FBF6EA),
inset 0 0 0 7px rgba(28, 28, 28, .20);
padding: clamp(24px, 3.4vw, 38px) clamp(22px, 3.6vw, 42px);
/* Bigger than the 0.5rem that binds the question to its stem: the box is
the answer to the ladder, not another rung of it. */
margin: 1.6rem 0 0;
text-align: center;
}
.prose .key-box p {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(1.2rem, 2.5vw, 1.55rem);
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0;
text-wrap: balance;
}
/* Two lines, one statement — a gap, not a paragraph break. */
.prose .key-box p + p { margin-top: .45rem; }
/* "right problem" is the phrase the beat turns on, and inside the box it is a
verbatim echo of the question directly above. Measured at 375px the balanced
wrap broke it after "right", which reads as two ideas rather than one name;
held whole. The longest unbreakable run is then 13 characters, which fits
the 236px inner column at 320px. */
.prose .key-box .hold { white-space: nowrap; }
/* .see-also-box WAS HERE, deleted 2026-08-28. It was the light cousin of
.choice-box — same paper-2 fill, hairline border and radius, none of the
display type or heavy padding — for a short aside offering a detour rather
than advancing the argument. Its only user in the app was the "…see this
video." part at position 45 of lead-out-method, and when that copy was cut
the same day the class went with it. Recoverable from git at 6d172f0~ if a
detour aside is ever wanted again; the sizing was deliberately left to the
part's own body_size and the width to the prose column. */
/* Beautiful-Problem callout — frames the two-line statement in a soft
paper-2 panel so it reads as a discrete "here's the problem" block rather
than relying on whitespace alone. Matches the house .choice-box treatment
(paper-2 + thin ink border + rounded) with lighter padding. */
.bp-callout {
/* Full content width, not the old 38rem cap. The statement inside is three
parallel lines sharing a left edge (see .bp-statement); narrowing the box
only forces those lines to wrap, which is the one thing that breaks the
parallel reading. The prose column is the real limit. */
margin: 1.5rem auto;
padding: 1.1rem 1.5rem 1.25rem;
background: var(--paper-2, #F3ECD6);
border: 1px solid rgba(28, 28, 28, .16);
border-radius: var(--radius-md, .5rem);
}
/* Inside the panel the narrow statements no longer need their own centering
frame — let them fill the panel's padded width. */
.bp-callout .lead-statement--narrow {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* Header row of the callout: the Schoolio mark (an "i" — inside — within an
"O" — outside) sits beside the "The Beautiful Problem:" label, so the mark
visually restates the inside/outside idea the statement below spells out. */
.bp-callout__head {
display: flex;
align-items: center;
gap: .9rem;
margin-bottom: .55em;
}
.bp-callout__head .lead-statement {
margin: 0;
}
.bp-callout__mark {
flex: 0 0 auto;
width: 3rem;
height: auto;
display: block;
}
@media (max-width: 640px) {
.bp-callout__mark { width: 2.5rem; }
/* Buy back width where it is scarcest. On a 414px phone the box's own
padding is 48 of the 96px separating the viewport from the text, and each
16px returned is 16px the statement does not have to wrap. The card still
reads as a card at 1rem. (The matching override for .problem-box--bp has
to live further down, after .problem-box's own padding shorthand — see
the note there.) */
.bp-callout { padding-left: 1rem; padding-right: 1rem; }
}
/* Branded "inside" / "outside" words. The Schoolio mark does letter duty:
the bare "i" glyph (schoolio-mark-i.svg) replaces the "i" in "inside", and
the full mark (schoolio-mark.svg — an "i" within an "O") replaces the "O" in
"outside". Reusable anywhere the inside/outside idea appears; pair with the
branded_inside_html / branded_outside_html rake helpers in guides.rake, or
hand-write the same markup.
Heights/baselines are tuned so each glyph sits like a capital-height letter. */
.lo-mark-letter { width: auto; vertical-align: -0.14em; }
.lo-mark-letter--i { height: 1.18em; }
.lo-mark-letter--o { height: 1em; vertical-align: -0.18em; }
/* The last line shouldn't add margin below the panel's own bottom padding. */
.bp-callout > :last-child {
margin-bottom: 0;
}
/* The Beautiful Problem statement — the site-wide standard treatment, emitted
by the bp_statement_html helper in guides.rake. Three lines: a bold lead-in
("How to get students"), then the inside/outside pair, each opening with its
branded glyph and hinged on an en dash.
This replaced a two-column .bp-split treatment that put "inside …" and
"outside …" either side of a hairline seam. The parallel structure is what
carries the idea, and a shared left edge shows it far better than a seam
did: the two lines start the same way, so the eye compares the halves
directly instead of reading them as two separate fragments. It also frees
the box to be full width, which is why .bp-callout no longer caps at 38rem.
On size vs. line count. This first shipped with a viewport-tracking
font-size floor copied from the home hero sub-line, chosen to hold three
lines at every width. That was the wrong trade here, and the measurement
says why the home version gets away with it and this one cannot: the hero
spans nearly the whole viewport (40px of chrome), while this sits inside a
section (24px each side) inside a box (24px each side) — 96px gone, leaving
318px of text on a 414px phone. Three lines at a proper statement size
(24px x the measured 15.3 width-to-size ratio = 367px) does not fit in 318,
and would not fit even with the box padding removed entirely.
So the floor was buying line count with type size, and the bill came due on
phones: 15px text against 15px body copy, when every other .lead-statement
on the page is 24px. It read as body copy, not as the statement of the
problem the whole site is about.
The floor is kept, but re-derived from constants that are now correct
rather than guessed, which is what was actually wrong the first time:
- chrome is 80px, not 96 — the box's phone padding is trimmed to 1rem
below 640px (see the media query above), returning 16px of text width;
- the divisor is 15.8, close to the measured 15.3 width-to-size ratio of
the longest line plus a little safety. The original 18.5 was picked
conservatively rather than measured, and that alone cost ~3px.
Together those lift a 360px phone from 15.1px to 17.7px and a 414px phone
from 18.1px to 21.1px, while still holding three lines — so this is not a
trade of size against line count, it is both.
The wrap case is still handled rather than merely avoided: each line is its
own block (.bp-line) with a hanging indent, so if a line does wrap — user
font scaling, a narrower device than any tested — its continuation sits
inboard of the branded glyph and the three lines still start on a shared
left edge. .lo-nowrap-beat keeps "need to succeed" whole so the break lands
somewhere sensible. */
.bp-statement {
/* The display serif, explicitly — not the inherited page voice. This is the
home hero's sub-line promoted to a standard, and the serif is part of that
treatment: it sets the statement apart from the body copy around it as a
thing being quoted rather than another paragraph. Naming the family here
also makes the callout look identical on "educating" pages (sans voice)
and "learning" pages (serif voice), which a standard treatment should. */
font-family: var(--font-display);
font-optical-sizing: auto;
font-size: clamp(min(1.5rem, calc((100vw - 5rem) / 15.8)), 3.4vw, 2.125rem);
line-height: 1.3;
letter-spacing: -.008em;
margin: 0;
text-align: left;
}
/* One block per line, with a hanging indent for the wrap case. The indent is
sized to clear the branded glyph plus its following space, so a continuation
line starts under the word rather than under the mark. */
.bp-statement .bp-line {
display: block;
padding-left: 1.15em;
text-indent: -1.15em;
}
/* The statement is a
, so inside a guide page `.page-paper .prose p`
(tokens.css) out-specifies the class above — two classes plus an element
beats one class — and would add a bottom margin that pushes the last line
past the box's own padding. Match it with three classes rather than !important. */
.page-paper .prose .bp-statement,
.prose .bp-callout .bp-statement,
.prose .problem-box .bp-statement {
margin: 0;
}
/* .lead-statement sets bold runs in terracotta, which would collide with the
red "The Beautiful Problem:" label directly above. Here the bold is doing
structural work, not colour work — it just anchors the lead-in — so keep it
ink and let the ink-blue accents carry the emphasis, exactly as on home. */
.bp-statement strong {
color: inherit;
font-weight: 600;
}
.bp-statement .lo-accent em {
font-style: italic;
}
/* Weld a branded glyph to the rest of its word. The mark is an , so a
line is otherwise free to break between it and the letters after it, which
printed "outside" as a lone O-mark followed by "utside". Matching on :has()
targets only the wrapper branded_inside_html / branded_outside_html emit,
leaving ordinary .lo-accent runs free to wrap. Same rule as the home hero. */
.bp-statement .lo-accent:has(> .lo-mark-letter) {
white-space: nowrap;
}
/* Keep "need to succeed" whole if its line ever does overflow, so the beat
moves down intact rather than leaving a two-word orphan. The floor above
should mean this never fires; it is a fallback for engines that set the
line wider than the slack the floor allows. */
.bp-statement .lo-nowrap-beat {
white-space: nowrap;
}
/* Forward-pointer aside that sits between a section title and the content
below it (e.g. "you'll see the exact same steps on the Education page").
Set a touch larger than the body/step text and gently emphasised — italic,
accent colour, with a soft accent hairline on the left — so it reads as a
quiet standout without shouting. */
.prose .steps-note,
.steps-note {
margin: .35rem 0 1.35rem;
padding-left: .9rem;
border-left: 3px solid var(--terracotta);
font-family: "Source Serif 4", Georgia, serif;
font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 1.65rem);
line-height: 1.4;
color: var(--terracotta);
}
.prose .steps-note em,
.steps-note em {
font-style: normal;
font-weight: 600;
}
/* Smaller variant of the forward-pointer note — for a full-sentence note
(rather than a one-line aside) that should read quieter, closer to body
size, while keeping the italic terracotta accent-rule treatment. */
.prose .steps-note--sm,
.steps-note--sm {
font-size: clamp(1.05rem, 1.7vw, 1.25rem);
line-height: 1.45;
}
/* "The trap" line in the Beautiful Problem "significance" block. Set off
with a terracotta left-rule (echoing steps-note) but kept in ink and a
touch smaller than the surrounding prose, so it reads as a subordinate
aside rather than a louder beat — and the sentence above it stays the
dominant line. The bold anchor + italic question inside stay visible. */
.prose .problem-note,
.problem-note {
margin: .35rem 0 1.35rem;
padding-left: .9rem;
border-left: 3px solid var(--terracotta);
font-size: .92em;
line-height: 1.5;
}
/* Quiet qualifier line beneath a section title (e.g. "The problem" /
"— as understood by Taylor's method"). Sits on its own line, sized well
down from the heading and set in a softer weight/colour so it reads as a
subordinate framing note rather than a second heading. */
.title-qualifier {
display: block;
margin-top: .2rem;
font-size: .5em;
font-weight: 500;
font-style: italic;
line-height: 1.25;
color: rgba(28, 28, 28, .6);
}
/* Problem box — a raised "here's the problem" card. Used inside the paper-2
"science of learning motivation" section, so it takes the *lighter* --paper
bg (plus a thin border + paper shadow) to lift off the paper-2 ground. */
.problem-box {
max-width: 40rem;
margin: 1rem auto 1.5rem;
padding: 1.1rem 1.6rem 1.2rem;
background: var(--paper, #FBF6EA);
border: 1px solid rgba(28, 28, 28, .16);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-paper, 4px 4px 0 0 rgba(28, 28, 28, .12));
text-align: center;
}
/* Excludes .bp-statement deliberately. This rule out-specifies a bare class
(one class + one element beats one class), so without the :not() it would
override .bp-statement's font-size and line-height — and the only way to win
it back would be to restate the measured clamp here, giving that constant a
second home to drift from. Narrowing this selector keeps one source. */
.problem-box p:not(.bp-statement) {
margin: 0;
/* Sized to keep the single statement on one line within the box on
desktop; it may wrap on the narrowest phones, which is fine. */
font-size: clamp(1.05rem, 2.3vw, 1.35rem);
line-height: 1.25;
}
/* When the box holds the standard Beautiful Problem statement, it is the same
full-width, left-aligned block as the .bp-callout — only the card styling
differs (this one lifts off a paper-2 ground). */
.problem-box--bp {
max-width: none;
text-align: left;
}
/* Phone padding, matching .bp-callout's, so the statement gets the same text
width in both containers. This must sit *after* .problem-box above: both
selectors are a single class, so the cascade falls to source order, and
.problem-box's `padding` shorthand would otherwise reinstate its wider
1.6rem sides. That is exactly what happened when this override was first
written up beside the .bp-callout one — the callout took the extra width
and this box silently did not, wrapping its second line on every phone
width while the callout beside it held three lines. */
@media (max-width: 640px) {
.problem-box--bp { padding-left: 1rem; padding-right: 1rem; }
}
/* Tiny utilities --------------------------------------------------------- */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mt-6 { margin-top: 3rem; }
/* Thought bubble --------------------------------------------------------- */
/* A student's inner voice, rendered as a rounded thought balloon with two
trailing dots to the lower-left. Used on the Dan Pink guide's closing
"Did Mr Pink succeed?" beat (the Purpose line). */
.thought-bubble {
position: relative;
display: inline-block;
margin: 0.5rem 0 1.25rem 1.9rem;
padding: 0.85rem 1.15rem;
max-width: 48ch;
background: var(--paper-2);
border: 1px solid rgba(28, 28, 28, 0.15);
border-radius: 1.4rem;
box-shadow: var(--shadow-paper);
font-style: italic;
line-height: 1.4;
}
.thought-bubble::before,
.thought-bubble::after {
content: "";
position: absolute;
background: var(--paper-2);
border: 1px solid rgba(28, 28, 28, 0.15);
border-radius: 50%;
}
.thought-bubble::before {
width: 0.9rem; height: 0.9rem;
left: -0.7rem; bottom: 0.5rem;
}
.thought-bubble::after {
width: 0.5rem; height: 0.5rem;
left: -1.3rem; bottom: 0.05rem;
}
/* ------------------------------------------------------------------ *
* Classroom-proof "results after the video" beat (Eva Fugitt &
* Marva Collins pages).
* Shared, page-agnostic pieces are prefixed `.proof-`; each page adds
* its own results graphic (`.eva-read` growth bar, `.marva-read`
* reading list, `.marva-outcomes` life-outcomes contrast). All styling
* is class-based so it survives the paragraph part's rich_text
* sanitiser (inline styles are stripped).
* ------------------------------------------------------------------ */
.proof-result { margin: 0 auto; }
.proof-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-14);
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(28, 28, 28, 0.6);
margin: 1.6rem 0 0.35rem;
}
.proof-result > .proof-eyebrow:first-child { margin-top: 0; }
/* Cohort descriptor: meaningful context, so it reads stronger than the
quiet section-label eyebrows. */
.proof-eyebrow--cohort {
color: var(--ink);
font-weight: 600;
font-size: var(--fs-16);
display: flex;
align-items: center;
gap: 0.6rem;
}
.proof-eyebrow--cohort::before {
content: "";
flex: none;
width: 1.7rem;
height: 3px;
border-radius: 2px;
background: var(--terracotta);
}
/* "Yes — spectacularly." subtitle, lifted in terracotta so the verdict pops. */
.proof-yes { color: var(--terracotta); }
.proof-caption {
margin: 0.5rem 0 0;
font-size: var(--fs-16);
line-height: 1.5;
color: var(--ink);
}
/* Shared: a paper card that lifts a results graphic off the paper-2 band. */
.proof-card {
background: var(--paper);
border-radius: 12px;
box-shadow: var(--shadow-paper);
padding: 1.25rem 1.4rem;
margin: 1rem 0 0;
max-width: 44rem;
}
.proof-card .marva-read { max-width: none; }
.proof-card .marva-read__row:last-child { border-bottom: 0; padding-bottom: 0; }
/* Shared: the people's own voices (parents, reporters, students) */
.proof-voices { display: grid; gap: 1rem; margin: 1.7rem 0 0; }
.proof-voice {
border-left: 3px solid var(--terracotta);
padding: 0.15rem 0 0.15rem 1rem;
}
.proof-voice__quote {
font-style: italic;
font-size: var(--fs-20);
line-height: 1.4;
margin: 0;
}
.proof-voice__who {
display: block;
margin-top: 0.3rem;
font-family: var(--font-mono);
font-size: var(--fs-14);
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(28, 28, 28, 0.6);
}
/* Feature voice — a highlighted story card (e.g. the two hidden gifts). */
.proof-voice--feature {
border-left: 0;
padding: 1.15rem 1.3rem;
margin: 1.4rem 0 0;
max-width: 44rem;
background: var(--paper);
border-top: 4px solid var(--terracotta);
border-radius: 0 0 12px 12px;
box-shadow: var(--shadow-paper);
}
.proof-voice__tag {
display: inline-block;
margin: 0 0 0.55rem;
font-family: var(--font-mono);
font-size: var(--fs-12);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--terracotta);
}
.proof-voice--feature .proof-voice__quote { font-size: var(--fs-20); }
/* Shared: the point — educating, not just same-pace learning */
.proof-point {
margin: 2rem 0 0;
padding: 1.6rem 0 0;
border-top: 2px solid rgba(28, 28, 28, 0.14);
max-width: 44rem;
}
.proof-bp { margin: 2.4rem 0 0; }
.proof-point__head {
font-size: clamp(1.5rem, 3vw, var(--fs-30));
line-height: 1.15;
margin: 0 0 0.6rem;
}
/* Eva Fugitt: reading-level growth bar (grade-equivalent 2.4 -> 6.0) */
.eva-read { max-width: 40rem; margin: 0 0 0.4rem; }
.eva-read__scale {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: var(--fs-14);
font-weight: 600;
color: rgba(28, 28, 28, 0.55);
}
.eva-read__track {
position: relative;
height: 2.5rem;
margin-top: 0.45rem;
background: rgba(28, 28, 28, 0.08);
border-radius: 7px;
}
.eva-read__fill {
position: absolute;
top: 0; bottom: 0;
left: 28%; /* grade-equivalent 2.4 on a 1–6 scale */
right: 0; /* grade-equivalent 6.0 */
background: var(--chalkboard);
border-radius: 7px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.8rem;
box-shadow: var(--shadow-paper);
}
.eva-read__from,
.eva-read__to {
font-weight: 700;
font-size: var(--fs-18);
color: #F7F1E1;
line-height: 1;
}
.eva-read__gain {
text-align: center;
margin: 0.6rem 0 0;
font-weight: 700;
font-size: var(--fs-18);
color: var(--chalkboard);
}
/* Eva Fugitt: hero-stat card — the big "+3.6 years" figure beside the bar,
lifted off the paper-2 band on its own paper card. */
.eva-result {
display: flex;
align-items: stretch;
gap: 1.1rem;
max-width: 44rem;
margin: 1rem 0 0;
padding: 1.25rem;
background: var(--paper);
border-radius: 12px;
box-shadow: var(--shadow-paper);
}
.eva-result__figure {
flex: none;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.35rem;
padding: 1rem 1.2rem;
background: var(--chalkboard);
border-radius: 10px;
text-align: center;
}
.eva-result__num {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.75rem, 8vw, var(--fs-60));
line-height: 0.9;
color: #F7F1E1;
}
.eva-result__unit {
font-family: var(--font-mono);
font-size: var(--fs-12);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.35;
color: rgba(247, 241, 225, 0.85);
}
.eva-result__bar {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.eva-result__bar .eva-read { margin: 0; max-width: none; }
/* Marva Collins: what her young children were reading (age -> authors) */
.marva-read { max-width: 40rem; margin: 0; display: grid; gap: 0.55rem; }
.marva-read__row {
display: grid;
grid-template-columns: 8.5rem 1fr;
align-items: baseline;
gap: 0.9rem;
padding: 0.55rem 0;
border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}
.marva-read__grade {
font-family: var(--font-mono);
font-size: var(--fs-14);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--chalkboard);
}
.marva-read__authors {
margin: 0;
font-size: var(--fs-18);
line-height: 1.35;
}
/* Marva Collins: life-outcomes contrast (predicted vs. her students) */
.marva-outcomes {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 1.25rem;
max-width: 48rem;
margin: 0.6rem 0 0;
}
.marva-outcomes__vs {
align-self: center;
font-family: var(--font-display);
font-weight: 700;
font-style: italic;
font-size: var(--fs-20);
color: var(--terracotta);
}
.marva-outcome {
align-self: stretch;
border-radius: 10px;
padding: 1.3rem 1.5rem;
}
.marva-outcome--predicted {
background: rgba(28, 28, 28, 0.06);
border: 1px solid rgba(28, 28, 28, 0.12);
}
.marva-outcome--actual {
background: var(--chalkboard);
color: #F7F1E1;
box-shadow: var(--shadow-paper);
}
.marva-outcome__label {
font-family: var(--font-mono);
font-size: var(--fs-16);
text-transform: uppercase;
letter-spacing: 0.02em;
white-space: nowrap;
margin: 0 0 0.6rem;
opacity: 1;
}
.marva-outcome__list { margin: 0; padding: 0; list-style: none; }
.marva-outcome__list li {
font-weight: 700;
font-size: var(--fs-24);
line-height: 1.5;
}
@media (max-width: 34rem) {
.marva-outcomes { grid-template-columns: 1fr; }
.marva-outcomes__vs { justify-self: center; padding: 0.15rem 0; }
.marva-read__row { grid-template-columns: 1fr; gap: 0.15rem; }
.eva-result { flex-direction: column; align-items: stretch; }
.eva-result__figure { flex-direction: row; align-items: baseline; justify-content: center; gap: 0.6rem; }
}
/* --- Book endorsements ---------------------------------------------------
* Long-form, attributed endorsements: several paragraphs each, under the
* endorser's name and credentials. Used on /team/robert-j-caveney for the
* five endorsements of SCHOOLING For Readiness And Drive.
*
* These deliberately do NOT take the default `blockquote` treatment from
* tokens.css. That one — display serif at fs-24 on a yellow highlighter wash
* — is built for a single arresting line; five multi-paragraph quotes in it
* would be a wall of yellow with nothing left to emphasise. Here the quote
* is body-sized prose behind a quiet accent rule, and the attribution above
* does the work of announcing whose voice it is.
*
* The endorsements arrive through rich_text, whose sanitizer allows `class`
* but strips `style` — which is why this lives in CSS rather than inline on
* the generated markup.
*/
.book-endorsement { margin: var(--sp-7) 0 0; }
.book-endorsement + .book-endorsement {
border-top: var(--hairline);
padding-top: var(--sp-6);
}
.book-endorsement__name {
font-family: var(--font-display);
font-size: var(--fs-24);
line-height: 1.2;
margin: 0 0 0.35rem;
}
/* Sentence case, not the uppercase mono the site uses for short eyebrow
* labels. These credentials run long — "Former VP of the California
* Federation of Teachers (CFT) and former president of CFT's Early
* Childhood/K-12 Council" — and uppercase with letter-spacing turns a line
* that length into something you decode rather than read. */
.book-endorsement__credit {
font-family: var(--font-mono);
font-size: var(--fs-14);
line-height: 1.5;
opacity: 0.75;
margin: 0 0 0.15rem;
}
/* Outweigh the element selector in tokens.css without !important. */
.prose blockquote.book-endorsement__quote {
margin: var(--sp-4) 0 0;
padding: 0 0 0 var(--sp-4);
background: none;
border-left: 3px solid var(--highlighter);
font-family: inherit;
font-size: inherit;
line-height: 1.55;
}
.book-endorsement__quote p { margin: 0 0 var(--sp-3); }
.book-endorsement__quote p:last-child { margin-bottom: 0; }
/* --- Scripts (extended quotation) ----------------------------------------
* A passage quoted at length from a book, meant to be READ ALOUD or worked
* through step by step, not glanced at. Used for Eva Fugitt's exercise
* scripts on the example-elementary-school-day page — the longest runs to
* around five hundred words across seven paragraphs.
*
* Like .book-endorsement__quote above, this opts out of the default
* `blockquote` in tokens.css. That treatment — display serif at fs-24 on a
* yellow highlighter wash — is a PULL-QUOTE: it exists to lift one arresting
* line out of the prose. Setting a five-hundred-word script in it would put
* a page and a half of the page under a yellow wash at heading size, which
* shouts the whole thing evenly and so emphasises nothing. It would also
* misdescribe the material: a pull-quote is the author's own words made
* loud, and these are somebody else's words handed over intact.
*
* So: body size, the serif reading face (--font-learning) rather than the
* page's sans, and a quiet ink rule down the left. The rule is the only
* ornament, and it is what makes the script's extent legible at a glance —
* you can see where the teacher's script starts and stops without reading a
* word of it. The serif is doing real work too, not decoration: it marks
* the switch from the site explaining something to a voice you are meant to
* speak in, and it matches the "learning" voice the site already uses for
* material addressed to a student.
*
* Scripts arrive through rich_text, whose sanitizer allows `class` but
* strips `style`, which is why this is a class here and not inline on the
* generated markup.
*/
.prose blockquote.script {
margin: var(--sp-4) 0 var(--sp-5);
padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
background: none;
border-left: 2px solid rgba(28, 28, 28, 0.22);
font-family: var(--font-learning);
font-size: var(--fs-16);
line-height: var(--lh-loose);
}
/* --lh-loose above, not the body 1.55. These are lines somebody has to find
* their place in while looking up at a room full of children; the extra
* leading is what makes a line easy to come back to. */
.prose blockquote.script p { margin: 0 0 var(--sp-3); }
.prose blockquote.script p:last-child { margin-bottom: 0; }
/* Fugitt's Will exercise numbers its steps inside the quotation. Keep the
* list tight to the script's left rule rather than letting it take the
* prose list's full indent, so the numbers read as part of the script. */
.prose blockquote.script ol,
.prose blockquote.script ul { margin: var(--sp-3) 0; padding-left: 1.5em; }
.prose blockquote.script li { margin: 0 0 var(--sp-2); }
.prose blockquote.script li:last-child { margin-bottom: 0; }
/* A stage direction inside a script — Fugitt's "[Pause]", or a note about
* what the teacher does rather than says. Mono at label size, the same
* register .caption uses, so it is visibly NOT part of the spoken line. */
.prose blockquote.script .stage {
font-family: var(--font-mono);
font-size: var(--fs-14);
letter-spacing: 0.02em;
opacity: 0.75;
}
@media (max-width: 34rem) {
.prose blockquote.script { padding-left: var(--sp-4); }
}
/* ── Open positions ─────────────────────────────────────────────────────────
* The vacancy cards under the team on /team.
*
* Same auto-fit grid as the team roster above, but with a wider minimum track
* (280px vs 240px): these cards hold a job title and a sentence rather than a
* portrait, so a narrow column would set a two-word title on three lines.
*
* The cards are text-only and left-aligned, where the team cards are centred
* around a portrait. That difference is the point — a vacancy should not be
* mistakeable for a colleague at a glance. */
.open-position-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--sp-6);
}
.open-position {
background: var(--paper);
padding: var(--sp-6);
border-radius: var(--radius-md);
box-shadow: var(--shadow-paper);
text-align: left;
/* A column with the "read the description" line pinned to the bottom, so
* cards of unequal teaser length still line their calls to action up. */
display: flex;
flex-direction: column;
}
/* --fs-22 to match the team member names on the same page. This originally
* said --fs-20 because --fs-22 was referenced site-wide but never defined; it
* is defined in tokens.css now, so the two headings on /team are the same size
* again, which is the point. */
.open-position__title {
font-family: var(--font-display);
font-size: var(--fs-22);
line-height: 1.2;
margin: 0;
}
/* Inherit the ink colour rather than the link blue: the whole card is
* clickable-looking already, and a blue heading over a blue "read the
* description" line below it is two shouts where one will do. Underline on
* hover keeps it discoverable as a link. */
.open-position__title a {
color: inherit;
text-decoration: none;
}
.open-position__title a:hover,
.open-position__title a:focus-visible {
text-decoration: underline;
}
/* Matches the uppercase mono role label on the team cards. */
.open-position__details {
font-family: var(--font-mono);
font-size: var(--fs-12);
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.75;
margin-top: 0.35rem;
}
.open-position__teaser {
font-size: var(--fs-16);
line-height: 1.55;
margin: var(--sp-3) 0 0;
}
/* margin-top:auto is what pins this to the bottom; see the flex column above.
* The padding keeps it clear of the teaser on a card that is short enough
* that there is no free space for the auto margin to absorb. */
.open-position__more {
margin: auto 0 0;
padding-top: var(--sp-4);
}