/* Blog article layout.
Related reading no longer lives in a rail beside the copy - a rail only
accompanies the first screen of a multi-thousand-pixel article, and below
1200px it fell to the bottom entirely. Instead the article is one centered
reading column and the server injects "Related reading" break cards
between sections (see blogArticleRenderService), so a link stays within
about two screens of the reader at every width, phones included. */
.blog-article-layout {
/* Caps the panel. Left at the container's full width the copy would run
past 130 characters; here the centered reading column stays inside the
comfortable band while the cover, the break cards and the end grid take
the width that is left. */
max-width: 1000px;
margin-inline: auto;
}
/* The reading column keeps its own comfortable measure; the existing
860px cap is released here so this layout controls the width instead. */
body.blog-post-page .blog-article-layout .blog-article-main {
max-width: none;
margin-inline: 0;
min-width: 0;
}
/* Reading measure. The copy is one centered column; the per-element 88ch cap
below keeps the text comfortable while figures, tables and break cards use
the column's full width. */
.blog-article-copy {
max-width: 52rem;
margin-inline: auto;
}
body.blog-post-page .blog-article-main {
font-size: 1.0625rem;
line-height: 1.75;
}
@media (min-width: 992px) {
body.blog-post-page .blog-article-main {
font-size: 1.125rem;
}
}
body.blog-post-page .blog-article-copy > p,
body.blog-post-page .blog-article-copy > h2,
body.blog-post-page .blog-article-copy > h3,
body.blog-post-page .blog-article-copy > h4,
body.blog-post-page .blog-article-copy > ul,
body.blog-post-page .blog-article-copy > ol,
body.blog-post-page .blog-article-copy > blockquote,
body.blog-post-page .blog-article-copy > .repository-quote {
max-width: 88ch;
}
/* Citation URLs run into the body copy unbroken; at phone widths they used to
push past the panel's padding and get clipped by its overflow. */
body.blog-post-page .blog-article-copy {
overflow-wrap: break-word;
}
/* Body images are `w-100`, so without a ceiling they would blow up to the
full reclaimed width. Keeping them a little tighter than the panel leaves
them clearly wider than the text without dominating the page. */
body.blog-post-page .blog-article-copy > figure {
max-width: 100%;
}
body.blog-post-page .blog-article-copy > figure img {
max-width: 100%;
height: auto;
}
/* Placement-variant overrides at matching specificity, so the smaller/floated
figures win over the full-width ceiling above (which otherwise forces every
figure to 100%). The base variant rules further down cover the editor
preview under .blog-post-body. */
body.blog-post-page .blog-article-copy > figure.blog-body-figure--full {
clear: both;
}
body.blog-post-page .blog-article-copy > figure.blog-body-figure--inset {
max-width: 62%;
margin-left: auto;
margin-right: auto;
clear: both;
}
body.blog-post-page .blog-article-copy > figure.blog-body-figure--float-right,
body.blog-post-page .blog-article-copy > figure.blog-body-figure--float-left {
width: 46%;
max-width: 46%;
margin-top: 0.4rem;
margin-bottom: 1rem;
}
body.blog-post-page .blog-article-copy > figure.blog-body-figure--float-right {
float: right;
margin-left: 1.75rem;
}
body.blog-post-page .blog-article-copy > figure.blog-body-figure--float-left {
float: left;
margin-right: 1.75rem;
}
@media (max-width: 767.98px) {
body.blog-post-page .blog-article-copy > figure.blog-body-figure--float-right,
body.blog-post-page .blog-article-copy > figure.blog-body-figure--float-left,
body.blog-post-page .blog-article-copy > figure.blog-body-figure--inset {
float: none;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
}
/* The 2.5rem panel padding costs a third of a 390px screen, pushing the
measure down to ~33 characters. Reclaim it on phones. */
@media (max-width: 575.98px) {
body.blog-post-page .blog-article-main {
padding-inline: 1.35rem;
border-radius: 20px;
}
}
/* --- In-article break cards ----------------------------------------------- */
/* Injected between sections by blogArticleRenderService: a thumbnail card
that reads as an editorial interlude, never more than two per article. */
.blog-article-break {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
overflow: hidden;
margin: 2.5rem 0;
border: 1px solid rgba(19, 99, 198, 0.22);
border-radius: 16px;
background: rgba(19, 99, 198, 0.045);
/* Full-width module: never let a floated body image sit beside it and
squeeze it to half width. */
clear: both;
}
.blog-article-break--noimage {
grid-template-columns: minmax(0, 1fr);
}
.blog-article-break-thumb {
display: block;
background: rgba(20, 24, 62, 0.06);
}
.blog-article-break-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-article-break-body {
padding: 1.25rem 1.5rem;
}
.blog-article-break-label {
display: block;
margin-bottom: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1363c6;
}
/* The copy-wide link rule below underlines every in the article body; the
card is a module, not prose, so its links opt back out. */
body.blog-post-page .blog-article-copy .blog-article-break a {
text-decoration: none;
}
body.blog-post-page .blog-article-copy .blog-article-break-title {
display: block;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.35;
color: inherit;
}
body.blog-post-page .blog-article-copy .blog-article-break-title:hover,
body.blog-post-page .blog-article-copy .blog-article-break-title:focus-visible {
color: #1363c6;
text-decoration: underline;
}
.blog-article-break-excerpt {
margin: 0.45rem 0 0;
font-size: 0.9rem;
line-height: 1.5;
color: rgba(20, 24, 62, 0.7);
}
body.blog-post-page .blog-article-copy .blog-article-break-more {
display: inline-block;
margin-top: 0.65rem;
font-size: 0.86rem;
font-weight: 600;
color: #1363c6;
}
body.blog-post-page .blog-article-copy .blog-article-break-more:hover,
body.blog-post-page .blog-article-copy .blog-article-break-more:focus-visible {
text-decoration: underline;
}
/* Phones: thumbnail on top, full width. */
@media (max-width: 575.98px) {
.blog-article-break {
grid-template-columns: minmax(0, 1fr);
}
.blog-article-break-thumb {
aspect-ratio: 16 / 9;
}
}
/* --- Internal links in the body ------------------------------------------ */
/* Markdown emits bare for outbound citations, so those links fell back to
Bootstrap's #0d6efd - 3.6:1 against the dark article panel. Same treatment
as the internal .blog-inline-link below. */
body.blog-post-page .blog-article-copy a {
color: #1363c6;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
body[data-theme='dark'].blog-post-page .blog-article-copy a {
color: #7ce7ff;
}
.blog-inline-link {
color: #1363c6;
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.blog-inline-link:hover {
text-decoration-thickness: 2px;
}
/* --- Body images ---------------------------------------------------------- */
.blog-post-body-image {
margin: 2rem 0;
}
.blog-post-body-image img {
display: block;
border-radius: 14px;
width: 100%;
height: auto;
}
.blog-post-body-image figcaption {
margin-top: 0.5rem;
font-size: 0.82rem;
color: rgba(20, 24, 62, 0.68);
}
/* --- Placement variants ---------------------------------------------------
Full-width is the baseline; the rest are smaller and break the uniform
column so each article varies. Headings clear floats so a float never sits
beside an . All variants collapse to full-width on narrow screens. */
.blog-article-copy h2,
.blog-post-body h2 {
clear: both;
}
/* The editor preview reuses the article figure styles under .blog-post-body. */
.blog-post-body .blog-post-body-image {
margin: 2rem 0;
}
.blog-body-figure--full {
clear: both;
}
.blog-body-figure--inset {
max-width: 62%;
margin-left: auto;
margin-right: auto;
clear: both;
}
.blog-body-figure--float-right,
.blog-body-figure--float-left {
width: 46%;
max-width: 46%;
margin-top: 0.4rem;
margin-bottom: 1rem;
}
.blog-body-figure--float-right {
float: right;
margin-left: 1.75rem;
}
.blog-body-figure--float-left {
float: left;
margin-right: 1.75rem;
}
@media (max-width: 767.98px) {
.blog-body-figure--float-right,
.blog-body-figure--float-left,
.blog-body-figure--inset {
float: none;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
}
/* --- Continue exploring --------------------------------------------------- */
.blog-continue {
margin-top: 3.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(20, 24, 62, 0.12);
}
.blog-continue-heading {
margin: 0 0 1.25rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1363c6;
}
.blog-continue-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
@media (min-width: 576px) {
.blog-continue-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
}
.blog-continue-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.blog-continue-media {
display: block;
margin-bottom: 0.75rem;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 16 / 9;
background: rgba(20, 24, 62, 0.06);
}
/* Only some posts have a cover, so the media box is always reserved: without
it, cards in the same row start their text at different heights. */
.blog-continue-media.is-empty {
background:
linear-gradient(135deg, rgba(19, 99, 198, 0.14), rgba(21, 172, 225, 0.1));
}
.blog-continue-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-continue-date {
display: block;
margin-bottom: 0.3rem;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(20, 24, 62, 0.68);
}
.blog-continue-title {
margin: 0;
font-size: 1rem;
line-height: 1.4;
}
.blog-continue-title a {
color: inherit;
text-decoration: none;
}
.blog-continue-title a:hover {
color: #1363c6;
}
.blog-continue-title a:focus-visible {
outline: 2px solid #1363c6;
outline-offset: 2px;
border-radius: 4px;
}
.blog-continue-excerpt {
margin: 0.45rem 0 0;
font-size: 0.86rem;
line-height: 1.5;
color: rgba(20, 24, 62, 0.68);
}
/* --- Dark theme ----------------------------------------------------------- */
body[data-theme='dark'] .blog-continue-heading,
body[data-theme='dark'] .blog-article-break-label,
body[data-theme='dark'] .blog-inline-link {
color: #7ce7ff;
}
body[data-theme='dark'] .blog-continue {
border-color: rgba(255, 255, 255, 0.14);
}
body[data-theme='dark'] .blog-continue-date,
body[data-theme='dark'] .blog-continue-excerpt,
body[data-theme='dark'] .blog-article-break-excerpt,
body[data-theme='dark'] .blog-post-body-image figcaption {
color: rgba(233, 239, 255, 0.68);
}
body[data-theme='dark'] .blog-continue-title a:hover,
body[data-theme='dark'].blog-post-page .blog-article-copy .blog-article-break-title:hover {
color: #7ce7ff;
}
body[data-theme='dark'] .blog-article-break {
border-color: rgba(21, 172, 225, 0.3);
background: rgba(21, 172, 225, 0.08);
}
body[data-theme='dark'] .blog-article-break-thumb,
body[data-theme='dark'] .blog-continue-media {
background: rgba(255, 255, 255, 0.08);
}
body[data-theme='dark'] .blog-continue-media.is-empty {
background: linear-gradient(135deg, rgba(21, 172, 225, 0.22), rgba(19, 99, 198, 0.14));
}
/* --- Blog index ----------------------------------------------------------- */
/* The index previously ran a short explainer panel in a permanent right-hand
column with h-100, so it stretched the full page height while the card grid
scrolled on beside it - several screens of dead space. The grid now uses the
whole width and the explainer sits with the carousel it actually describes. */
/* Shared placeholder for the posts published before cover images existed, so a
card without one still keeps the layout's rhythm instead of collapsing. */
.blog-lead-media.is-empty,
.blog-featured-media.is-empty,
.blog-latest-thumb.is-empty {
background: linear-gradient(135deg, rgba(19, 99, 198, 0.16), rgba(21, 172, 225, 0.1));
}
.blog-desk-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
/* --- Search ---------------------------------------------------------------- */
/* A plain GET form: it works without JavaScript, the results are a real URL a
reader can bookmark or share, and search engines can follow it. */
.blog-search {
margin-bottom: 1.75rem;
}
.blog-search-label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1363c6;
}
.blog-search-controls {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.blog-search-field {
position: relative;
display: block;
flex: 1 1 260px;
min-width: 0;
}
.blog-search-icon {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
color: rgba(20, 24, 62, 0.55);
pointer-events: none;
}
.blog-search-field input {
width: 100%;
/* 44px tall: a comfortable tap target on touch screens. */
min-height: 46px;
padding: 0.6rem 1rem 0.6rem 2.6rem;
border: 1px solid rgba(20, 24, 62, 0.18);
border-radius: 12px;
background: #ffffff;
color: inherit;
font-size: 0.98rem;
}
.blog-search-field input::placeholder {
color: rgba(20, 24, 62, 0.65);
}
.blog-search-field input:focus {
outline: none;
border-color: #1363c6;
box-shadow: 0 0 0 3px rgba(19, 99, 198, 0.18);
}
.blog-search-controls .btn {
min-height: 46px;
padding-inline: 1.4rem;
}
.blog-search-summary {
margin-bottom: 1.25rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(20, 24, 62, 0.12);
font-size: 0.95rem;
color: rgba(20, 24, 62, 0.7);
}
.blog-search-empty {
padding: 1.5rem 0 0.5rem;
color: rgba(20, 24, 62, 0.7);
}
.blog-search-results {
margin-top: 0.5rem;
}
/* --- Lead story ------------------------------------------------------------ */
.blog-lead {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid rgba(20, 24, 62, 0.12);
}
@media (min-width: 992px) {
.blog-lead {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 2rem;
align-items: center;
}
}
.blog-lead-media {
display: block;
overflow: hidden;
border-radius: 18px;
aspect-ratio: 16 / 10;
background: rgba(20, 24, 62, 0.06);
}
.blog-lead-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-lead-body {
display: flex;
flex-direction: column;
min-width: 0;
}
.blog-lead-kicker {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #1363c6;
}
.blog-lead-title {
margin: 0.5rem 0 0.75rem;
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem);
line-height: 1.2;
}
.blog-lead-title a {
color: inherit;
text-decoration: none;
}
.blog-lead-title a:hover {
color: #1363c6;
}
.blog-lead-excerpt {
margin: 0 0 0.85rem;
font-size: 1.02rem;
line-height: 1.6;
color: rgba(20, 24, 62, 0.7);
}
.blog-lead-meta {
margin: 0 0 1.1rem;
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(20, 24, 62, 0.68);
}
/* --- Companion features ---------------------------------------------------- */
.blog-featured-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.75rem;
padding-bottom: 2rem;
margin-bottom: 2rem;
border-bottom: 1px solid rgba(20, 24, 62, 0.12);
}
@media (min-width: 768px) {
.blog-featured-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.blog-featured-card {
display: flex;
flex-direction: column;
min-width: 0;
}
.blog-featured-media {
display: block;
overflow: hidden;
border-radius: 14px;
aspect-ratio: 16 / 9;
background: rgba(20, 24, 62, 0.06);
margin-bottom: 0.85rem;
}
.blog-featured-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-featured-date,
.blog-latest-date {
display: block;
margin-bottom: 0.3rem;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(20, 24, 62, 0.68);
}
.blog-featured-title {
margin: 0;
font-size: 1.15rem;
line-height: 1.35;
}
.blog-featured-title a {
color: inherit;
text-decoration: none;
}
.blog-featured-title a:hover {
color: #1363c6;
}
.blog-featured-excerpt {
margin: 0.5rem 0 0;
font-size: 0.92rem;
line-height: 1.55;
color: rgba(20, 24, 62, 0.7);
}
/* --- The rest --------------------------------------------------------------- */
.blog-latest-heading {
margin: 0 0 1.1rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1363c6;
}
.blog-latest-list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.35rem 2rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.blog-latest-list {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
}
/* Most posts predate cover images, so a reserved thumbnail column would render
a wall of empty boxes. Rows carry the column only when they have an image. */
.blog-latest-link {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
padding: 0.85rem 0.5rem;
border-radius: 12px;
color: inherit;
text-decoration: none;
transition: background-color 0.15s ease;
}
.blog-latest-link:hover,
.blog-latest-link:focus-visible {
background: rgba(19, 99, 198, 0.06);
color: inherit;
}
.blog-latest-link:focus-visible {
outline: 2px solid #1363c6;
outline-offset: 2px;
}
.blog-latest-link.has-thumb {
grid-template-columns: 84px minmax(0, 1fr);
}
.blog-latest-thumb {
display: block;
overflow: hidden;
border-radius: 10px;
aspect-ratio: 4 / 3;
background: rgba(20, 24, 62, 0.06);
}
.blog-latest-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-latest-copy {
display: block;
min-width: 0;
}
.blog-latest-title {
display: block;
font-weight: 600;
font-size: 0.98rem;
line-height: 1.35;
}
.blog-latest-link:hover .blog-latest-title {
color: #1363c6;
}
.blog-latest-excerpt {
display: block;
margin-top: 0.3rem;
font-size: 0.85rem;
line-height: 1.45;
color: rgba(20, 24, 62, 0.68);
}
/* --- Feed explainer band --------------------------------------------------- */
.blog-feed-note {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem 2.5rem;
margin: 2.5rem 0 1.5rem;
padding: 1.5rem 1.75rem;
border-radius: 20px;
color: #ffffff;
background: linear-gradient(160deg, #14183e, #123f7e);
}
@media (min-width: 768px) {
.blog-feed-note {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
align-items: center;
}
}
.blog-feed-note .auth-chip {
margin-bottom: 0.75rem;
}
.blog-feed-note-title {
margin: 0 0 0.4rem;
font-size: 1.25rem;
color: #ffffff;
}
.blog-feed-note-copy {
margin: 0;
color: rgba(255, 255, 255, 0.9);
font-size: 0.92rem;
line-height: 1.55;
}
.blog-feed-note-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.5rem;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.94);
}
.blog-feed-note-list li {
position: relative;
padding-left: 1.5rem;
line-height: 1.45;
}
.blog-feed-note-list li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
color: #7ce7ff;
font-weight: 700;
}
/* --- Blog index, dark theme ------------------------------------------------ */
body[data-theme='dark'] .blog-lead,
body[data-theme='dark'] .blog-featured-row {
border-bottom-color: rgba(255, 255, 255, 0.14);
}
body[data-theme='dark'] .blog-lead-kicker,
body[data-theme='dark'] .blog-latest-heading {
color: #7ce7ff;
}
body[data-theme='dark'] .blog-lead-excerpt,
body[data-theme='dark'] .blog-lead-meta,
body[data-theme='dark'] .blog-featured-date,
body[data-theme='dark'] .blog-featured-excerpt,
body[data-theme='dark'] .blog-latest-date,
body[data-theme='dark'] .blog-latest-excerpt {
color: rgba(233, 239, 255, 0.68);
}
body[data-theme='dark'] .blog-lead-title a:hover,
body[data-theme='dark'] .blog-featured-title a:hover,
body[data-theme='dark'] .blog-latest-link:hover .blog-latest-title {
color: #7ce7ff;
}
body[data-theme='dark'] .blog-latest-link:hover,
body[data-theme='dark'] .blog-latest-link:focus-visible {
background: rgba(21, 172, 225, 0.12);
}
body[data-theme='dark'] .blog-lead-media,
body[data-theme='dark'] .blog-featured-media,
body[data-theme='dark'] .blog-latest-thumb {
background: rgba(255, 255, 255, 0.08);
}
body[data-theme='dark'] .blog-lead-media.is-empty,
body[data-theme='dark'] .blog-featured-media.is-empty,
body[data-theme='dark'] .blog-latest-thumb.is-empty {
background: linear-gradient(135deg, rgba(21, 172, 225, 0.22), rgba(19, 99, 198, 0.14));
}
body[data-theme='dark'] .blog-search-label {
color: #7ce7ff;
}
body[data-theme='dark'] .blog-search-field input {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
color: #e9efff;
}
body[data-theme='dark'] .blog-search-field input::placeholder,
body[data-theme='dark'] .blog-search-icon {
color: rgba(233, 239, 255, 0.68);
}
body[data-theme='dark'] .blog-search-field input:focus {
border-color: #15ace1;
box-shadow: 0 0 0 3px rgba(21, 172, 225, 0.25);
}
body[data-theme='dark'] .blog-search-summary {
border-bottom-color: rgba(255, 255, 255, 0.14);
}
body[data-theme='dark'] .blog-search-summary,
body[data-theme='dark'] .blog-search-empty {
color: rgba(233, 239, 255, 0.72);
}
/* Focus rings: #1363c6 against the dark panel is 2.8:1, under the 3:1 a focus
indicator has to meet. The cyan accent measures 11.5:1 there. */
body[data-theme='dark'] .blog-latest-link:focus-visible,
body[data-theme='dark'] .blog-rail-link:focus-visible,
body[data-theme='dark'] .blog-continue-title a:focus-visible {
outline-color: #7ce7ff;
}
/* --- Share bar ------------------------------------------------------------- */
.blog-share {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-top: 3rem;
padding-top: 1.75rem;
border-top: 1px solid rgba(20, 24, 62, 0.12);
}
.blog-share-label {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1363c6;
}
.blog-share-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.blog-share-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.9rem;
border: 1px solid rgba(20, 24, 62, 0.18);
border-radius: 999px;
background: transparent;
color: rgba(20, 24, 62, 0.8);
font-size: 0.86rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
body.blog-post-page .blog-article-layout .blog-share-btn {
text-decoration: none;
}
.blog-share-btn:hover,
.blog-share-btn:focus-visible {
border-color: #1363c6;
color: #1363c6;
background: rgba(19, 99, 198, 0.06);
}
.blog-share-btn.is-copied {
border-color: #198754;
color: #198754;
background: rgba(25, 135, 84, 0.08);
}
body[data-theme='dark'] .blog-share-btn {
border-color: rgba(255, 255, 255, 0.25);
color: rgba(233, 239, 255, 0.85);
}
body[data-theme='dark'] .blog-share-btn:hover,
body[data-theme='dark'] .blog-share-btn:focus-visible {
border-color: #15ace1;
color: #7ce7ff;
background: rgba(21, 172, 225, 0.12);
}
body[data-theme='dark'] .blog-share-label {
color: #7ce7ff;
}
/* --- Comments -------------------------------------------------------------- */
.blog-comments {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(20, 24, 62, 0.12);
max-width: 52rem;
margin-inline: auto;
}
.blog-comments-heading {
margin: 0 0 1.25rem;
font-size: 1.35rem;
font-weight: 600;
}
.blog-comments-empty,
.blog-comments-queue-note {
color: rgba(20, 24, 62, 0.68);
font-size: 0.95rem;
}
.blog-comments-queue-note {
color: #1363c6;
font-weight: 600;
}
.blog-comment-list {
margin: 0 0 2rem;
padding: 0;
list-style: none;
}
.blog-comment {
padding: 1rem 1.15rem;
border: 1px solid rgba(20, 24, 62, 0.1);
border-radius: 14px;
background: rgba(20, 24, 62, 0.02);
}
.blog-comment + .blog-comment {
margin-top: 0.85rem;
}
.blog-comment.is-pending {
border-color: rgba(255, 165, 0, 0.45);
background: rgba(255, 165, 0, 0.06);
}
.blog-comment-meta {
display: flex;
align-items: baseline;
gap: 0.65rem;
flex-wrap: wrap;
margin-bottom: 0.4rem;
}
.blog-comment-author {
font-weight: 600;
font-size: 0.95rem;
}
.blog-comment-date {
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
/* 0.6 alpha sat at exactly 4.5:1 on the comment card - no margin. */
color: rgba(20, 24, 62, 0.68);
}
.blog-comment-pending-badge {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #9a6700;
}
.blog-comment-body {
margin: 0;
font-size: 0.98rem;
line-height: 1.6;
white-space: pre-line;
overflow-wrap: break-word;
}
.blog-comment-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
}
/* Honeypot: visually removed but present for bots that fill every field. */
.blog-comment-trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.blog-comment-form {
position: relative;
max-width: 44rem;
}
body[data-theme='dark'] .blog-comments,
body[data-theme='dark'] .blog-share {
border-top-color: rgba(255, 255, 255, 0.14);
}
body[data-theme='dark'] .blog-comment {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
}
body[data-theme='dark'] .blog-comment.is-pending {
border-color: rgba(255, 193, 7, 0.4);
background: rgba(255, 193, 7, 0.08);
}
body[data-theme='dark'] .blog-comment-date,
body[data-theme='dark'] .blog-comments-empty {
color: rgba(233, 239, 255, 0.68);
}
body[data-theme='dark'] .blog-comment-pending-badge {
color: #ffd66b;
}
body[data-theme='dark'] .blog-comments-queue-note {
color: #7ce7ff;
}
/* --- Management list -------------------------------------------------------- */
.blog-manage-list {
margin: 0;
padding: 0;
list-style: none;
}
.blog-manage-item {
display: grid;
grid-template-columns: 104px minmax(0, 1fr) auto;
gap: 1.15rem;
align-items: start;
padding: 1.15rem 0;
}
.blog-manage-item + .blog-manage-item {
border-top: 1px solid rgba(20, 24, 62, 0.1);
}
.blog-manage-thumb {
display: block;
overflow: hidden;
border-radius: 12px;
aspect-ratio: 4 / 3;
background: rgba(20, 24, 62, 0.06);
}
.blog-manage-thumb.is-empty {
background: linear-gradient(135deg, rgba(19, 99, 198, 0.16), rgba(21, 172, 225, 0.1));
}
.blog-manage-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-manage-main {
min-width: 0;
}
.blog-manage-titleline {
display: flex;
align-items: baseline;
gap: 0.65rem;
flex-wrap: wrap;
}
.blog-manage-title {
font-weight: 600;
font-size: 1.05rem;
line-height: 1.35;
color: inherit;
text-decoration: none;
}
.blog-manage-title:hover,
.blog-manage-title:focus-visible {
color: #1363c6;
text-decoration: underline;
}
.blog-manage-status {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.2rem 0.55rem;
border-radius: 999px;
}
.blog-manage-status.is-published {
color: #0f5132;
background: rgba(25, 135, 84, 0.14);
}
.blog-manage-status.is-draft {
color: rgba(20, 24, 62, 0.75);
background: rgba(20, 24, 62, 0.09);
}
.blog-manage-slug {
font-family: var(--bs-font-monospace, monospace);
font-size: 0.8rem;
color: rgba(20, 24, 62, 0.6);
margin-top: 0.15rem;
overflow-wrap: anywhere;
}
.blog-manage-meta {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
font-size: 0.82rem;
color: rgba(20, 24, 62, 0.6);
margin-top: 0.25rem;
}
.blog-manage-flags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 0.55rem;
}
.blog-manage-flag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.78rem;
font-weight: 600;
padding: 0.25rem 0.6rem;
border-radius: 999px;
text-decoration: none;
}
.blog-manage-flag.is-warning {
color: #9a6700;
background: rgba(255, 165, 0, 0.12);
}
.blog-manage-flag.is-info {
color: #1363c6;
background: rgba(19, 99, 198, 0.1);
}
.blog-manage-flag.is-info:hover,
.blog-manage-flag.is-info:focus-visible {
text-decoration: underline;
color: #0f4f9e;
}
.blog-manage-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
min-width: 130px;
}
.blog-manage-actions .btn {
white-space: nowrap;
}
.blog-manage-actions form {
display: contents;
}
@media (max-width: 767.98px) {
.blog-manage-item {
grid-template-columns: 72px minmax(0, 1fr);
}
.blog-manage-actions {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
min-width: 0;
}
}
body[data-theme='dark'] .blog-manage-item + .blog-manage-item {
border-top-color: rgba(255, 255, 255, 0.12);
}
body[data-theme='dark'] .blog-manage-thumb {
background: rgba(255, 255, 255, 0.08);
}
body[data-theme='dark'] .blog-manage-title:hover,
body[data-theme='dark'] .blog-manage-title:focus-visible {
color: #7ce7ff;
}
body[data-theme='dark'] .blog-manage-status.is-published {
color: #7ee2b8;
background: rgba(25, 135, 84, 0.25);
}
body[data-theme='dark'] .blog-manage-status.is-draft {
color: rgba(233, 239, 255, 0.8);
background: rgba(255, 255, 255, 0.12);
}
body[data-theme='dark'] .blog-manage-slug,
body[data-theme='dark'] .blog-manage-meta {
color: rgba(233, 239, 255, 0.68);
}
body[data-theme='dark'] .blog-manage-flag.is-warning {
color: #ffd66b;
background: rgba(255, 193, 7, 0.14);
}
body[data-theme='dark'] .blog-manage-flag.is-info {
color: #7ce7ff;
background: rgba(21, 172, 225, 0.16);
}
body[data-theme='dark'] .blog-manage-flag.is-info:hover,
body[data-theme='dark'] .blog-manage-flag.is-info:focus-visible {
color: #a9efff;
}
/* Top share row: sits between the cover and the copy, so sharing is visible
without scrolling a multi-thousand-word article. Same buttons, no divider. */
.blog-share--top {
margin-top: 0;
margin-bottom: 2rem;
padding-top: 0;
border-top: 0;
max-width: 52rem;
margin-inline: auto;
}
/* --- Contrast repairs (measured against WCAG AA) --------------------------- */
/* The cover credit sits outside .blog-article-copy, so its link fell back to
Bootstrap's #0d6efd: exactly 4.5:1 on white, 3.6:1 on the dark panel. The
brand pair holds 5.8:1 / 11.5:1. */
body.blog-post-page .blog-post-cover figcaption a {
color: #1363c6;
}
body[data-theme='dark'].blog-post-page .blog-post-cover figcaption a {
color: #7ce7ff;
}
/* Inline code: Bootstrap's #d63384 measures exactly 4.5:1 on white and only
3.6:1 on the dark panel. These hold 6.2:1 / 9.6:1. */
body.blog-post-page .blog-article-copy code {
color: #b02a6b;
}
body[data-theme='dark'].blog-post-page .blog-article-copy code {
color: #f7b3d3;
}
/* --- Author page & byline link ---------------------------------------------- */
/* The hero byline: white like the surrounding lead, underlined so it reads as
the way to the author page. */
.blog-author-link {
color: rgba(255, 255, 255, 0.92);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.55);
}
.blog-author-link:hover,
.blog-author-link:focus-visible {
color: #ffffff;
text-decoration-color: #ffffff;
}
.blog-author-card {
display: flex;
align-items: flex-start;
gap: 2rem;
}
.blog-author-photo {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: 24px;
border: 1px solid rgba(20, 24, 62, 0.1);
flex-shrink: 0;
}
.blog-author-copy {
font-size: 1.125rem;
line-height: 1.75;
max-width: 60ch;
}
.blog-author-copy p {
margin: 0 0 1.25rem;
}
.blog-author-copy p:last-child {
margin-bottom: 0;
}
@media (max-width: 575.98px) {
.blog-author-card {
flex-direction: column;
align-items: center;
text-align: center;
}
}
body[data-theme='dark'] .blog-author-photo {
border-color: rgba(255, 255, 255, 0.15);
}
.blog-author-heading {
margin: 0 0 1rem;
font-size: 1.35rem;
font-weight: 600;
}
/* "Go deeper" callout: links a published article to its companion Calibre
Brief episode. Brand palette (deep ink + antique gold), theme-aware. */
.cb-article-callout {
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
margin: 2.5rem 0;
padding: 1.4rem 1.6rem;
border-radius: 16px;
background: linear-gradient(135deg, #0b0f14 0%, #141b25 100%);
border: 1px solid rgba(196, 163, 106, 0.5);
color: #f3eee3;
/* Never sit beside a floated body image. */
clear: both;
}
.cb-article-callout-mark {
flex: 0 0 auto;
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(196, 163, 106, 0.14);
border: 1px solid rgba(196, 163, 106, 0.55);
color: #c4a36a;
font-size: 1.3rem;
}
.cb-article-callout-body {
flex: 1 1 260px;
min-width: 0;
}
.cb-article-callout-kicker {
margin: 0 0 0.2rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c4a36a;
}
.cb-article-callout-title {
margin: 0 0 0.25rem;
font-size: 1.18rem;
font-weight: 700;
line-height: 1.25;
color: #f3eee3;
}
.cb-article-callout-text {
margin: 0;
font-size: 0.92rem;
color: rgba(243, 238, 227, 0.72);
}
.cb-article-callout-link {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding: 0.6rem 1.25rem;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
background: #c4a36a;
color: #14181e;
border: 1px solid #c4a36a;
transition: background-color 0.15s ease, color 0.15s ease;
}
.cb-article-callout-link:hover,
.cb-article-callout-link:focus-visible {
background: transparent;
color: #f3eee3;
}
.cb-article-callout-link:focus-visible {
outline: 3px solid #c4a36a;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.cb-article-callout-link {
transition: none;
}
}