/*
==================================================================
BLOG — index (blogs.html) + article pages
Shared by the card listing and every individual post, so a change
to the article shell lands on all 8 posts at once.

Prefixes:  .tt-bl-*  listing / cards
           .tt-ar-*  article page (hero, prose body, TOC, related)
==================================================================
*/

/* ==================================================================
   1. LISTING — hero, filters, card grid
   ================================================================== */
.tt-bl-hero {
  max-width: 60rem;
  margin-inline: auto;
}
.tt-bl-hero .tt-hero-paragraph {
  max-width: 44rem;
  margin-inline: auto;
}

/* ---------- Category filter chips ---------- */
.tt-bl-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tt-bl-filter {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-family: var(--tt-font-primary);
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  color: var(--tt-dark);
  cursor: pointer;
  transition: var(--tt-transition-fast);
}
.tt-bl-filter:hover { color: var(--tt-primary); border-color: rgba(var(--tt-primary-rgb), 0.4); }
.tt-bl-filter.is-active {
  background: var(--tt-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--tt-primary-rgb), 0.75);
}

/* Tinted wash behind the grid. White cards need a background that is NOT
   also white, or the border does all the work on its own. */
.tt-bl-section {
  background: rgba(240, 241, 244, 0.9);
}

/* ---------- Card grid ---------- */
.tt-bl-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* Opaque white, not the site's usual translucent glass. On a near-white page
   a semi-transparent card with a white-alpha border has no readable edge -
   the cards bled into the background. Solid fill + a real border + a grounded
   shadow is what makes each card read as a discrete object. */
.tt-bl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tt-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
              0 10px 26px -14px rgba(16, 24, 40, 0.22);
  overflow: hidden;
  text-decoration: none;
  transition: var(--tt-transition-standard);
}
.tt-bl-card:hover {
  border-color: rgba(var(--tt-primary-rgb), 0.45);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.05),
              0 20px 40px -12px rgba(var(--tt-primary-rgb), 0.28);
  transform: translateY(-6px);
}

/* The feature images are DESIGNED CARDS with headline text baked into them,
   roughly square, each with its own frame and padding. `cover` would crop the
   titles off, so these are fitted with `contain` on a near-square box - the
   graphic is shown whole, at the size it was drawn to be read at. If these are
   ever replaced with plain photographs, switch back to cover + 16/10. */
.tt-bl-card-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #fff;
  /* Hairline so the artwork and the text block stay visibly separate. */
  border-bottom: 1px solid var(--tt-border);
}
.tt-bl-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tt-bl-card:hover .tt-bl-card-media img { transform: scale(1.06); }

.tt-bl-tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  background: var(--tt-gradient-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tt-bl-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.1rem 1.25rem 1.35rem;
}
.tt-bl-card-title {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: var(--tt-fs-h4);
  font-weight: 700;
  line-height: 1.35;
  color: var(--tt-dark);
  margin: 0 0 0.55rem;
}
.tt-bl-card:hover .tt-bl-card-title { color: var(--tt-primary); }
.tt-bl-card-excerpt {
  font-size: var(--tt-fs-body-sm);
  line-height: 1.65;
  color: var(--tt-muted);
  margin: 0 0 1.1rem;
}
.tt-bl-card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--tt-muted);
}
.tt-bl-card-meta .tt-bl-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* ---------- What makes `hidden` actually hide ----------
   `hidden` works through the UA stylesheet's `[hidden] { display: none }`,
   and ANY author `display` declaration beats the UA sheet no matter how
   weak its selector. .tt-bl-card sets `display: flex`, so `card.hidden =
   true` was doing nothing at all and the category filter above has been
   hiding no cards since it shipped. The pager hides the same way and
   would have inherited the same fault.

   Both selectors are (0,2,0) against their own (0,1,0) base rule, so
   they win on specificity and need no !important.

   Any future rule that sets `display` on a card or on the pager needs an
   [hidden] partner here, or it silently breaks both features again. */
.tt-bl-card[hidden],
.tt-bl-pagination[hidden] {
  display: none;
}

/* ---------- Pagination ----------
   Built by initListing() in blog.js, not present in blogs.html — with
   JS off every card shows and no pager is created, so there is never a
   control here that does nothing.

   Deliberately the same pill vocabulary as .tt-bl-filter above: both
   rows sit on the same tinted wash a few hundred pixels apart, and two
   different button treatments would read as two unrelated mechanisms
   rather than "narrow the list" and "move through the list". If you
   restyle the chips, restyle these with them. */
.tt-bl-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.tt-bl-page {
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-family: var(--tt-font-primary);
  font-size: var(--tt-fs-body-sm);
  font-weight: 600;
  color: var(--tt-dark);
  cursor: pointer;
  transition: var(--tt-transition-fast);
}

.tt-bl-page:hover:not(:disabled) {
  color: var(--tt-primary);
  border-color: rgba(var(--tt-primary-rgb), 0.4);
}

.tt-bl-page:focus-visible {
  outline: 2px solid var(--tt-primary);
  outline-offset: 2px;
}

.tt-bl-page.is-active {
  background: var(--tt-gradient-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--tt-primary-rgb), 0.75);
  cursor: default;
}

/* Kept in the row rather than hidden at the ends: a prev/next that
   vanishes on page 1 shifts every other control sideways, and the row
   is centred so the whole thing jumps. Dimmed and inert instead. */
.tt-bl-page:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.tt-bl-page-step {
  min-width: 2.6rem;
  padding: 0;
  font-size: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
  .tt-bl-page { transition: none; }
}

.tt-bl-empty {
  display: none;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tt-muted);
}
.tt-bl-empty.is-visible { display: block; }

/* ==================================================================
   2. ARTICLE — reading progress
   ================================================================== */
.tt-ar-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 1100;
  background: var(--tt-gradient-primary);
  transition: width 0.1s linear;
}

/* ---------- Article hero ---------- */
.tt-ar-hero {
  position: relative;
  padding: calc(var(--tt-header-height, 96px) + var(--tt-fold-gap)) 0 0;
  overflow: hidden;
}
.tt-ar-hero::before {
  content: '';
  position: absolute;
  top: -180px; right: -160px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
}
.tt-ar-hero-inner {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}

/* Breadcrumb. Contained in a pill rather than left as a loose line of text
   above the title - centered bare text reads as a stray caption. Semantic
   <nav><ol> so assistive tech announces it as a trail, and the separators are
   CSS-drawn chevrons so nothing depends on an icon font loading. */
.tt-ar-crumbs {
  display: flex;
  justify-content: center;
  margin-bottom: 1.15rem;
}
.tt-ar-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.45rem;
  background: #fff;
  border: 1px solid var(--tt-border);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1;
}
.tt-ar-crumbs li {
  display: flex;
  align-items: center;
}

/* CSS chevron between items */
.tt-ar-crumbs li + li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin: 0 0.3rem;
  border-top: 1.5px solid rgba(var(--tt-dark-rgb), 0.28);
  border-right: 1.5px solid rgba(var(--tt-dark-rgb), 0.28);
  transform: rotate(45deg);
}

.tt-ar-crumbs a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  color: var(--tt-muted);
  text-decoration: none;
  transition: var(--tt-transition-fast);
}
.tt-ar-crumbs a:hover,
.tt-ar-crumbs a:focus-visible {
  color: var(--tt-primary);
  background: rgba(var(--tt-primary-rgb), 0.08);
}
.tt-ar-crumbs a i { font-size: 0.72rem; }

.tt-ar-crumb-current {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(var(--tt-primary-rgb), 0.1);
  color: var(--tt-primary);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tt-ar-tag {
  display: inline-block;
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: rgba(var(--tt-primary-rgb), 0.1);
  border: 1px solid rgba(var(--tt-primary-rgb), 0.22);
  color: var(--tt-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.tt-ar-title {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-weight: 800;
  font-size: var(--tt-fs-h1);
  line-height: 1.14;
  color: var(--tt-dark);
  margin-bottom: 1rem;
}
.tt-ar-standfirst {
  font-size: var(--tt-fs-body-lg);
  line-height: 1.7;
  color: var(--tt-muted);
  max-width: 42rem;
  margin: 0 auto 1.6rem;
}

.tt-ar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: var(--tt-fs-body-sm);
  color: var(--tt-muted);
}
.tt-ar-meta .tt-bl-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.6; }

/* Same reasoning as the card media: the feature graphic carries its own
   headline and frame, so it is presented whole rather than cropped to a
   letterbox. No border or shadow either - the artwork already has a frame,
   and boxing it would frame the empty space around it. */
.tt-ar-cover {
  display: block;
  width: 100%;
  max-width: 38rem;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  height: auto;
  border-radius: 16px;
}

/* ==================================================================
   3. ARTICLE LAYOUT — body + sticky sidebar
   ================================================================== */
/* 71rem rather than 68: the reading column gained 2rem of width and a left
   indent (see .tt-ar-body below), and without the extra room here the grid
   would take that space out of the body column instead of adding it - which
   would have made the line length shorter, not longer. The .container at xl is
   82.5rem, so this still sits comfortably inside it. */
.tt-ar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  max-width: 71rem;
  margin-inline: auto;
}

/* ---------- Table of contents (built by blog.js from the h2s) ---------- */
.tt-ar-aside {
  position: sticky;
  top: calc(var(--tt-header-height, 96px) + 1.5rem);
}
/* Opaque for the same reason as the cards - a translucent panel on a
   near-white page has no readable edge. */
.tt-ar-toc {
  background: #fff;
  border: 1px solid var(--tt-border);
  border-radius: 16px;
  padding: 1.25rem 1.1rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
              0 10px 26px -14px rgba(16, 24, 40, 0.22);
}
.tt-ar-toc-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tt-muted);
  margin: 0 0 0.8rem;
}
.tt-ar-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.tt-ar-toc li { counter-increment: toc; }
.tt-ar-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 1.6rem;
  position: relative;
  font-size: var(--tt-fs-body-sm);
  line-height: 1.45;
  color: var(--tt-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: var(--tt-transition-fast);
}
.tt-ar-toc a::before {
  content: counter(toc);
  position: absolute;
  left: 0.5rem;
  font-weight: 700;
  color: rgba(var(--tt-primary-rgb), 0.5);
}
.tt-ar-toc a:hover { color: var(--tt-dark); }
.tt-ar-toc a.is-current {
  color: var(--tt-primary);
  font-weight: 600;
  border-left-color: var(--tt-primary);
}

/* ---------- Share rail ---------- */
.tt-ar-share {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0 0.35rem;
}
.tt-ar-share-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tt-muted);
  margin-right: 0.15rem;
}
.tt-ar-share a,
.tt-ar-share button {
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border: 1px solid var(--tt-border);
  border-radius: 50%;
  background: #fff;
  color: var(--tt-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: var(--tt-transition-fast);
}
.tt-ar-share a:hover,
.tt-ar-share button:hover {
  background: var(--tt-primary);
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
}

/* ==================================================================
   4. ARTICLE PROSE
   The measure is deliberately capped - long lines are the fastest way
   to make a long-form page feel like work to read.
   ================================================================== */
/* Type scale raised 2026-08-24: 1.06rem (~17px) was too small for long-form
   reading and the column sat flush against the container's left edge.
   1.15rem (~18.5px) in a 46rem measure lands at roughly 72-76 characters per
   line, which is the comfortable range for body text.

   These are deliberately hard-coded rather than taken from the --tt-fs-*
   tokens. The tokens are shared by all 77 pages; the reading column is the one
   place on the site that wants a larger scale than everything else, so pulling
   it out of the token system is what keeps this change local to articles.

   margin-inline-start is the left indent, and it has to be MARGIN not padding.
   The site is box-sizing: border-box, so padding would come out of the 46rem
   max-width and leave a 43.5rem measure - narrower than the 44rem we started
   with, which is the exact opposite of the intent. Margin sits outside the
   max-width, so the measure stays a true 46rem and the column moves right.

   It is a clamp so the indent disappears on narrow viewports, and it is reset
   outright in the <=991.98px block below, where the aside moves above the body
   and the column goes full width. */
.tt-ar-body {
  max-width: 46rem;
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--tt-secondary);
  margin-inline-start: clamp(0rem, 2.5vw, 2.5rem);
}
.tt-ar-body > * + * { margin-top: 1.4rem; }

.tt-ar-body h2 {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--tt-dark);
  margin-top: 2.8rem;
  scroll-margin-top: calc(var(--tt-header-height, 96px) + 1.5rem);
}
.tt-ar-body h3 {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: clamp(1.12rem, 1.6vw, 1.3rem);
  font-weight: 700;
  color: var(--tt-dark);
  margin-top: 2rem;
}

.tt-ar-body a { color: var(--tt-primary); text-decoration: underline; text-underline-offset: 2px; }
.tt-ar-body a:hover { color: var(--tt-primary-hover); }
.tt-ar-body strong { color: var(--tt-dark); font-weight: 700; }

.tt-ar-body ul,
.tt-ar-body ol { padding-left: 1.3rem; }
.tt-ar-body li + li { margin-top: 0.5rem; }
.tt-ar-body ul { list-style: none; padding-left: 0; }
.tt-ar-body ul > li {
  position: relative;
  padding-left: 1.6rem;
}
.tt-ar-body ul > li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tt-primary);
}

/* Lead paragraph - first para after a h2 gets a touch more presence.
   Scaled with the body (1.14 -> 1.24rem) to keep the same relative step; if it
   had stayed put it would now read as smaller than the paragraphs under it. */
.tt-ar-body .tt-ar-lead {
  font-size: 1.24rem;
  color: var(--tt-dark);
}

/* Pull quote */
.tt-ar-body blockquote {
  margin: 2.2rem 0;
  padding: 0.2rem 0 0.2rem 1.5rem;
  border-left: 3px solid var(--tt-primary);
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--tt-dark);
}
.tt-ar-body blockquote p { margin: 0; }
.tt-ar-body blockquote cite {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--tt-font-primary);
  font-size: 0.9rem;
  font-weight: 500;
  font-style: normal;
  color: var(--tt-muted);
}

/* Key-takeaway callout */
.tt-ar-callout {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
  background: rgba(var(--tt-primary-rgb), 0.06);
  border: 1px solid rgba(var(--tt-primary-rgb), 0.2);
}
.tt-ar-callout-icon {
  flex: 0 0 auto;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tt-gradient-primary);
  color: #fff;
  font-size: 0.9rem;
}
.tt-ar-callout-body { flex: 1 1 auto; }
.tt-ar-callout-title {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-dark);
  margin: 0 0 0.35rem;
}
.tt-ar-callout p { margin: 0; font-size: var(--tt-fs-body-sm); line-height: 1.7; }

/* The callout was built for a single <p>. The "short version" summary at the
   top of an article needs a list in the same box, and without this the items
   inherit the 1.15rem body size and dwarf the callout title.

   This is the only new rule the skimmability pass added. The tt-hp-* kit was
   checked first, per hard rule 4: .tt-hp-pill-grid, .tt-hp-steps and
   .tt-hp-grid-* are all fixed 3-4 column grids built for full-width sections,
   and they carry glass backgrounds that were deliberately dropped from this
   page's cards because glass has no readable edge on a near-white ground.
   None of them survives being dropped into a 46rem reading column. */
.tt-ar-callout ul {
  margin: 0.5rem 0 0;
  font-size: var(--tt-fs-body-sm);
  line-height: 1.7;
}
.tt-ar-callout ul > li { padding-left: 1.35rem; }
.tt-ar-callout ul > li::before { top: 0.62em; width: 6px; height: 6px; }
.tt-ar-callout ul > li + li { margin-top: 0.4rem; }

/* Figures */
.tt-ar-body figure { margin: 2.2rem 0; }
.tt-ar-body figure img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--tt-border);
  box-shadow: var(--tt-shadow-lg);
}
.tt-ar-body figcaption {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--tt-muted);
  text-align: center;
}

/* Tables scroll on their own rather than pushing the page sideways */
.tt-ar-table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--tt-border);
}
.tt-ar-body table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--tt-fs-body-sm);
}
.tt-ar-body th,
.tt-ar-body td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--tt-border);
}
.tt-ar-body thead th {
  background: rgba(var(--tt-primary-rgb), 0.07);
  color: var(--tt-dark);
  font-weight: 700;
}
.tt-ar-body tbody tr:last-child td { border-bottom: 0; }

/* ==================================================================
   5. ARTICLE FOOTER — author + related
   ================================================================== */
.tt-ar-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding: 1.35rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--tt-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04),
              0 10px 26px -14px rgba(16, 24, 40, 0.22);
  max-width: 44rem;
}
.tt-ar-author-avatar {
  flex: 0 0 auto;
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tt-gradient-primary);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}
.tt-ar-author-name {
  font-family: var(--tt-font-poppins, var(--tt-font-primary));
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-dark);
  margin: 0;
}
.tt-ar-author-bio {
  font-size: var(--tt-fs-body-sm);
  color: var(--tt-muted);
  margin: 0.2rem 0 0;
  line-height: 1.6;
}

/* ==================================================================
   6. RESPONSIVE
   ================================================================== */
@media (max-width: 1199.98px) {
  .tt-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .tt-ar-layout { grid-template-columns: minmax(0, 1fr); }
  .tt-ar-aside { position: static; order: -1; }
  /* Full width and no indent once the aside moves above the body - the
     .container already supplies the side gutter here, and the desktop left
     margin on top of it would just eat the line length. */
  .tt-ar-body { max-width: none; margin-inline-start: 0; }
  .tt-ar-author { max-width: none; }
}

@media (max-width: 575.98px) {
  .tt-bl-grid { grid-template-columns: minmax(0, 1fr); }
  .tt-ar-cover { aspect-ratio: 4 / 3; border-radius: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tt-bl-card,
  .tt-bl-card-media img,
  .tt-ar-progress { transition: none; }
  .tt-bl-card:hover { transform: none; }
  .tt-bl-card:hover .tt-bl-card-media img { transform: none; }
  .tt-ar-share a:hover, .tt-ar-share button:hover { transform: none; }
}