/* =====================================================================
HIGH TECH HEALTH — ARTICLES (hth-article.css)
---------------------------------------------------------------------
Enqueued by inc/article.php on single blog posts only, only while
Appearance → Customize → Articles is on, after hth-ds.css. Every
colour, face, radius and curve is a token from that file.
Scope: body.hth-article. The markup around the article is ours
(inc/article.php §9); the article itself is whatever the block
editor saved over eight years — Gutenberg paragraphs, headings,
lists, Media & Text, tables, a few Classic-editor posts — so most of
this file is a reading treatment for that HTML.
THE TWO WIDTHS
--hth-art-col the reading column: 700px at 18px DM Sans is about
70 characters a line (live today: ~150).
--hth-art-wide pictures, Media & Text, tables, the contents list.
SPECIFICITY. Two existing rules decide how heavy the selectors here
must be, and both were measured, not guessed:
body.hth-ds :is(h1..h6):not([class*="hth-"]) (0,2,2) hth-ds.css §6a
sets every unclassed heading to Fraunces 300. Article headings are
unclassed (wp-block-heading), so heading rules here start with
body.hth-article to reach (0,2,2) and win on load order.
Jevelin: table td/th borders and padding !important; p line-height.
§8 restates exactly those with !important, like hth-ds.css §18 and
hth-catalog.css §9.
===================================================================== */
/* =====================================================================
1. THE PAGE AROUND IT
===================================================================== */
body.hth-article {
--hth-art-col: 700px;
--hth-art-wide: 1040px;
background: var(--hth-shell);
}
/* Jevelin's 60px above and below the content. The header section and the
closing band supply their own space. */
body.hth-article #wrapper > .content-container { padding-top: 0; padding-bottom: 0; }
/* JEVELIN'S BOXED CONTAINER — measured live, 13 Oct 2026, on a 408px phone.
On single posts Jevelin wraps #content in `.container.entry-content`, and
css/responsive.css sizes .container with !important at every breakpoint:
>=1250px 1200px · <=1250 960 · <=1025 850 · <=900 740 · <=800 600 ·
<=700 468 · <=550 300 (!) · <=320 280
So on a phone every section — text, related cards, the closing band — sat
in a 300px box with ~55px of empty page either side, and on a laptop the
sand and ink bands stopped at 1200px instead of running edge to edge.
(The catalogue's template is not inside this wrapper, which is why it never
needed this.) The sections bring their own gutter (--hth-gut), so the
wrapper is released here. (1,2,1)+!important beats .container's (0,1,0)
+!important on specificity, whatever the load order. */
body.hth-article #wrapper .container:has(> #content.page-content),
body.hth-article #wrapper .content-container > .container.entry-content {
width: auto !important; min-width: 0 !important; max-width: none !important;
padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
float: none !important;
}
.hth-article__col {
max-width: var(--hth-art-col);
margin-inline: auto;
}
/* =====================================================================
2. HEADER — breadcrumb, title, byline
===================================================================== */
.hth-article__head {
padding-top: clamp(40px, 6vw, 88px);
padding-bottom: var(--hth-7);
}
.hth-article__crumbs ol {
display: flex; flex-wrap: wrap; gap: 0 var(--hth-2);
list-style: none; margin: 0 0 var(--hth-5); padding: 0;
font-family: var(--hth-f-body); font-size: var(--hth-t-xs); font-weight: 500;
letter-spacing: var(--hth-tr-lab); text-transform: uppercase; line-height: 1.6;
}
.hth-article__crumbs li { margin: 0; }
.hth-article__crumbs li + li::before { content: "\203A"; margin-right: var(--hth-2); color: var(--hth-label); }
body.hth-article .hth-article__crumbs a { color: var(--hth-label); text-decoration: none; }
body.hth-article .hth-article__crumbs a:hover { color: var(--hth-accent); text-decoration: underline; text-underline-offset: .22em; }
body.hth-article .hth-article__title {
font-family: var(--hth-f-display);
font-weight: 300;
font-size: clamp(34px, 4.4vw, 56px);
line-height: 1.08;
letter-spacing: var(--hth-tr-lg);
color: var(--hth-head);
text-wrap: balance;
text-transform: none;
margin: 0;
}
.hth-article__byline { margin-top: var(--hth-6); }
body.hth-article .hth-article__byline .hth-byline__dates { margin-top: var(--hth-4); }
body.hth-article .hth-article__byline .hth-byline__name a { text-decoration: none; color: inherit; }
body.hth-article .hth-article__byline .hth-byline__name a:hover { text-decoration: underline; text-underline-offset: .2em; }
.hth-article__byline .hth-byline__dates li { margin: 0; }
/* No separator character: on a phone the line wraps, and a dot would start
the second line. A gap reads as a separator on one line and disappears when
the items stack. */
.hth-article__byline .hth-byline__dates { column-gap: var(--hth-5); row-gap: var(--hth-1); }
/* =====================================================================
3. FEATURED IMAGE
---------------------------------------------------------------------
Its own shape between 4:3 and 2:1; anything else is cropped to 16:9
(inc/article.php hth_art_hero_shape). Never wider than the file:
--hth-art-hero-w is the upload's real width, set inline.
===================================================================== */
.hth-article__hero {
margin: var(--hth-7) auto 0;
max-width: min(var(--hth-art-wide), var(--hth-art-hero-w, 100%));
}
.hth-article__hero-img {
display: block; width: 100%; height: auto;
border-radius: var(--hth-r);
background: var(--hth-sand);
}
.hth-article__hero--crop .hth-article__hero-img { aspect-ratio: 16 / 9; object-fit: cover; }
.hth-article__hero figcaption { margin-top: var(--hth-3); }
/* =====================================================================
4. CONTENTS — "In this article" (long articles only)
===================================================================== */
.hth-article-page .hth-contents-section { padding-top: 0; }
.hth-article-page .hth-contents {
max-width: var(--hth-art-wide); margin-inline: auto;
padding-top: var(--hth-5); border-top: 1px solid var(--hth-rule);
}
/* =====================================================================
5. THE ARTICLE
===================================================================== */
.hth-article__main { padding-top: var(--hth-6); }
/* The wrap is the container the wide pieces measure against (100cqw), so a
breakout never needs 100vw and never meets the scrollbar. */
.hth-article__main > .hth-wrap { container-type: inline-size; }
.hth-article__body {
max-width: var(--hth-art-col);
margin-inline: auto;
font-family: var(--hth-f-body);
font-size: 18px;
line-height: 1.7;
color: var(--hth-body);
overflow-wrap: break-word;
}
.hth-article__body::after { content: ""; display: table; clear: both; }
/* Resets at (0,1,1) beat Jevelin's element rules; the flow rule below is
(0,2,0) so it beats the resets — the .hth-rich lesson in hth-ds.css 15f. */
.hth-article__body :is(p, ul, ol, figure, blockquote, table, pre, hr, h2, h3, h4, h5, h6) { margin: 0; }
/* The body IS the reading column. Pictures and grids break out of it to the
wide measure, centred on it; floats and everything else stay inside. */
.hth-article-page .hth-article__body > :is(.wp-block-media-text, .wp-block-table, .wp-block-gallery, .wp-block-columns,
.wp-block-cover, .alignwide, .alignfull),
.hth-article-page .hth-article__body > .wp-block-image:not(.alignleft):not(.alignright) {
--_w: min(var(--hth-art-wide), 100cqw);
width: var(--_w);
max-width: none;
margin-inline: calc(50% - var(--_w) / 2);
}
.hth-article__body > .wp-block-image:not(.alignleft):not(.alignright) img { margin-inline: auto; }
.hth-article-page .hth-article__body > * + *,
.hth-article-page .hth-article__body .wp-block-media-text__content > * + *,
.hth-article-page .hth-article__body .wp-block-column > * + *,
.hth-article-page .hth-article__body .wp-block-group__inner-container > * + *,
.hth-article-page .hth-article__body :is(.wp-block-group, .gspb_container, .hth-article__refs) > * + * { margin-top: 1.1em; }
.hth-article-page .hth-article__body > :first-child,
.hth-article-page .hth-article__body .wp-block-media-text__content > :first-child { margin-top: 0; }
/* Classic-editor and Gutenberg leftovers: an opening
, empty paragraphs. */
.hth-article__body p > br:first-child { display: none; }
.hth-article__body > p:empty { display: none; }
/* ---- headings ------------------------------------------------------- */
body.hth-article .hth-article__body h2 {
font-family: var(--hth-f-display);
font-weight: 300;
font-size: clamp(28px, 2.6vw, 36px);
line-height: 1.15;
letter-spacing: var(--hth-tr-md);
color: var(--hth-head);
text-transform: none;
text-wrap: balance;
}
body.hth-article .hth-article__body :is(h3, h4, h5, h6) {
font-family: var(--hth-f-body);
font-weight: 600;
color: var(--hth-head);
letter-spacing: 0;
text-transform: none;
}
body.hth-article .hth-article__body h3 { font-size: 21px; line-height: 1.35; }
body.hth-article .hth-article__body :is(h4, h5, h6) { font-size: 18px; line-height: 1.4; }
/* Nearly every heading on the blog is wrapped in . In Fraunces 300
that would be a synthetic bold; the heading's own weight is the design. */
body.hth-article .hth-article__body :is(h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; color: inherit; }
body.hth-article .hth-article__body :is(h2, h3, h4) { scroll-margin-top: 120px; }
.hth-article-page .hth-article__body h2:not(:first-child) { margin-top: var(--hth-8); }
.hth-article-page .hth-article__body h3:not(:first-child) { margin-top: var(--hth-7); }
.hth-article-page .hth-article__body :is(h4, h5, h6):not(:first-child) { margin-top: var(--hth-6); }
.hth-article-page .hth-article__body h2 + * { margin-top: var(--hth-4); }
.hth-article-page .hth-article__body :is(h3, h4, h5, h6) + * { margin-top: var(--hth-3); }
.hth-article-page .hth-article__body h2 + :is(h3, h4, h5, h6) { margin-top: var(--hth-4); }
/* ---- text ----------------------------------------------------------- */
body.hth-article .hth-article__body :is(strong, b) { font-weight: 600; color: var(--hth-head); }
body.hth-article .hth-article__body a:not(.wp-block-button__link) {
color: var(--hth-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(31, 108, 151, .4);
}
body.hth-article .hth-article__body a:not(.wp-block-button__link):hover { text-decoration-color: currentColor; }
.hth-article__body :is(ul, ol) { padding-left: 1.4em; }
.hth-article__body ul { list-style: disc; }
.hth-article__body ol { list-style: decimal; }
.hth-article__body li { margin: 0; padding: 0; }
.hth-article__body li + li { margin-top: .5em; }
.hth-article__body li > :is(ul, ol) { margin-top: .5em; }
.hth-article__body li::marker { color: var(--hth-accent); font-variant-numeric: tabular-nums; }
.hth-article__body blockquote {
border-left: 2px solid var(--hth-azure);
padding: .1em 0 .1em 1.2em;
font-family: var(--hth-f-display); font-weight: 300; font-size: 22px; line-height: 1.45;
color: var(--hth-head); background: none; quotes: none;
}
.hth-article__body blockquote :is(cite, footer) {
display: block; margin-top: .6em;
font: 500 14px/1.5 var(--hth-f-body); font-style: normal; color: var(--hth-label);
}
.hth-article__body hr,
.hth-article__body .wp-block-separator {
border: 0; border-top: 1px solid var(--hth-rule); height: 0; background: none; opacity: 1;
width: 100%; max-width: var(--hth-art-col);
}
.hth-article-page .hth-article__body > :is(hr, .wp-block-separator) { margin-block: var(--hth-7); }
/* Spacers: the editor's 50–100px gaps become one rhythm step, and none at
all before a heading, which brings its own. */
.hth-article-page .hth-article__body .wp-block-spacer { max-height: var(--hth-4); margin-top: 0; }
.hth-article-page .hth-article__body .wp-block-spacer:has(+ :is(h2, h3, .wp-block-media-text)) { max-height: 0; }
/* ---- pictures --------------------------------------------------------- */
.hth-article__body img { max-width: 100%; height: auto; }
.hth-article__body :is(.wp-block-image, .wp-caption) img { display: block; border-radius: var(--hth-r); }
.hth-article__body :is(figcaption, .wp-caption-text, .wp-element-caption) {
margin-top: var(--hth-3);
font-size: var(--hth-t-s); line-height: 1.55; color: var(--hth-label); text-align: left;
}
.hth-article__body .wp-caption { max-width: 100%; }
.hth-article__body .aligncenter { margin-inline: auto; }
.hth-article__body img.aligncenter { display: block; }
.hth-article__body .alignleft { float: left; margin: .3em var(--hth-5) var(--hth-4) 0; max-width: 45%; }
.hth-article__body .alignright { float: right; margin: .3em 0 var(--hth-4) var(--hth-5); max-width: 45%; }
.hth-article__body iframe { max-width: 100%; }
.hth-article__body :is(.wp-block-embed__wrapper, .wp-block-embed) iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* ---- Media & Text: 381 of them, in 151 posts -------------------------
Core pads the text 0 8% and leaves no gap; here the text sits flush and
the gap is one token. The image keeps its own shape, but a tall one
(a 572 × 1024 diagram) stops at 80% of the screen height. */
.hth-article-page .hth-article__body > .wp-block-media-text { margin-block: var(--hth-7); }
.hth-article-page .hth-article__body > :is(h2, h3) + .wp-block-media-text { margin-top: var(--hth-5); }
body.hth-article .hth-article__body .wp-block-media-text { column-gap: var(--hth-7); }
body.hth-article .hth-article__body .wp-block-media-text > .wp-block-media-text__content { padding: 0; }
body.hth-article .hth-article__body .wp-block-media-text__media img {
width: auto; max-width: 100%; max-height: 80vh;
margin-inline: auto; display: block; border-radius: var(--hth-r);
}
/* ---- buttons typed into an article ----------------------------------- */
body.hth-article .hth-article__body .wp-block-button__link {
display: inline-flex; align-items: center;
padding: 14px 22px; border-radius: var(--hth-r);
background: var(--hth-ink); color: #fff; border: 1px solid var(--hth-ink);
font: 500 15px/1 var(--hth-f-body); text-decoration: none; text-transform: none; letter-spacing: 0;
}
body.hth-article .hth-article__body .is-style-outline .wp-block-button__link { background: transparent; color: var(--hth-head); border-color: var(--hth-rule); }
/* ---- tables (5 posts) ------------------------------------------------ */
.hth-article-page .hth-article__body > .wp-block-table { margin-block: var(--hth-6); }
.hth-article__body .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hth-article__body table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.hth-article__body table :is(th, td) { text-align: left; vertical-align: top; color: var(--hth-body); }
.hth-article__body table tr:first-child :is(th, td),
.hth-article__body table thead th { color: var(--hth-head); font-weight: 600; }
/* =====================================================================
6. REFERENCES
---------------------------------------------------------------------
inc/article.php wraps a "References" / "Sources" heading and what follows
it in .hth-article__refs. When the heading is nested where it cannot be
wrapped, only the heading is marked ([data-hth-refs]).
===================================================================== */
.hth-article-page .hth-article__body > .hth-article__refs {
margin-top: var(--hth-8);
padding-top: var(--hth-6);
border-top: 1px solid var(--hth-rule);
font-size: 15px; line-height: 1.6; color: var(--hth-label);
}
body.hth-article .hth-article__body .hth-article__refs > :is(h2, h3, h4):first-child,
body.hth-article .hth-article__body [data-hth-refs] {
font: 500 var(--hth-t-xs)/1.5 var(--hth-f-body);
letter-spacing: var(--hth-tr-lab); text-transform: uppercase; color: var(--hth-label);
margin-top: 0;
}
.hth-article-page .hth-article__body .hth-article__refs > * + * { margin-top: .7em; }
.hth-article-page .hth-article__body .hth-article__refs > :first-child + * { margin-top: var(--hth-4); }
.hth-article__refs p { padding-left: 2.4ch; text-indent: -2.4ch; overflow-wrap: anywhere; }
.hth-article__refs :is(ol, ul) { font-size: inherit; }
body.hth-article .hth-article__body .hth-article__refs a { color: inherit; }
body.hth-article .hth-article__body .hth-article__refs :is(strong, b) { color: inherit; font-weight: 500; }
/* =====================================================================
7. ABOUT THE AUTHOR
===================================================================== */
.hth-article__author {
display: flex; gap: var(--hth-5); align-items: flex-start;
max-width: var(--hth-art-col); margin: var(--hth-8) auto 0;
padding-top: var(--hth-6); border-top: 1px solid var(--hth-rule);
scroll-margin-top: 120px;
}
.hth-article__author-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.hth-article__author-copy { min-width: 0; }
.hth-article__author .hth-eyebrow { margin-bottom: var(--hth-2); }
body.hth-article .hth-article__author-name {
margin: 0; font: 600 18px/1.35 var(--hth-f-body); color: var(--hth-head);
}
.hth-article__author-bio { margin-top: var(--hth-3); font-size: 16px; line-height: 1.65; color: var(--hth-body); }
.hth-article__author-bio p { margin: 0; }
.hth-article__author-bio p + p { margin-top: .8em; }
.hth-article__notes { max-width: var(--hth-art-col); margin-inline: auto; }
/* =====================================================================
8. JEVELIN ARMOUR
---------------------------------------------------------------------
The decisions above, restated with !important for exactly the
properties Jevelin forces: table cell borders and padding (measured
in hth-ds.css §18) and paragraph line-height (hth-catalog.css §9).
===================================================================== */
body.hth-article .hth-article__body :is(p, li) { line-height: 1.7 !important; }
body.hth-article .hth-article__body .hth-article__refs :is(p, li) { line-height: 1.6 !important; }
body.hth-article .hth-article__author-bio p { line-height: 1.65 !important; }
body.hth-article .hth-article__body table :is(th, td) {
border: 0 !important;
border-bottom: 1px solid var(--hth-rule) !important;
padding: 12px 14px !important;
}
body.hth-article .hth-article__body table tr:first-child :is(th, td),
body.hth-article .hth-article__body table thead th { border-bottom-color: var(--hth-head) !important; }
body.hth-article .hth-article__body table :is(th, td):first-child { padding-left: 0 !important; }
/* =====================================================================
9. PHONES AND TABLETS
===================================================================== */
@media (max-width: 781px) {
.hth-article__body { font-size: 17px; }
body.hth-article .hth-article__body .wp-block-media-text { row-gap: var(--hth-5); }
.hth-article__body .wp-block-table table { min-width: 560px; }
.hth-article__body :is(.alignleft, .alignright) { float: none; max-width: 100%; margin: 0 0 var(--hth-4); }
.hth-article-page .hth-article__body > .wp-block-media-text { margin-block: var(--hth-6); }
}
@media (max-width: 600px) {
.hth-article__head { padding-top: var(--hth-6); padding-bottom: var(--hth-6); }
.hth-article__main { padding-top: var(--hth-2); }
body.hth-article .hth-article__body .wp-block-media-text__media img { max-height: 60vh; }
.hth-article__hero { margin-top: var(--hth-6); }
.hth-article__author { flex-direction: column; gap: var(--hth-4); }
.hth-article-page .hth-article__body h2:not(:first-child) { margin-top: var(--hth-7); }
}
/* =====================================================================
10. PRINT — the article and its sources, nothing else
===================================================================== */
@media print {
body.hth-article .hth-article__crumbs,
body.hth-article .hth-contents-section,
body.hth-article #keep-reading,
body.hth-article #ask,
body.hth-article .hth-article__notes { display: none !important; }
body.hth-article .hth-article__body { font-size: 12pt; }
}