/* ---------------------------------------------------------------
   blog-article.css — reusable article template

   Layout follows the two-column editorial pattern:
     breadcrumb -> tags + read time -> title -> rule -> byline
     -> [ main column: cover image + body | sidebar: author + more ]
     -> recommended posts

   Everything is drawn with WriteBest design-system tokens:
     page      surface-050 #f9f9f9      card  surface-000 #fff
     ink       ink-900 #000 / ink-700 #333 / ink-600 #434343 / ink-400 #757575
     rule      surface-200 #e5e5e5      chip  surface-150 #f1f1f1
     accent    brand-600 #c43030        radius radius-lg 16px / pill 999px
     type      h1 40/48, h3 24/32, body 16/26, caption 13/18
     space     4=16 5=24 6=32 7=48

   New post: copy blog-post-<slug>.php, swap breadcrumb label, tags,
   title, byline, cover image, body, sidebar list and recommended cards.
   No CSS changes needed.
   --------------------------------------------------------------- */

body { background: #f9f9f9; }

.article-page {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
    font-family: 'Geomanist_r', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    /* clears the fixed 100px site header (opaque on desktop, transparent on mobile) */
    padding-top: 132px;
}

/* ---------- head ---------- */
.article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    font-size: 13px;
    line-height: 18px;
    color: #757575;
}
.article-breadcrumb a { color: #757575; text-decoration: none; }
.article-breadcrumb a:hover { color: #c43030; }
.article-breadcrumb .sep { color: #a3a3a3; }

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.article-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #333333;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
}

/* Per-topic pastel tags — same palette and formula as .post-tag--* in
   blog-test.css, so a topic reads the same colour on the listing grid and
   on its own article page. Text stays the shared dark grey; only the
   background changes per topic. Keep both files in sync if this list grows. */
.article-tag--materials      { background: hsl(15, 65%, 92%);  color: #333333; }
.article-tag--products       { background: hsl(45, 65%, 92%);  color: #333333; }
.article-tag--inspiration    { background: hsl(32, 75%, 89%);  color: #333333; }
.article-tag--sustainability { background: hsl(120, 50%, 90%); color: #333333; }
.article-tag--healthcare     { background: hsl(165, 60%, 91%); color: #333333; }
.article-tag--education      { background: hsl(190, 60%, 91%); color: #333333; }
.article-tag--events         { background: hsl(215, 65%, 93%); color: #333333; }
.article-tag--workspace      { background: hsl(235, 60%, 94%); color: #333333; }
.article-tag--customisation  { background: hsl(270, 55%, 94%); color: #333333; }
.article-tag--public-spaces  { background: hsl(300, 50%, 94%); color: #333333; }
.article-tag--design         { background: hsl(320, 60%, 94%); color: #333333; }
.article-tag--retail         { background: hsl(335, 65%, 94%); color: #333333; }

.article-readtime { font-size: 13px; line-height: 18px; color: #757575; white-space: nowrap; }
.article-readtime .article-dot { margin-right: 6px; color: #a3a3a3; }

.article-title {
    margin: 0 0 32px;
    max-width: 34ch;
    font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 44px;
    line-height: 54px;
    font-weight: 500;
    color: #000000;
}

.article-byline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0 32px;
    border-top: 1px solid #e5e5e5;
    font-size: 14px;
    line-height: 21px;
    color: #757575;
}
.article-byline img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; background: #f1f1f1; display: block; flex: 0 0 auto; }
.article-author { color: #333333; }
.article-byline .article-dot { color: #a3a3a3; }

/* ---------- two-column body ---------- */
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 40px;
    align-items: start;
}

.article-cover { width: 100%; height: auto; display: block; border-radius: 16px; margin-bottom: 32px; }

.article-body { color: #333333; font-size: 16px; line-height: 27px; }
.article-body p { margin: 0 0 24px; }

/* Ordered/unordered lists inside an article body — same rhythm as paragraphs
   (24px after the whole list), tighter spacing between items, and the lead
   phrase in each item can be wrapped in <strong> for a scannable label. */
.article-body .article-list { margin: 0 0 24px; padding-left: 20px; }
.article-body ol.article-list li { list-style-type: decimal; }
.article-body ul.article-list li { list-style-type: disc; }
.article-body .article-list li { margin-bottom: 12px; }
.article-body .article-list li:last-child { margin-bottom: 0; }
.article-body .article-list strong { color: #000000; }

/* Numbered process steps with an illustration per step — an alternative to
   .article-list for posts that already have their own step icons (e.g. a
   "how it works" walkthrough), so each step reads at a glance. */
.article-steps { display: flex; flex-direction: column; gap: 32px; margin: 0 0 24px; }
.article-step { display: flex; align-items: center; gap: 24px; }
.article-step img { width: 140px; height: 140px; object-fit: contain; flex: 0 0 auto; }
.article-step-num { font-size: 13px; font-weight: 500; color: #c43030; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
.article-step-title { font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 26px; font-weight: 500; color: #000000; margin: 0 0 4px; }
.article-step p { margin: 0; }
@media (max-width: 480px) {
    .article-step { align-items: flex-start; gap: 16px; }
    .article-step img { width: 96px; height: 96px; }
}
.article-lead { font-size: 18px; line-height: 30px; color: #434343; }

.article-body h2 {
    font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #000000;
    margin: 40px 0 16px;
}

.article-body a { display: inline; color: #c43030; }
.article-body strong { color: #000000; }

/* key/value panel — event details, specs, project facts */
.article-facts {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin: 0 0 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px 24px;
}
.article-fact dt { font-size: 13px; line-height: 18px; color: #757575; margin-bottom: 2px; }
.article-fact dd { margin: 0; font-size: 15px; line-height: 22px; color: #333333; }

.article-quote {
    margin: 32px 0;
    padding: 0 0 0 24px;
    border-left: 3px solid #c43030;
    font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 30px;
    color: #000000;
}

.article-figure { margin: 32px 0; }
.article-figure img { width: 100%; height: auto; display: block; border-radius: 16px; }
.article-figure figcaption { margin-top: 12px; font-size: 13px; line-height: 18px; color: #757575; }

/* ---------- sidebar ---------- */
.article-aside { position: sticky; top: 124px; display: flex; flex-direction: column; gap: 24px; }

.aside-card { background: #ffffff; border-radius: 16px; padding: 32px 24px; }

.author-card { text-align: center; }
.author-card img { width: 120px; height: 120px; border-radius: 999px; object-fit: cover; margin: 0 auto 16px; display: block; background: #f1f1f1; }
.author-card .name { font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 20px; line-height: 28px; color: #000000; margin: 0 0 4px; }
.author-card .role { font-size: 14px; line-height: 21px; color: #757575; margin: 0 0 12px; }
.author-card .bio { font-size: 14px; line-height: 22px; color: #434343; margin: 0 0 20px; text-align: center; }
.author-links { display: flex; justify-content: center; gap: 8px; }
.author-links a {
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 999px;
    background: #f1f1f1; color: #333333;
    font-size: 13px; line-height: 18px; text-decoration: none;
    transition: background-color .15s ease;
}
.author-links a:hover { background: #e5e5e5; color: #333333; }

.aside-title { font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #000000; margin: 0 0 20px; }

.aside-post { display: flex; gap: 12px; text-decoration: none; margin-bottom: 20px; }
.aside-post:last-child { margin-bottom: 0; }
.aside-post img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; display: block; }
/* these are spans inside the link, so they need to be block or the title
   and the date render on the same line */
.aside-post .t { display: block; font-size: 15px; line-height: 21px; color: #000000; margin: 0 0 4px; }
.aside-post .m { display: block; font-size: 13px; line-height: 18px; color: #757575; }
.aside-post:hover .t { color: #c43030; }

/* ---------- recommended ---------- */
.article-recommended { max-width: 1140px; margin: 64px auto 0; padding: 0 24px 80px; }
.article-recommended > h2 { font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 32px; line-height: 40px; font-weight: 500; color: #000000; margin: 0 0 32px; }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }

.rec-card { background: #ffffff; border-radius: 16px; padding: 16px; text-decoration: none; display: block; transition: transform .25s ease, box-shadow .25s ease; }
.rec-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 16px; }
.rec-card .t { font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 18px; line-height: 26px; color: #000000; margin: 0 0 8px; }
.rec-card .m { font-size: 13px; line-height: 18px; color: #757575; }

@media (hover: hover) {
    .rec-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
}

/* ---------- mobile ---------- */
@media (max-width: 991px) {
    .article-layout { grid-template-columns: 1fr; gap: 40px; }
    .article-aside { position: static; }
}

@media (max-width: 767px) {
    .article-page { padding: 110px 16px 0; }
    .article-title { font-size: 30px; line-height: 38px; max-width: none; margin-bottom: 24px; }
    .article-body h2 { font-size: 21px; line-height: 28px; margin-top: 32px; }
    .article-lead { font-size: 17px; line-height: 28px; }
    .article-recommended { margin-top: 48px; padding: 0 16px 56px; }
    .article-recommended > h2 { font-size: 24px; line-height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .rec-card { transition: none; }
    .rec-card:hover { transform: none; }
}

/* This page reuses the site's original "Features + Benefits" tab component
   verbatim (see e3.php). Its base/inactive button never had a border-radius
   in main.css — only :hover and the active state do — so inactive tabs
   render as sharp rectangles next to the pill-shaped active one. Rounding
   them to match here, scoped to this component only. */
.e3_benefits_btn { border-radius: 25px; }

/* "High resistance" icon row from e3.php: the original markup is 6x
   Bootstrap col-md-2 columns sized for a ~1140px full-width container.
   Squeezed into the narrower ~700px article-body column they overflow/wrap
   awkwardly at native 110x110px icon size, so this reflows them into a
   centered, wrapping grid with smaller icons — scoped to this block only. */
.e3-resistance-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 18px;
    width: 100%;
}
.e3-resistance-grid > div {
    width: 96px;
    padding: 0;
    float: none;
}
.e3-resistance-grid img {
    width: 64px;
    height: 64px;
}
.e3-resistance-grid p {
    font-size: 12px;
    line-height: 1.3;
    margin-top: 8px;
}
@media (max-width: 480px) {
    .e3-resistance-grid { gap: 18px 12px; }
    .e3-resistance-grid > div { width: 78px; }
    .e3-resistance-grid img { width: 52px; height: 52px; }
}

/* e3.php's verbatim sections (Features+Benefits tabs, icon rows) still carry
   their original full-width Bootstrap .container > .row wrapper, sized for a
   ~1140-1170px page. Inside the narrower ~700px article-body column, .container
   keeps its fixed breakpoint width and auto-centering margin, which overflows
   and mispositions its content sideways. Make both fluid here so the nested
   content just fills the column instead. */
.article-body .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
.article-body .row {
    width: 100%;
    margin: 0;
}

/* e3.php's "Features + Benefits" card content (.blog-card-e3) has a fixed
   700px width and a .media image half fixed at 350x400px in main.css, sized
   for the original ~640px-wide content column. Squeezed into the article's
   narrower ~470px content column, it overflowed sideways and, being
   position:relative, painted over the tab buttons and text next to it.
   Make the card and its two halves fluid/flex here instead. */
.article-body .blog-card-e3 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.article-body .blog-card-e3 .media {
    width: 45%;
    height: 220px;
    float: none;
}
.article-body .blog-card-e3 .card-body-e3 {
    width: 55%;
    float: none;
    padding: 20px;
}
@media (max-width: 640px) {
    .article-body .blog-card-e3 .media,
    .article-body .blog-card-e3 .card-body-e3 {
        width: 100%;
    }
    .article-body .blog-card-e3 .media {
        height: 200px;
    }
}

/* The Features + Benefits tab list (.e3-benefits-div > .e3_benefits_img_* >
   button.e3_benefits_btn) is a chain of fixed-pixel widths (~400px wrapper,
   280px button) sized for the original wide sidebar column. In the article's
   narrower col-md-4 tab column (~200px content width) the buttons overflowed
   past their column into the card content next to them. Make the wrapper
   divs fluid and size the button relative to that, keeping the existing
   55px left margin that clears the icon. */
.article-body .e3-benefits-div,
.article-body [class*="e3_benefits_img_"] {
    width: 100%;
    max-width: 100%;
}
.article-body .e3_benefits_btn {
    width: calc(100% - 55px);
    max-width: calc(100% - 55px);
    box-sizing: border-box;
}

/* The two "Features" icon strips use different sizing: .e3-features-div
   (5 icons) is a fixed 220px per item from main.css (designed for the wide
   page, wraps to 2 rows in the narrow article column), while
   .e3-features-div2 (6 icons) is already percentage-based (16.667% each) and
   stays in one row. Make the 5-icon strip percentage-based too so both
   render as a single row, and shrink the caption text to fit better. */
.article-body .e3-features-div {
    width: 20%;
    box-sizing: border-box;
}
.article-body .e3-features-div p,
.article-body .e3-features-div2 p {
    font-size: 13px;
    line-height: 1.3;
}
/* ---------- comparison tables (e.g. blog-post-whiteboard-surfaces.php): scroll sideways on narrow screens, first column stays put ---------- */
.article-table-wrap { margin: 0 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #ececec; border-radius: 16px; background: #ffffff; }
.article-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; line-height: 18px; }
.article-table th, .article-table td { padding: 11px 10px; border-bottom: 1px solid #f0f0f0; text-align: center; vertical-align: middle; }
.article-table tbody tr:last-child th, .article-table tbody tr:last-child td { border-bottom: 0; }
.article-table thead th { font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 500; color: #000000; background: #f9f9f9; }
.article-table thead th span { display: block; font-family: 'Geomanist_r', 'Poppins', sans-serif; font-weight: normal; font-size: 12px; color: #757575; }
.article-table tbody th { text-align: left; font-weight: normal; color: #434343; min-width: 120px; }
.article-table th:first-child { position: sticky; left: 0; z-index: 1; background: #ffffff; }
.article-table thead th:first-child { background: #f9f9f9; }
.article-table td { color: #c43030; letter-spacing: 1px; white-space: nowrap; }
.article-table td.na { color: #a3a3a3; letter-spacing: 0; }
.article-table td.yes { color: #2e9e5b; font-size: 16px; }
.article-table td.no { color: #c4c4c4; font-size: 15px; }
.article-table--size { min-width: 560px; }
.article-table--size td { color: #333333; letter-spacing: 0; white-space: normal; }
.article-note { margin: 0 0 24px !important; font-size: 13px; color: #757575; }
.article-body h3 { font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 19px; line-height: 26px; font-weight: 500; color: #000000; margin: 32px 0 10px; }
.article-body em { font-style: normal; color: #000000; font-weight: 500; }

/* four short facts in one row (each surface in blog-post-whiteboard-surfaces.php) */
.article-facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .article-facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a star reached by only one finish of a surface (Ceramic Steel low / high gloss) */
.article-table td .opt { opacity: .3; }

/* ===== Cards: one radius site-wide (8px) ===== */
.article-facts, .aside-card, .rec-card, .wb-short-answer, .article-table-wrap { border-radius: 8px !important; }
.rec-card { overflow: hidden; }
.rec-card img { border-radius: 0 !important; }

/* ===== Blog spacing (2026-10-07): room between paragraphs and sections ===== */
.article-body {
    --gap-line: 28px;        /* line height of body copy */
    --gap-p: 28px;           /* between paragraphs */
    --gap-block: 48px;       /* around figures, tables, quotes, fact boxes, answer box */
    --gap-h2: 80px;          /* above a section heading */
    --gap-h3: 48px;         /* above a sub-heading */
    line-height: var(--gap-line);
}
.article-body p { margin: 0 0 var(--gap-p); }
.article-lead { margin-bottom: 36px !important; line-height: 32px; }
.article-body h2 { margin: var(--gap-h2) 0 20px; }
.article-body > h2:first-child, .article-body > :first-child { margin-top: 0; }
.article-body h3 { margin: var(--gap-h3) 0 12px; }
.article-body h2 + h3 { margin-top: 28px; }
.article-body .article-list { margin: 0 0 32px; }
.article-body .article-list li { margin-bottom: 16px; }
.article-figure { margin: var(--gap-block) 0; }
.article-figure figcaption { margin-top: 16px; }
.article-body .wb-short-answer { margin: 0 0 var(--gap-block); }
.article-body .article-facts { margin: 40px 0 var(--gap-block); }
.article-body .article-table-wrap { margin: 40px 0 16px; }
.article-note { margin: 0 0 var(--gap-block) !important; }
.article-quote { margin: var(--gap-block) 0; }
.article-steps { gap: 40px; margin: 0 0 var(--gap-block); }
.article-cover { margin-bottom: 48px; }
@media (max-width: 767px) {
    .article-body { --gap-line: 26px; --gap-p: 24px; --gap-block: 36px; --gap-h2: 56px; --gap-h3: 36px; }
    .article-lead { margin-bottom: 28px !important; line-height: 28px; }
    .article-body h2 { margin-bottom: 16px; }
    .article-cover { margin-bottom: 32px; }
}

/* ===== Blog headings + surface titles (2026-10-07) ===== */
.article-body h2 { font-size: 32px; line-height: 40px; }
.article-body h3.article-surface-title { font-size: 28px; line-height: 36px; margin-top: 64px; margin-bottom: 16px; }
.article-body h2 + h3.article-surface-title { margin-top: 32px; }
@media (max-width: 767px) {
    .article-body h2 { font-size: 26px; line-height: 34px; }
    .article-body h3.article-surface-title { font-size: 22px; line-height: 30px; margin-top: 48px; }
}

/* =====================================================================================
   ARTICLE TABS  ("Features + Benefits": click a topic, its details open)
   Markup (copy from e3-test.php):
     <div class="article-tabs" data-tabs>
       <div class="at-item">
         <button type="button" class="at-tab is-active" aria-selected="true"><img src="icon.png" alt=""><span>Topic</span></button>
         <div class="at-panel is-active"><img class="at-photo" src="photo.jpg" alt=""><div class="at-text"><ul class="article-list"><li>..</li></ul></div></div>
       </div>
       ... more .at-item ...
     </div>
   Needs js/article-tabs.js. Desktop: topics on the left, the open one on the right. Phone: an accordion.
   Without JavaScript every topic simply stays open, one under the other.
   ARTICLE ICONS  (a row of colourful icons with a label under each):
     <div class="article-icons"><div class="article-icon"><img src="icon.png" alt=""><span>Label</span></div> ...</div>
   ===================================================================================== */
.article-tabs { display: block; margin: 0 0 var(--gap-block, 48px); }
.article-tabs .at-item { display: block; margin: 0 0 12px; }
.article-tabs .at-tab { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 12px 16px; border: 0; border-radius: 8px; background: #fff; text-align: left; font-family: 'Geomanist', 'Poppins', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #000; cursor: pointer; box-shadow: none; transition: background .2s, color .2s; }
.article-tabs .at-tab img { width: 32px; height: 32px; flex: none; object-fit: contain; }
.article-tabs .at-tab:hover { background: #f1f1f1; }
.article-tabs .at-tab:focus-visible { outline: 2px solid #c43030; outline-offset: 2px; }
.article-tabs .at-panel { display: flex; gap: 24px; margin: 8px 0 0; padding: 24px; border-radius: 16px; background: #fff; }
.article-tabs .at-photo { width: 190px; height: 238px; flex: none; border-radius: 8px; object-fit: cover; }
.article-tabs .at-text { min-width: 0; align-self: center; }
.article-tabs .at-text .article-list { margin: 0; }
.article-tabs .at-text .article-list li:last-child { margin-bottom: 0; }

/* with JavaScript: one topic open at a time */
.article-tabs.is-ready .at-panel { display: none; }
.article-tabs.is-ready .at-panel.is-active { display: flex; }
.article-tabs.is-ready .at-tab[aria-selected="true"] { background: #fff; color: #c43030; box-shadow: inset 3px 0 0 #c43030; }
@media (min-width: 768px) {
    .article-tabs.is-ready { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 24px; align-items: start; }
    .article-tabs.is-ready .at-item { display: contents; }
    .article-tabs.is-ready .at-tab { grid-column: 1; margin: 0 0 8px; }
    .article-tabs.is-ready .at-panel { grid-column: 2; grid-row: 1 / span 12; margin: 0; }
}
@media (max-width: 767px) {
    .article-tabs .at-panel { flex-direction: column; padding: 18px; }
    .article-tabs .at-photo { width: 100%; height: 200px; }
}

.article-icons { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 24px 12px; margin: 0 0 var(--gap-block, 48px); padding: 24px 16px; border-radius: 16px; background: #fff; }
.article-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.article-icon img { width: 56px; height: 56px; object-fit: contain; }
.article-icon span { font-size: 14px; line-height: 20px; color: #333; }
.article-icons--lg .article-icon img { width: 64px; height: 64px; }

/* ===== Photos in blog posts have square corners (2026-10-08); cards keep the site's 8px ===== */
.article-cover, .article-figure img, .aside-post img, .article-tabs .at-photo { border-radius: 0 !important; }
.article-tabs .at-panel, .article-icons { border-radius: 8px; }