/****** FILE: themes/gamry/css/pages/BlogHolder.css *****/
/* =========================================================================
Topic listing page (.rd-tl-*) — one template, 18 BlogHolder pages.
Shared --gm-* tokens come from redesign.css :root; the few listing-only
values are declared here on .rd-tl so they stay scoped.
A ruled list, not a card grid: entries are usually title + date only,
and cards at that density read as broken layout.
========================================================================= */
.rd-tl {
background: var(--gm-bg, #fbfbfa);
color: var(--gm-ink, #17242b);
--rd-tl-shell: 1440px;
--rd-tl-faint2: #8a969c; /* counts, sub-labels */
--rd-tl-arrow: #a8b4ba; /* row arrow, disabled pagination */
--rd-tl-rowhover: #f4f8fa;
--rd-tl-pdfbg: #f2f8fb;
--rd-tl-pdfborder: #cfe0ea;
}
.rd-tl :where(a) { text-decoration: none; }
/* ---- Topic header ---------------------------------------------------- */
.rd-tl-head { background: var(--gm-surface, #fff); border-bottom: 1px solid var(--gm-border, #e6eaec); padding: 26px 40px 0; }
.rd-tl-headmax { max-width: var(--rd-tl-shell); margin-inline: auto; }
.rd-tl-head .rd-breadcrumb { width: 100%; margin: 0 0 30px; }
.rd-tl-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-navy, #003e69); margin-bottom: 12px; }
.rd-tl-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.026em; line-height: 1.06; color: var(--gm-ink, #17242b); margin: 0; text-wrap: pretty; }
/* Topic intro. Most holders' content leads with a float-left topic icon (~130px), so
the measure has to be wide enough that the copy sits BESIDE the icon instead of
wrapping underneath it — at the old 32em (512px) the text had ~370px and spilled
below the icon. display:flow-root contains the float so it can't overlap the tabs. */
.rd-tl-intro { margin-top: 20px; max-width: 62em; display: flow-root; }
.rd-tl-intro p { font-size: 17.5px; line-height: 1.62; color: var(--gm-body, #47535b); margin: 0 0 12px; }
.rd-tl-intro p:last-child { margin-bottom: 0; }
.rd-tl-intro p:empty { display: none; margin: 0; }
.rd-tl-intro a { color: var(--gm-navy, #003e69); }
/* legacy inline icon: floated fallback with a real gutter and a saner size */
.rd-tl-intro img { float: left; width: 104px; height: auto; margin: 2px 24px 10px 0; }
/* Preferred: put the icon in its own grid column so the copy can NEVER wrap beneath it,
however long the intro runs. The icon usually sits alone inside a , sometimes
directly in the div — both are pulled into column 1. Falls back to the float above
where :has() is unsupported. */
@supports selector(:has(img)) {
.rd-tl-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-items: start; }
.rd-tl-intro > * { grid-column: 2; }
/* width pins the auto track to the icon itself — left to size on its own the
wrapping
claimed ~413px and squeezed the copy back down. Collapses to 0
on holders whose intro has no icon. */
.rd-tl-intro > p:has(> img),
.rd-tl-intro > img { grid-column: 1; grid-row: 1 / span 20; align-self: start; width: 104px; margin: 0; }
.rd-tl-intro > p:has(> img) img,
.rd-tl-intro > img { float: none; margin: 0; }
}
/* the content often carries its own
/ ("EIS: A Powerful Technique") — the page
title is already the h1, so render these as a modest subheading */
.rd-tl-intro h1, .rd-tl-intro h2, .rd-tl-intro h3 { font-family: 'Space Grotesk', sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.3; color: var(--gm-ink, #17242b); margin: 0 0 8px; }
/* Sibling-topic tabs. The 2px indicator lives INSIDE each link's own box —
a negative bottom margin does not reduce scroll height in an overflow-x
container, which clips the indicator and adds a stray scrollbar. */
.rd-tl-tabs { display: flex; gap: 6px; margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--gm-border-soft, #eef1f2); overflow-x: auto; overflow-y: hidden; }
.rd-tl-tab { flex: 0 0 auto; padding: 10px 14px 12px; font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; font-weight: 500; color: var(--gm-muted, #5f6b72); border-bottom: 2px solid transparent; white-space: nowrap; }
.rd-tl-tab:hover { color: var(--gm-navy, #003e69); }
.rd-tl-tab.is-current { color: var(--gm-ink, #17242b); font-weight: 600; border-bottom-color: var(--gm-navy, #003e69); }
.rd-tl-tab-n { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--rd-tl-faint2); }
.rd-tl-tab.is-current .rd-tl-tab-n { color: var(--gm-navy, #003e69); }
/* ---- Body grid ------------------------------------------------------- */
/* ---------- Long unbroken tokens (2026-08-30) ----------
Raw URLs and code identifiers pasted as visible text set the column's min-content width
directly, and a grid track then sizes to it — a 48-character DOI link measured 404px inside a
320px viewport. `overflow-wrap: anywhere`, NOT `break-word`: only `anywhere` affects intrinsic
sizing, so break-word leaves the container exactly as wide. It breaks a word only when it would
otherwise overflow, so ordinary prose is untouched.
Found by a full 652-page sweep, not by the scan that preceded it — that scan looked for hard
widths, so it could only ever find the causes already suspected. */
.rd-tl-body { overflow-wrap: anywhere; }
.rd-tl-body { display: grid; grid-template-columns: 1fr; gap: 38px; max-width: var(--rd-tl-shell); margin-inline: auto; padding: 40px 40px 0; box-sizing: border-box; }
.rd-tl-main { min-width: 0; }
/* No sidebar (14 of 18 topics): a single centred column, capped so the ruled
list keeps a readable width instead of stretching the full page. This is the
normal state, not a fallback — it should read as deliberate. */
.rd-tl-body--full .rd-tl-main { max-width: 980px; margin-inline: auto; }
/* ---- Result controls ------------------------------------------------- */
.rd-tl-controls { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--gm-border, #e6eaec); }
.rd-tl-range { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gm-faint, #6c7981); }
.rd-tl-sort { display: flex; gap: 8px; }
.rd-tl-pill { border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-body, #47535b); font-size: 13.5px; font-weight: 500; padding: 6px 13px; border-radius: 999px; }
.rd-tl-pill:hover { border-color: var(--gm-navy, #003e69); color: var(--gm-navy, #003e69); }
.rd-tl-pill.is-active { background: var(--gm-navy, #003e69); border-color: var(--gm-navy, #003e69); color: #fff; font-weight: 600; }
/* ---- Entry list ------------------------------------------------------ */
.rd-tl-list { list-style: none; margin: 0; padding: 0; }
.rd-tl-row {
display: grid; grid-template-columns: 132px minmax(0, 1fr) 40px; gap: 28px;
align-items: baseline; padding: 22px 18px 22px 0;
border-bottom: 1px solid var(--gm-border-soft, #eef1f2);
margin-right: -18px; /* hover fill breathes past the content column */
transition: background-color .12s ease;
}
.rd-tl-row:hover { background: var(--rd-tl-rowhover); }
.rd-tl-row-left { display: flex; flex-direction: column; gap: 7px; }
.rd-tl-row-date { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: 0.06em; color: var(--gm-faint, #6c7981); white-space: nowrap; }
.rd-tl-row-sub { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rd-tl-faint2); }
.rd-tl-row-main { min-width: 0; }
.rd-tl-row-titlerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.rd-tl-row-title { font-family: 'Space Grotesk', sans-serif; font-size: 20.5px; font-weight: 600; letter-spacing: -0.017em; line-height: 1.28; color: var(--gm-ink, #17242b); text-wrap: pretty; }
.rd-tl-row:hover .rd-tl-row-title { color: var(--gm-navy, #003e69); }
.rd-tl-row-excerpt { display: block; margin-top: 9px; max-width: 44em; font-size: 15.5px; line-height: 1.6; color: var(--gm-muted, #5f6b72); }
.rd-tl-row-meta { display: block; margin-top: 11px; font-size: 13.5px; color: var(--gm-faint, #6c7981); }
.rd-tl-row-arrow { color: var(--rd-tl-arrow); display: flex; justify-content: flex-end; }
.rd-tl-row:hover .rd-tl-row-arrow { color: var(--gm-navy, #003e69); }
/* PDF chip — a property of the entry, not a second action (the row still
targets the note's detail page, where the download/gate lives). */
.rd-tl-chip { display: inline-flex; align-items: center; gap: 5px; position: relative; top: -2px; border: 1px solid var(--rd-tl-pdfborder); background: var(--rd-tl-pdfbg); border-radius: 6px; padding: 4px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gm-navy, #003e69); white-space: nowrap; }
.rd-tl-empty { font-size: 16px; color: var(--gm-muted, #5f6b72); padding: 28px 0; }
.rd-tl-completelist { margin-top: 22px; font-size: 14.5px; }
.rd-tl-completelist a { color: var(--gm-navy, #003e69); font-weight: 600; }
/* ---- Pagination ------------------------------------------------------ */
.rd-tl-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 30px 0 0; }
.rd-tl-pagepill { border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-navy, #003e69); font-size: 14.5px; font-weight: 600; padding: 11px 20px; border-radius: 999px; }
.rd-tl-pagepill:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; color: var(--gm-navy, #003e69); }
.rd-tl-pagepill.is-disabled { color: var(--rd-tl-arrow); opacity: .55; cursor: default; }
.rd-tl-pagenums { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.rd-tl-pagenum { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-body, #47535b); border-radius: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; padding: 0 8px; box-sizing: border-box; }
.rd-tl-pagenum:hover { border-color: var(--gm-navy, #003e69); color: var(--gm-navy, #003e69); }
.rd-tl-pagenum.is-current { background: var(--gm-navy, #003e69); border-color: var(--gm-navy, #003e69); color: #fff; cursor: default; }
.rd-tl-pagegap { color: var(--rd-tl-arrow); font-family: 'IBM Plex Mono', monospace; padding: 0 2px; }
/* ---- Sidebar (only when the holder really has widgets / copy) --------- */
.rd-tl-rail { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.rd-tl-card, .rd-tl-widgets .WidgetHolder { background: var(--gm-surface, #fff); border: 1px solid var(--gm-border, #e6eaec); border-radius: 16px; padding: 22px; }
.rd-tl-widgets { display: flex; flex-direction: column; gap: 28px; }
.rd-tl-widgets .WidgetHolder h3, .rd-tl-widgets .WidgetHolder h4 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 400; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gm-muted, #5f6b72); margin: 0 0 14px; }
.rd-tl-widgets .WidgetHolder ul { list-style: none; margin: 0; padding: 0; }
.rd-tl-widgets .WidgetHolder li { padding: 8px 0; border-top: 1px solid var(--gm-border-row, #f4f6f7); font-size: 14.5px; }
.rd-tl-widgets .WidgetHolder li:first-child { border-top: 0; }
.rd-tl-widgets .WidgetHolder a { color: var(--gm-body, #47535b); }
.rd-tl-widgets .WidgetHolder a:hover { color: var(--gm-navy, #003e69); }
.rd-tl-widgets .WidgetHolder p { font-size: 14.5px; line-height: 1.6; color: var(--gm-body, #47535b); margin: 0 0 10px; }
.rd-tl-card--copy p { font-size: 14.5px; line-height: 1.6; color: var(--gm-body, #47535b); margin: 0 0 10px; }
.rd-tl-card--copy p:last-child { margin-bottom: 0; }
.rd-tl-card--copy a { color: var(--gm-navy, #003e69); }
/* ---- Back to section ------------------------------------------------- */
.rd-tl-back { display: flex; justify-content: center; padding: 52px 40px 60px; }
.rd-tl-back a { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--gm-border-ctl, #d5dcdf); background: var(--gm-surface, #fff); color: var(--gm-navy, #003e69); font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 999px; }
.rd-tl-back a:hover { border-color: var(--gm-navy, #003e69); background: #f4f8fa; }
/* =========================================================================
Responsive
========================================================================= */
@media (min-width: 1081px) {
/* Sidebar sits after the list in DOM order; pull it right on wide screens. */
.rd-tl-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.rd-tl-body--full { grid-template-columns: minmax(0, 1fr); }
.rd-tl-rail { position: sticky; top: 28px; }
}
@media (max-width: 1080px) {
.rd-tl-rail { position: static; }
}
@media (max-width: 720px) {
/* stack the intro: a 104px icon beside the copy leaves too little measure on a phone */
.rd-tl-intro { display: block; max-width: none; }
.rd-tl-intro > p:has(> img), .rd-tl-intro > img { width: auto; }
.rd-tl-intro img { float: none; width: 84px; margin: 0 0 12px; }
.rd-tl-head { padding: 20px 20px 0; }
.rd-tl-head .rd-breadcrumb { margin-bottom: 22px; }
.rd-tl-body { padding: 28px 20px 0; }
.rd-tl-back { padding: 40px 20px 48px; }
.rd-tl-row { grid-template-columns: 1fr; gap: 10px; margin-right: 0; padding-right: 0; }
.rd-tl-row-left { flex-direction: row; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rd-tl-row-arrow { display: none; }
.rd-tl-row-title { font-size: 18.5px; }
.rd-tl-pagenums { order: 3; width: 100%; }
}