in .fw-prose__tw
so a wide editor table scrolls instead of pushing
the page sideways.
TYPEFACE
Outfit, via --ff. One family for the whole site — headings included.
Do not introduce a serif here: the brand face is Outfit and a second
family in the article body is the fastest way to make the page look
like it was assembled from two different templates.
Weights used: 400 body, 500 lead-ins, 600/700 headings. All five are
already in the site-wide Google Fonts request.
══════════════════════════════════════════════════════════════════════════ */
.fw-prose{
/* The left inset is a variable so media can pull back out of it by
exactly the right amount and sit flush with the column edge. */
--prose-inset:0px;
position:relative;
counter-reset:fw-prose-h2;
font-family:var(--ff);
font-size:clamp(15.5px, .26vw + 14.7px, 16.8px);
font-weight:400;
line-height:1.72;
letter-spacing:-.004em;
color:var(--g7);
padding-left:var(--prose-inset)
}
/* ── HEADINGS ─────────────────────────────────────────────────────────────
h1 is styled but should not appear: the page's own is the service
title in the masthead, and a second one in the body is a document-outline
error. It is here so an editor who pastes one does not get unstyled text.
──────────────────────────────────────────────────────────────────────── */
.fw-prose h1{
margin:0 0 .5em;
font-family:var(--ff);
font-size:clamp(26px, 1.5vw + 17px, 38px);
font-weight:700;line-height:1.1;letter-spacing:-.03em;
color:var(--dk)
}
/* Every h2 gets an automatic ·01· figure. Section numbering is most of what
separates an article that reads as edited from one that reads as posted,
and doing it with a counter means writers never have to type it. */
.fw-prose h2{
counter-increment:fw-prose-h2;
position:relative;
margin:clamp(30px, 2.7vw, 48px) 0 clamp(8px, .8vw, 12px);
font-family:var(--ff);
font-size:clamp(21px, 1.05vw + 15px, 30px);
font-weight:700;line-height:1.14;letter-spacing:-.03em;
/* Brand blue, with the auto-number above it in brand pink — the two
marks together are what make a section head read as the site's own
rather than as default article styling. */
color:var(--bl-d);
scroll-margin-top:var(--prose-anchor);
text-wrap:balance
}
.fw-prose h2::before{
content:counter(fw-prose-h2, decimal-leading-zero);
display:block;margin-bottom:.62em;
font-size:11px;font-weight:600;letter-spacing:.2em;
color:var(--pk)
}
.fw-prose h2:first-child{margin-top:0}
.fw-prose h3{
margin:clamp(20px, 1.9vw, 30px) 0 clamp(5px, .55vw, 8px);
font-size:clamp(16.5px, .42vw + 14.6px, 19.5px);
font-weight:600;line-height:1.3;letter-spacing:-.02em;
/* Pink, so the two levels are told apart by hue as well as size —
at a glance you can see where a section starts and where it only
subdivides. h4 and below stay ink; three coloured levels would be
a rainbow, not a hierarchy. */
color:var(--pk-d);
scroll-margin-top:var(--prose-anchor)
}
.fw-prose h4{
margin:clamp(20px, 2vw, 28px) 0 5px;
font-size:clamp(15.5px, .35vw + 14.4px, 18px);
font-weight:600;line-height:1.36;letter-spacing:-.014em;
color:var(--dk)
}
.fw-prose h5,
.fw-prose h6{
margin:clamp(18px, 1.8vw, 26px) 0 4px;
font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
color:var(--g5)
}
/* ── BODY COPY ────────────────────────────────────────────────────────────
No bottom margin on
. Everything that can follow a paragraph carries
its own top margin instead — headings, lists, quotes, rules, media, the
table wrapper. Consecutive paragraphs are separated by leading alone,
which is what stops the rhythm collapsing when a writer leaves an empty
behind (and they do).
──────────────────────────────────────────────────────────────────────── */
.fw-prose p{
margin:0;
font-size:inherit;line-height:inherit;color:inherit;
text-wrap:pretty
}
.fw-prose p + p{margin-top:1.1em}
.fw-prose strong,
.fw-prose b{font-weight:600;color:var(--dk)}
/* Canvas's style.css restyles a bare with its own serif face. Reclaim
the family — the article must not switch typeface mid-sentence. */
.fw-prose em,
.fw-prose i{font-style:italic;font-family:inherit}
.fw-prose small{font-size:.86em;color:var(--g5)}
.fw-prose del{color:var(--g4)}
.fw-prose sup,
.fw-prose sub{font-size:.72em;line-height:0}
/* Highlighter, not a filled box — it sits under the text rather than around it */
.fw-prose mark{
background:linear-gradient(180deg, transparent 58%, var(--pk-l) 58%);
color:inherit;padding:0 2px
}
.fw-prose abbr[title]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
/* ── LINKS ────────────────────────────────────────────────────────────────
Underline offset rather than a border-bottom, so descenders are not cut
and the rule follows the text when it wraps.
──────────────────────────────────────────────────────────────────────── */
.fw-prose a{
color:var(--bl);font-weight:500;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
text-decoration-color:color-mix(in srgb, var(--bl) 32%, transparent);
transition:color .25s, text-decoration-color .25s
}
.fw-prose a:hover{color:var(--bl-d);text-decoration-color:currentColor}
.fw-prose a:focus-visible{outline:2px solid var(--bl);outline-offset:3px;border-radius:4px}
/* ── LISTS ────────────────────────────────────────────────────────────────
Native markers, not a house style. `ul` keeps the browser's disc (and its
own circle / square when nested), `ol` keeps real numerals — and if the
writer sets list-style-type in the editor, that inline value is what
shows, because nothing here overrides it.
::marker is used only to tint. Shape, position and numbering stay the
browser's. Replacing them with a custom ::before applies one look to
everything and quietly throws away what the writer chose.
──────────────────────────────────────────────────────────────────────── */
.fw-prose ul,
.fw-prose ol{
/* Load-bearing top margin: the paragraph above has no bottom one, so
without this the list butts straight into it. */
margin:clamp(12px, 1.2vw, 17px) 0 clamp(13px, 1.4vw, 18px);
padding-left:1.45em;
list-style-position:outside
}
.fw-prose ul{list-style-type:disc}
.fw-prose ol{list-style-type:decimal}
.fw-prose li{
margin-bottom:.42em;padding-left:.25em;
line-height:1.68
}
.fw-prose li:last-child{margin-bottom:0}
.fw-prose li > ul,
.fw-prose li > ol{margin:.5em 0 0}
.fw-prose ul > li::marker{color:var(--pk)}
.fw-prose ol > li::marker{color:var(--pk);font-weight:600}
/* ── QUOTE ───────────────────────────────────────────────────────────────
A rule and a weight change. No tinted panel, no giant quotation glyph —
both are decoration standing in for emphasis the words should carry.
──────────────────────────────────────────────────────────────────────── */
.fw-prose blockquote{
margin:clamp(22px, 2.3vw, 34px) 0;
padding:0 0 0 clamp(18px, 1.7vw, 26px);
border:0;border-left:2px solid var(--pk);
font-size:clamp(16.5px, .4vw + 15px, 19.5px);
font-weight:500;line-height:1.5;letter-spacing:-.018em;
color:var(--dk)
}
.fw-prose blockquote p{margin:0}
.fw-prose blockquote p + p{margin-top:.6em}
.fw-prose blockquote cite{
display:block;margin-top:.7em;
font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
font-style:normal;color:var(--pk)
}
.fw-prose hr{
margin:clamp(30px, 3.2vw, 48px) 0;
height:1px;border:0;opacity:1;
background:linear-gradient(90deg, var(--g2), transparent)
}
/* ── MEDIA ───────────────────────────────────────────────────────────────
Images pull out of the prose's left inset so they run flush with the
column edge while the text stays indented.
`max-width:none` is required: the theme's bare `img` rule and its
`img.lazy` rule both cap width at 100%. This selector out-specifies both
at (0,2,1), so no !important is needed.
──────────────────────────────────────────────────────────────────────── */
.fw-prose img,
.fw-prose img.lazy{
display:block;height:auto;
max-width:none;
width:calc(100% + var(--prose-inset));
margin:clamp(18px, 1.9vw, 26px) 0;
margin-left:calc(var(--prose-inset) * -1);
border-radius:var(--r2)
}
/* A figure carries the bleed itself so its caption lines up with the photo */
.fw-prose figure{
margin:clamp(18px, 1.9vw, 26px) 0;
margin-left:calc(var(--prose-inset) * -1);
width:calc(100% + var(--prose-inset))
}
.fw-prose figure img,
.fw-prose figure img.lazy{margin:0;width:100%}
.fw-prose figcaption{
margin-top:10px;
font-size:12px;line-height:1.55;color:var(--g5);
padding-left:11px;border-left:2px solid var(--g2)
}
.fw-prose iframe,
.fw-prose video{
display:block;max-width:none;height:auto;
width:calc(100% + var(--prose-inset));
margin:clamp(18px, 1.9vw, 26px) 0;
margin-left:calc(var(--prose-inset) * -1);
border:0;border-radius:var(--r2);aspect-ratio:16/9
}
/* ── TABLES ──────────────────────────────────────────────────────────────
The editor bakes per-cell inline styles onto everything it writes —
`style="width:33.33%; background-color:rgb(233,52,138); color:#fff"` —
and paints header rows inconsistently, one pink cell then two grey ones
on the same row. None of it survives here.
That is what the !important flags are for. They are not fighting another
stylesheet; they are fighting inline `style` attributes, which no amount
of selector specificity can beat.
The look is a ledger, not a component: no frame, no radius, no shadow,
no vertical rules, no zebra. A header band, hairlines between rows, a
heavier rule closing the last one, and the whole thing pulled out of the
left inset so it runs edge to edge with the column.
EVERY ROW RENDERS. No truncation, no "show more" — a cost table you can
only half-see is worse than no table. Width is handled by scrolling the
table inside its own frame.
──────────────────────────────────────────────────────────────────────── */
.fw-prose__tw{
margin:clamp(18px, 1.9vw, 26px) 0;
margin-left:calc(var(--prose-inset) * -1);
width:calc(100% + var(--prose-inset));
overflow-x:auto;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin
}
.fw-prose__tw:focus-visible{outline:2px solid var(--bl);outline-offset:3px}
.fw-prose__tw::-webkit-scrollbar{height:6px}
.fw-prose__tw::-webkit-scrollbar-track{background:color-mix(in srgb, var(--bl) 6%, transparent)}
.fw-prose__tw::-webkit-scrollbar-thumb{background:color-mix(in srgb, var(--bl) 30%, transparent);border-radius:6px}
.fw-prose table{
width:100%!important;
height:auto!important;
/* Editor tables run to four and five columns. At the article column's
width that gives each one about 140px, and a cell like "Single-embryo
transfer, freeze the rest" then wraps to three lines and drags the
whole row with it. A generous minimum trades a little more horizontal
scrolling for rows that stay one or two lines deep — which is the
difference between a table you can read across and one you cannot. */
min-width:820px;
margin:0;
border:0!important;
border-collapse:collapse!important;
border-spacing:0!important;
background:transparent!important;
font-size:.9em;line-height:1.55
}
/* With JS off the table is not wrapped, so it has to scroll on its own. */
.fw-prose > table{
display:block;overflow-x:auto;
margin:clamp(18px, 1.9vw, 26px) 0;
margin-left:calc(var(--prose-inset) * -1);
width:calc(100% + var(--prose-inset))!important
}
/* Every cell reset to this stylesheet's terms — the editor's inline width,
height, background, colour and alignment all discarded. */
.fw-prose th,
.fw-prose td,
.fw-prose th[style],
.fw-prose td[style]{
width:auto!important;
height:auto!important;
background:transparent!important;
background-color:transparent!important;
color:var(--g7)!important;
text-align:left!important;
vertical-align:top;
min-width:104px;
padding:12px 15px;
border:0!important;
/* Blue-tinted hairline, not a neutral grey and never black — the rules
belong to the same family as the header band above them. */
border-bottom:1px solid color-mix(in srgb, var(--bl) 13%, transparent)!important
}
/* The writer ends most cells with a stray
; it only adds a blank line. */
.fw-prose td > br:last-child,
.fw-prose th > br:last-child{display:none}
/* Header band — one treatment, whatever the editor painted. config/prose.php
promotes a headerless first row into a real , so this single rule
covers both cases and no :has() fallback is needed. */
.fw-prose thead th,
.fw-prose thead td,
.fw-prose thead th[style],
.fw-prose thead td[style]{
background:var(--bl)!important;
color:var(--wh)!important;
font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
white-space:nowrap;
vertical-align:middle;
padding:12px 15px;
border:0!important
}
/* is how the editor writes header text — never a second colour. */
.fw-prose td strong,
.fw-prose th strong{color:inherit!important;font-weight:600}
/* First column carries the row label: keep it readable and pinned while the
rest of a wide table scrolls under it. */
.fw-prose tbody th[scope="row"],
.fw-prose tbody tr > *:first-child{color:var(--g8)!important;font-weight:550}
/* No zebra — hairlines carry the rows. A quiet hover keeps them trackable. */
.fw-prose tbody tr:hover td,
.fw-prose tbody tr:hover th{background:color-mix(in srgb, var(--bl) 4.5%, transparent)!important}
/* The ledger closes on a heavier rule, in the same blue. */
.fw-prose tbody tr:last-child td,
.fw-prose tbody tr:last-child th{border-bottom:2px solid color-mix(in srgb, var(--bl) 42%, transparent)!important}
.fw-prose caption{
caption-side:bottom;padding-top:12px;
font-size:12px;color:var(--g5);text-align:left
}
/* ── CODE · DEFINITION LISTS ─────────────────────────────────────────── */
.fw-prose code{
padding:2px 6px;border-radius:5px;
background:var(--g1);border:1px solid var(--g2);
font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
font-size:.87em;color:var(--dk)
}
.fw-prose pre{
margin:clamp(20px, 2.2vw, 30px) 0;padding:18px 20px;
border-radius:var(--r2);overflow-x:auto;
background:var(--dk);color:var(--paper-g);
font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
font-size:12.5px;line-height:1.65
}
.fw-prose pre code{padding:0;background:none;border:0;color:inherit}
.fw-prose dl{margin:clamp(16px, 1.8vw, 24px) 0}
.fw-prose dt{font-weight:600;color:var(--dk)}
.fw-prose dd{margin:4px 0 14px;padding-left:16px;border-left:2px solid var(--g2)}
/* ── ESCAPE HATCH ────────────────────────────────────────────────────────
A component the page itself renders inside the article — a callout, a
stat row, an author box — opts out of every rule above by carrying
.fw-prose__raw. Without this, page furniture placed inside the column
inherits article list bullets and table hairlines and has to fight them
back one property at a time.
──────────────────────────────────────────────────────────────────────── */
.fw-prose .fw-prose__raw,
.fw-prose .fw-prose__raw *{
all:revert
}
@media(prefers-reduced-motion:reduce){
.fw-prose *{transition-duration:.01ms!important}
}