/*
Theme Name:   Thallo Blog
Theme URI:    https://thallodigital.com/
Description:  Puts the blog in Thallo's own type and colour. A child of Twenty Twenty-Five, so WordPress keeps handling the parts a blog needs — templates, comments, feeds, updates — and this only changes how it looks. Ships post patterns you can insert from the editor.
Author:       Thallo Digital
Template:     twentytwentyfive
Version:      1.37.3
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  thallo-blog
*/

/*
 * Almost everything lives in theme.json, not here.
 *
 * A block theme's theme.json styles the editor and the front end from one
 * file, which is the whole reason to use one: what you type into WordPress
 * looks like what a reader gets. CSS in this file only styles what theme.json
 * has no vocabulary for, and every rule below is here because of that and not
 * because it was quicker.
 */

/* The measure. theme.json's contentSize governs block width, but not the
   reading line inside a paragraph on a very wide screen. */
.wp-block-post-content p,
.wp-block-post-content ul,
.wp-block-post-content ol {
  max-width: 68ch;
}

/* Headings keep their optical alignment with the paragraph above them rather
   than sitting on the same baseline grid — the site sets far more space above
   a heading than below it, so a section reads as attached to its own text. */
.wp-block-post-content :is(h2, h3) {
  margin-top: 2.6em;
  margin-bottom: 0.6em;
}
.wp-block-post-content :is(h2, h3) + p {
  margin-top: 0;
}

/* Links in prose. Underlined always: on a page whose subject is being quoted
   accurately, a link you cannot see is a citation you cannot follow. */
.wp-block-post-content a:where(:not(.wp-element-button)) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease;
}

/* The callout used by the "Thallo · callout" pattern. A group with a
   background gets its padding from theme.json.

   No rule down its left edge: it used to carry a pale olive bar, and on the
   deep green it read as a stripe of a different green rather than as a mark.
   Same measure as the paragraphs — 68ch — and flush left with them, or the
   box runs on past the line the text ends on and the page looks off-centre
   to its right. And room above it — 3.25rem, the site's own step — because the
   block gap between two paragraphs is far too little for a solid block
   arriving after one; a little under it too, so it does not sit on the
   next line. */
.wp-block-post-content .thallo-callout {
  max-width: 68ch;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: var(--wp--preset--spacing--50);
  margin-bottom: 2rem;
}

/* ── The ground under the filled blocks ────────────────────────────────────
   Deep green, always — #39471D, the green the buttons and the links already
   wear, and never again the pale wash.

   Stated here rather than left to the pattern, because a pattern is copied
   into the post the moment a writer inserts it: every post written before
   today still carries `has-olive-tint-background-color` in its own markup, and
   that markup cannot be reached by editing a pattern file. It can be reached
   from here.

   Two classes deep and `!important` because that is what it takes to win.
   WordPress prints its palette as
   `.has-olive-tint-background-color { background-color: … !important }` —
   important, at one class of specificity, so an ordinary rule loses to it no
   matter how far down this file it sits. */
.wp-block-group.thallo-callout,
.wp-block-group.thallo-answer {
  background-color: var(--wp--preset--color--olive) !important;
}

/* ── Type on the filled blocks ─────────────────────────────────────────────
   The callout and the short answer used to be a pale olive wash, and every
   word inside them inherited the page's near-black body colour. They are deep
   green now, so that inheritance is the one combination that fails outright —
   near-black on #39471D is about 1.6:1, which is not low contrast, it is
   invisible.

   Stated rather than inherited, and stated here rather than on each pattern:
   a pattern is copied into the post the moment a writer inserts it, so a
   colour written into the pattern file freezes into every post that ever used
   it and cannot be corrected later. A rule in the stylesheet reaches them all.

   White throughout, and not the pale olive it was: on a photograph or on this
   green, a tinted white reads as faded rather than as quiet. White is 10.0:1
   here; the olive-soft on the rule and the label is 6.3:1, still past AA.

   `!important` throughout, for the same reason the background above carries
   it: the pattern used to write `color:#111827` as an inline style on the
   sentence, and an inline style beats any selector a stylesheet can write.
   Near-black on #39471D is 1.6:1 — not low contrast, invisible. This is not a
   preference being enforced; it is the one thing standing between a reader and
   a box they cannot read, in posts nobody is going to reopen and edit by
   hand. */
.thallo-callout,
.thallo-answer,
.thallo-callout :is(p, li, strong, h2, h3, h4),
.thallo-answer :is(p, li, strong, h2, h3, h4) {
  color: #ffffff !important;
}
.thallo-callout a,
.thallo-answer a {
  color: #ffffff !important;
  text-decoration-color: var(--wp--preset--color--olive-soft);
}
.thallo-answer__label {
  color: var(--wp--preset--color--olive-soft) !important;
}

/* Figure captions and the audit-trail voice: the typewriter face, small, in
   the same grey the site uses for machine output. */
.wp-block-image figcaption,
.wp-block-embed figcaption {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--grey-500);
}

/* ── The index ───────────────────────────────────────────────────────────── */

/*
 * Cards without a box.
 *
 * The marketing site draws a hairline and a radius around almost everything,
 * and a grid of six bordered rectangles is where that language stops working —
 * the borders start competing with each other and the page reads as a table.
 * Here the image carries the card and the type sits under it in open space,
 * which is what an index wants: the eye going down a column of titles, not
 * around six outlines.
 */
.wp-block-post-template > li {
  display: flex;
  flex-direction: column;
}

/* Sin zoom en la fotografía. La tarjeta entera sube tres píxeles al pasar por
   encima y eso ya dice que es pulsable; dos movimientos a la vez — la tarjeta
   subiendo y la imagen creciendo dentro de ella — es la imagen deslizándose
   respecto a su propio marco, que es lo que se nota aunque no se sepa nombrar. */

/* A title in an index is a link, and a link that looks like a link in a list
   of twelve of them is twelve underlines. It earns its colour on hover. */
.wp-block-post-template .wp-block-post-title a {
  color: var(--wp--preset--color--grey-900);
  text-decoration: none;
}
.wp-block-post-template .wp-block-post-title a:hover {
  color: var(--wp--preset--color--olive);
}

.wp-block-post-template .wp-block-post-excerpt__excerpt {
  color: var(--wp--preset--color--grey-500);
}

.wp-block-post-template .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}
.wp-block-post-template .wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Date and category read as one small caption rather than two links. */
.wp-block-post-date,
.wp-block-post-terms {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.wp-block-post-terms a {
  color: var(--wp--preset--color--olive-mid);
  text-decoration: none;
}

/* One column on a phone. Two 44rem-wide cards side by side on a 375px screen
   is how a grid becomes a column of slivers. */
@media (max-width: 781px) {
  .wp-block-post-template.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

.wp-block-query-pagination {
  border-top: 1px solid var(--wp--preset--color--hairline);
  padding-top: 1.5rem;
  font-size: 0.8rem;
}

/* Tables are wide content and must scroll inside themselves rather than
   widening the page. */
.wp-block-table {
  overflow-x: auto;
}
.wp-block-table table {
  border-collapse: collapse;
  min-width: 34rem;
}
.wp-block-table :is(th, td) {
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  padding: 0.85rem 1rem;
  text-align: left;
}
.wp-block-table th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}

/* ── The short answer ──────────────────────────────────────────────────────
   Set apart from the prose on purpose. A reader skimming should be able to
   stop here and leave with the answer. The deep green is what says so; the
   pale rule it used to carry down its left read as a stripe, not a mark, and
   is gone. Same measure and margins as the callout, for the same reasons. */
.wp-block-post-content .thallo-answer {
  max-width: 68ch;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: var(--wp--preset--spacing--50);
  margin-bottom: 2rem;
}
.thallo-answer__label {
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.thallo-answer p:last-child {
  margin-bottom: 0;
  font-size: 1.06rem;
  line-height: 1.62;
}

/* ── Common questions ──────────────────────────────────────────────────────
   Each question rides on a hairline so the pairs read as a list rather than
   as more prose. `:last-of-type` would be wrong here — the answers are
   paragraphs between the headings, so the rule goes on the heading and the
   spacing absorbs the answer under it. */
.thallo-faq h3 {
  border-top: 1px solid var(--wp--preset--color--hairline);
  padding-top: 1.35rem;
  margin-top: 1.35rem;
}
.thallo-faq > h2 + h3 {
  border-top: 0;
  padding-top: 0;
}

/* ── On this page ──────────────────────────────────────────────────────────
   Inline above the article rather than a sticky rail. The rail needs a third
   column that this measure does not have, and on a phone it collapses to
   exactly this anyway — so this is the layout that always works, rather than
   the one that works on a wide desktop and is thrown away everywhere else. */
.thallo-toc[hidden] {
  display: none;
}
.thallo-toc {
  border-left: 3px solid var(--wp--preset--color--olive);
  padding: 0.1rem 0 0.1rem 1.1rem;
  margin: 0 0 var(--wp--preset--spacing--50);
}
.thallo-toc__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
  margin: 0 0 0.6rem;
}
.thallo-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.thallo-toc__list li {
  counter-increment: toc;
  margin: 0 0 0.35rem;
}
.thallo-toc__list a {
  font-size: 0.92rem;
  color: var(--wp--preset--color--grey-500);
  text-decoration: none;
}
/* The numbers carry the same weight as the rule on the left, whichever entry
   is current — a bold rule beside light numerals read as two different
   things, and a numeral that changed weight with the section read as a
   flicker. */
.thallo-toc__list a::before {
  content: counter(toc) ". ";
  color: var(--wp--preset--color--olive);
  font-weight: 700;
}
.thallo-toc__list a:hover,
.thallo-toc__list a.is-current {
  color: var(--wp--preset--color--ink);
}
.thallo-toc__list a.is-current {
  font-weight: 600;
}

/* Anchors land below the heading without the sticky header covering it. */
.entry-content h2 {
  scroll-margin-top: 5rem;
}

/* ── Three figures ─────────────────────────────────────────────────────────
   The gap is 1px over a hairline background, so the cards read as one object
   divided rather than three objects placed near each other. */
.thallo-figures {
  background: var(--wp--preset--color--hairline);
  border-radius: 14px;
  overflow: hidden;
}
.thallo-figures__n {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 2.1rem;
  line-height: 1;
  margin: 0;
}
@media (max-width: 40rem) {
  .thallo-figures {
    grid-template-columns: 1fr;
  }
}

/* ── The line ──────────────────────────────────────────────────────────────*/
.thallo-line p {
  font-size: 1.4rem;
  line-height: 1.35;
  font-style: italic;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   The site's chrome, rebuilt.

   Values copied from the Next.js components rather than approximated: the
   floating pill, its blur, its shadow, the olive #39471D, the 1440px measure.
   A navbar that is nearly the same is worse than one that is obviously
   different — the reader cannot say what changed, only that something did.
   ══════════════════════════════════════════════════════════════════════════ */

/* Dos reglas que el sitio aplica en globals.css y que este tema no tenía. Sin
   ellas el navbar del blog y el del resto de páginas no coinciden: medidos a
   1440px, la barra de allí mide 1283px y la de aquí 1377, y el logo empieza
   47px más a la izquierda. El lector cruza de una página a otra y ve la barra
   dar un salto.

   1. El hueco de la barra de scroll, reservado siempre. Una página que scrollea
      se dibuja en 1425px y una que no, en 1440; sin reservarlo, todo lo
      centrado se mueve media barra según el largo de la página. El sitio ya
      arregló esto una vez para sí mismo.
   2. El rango portátil: entre 1024 y 1700px el contenedor de 1440 del sitio se
      queda en 90vw. Es donde está la mayoría de las pantallas, así que sin esta
      regla el blog es más ancho que el sitio casi siempre. */
html {
  scrollbar-gutter: stable;
}


/* El sitio usa border-box en todo (viene de Tailwind); WordPress no lo garantiza
   aquí. Sin esto el `max-width` de la barra se aplicaba al contenido y el
   relleno de 24px a cada lado más el borde se sumaban por fuera: 1282,5 de tope
   y 1333 medidos, es decir, 50px más ancha que la misma barra en el sitio. */
.thallo-nav,
.thallo-nav *,
.thallo-drawer,
.thallo-drawer * {
  box-sizing: border-box;
}

/* La flecha, dibujada y no escrita. U+2197 lleva presentacion de emoji y los
   telefonos la eligen por defecto: el boton acababa con una flecha de color en
   vez de la de la marca. El sitio la dibuja por eso mismo, y dibujarla aqui
   tambien es lo que hace que los botones midan lo mismo -- el caracter es 7px
   mas estrecho que el glifo. */
.thallo-arrow {
  display: inline-block;
  flex-shrink: 0;
  margin-left: 0.125rem;
  vertical-align: -0.05em;
}

.thallo-nav {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  z-index: 50;
}
@media (min-width: 640px) {
  .thallo-nav {
    top: 1.25rem;
    left: 1.5rem;
    right: 1.5rem;
  }
}
.thallo-nav__bar {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 9999px;
  padding: 0.625rem 1rem;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 36px -18px rgba(57, 71, 29, 0.22);
}
@media (min-width: 640px) {
  .thallo-nav__bar {
    padding: 0.625rem 1.5rem;
  }
}
.thallo-nav__brand img {
  height: 2.25rem;
  width: auto;
  display: block;
  object-fit: contain;
}
@media (min-width: 640px) {
  .thallo-nav__brand img {
    height: 2.75rem;
  }
}
.thallo-nav__links {
  display: none;
  align-items: center;
  gap: 1.75rem;
}
/* A label never breaks across two lines.
 *
 * With four links there was room to spare and this never came up. The fifth,
 * Research, brought the row to within 16px of the buttons at 1024 — the
 * narrowest width that still shows a bar — and "Our Plans" and "Case Studies"
 * folded in half. Two-line labels beside one-line labels is the navbar looking
 * broken rather than full.
 *
 * The gap closes before the words do: 1.75rem is the width the bar is designed
 * at, and it comes back as soon as there is room for it. */
.thallo-nav__links a {
  white-space: nowrap;
}
/* El hueco se cierra antes que las palabras, en el tramo estrecho del
   escritorio donde cinco enlaces y dos botones comparten fila. Vuelve a
   1.75rem en cuanto hay sitio. */
@media (max-width: 1279.98px) {
  .thallo-nav__links {
    gap: 1rem;
  }
}
.thallo-nav__cta {
  display: none;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
/* 1100px, which is where the real navbar swaps its links for the burger. Both
   have to say the same number or the blog shows a bar the rest of the site has
   already collapsed — the kind of difference nobody reports and everybody
   feels. Below it, the drawer takes over.
 *
 * It was 768 while the fifth link read "Research". "AI Shortlist Series" is
 * 119px where that was 62, and at 1024 the row overflowed its own pill by 44px
 * — "Book an audit" hanging off the right edge. The name is the client's and
 * the pill is the design, so what gives is the width at which five labels stop
 * fitting beside two buttons. Everything between 768 and 1100 gets the drawer,
 * which carries the same five links and was already there. */
@media (min-width: 1100px) {
  .thallo-nav__links,
  .thallo-nav__cta {
    display: flex;
  }
  .thallo-nav__burger {
    display: none;
  }
}

/* Sliding out of the way on the way down, and the firmer border once there is
   something scrolled behind it. Both are Navbar.tsx's, to the same numbers. */
.thallo-nav {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.thallo-nav.is-hidden {
  transform: translateY(-150%);
}
.thallo-nav__bar {
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.thallo-nav.is-scrolled .thallo-nav__bar {
  background: rgba(255, 255, 255, 0.95);
  border-color: #e5e7eb;
  box-shadow: 0 20px 45px -20px rgba(57, 71, 29, 0.35);
}

/* ── The drawer, below 768px ───────────────────────────────────────────────*/
.thallo-nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: transparent;
  color: #1f2937;
  cursor: pointer;
}
.thallo-nav__burger > span {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1rem;
  height: 0.75rem;
}
.thallo-nav__burger span span {
  height: 1.5px;
  width: 100%;
  border-radius: 9999px;
  background: currentColor;
}
.thallo-nav__burger span span:nth-child(2) {
  width: 75%;
  align-self: flex-end;
}
/* Después de la definición del botón, no antes: la regla que lo enciende vive
   más abajo en este archivo, así que esconderlo sólo dentro del bloque de
   arriba no bastaba — la última gana, y el burger salía también en escritorio
   junto a los enlaces. */
@media (min-width: 1100px) {
  .thallo-nav__burger {
    display: none;
  }
}

.thallo-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  background: #fff;
  overscroll-behavior: contain;
}
.thallo-drawer[hidden] {
  display: none;
}
.thallo-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.thallo-drawer__close {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -0.25rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: transparent;
  color: #1f2937;
  font-size: 1rem;
  cursor: pointer;
}
.thallo-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.thallo-drawer__links a {
  color: #1f2937;
  text-decoration: none;
}
.thallo-drawer__links a.is-here {
  color: var(--wp--preset--color--olive);
}
.thallo-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: auto;
}
.thallo-drawer__cta .thallo-btn {
  width: 100%;
  justify-content: center;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.thallo-nav__links a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--grey-500);
  text-decoration: none;
  transition: color 0.2s;
}
.thallo-nav__links a:hover,
.thallo-nav__links a[aria-current='page'] {
  color: var(--wp--preset--color--olive);
}

.thallo-btn {
  display: inline-block;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, border-color 0.2s;
}
.thallo-btn--ghost {
  border: 1px solid var(--wp--preset--color--hairline);
  color: #1f2937;
}
.thallo-btn--ghost:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.thallo-btn--solid {
  border: 1px solid var(--wp--preset--color--olive);
  background: var(--wp--preset--color--olive);
  color: #fff;
}
.thallo-btn--solid:hover {
  background: var(--wp--preset--color--olive-mid);
  border-color: var(--wp--preset--color--olive-mid);
}

/* The bar is fixed, so the page needs the height back or the first heading
   sits under it.

   6.5rem was the height of the bar and almost nothing else: the bar ends at
   86px and the first heading started at 104, so the masthead sat 18px under a
   floating navbar and read as attached to it. 9rem gives it 58px of air, which
   is a gap rather than a collision.

   Note for anyone editing this: .thallo-archive also declares a padding-top,
   and it has never once applied — .wp-site-blocks > main is the more specific
   selector and wins. The archive rule now sets only its sides and its floor,
   so there is one place that decides this and it is here. */
body > main,
.wp-site-blocks > main {
  padding-top: 9rem;
}
/* The series pages open at 8rem — the site's pt-32, measured on /results/:
   the title 128px from the top, where 9rem put it at 144. */
body > main.thallo-shortlist,
.wp-site-blocks > main.thallo-shortlist {
  padding-top: 8rem;
}

/* Except on a post, where the photograph IS the top of the page: it runs
   full-bleed from under the bar, and any padding above it would show as a
   white band between the navbar and the picture. The hero carries its own
   clearance instead — see .thallo-hero.

   The padding itself is zeroed in single.html, because the block editor writes
   layout padding inline and no selector can outrank that. What is left here is
   the margin: WordPress gives every block after the first in .wp-site-blocks a
   20px block-start margin, and on this template the first of those is main —
   so a 20px white strip sat above a hero that is supposed to start at the top
   of the window. */
body.single .wp-site-blocks > main {
  padding-top: 0;
  margin-block-start: 0;
}

/* ── Footer ────────────────────────────────────────────────────────────────*/
.thallo-foot {
  border-top: 1px solid var(--wp--preset--color--hairline);
  margin-top: var(--wp--preset--spacing--60);
  padding: var(--wp--preset--spacing--60) 1.5rem var(--wp--preset--spacing--50);
  font-size: 0.7rem;
}
.thallo-foot__cols {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .thallo-foot__cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1000px) {
  .thallo-foot__cols {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}
.thallo-foot__brand img {
  height: 2.5rem;
  width: auto;
  display: block;
  object-fit: contain;
}
.thallo-foot__brand p {
  margin: 0.9rem 0 0;
  max-width: 28ch;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
}
.thallo-foot h4 {
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-900);
  margin: 0 0 1rem;
}
.thallo-foot__cols div > a,
.thallo-foot__legal a,
.thallo-foot__base span {
  display: block;
  font-size: 0.69rem;
  font-weight: 600;
  color: var(--wp--preset--color--grey-500);
  text-decoration: none;
  margin-bottom: 0.625rem;
}
.thallo-foot__cols div > a:hover,
.thallo-foot__legal a:hover {
  color: var(--wp--preset--color--olive);
}
/* The studio's name is the only link on the base line, so it is the only thing
   there that is underlined — the two spans beside it are notices, not
   destinations, and underlining all three would make the row read as a menu. */
.thallo-foot__by {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.thallo-foot__by:hover {
  color: var(--wp--preset--color--olive);
}
.thallo-foot__legal {
  max-width: 1440px;
  margin: 0 auto;
  border-top: 1px solid var(--wp--preset--color--hairline);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}
.thallo-foot__legal a {
  margin-bottom: 0;
}
.thallo-foot__base {
  max-width: 1440px;
  margin: 1.75rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}
.thallo-foot__base span {
  margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   The archive.

   One column: the masthead, the piece to read now, the rest of the archive
   behind a browse bar, one invitation, the list. Each section hides itself
   while it has nothing to hold.

   ## The ground

   White, and every surface on it drawn from the same five values the rest of
   the site uses — white, paper #F7F8F3, hairline #E5E7EB, olive #39471D, ink
   #171A10. It used to be a warm cream, #F7F6F1, with cards in #EFEDE3 and
   #EDEBE1 and a card body in #1E2A12: five colours that appear nowhere else on
   thallodigital.com. Read on its own the page looked considered; read after
   any other page on the site it looked like a different site, which is what it
   was. Nothing here invents a colour any more.
   ══════════════════════════════════════════════════════════════════════════ */

.thallo-archive {
  background: #ffffff;
  /* Sides and floor only. The top is set once, on main, above. */
  padding: 0 1.5rem 5rem;
  margin: 0;
  max-width: none !important;
}
.thallo-archive > * {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  /* Border-box or the padded sections do not line up with the unpadded ones.
     `max-width` on a content-box element caps the text inside it and then adds
     the padding on top, so the invitation and the mailing list rendered 82px
     wider than the featured card directly above them — three blocks that are
     meant to share an edge, each one starting somewhere else. */
  box-sizing: border-box;
}

/* WordPress centra por su cuenta.
   El layout "constrained" le pone `margin-inline:auto` y un ancho máximo a
   cada hijo del grupo, así que un bloque corto — la fecha, "Read the article" —
   se quedaba centrado dentro de una tarjeta cuyo texto está alineado a la
   izquierda. Las plantillas ya no usan ese layout aquí; esto es el cinturón,
   para que un bloque insertado desde el editor no vuelva a traérselo. */
.thallo-feat__body > *,
.thallo-card__body > * {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}

/* ── Masthead ──────────────────────────────────────────────────────────────
   Two shapes from one class. On the index it is a block, alone on its line;
   on the results page the search sits beside it, because there the search is
   the subject of the page rather than a tool offered before there is anything
   to use it on. */
.thallo-mast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 3rem;
}
.thallo-mast__say {
  flex: 1 1 26rem;
}
.thallo-mast--solo {
  display: block;
  margin-bottom: 3.25rem;
}
/* No rule before the eyebrow, drawn or typed. It carried a 2px olive tick
   for a while; Cami's rule (2026-09-20) is that the tick never goes, on any
   page — the label is the label, and the small capitals already set it apart. */
.thallo-mast__eyebrow {
  display: block;
  margin: 0 0 1.1rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.thallo-mast__eyebrow a {
  color: inherit;
  text-decoration: none;
}
.thallo-mast__eyebrow a:hover {
  color: var(--wp--preset--color--olive);
}
.thallo-mast__title {
  margin: 0;
  font-size: clamp(2.35rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: var(--wp--preset--color--olive-ink, #171a10);
}
.thallo-mast__title em {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--wp--preset--color--olive);
}
.thallo-mast__lead {
  margin: 1.1rem 0 0;
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
}

/* ── Search ────────────────────────────────────────────────────────────────
   The block's own markup, restyled: a pill with the field and the button
   inside one border, so it reads as one control rather than as a box with a
   square attached to it. */
.thallo-search {
  margin: 0;
  max-width: 20rem;
  width: 100%;
}
/* The block ships a label for screen readers and leaves hiding it to the
   parent theme's `screen-reader-text`. When that stylesheet does not load —
   which is exactly what happens in the local sandbox — the word "Search"
   renders above the field and pushes the control 27px down its own line, so
   the one thing on the row is the one thing out of line with it. Hidden here
   too, in the way that keeps it readable to a screen reader. */
.thallo-search .wp-block-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.thallo-search .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 9999px;
  background: #fff;
  padding: 0.2rem 0.2rem 0.2rem 0.35rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.thallo-search .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--olive);
  box-shadow: 0 0 0 3px rgba(57, 71, 29, 0.1);
}
.thallo-search .wp-block-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--wp--preset--color--olive-ink, #171a10);
}
.thallo-search .wp-block-search__input:focus {
  outline: none;
}
.thallo-search .wp-block-search__input::placeholder {
  color: #9ca3af;
}
.thallo-search .wp-block-search__button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--wp--preset--color--olive);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.thallo-search .wp-block-search__button:hover {
  background: var(--wp--preset--color--olive-mid);
}
.thallo-search .wp-block-search__button svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

/* ── The piece to read now ─────────────────────────────────────────────────
   The photograph across the top, the words on ink underneath.

   Across the top rather than down one side because of what arrives here: the
   featured images are wide banners, and the old card cropped one into a panel
   taller than it was wide. That is a narrow strip of the picture scaled up to
   fill 590 by 485, which is why the photograph looked grainy on a page where
   nothing else did. In a band the browser is scaling a 2048px image *down*,
   and detail survives being made smaller.

   `aspect-ratio` rather than a fixed height so the band keeps its proportions
   at every width, and 3.2/1 rather than the banner's own 4.4/1 because a strip
   that thin under a masthead reads as a rule rather than as a picture. */
.thallo-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #171a10;
  border-radius: 24px;
  overflow: hidden;
  margin: 0 0 4rem;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.thallo-feat:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -28px rgba(23, 26, 16, 0.5);
}
.thallo-feat__media {
  margin: 0;
  aspect-ratio: 3.2 / 1;
}
.thallo-feat__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thallo-feat__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 2.5rem 3rem 2.75rem;
}
.thallo-feat__label {
  margin: 0;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive-soft);
}
.thallo-feat__title {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.thallo-feat__excerpt {
  margin: 0;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.65;
}
.thallo-feat__excerpt .wp-block-post-excerpt__more-text {
  display: none;
}
.thallo-feat .thallo-meta {
  margin-top: 0.2rem;
  color: rgba(255, 255, 255, 0.5);
}
.thallo-feat .thallo-meta > * + *::before {
  color: rgba(255, 255, 255, 0.3);
}
.thallo-feat__go {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
}
.thallo-feat:hover .thallo-feat__go {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* The whole card is the target, not just the two words at the bottom of it.
   The title's own link is stretched over the card, so what a reader clicks is
   what a screen reader announces — one link, with the headline as its name. */
.thallo-feat__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media (max-width: 1000px) {
  .thallo-feat__media {
    aspect-ratio: 16 / 9;
  }
  .thallo-feat__body {
    padding: 2rem 1.75rem 2.25rem;
  }
}

/* ── Meta line ─────────────────────────────────────────────────────────────
   Date · read time, in one row. WordPress renders each of these as its own
   block, so the row is the flex container and the separators are drawn between
   children rather than typed in. */
.thallo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.thallo-meta > * {
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.thallo-meta > * + *::before {
  content: '·';
  margin: 0 0.5rem;
  color: #d1d5db;
}

/* ── The rest of the archive ───────────────────────────────────────────────
   Heading, browse bar, grid, pager — and the whole thing gone while the query
   under it comes back empty. A browse bar over nothing is the page offering a
   reader tools for an archive it does not have yet. */
.thallo-latest:has(.wp-block-query-no-results) {
  display: none;
}
.thallo-rule {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1.25rem;
}
.thallo-rule__h {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.thallo-rule__more {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--olive-ink, #171a10);
  text-decoration: none;
  white-space: nowrap;
}
.thallo-rule__more:hover {
  color: var(--wp--preset--color--olive);
}

/* ── The browse bar ────────────────────────────────────────────────────────
   Topics left, search right, one hairline under both. The topics half empties
   itself while "Uncategorized" is the only term there is, and the search then
   sits on the line alone rather than leaving a hole where the pills were. */
.thallo-browse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.thallo-topics:not(:has(.thallo-topics__pills li)) {
  display: none;
}
.thallo-pill,
.thallo-topics__pills a {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 9999px;
  background: #fff;
  padding: 0.42rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--wp--preset--color--grey-500);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.thallo-pill:hover,
.thallo-topics__pills a:hover {
  border-color: var(--wp--preset--color--olive);
  color: var(--wp--preset--color--olive);
}
.thallo-pill.is-on {
  background: var(--wp--preset--color--olive);
  border-color: var(--wp--preset--color--olive);
  color: #fff;
}
.thallo-pill.is-on:hover {
  background: var(--wp--preset--color--olive-mid);
  border-color: var(--wp--preset--color--olive-mid);
  color: #fff;
}
.thallo-topics__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.thallo-topics__pills li {
  margin: 0;
}
.thallo-sort {
  margin: 0 0 0 0.35rem;
  font-size: 0.78rem;
  color: #9ca3af;
}
.thallo-sort a {
  color: var(--wp--preset--color--grey-500);
  text-decoration: none;
}
.thallo-sort a:hover {
  color: var(--wp--preset--color--olive);
}

/* ── The grid ──────────────────────────────────────────────────────────────
   Three columns of card: the photograph on top, white body under it, and the
   arrow in the corner of the body where the eye finishes reading the title. */
.thallo-grid__loop {
  gap: 1.5rem !important;
}
.thallo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s,
    border-color 0.3s;
}
.thallo-card:hover {
  transform: translateY(-3px);
  border-color: #d7dbc8;
  box-shadow: 0 16px 36px -20px rgba(23, 26, 16, 0.28);
}
/* The lift is the only motion on the page, and for a reader who has asked the
   operating system for no motion it is one too many. The shadow stays: it says
   the same thing without moving. */
@media (prefers-reduced-motion: reduce) {
  .thallo-card,
  .thallo-card:hover,
  .thallo-feat,
  .thallo-feat:hover,
  .thallo-card:hover .thallo-card__body::after {
    transform: none;
    transition: none;
  }
}
.thallo-card__media {
  margin: 0;
  aspect-ratio: 16 / 9;
}
.thallo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thallo-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.7rem;
  padding: 1.35rem 1.4rem 1.5rem;
}
/* The category, as a label rather than as a link that looks like one. */
.thallo-card__kind {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive-mid);
}
.thallo-card__kind a {
  color: inherit;
  text-decoration: none;
}
.thallo-card__title {
  margin: 0;
  flex-grow: 1;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.thallo-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.thallo-card__body .thallo-meta {
  padding-right: 2rem;
}
.thallo-card__body::after {
  content: '→';
  position: absolute;
  right: 1.3rem;
  bottom: 1.25rem;
  font-size: 0.95rem;
  color: #6b7280;
  transition: transform 0.2s, color 0.2s;
}
.thallo-card:hover .thallo-card__body::after {
  color: var(--wp--preset--color--olive);
  transform: translateX(3px);
}
@media (max-width: 1000px) {
  .thallo-grid__loop {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .thallo-grid__loop {
    grid-template-columns: 1fr !important;
  }
}

.thallo-pagination {
  margin-top: 2.5rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
  padding-top: 1.5rem;
  font-size: 0.82rem;
}
.thallo-empty {
  margin: 0;
  padding: 2.5rem 0;
  font-size: 0.9rem;
  color: var(--wp--preset--color--grey-500);
}
/* A pager under nothing is a pager that says the archive is broken. */
.thallo-grid:has(.wp-block-query-no-results) .thallo-pagination {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   The hub — the blog's front page.

   A publication rather than a page of cards: a masthead beside a photograph, a
   row of subjects, one article set three times the size of the two next to it,
   and a grid of what is recent. The rhythm down the page is deliberate — 5rem
   between sections, a hairline rule and a small-caps label opening each — so a
   reader scanning it in three seconds gets the shape of the thing before any
   headline.

   Everything here is drawn from the palette the rest of the site uses. The one
   value that appears only in this file is #FBFBF8, an ivory a shade off white,
   which is the closing panel's ground and the placeholder cards' fill. It is
   the same ivory `--paper` (#F7F8F3) is, taken two points warmer so a card
   sitting on paper still has an edge without a border.
   ══════════════════════════════════════════════════════════════════════════ */

.thallo-hub {
  --hub-ivory: #fbfbf8;
  --hub-gap: 5rem;
}

/* The rules that open each section. `--tight` is for a row that is a list of
   controls rather than a list of articles: the topics sit closer to their
   heading than a grid of covers does. */
.thallo-hub .thallo-rule {
  margin: var(--hub-gap) 0 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-hub .thallo-rule--tight {
  margin-bottom: 1.1rem;
}
/* The label alone. It used to carry a small olive tick on its left, the same
   mark the masthead's eyebrow has; on the hub the words are enough. */
.thallo-hub .thallo-rule__h {
  position: relative;
  padding-left: 0;
}

/* ── 1 · The masthead ──────────────────────────────────────────────────────
   Type left, photograph right, both ending on the same line. The picture is
   given a fixed ratio rather than a height so it holds its shape while the
   column it sits in changes width. */
.thallo-mast--hub {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 1000px) {
  .thallo-mast--hub {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 4rem;
  }
}
.thallo-mast--hub .thallo-mast__say {
  flex: none;
}
.thallo-mast--hub .thallo-mast__title {
  max-width: 14ch;
}
.thallo-mast--hub .thallo-mast__lead {
  max-width: 42ch;
}
.thallo-mast__art {
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--paper);
}
.thallo-mast__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 999px) {
  .thallo-mast__art {
    aspect-ratio: 16 / 7;
  }
}

/* ── The two controls ──────────────────────────────────────────────────────
   Search and filter on one line, both at the same height, so they read as a
   pair rather than as a field with an afterthought beside it. */
.thallo-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.thallo-search--big {
  flex: 1 1 18rem;
  max-width: 26rem;
}
.thallo-search--big .wp-block-search__inside-wrapper {
  padding: 0.35rem 0.35rem 0.35rem 0.6rem;
}
.thallo-search--big .wp-block-search__input {
  padding: 0.6rem 0.6rem;
  font-size: 0.92rem;
}
.thallo-search--big .wp-block-search__button {
  width: 2.5rem;
  height: 2.5rem;
}
/* The category dropdown, dressed as the pill beside it. WordPress renders a
   bare `<select>`; the arrow is drawn here because a native one differs on
   every platform and this row has to look like one control twice. */
/* The pair stands the same height. They are one control as far as the eye is
   concerned — search on the left, topic on the right — and 56px beside 43px
   reads as a field with an afterthought stuck to it. */
.thallo-search--big .wp-block-search__inside-wrapper,
.thallo-filter select {
  /* Border-box, because this theme does not set it globally and a height on a
     content-box element is the height of what is inside it: 56px asked for,
     69px drawn, once the padding and the border were added on top. */
  box-sizing: border-box;
  height: 3.5rem;
}
.thallo-filter {
  display: flex;
  margin: 0;
}
.thallo-filter__label,
.thallo-filter__go {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.thallo-filter select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 9999px;
  background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.7rem;
  padding: 0.78rem 2.5rem 0.78rem 1.15rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wp--preset--color--grey-500);
  cursor: pointer;
}
.thallo-filter select:hover {
  border-color: var(--wp--preset--color--olive);
  color: var(--wp--preset--color--olive);
}


/* ── 2 · Topics ────────────────────────────────────────────────────────────
   Six tiles that wrap, and below 720px a row that scrolls sideways — the same
   information in the shape a narrow screen has room for, rather than six
   full-width buttons stacked into a screen of navigation. */
.thallo-hub__topics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .thallo-hub__topics {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    margin: 0 -1.5rem;
    padding: 0 1.5rem 0.5rem;
  }
  .thallo-topic {
    flex: 0 0 13rem;
    scroll-snap-align: start;
  }
}
.thallo-topic {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 16px;
  background: #fff;
  padding: 0.9rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
a.thallo-topic:hover {
  border-color: #d7dbc8;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -22px rgba(23, 26, 16, 0.4);
}
.thallo-topic__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--wp--preset--color--olive-tint);
  color: var(--wp--preset--color--olive);
}
.thallo-topic__say {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.thallo-topic__name {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wp--preset--color--olive-ink, #171a10);
}
.thallo-topic__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wp--preset--color--grey-500);
}
/* A subject with nothing filed under it yet: same tile, no link, and the ring
   drops to the flat ivory so the row reads as five subjects of which some are
   open and some are not. */
/* A subject with nothing filed under it yet keeps the brand's green. The icon
   and its ring were grey here, on the reasoning that a category with no
   articles should look quieter than one with five — and it did, but it also
   made five of the six tiles read as disabled controls on a page whose whole
   argument is that this publication is starting, not stopping. The subjects
   are real either way; only the count is not.

   So the mark stays olive on olive tint, the name stays ink, and the one thing
   that differs is the line underneath: "Coming soon" in the muted grey the rest
   of the site uses for a caption, and no link. */
.thallo-topic--soon {
  background: var(--hub-ivory);
}
.thallo-topic--all .thallo-topic__name {
  color: var(--wp--preset--color--olive);
}

/* ── 3 · Featured ──────────────────────────────────────────────────────────
   The lead runs 60% of the width with its picture beside the words; the two
   next to it stack, each a thumbnail and a headline. Below 1000px the lead
   becomes a card like any other and the pair sits under it. */
.thallo-hub__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 1000px) {
  .thallo-hub__feature {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: stretch;
  }
}
.thallo-hub__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 560px) and (max-width: 999px) {
  .thallo-hub__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.thallo-lead,
.thallo-side,
.thallo-tile {
  position: relative;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
.thallo-lead:hover,
.thallo-side:hover,
.thallo-tile:hover {
  border-color: #d7dbc8;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(23, 26, 16, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .thallo-lead,
  .thallo-side,
  .thallo-tile,
  .thallo-lead:hover,
  .thallo-side:hover,
  .thallo-tile:hover,
  a.thallo-topic:hover {
    transform: none;
    transition: none;
  }
}
/* The whole card is the target, with the headline's own link stretched over
   it — one link, named by the headline, whatever a reader clicks. */
.thallo-lead__title a::after,
.thallo-side__title a::after,
.thallo-tile__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* The lead: picture and words side by side above 1000px. */
.thallo-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .thallo-lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .thallo-lead__media {
    order: 2;
    height: 100%;
  }
}
.thallo-lead__media {
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--olive-tint);
  overflow: hidden;
}
.thallo-lead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thallo-lead__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem 2rem 1.75rem;
}
@media (min-width: 1000px) {
  .thallo-lead__body {
    justify-content: center;
    padding: 2.5rem 2.5rem;
  }
}
.thallo-lead__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.thallo-lead__title a,
.thallo-side__title a,
.thallo-tile__title a {
  color: var(--wp--preset--color--olive-ink, #171a10);
  text-decoration: none;
}
.thallo-lead:hover .thallo-lead__title a,
.thallo-side:hover .thallo-side__title a,
.thallo-tile:hover .thallo-tile__title a {
  color: var(--wp--preset--color--olive);
}
.thallo-lead__sum {
  margin: 0;
  max-width: 46ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
}
.thallo-lead__go {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wp--preset--color--olive);
}
.thallo-lead__time {
  font-weight: 600;
  color: #9ca3af;
}

/* The category, everywhere it appears. */
.thallo-kind {
  align-self: flex-start;
  border-radius: 9999px;
  background: var(--wp--preset--color--olive-tint);
  padding: 0.3rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
}

/* The two beside the lead: thumbnail right, headline left. */
.thallo-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  align-items: stretch;
}
.thallo-side__media {
  order: 2;
  background: var(--wp--preset--color--olive-tint);
  overflow: hidden;
}
.thallo-side__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thallo-side__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.35rem;
}
.thallo-side__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}
.thallo-side__time {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
}

/* ── 4 · Latest ────────────────────────────────────────────────────────────*/
.thallo-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
@media (max-width: 1100px) {
  .thallo-hub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .thallo-hub__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.thallo-tile {
  display: flex;
  flex-direction: column;
}
.thallo-tile__media {
  aspect-ratio: 16 / 10;
  background: var(--wp--preset--color--olive-tint);
  overflow: hidden;
}
.thallo-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thallo-tile__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 0.7rem;
  padding: 1.25rem 1.35rem 1.35rem;
}
.thallo-tile__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.02em;
}
.thallo-tile__sum {
  margin: 0;
  flex-grow: 1;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--wp--preset--color--grey-500);
}
.thallo-tile__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
}
.thallo-hub__more {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* ── The cards that are not articles yet ───────────────────────────────────
   Flat ivory, dashed edge, no link — but the same lift on hover as a real
   card, so the shelf feels like part of the grid and not a dead patch of it.
   They have to read as a shelf waiting to be filled rather than as an
   article that failed to load, which is why the only words on them are a
   subject and "Coming soon" — no headline, no date, nothing that could be
   mistaken for a piece that exists. */
.thallo-lead--soon,
.thallo-side--soon,
.thallo-tile--soon {
  background: var(--hub-ivory);
  border-style: dashed;
  border-color: #e4e6dd;
}
.thallo-soon__media {
  background: repeating-linear-gradient(
    -45deg,
    rgba(57, 71, 29, 0.045),
    rgba(57, 71, 29, 0.045) 6px,
    transparent 6px,
    transparent 14px
  );
}
.thallo-lead--soon .thallo-soon__media {
  aspect-ratio: 16 / 10;
}
.thallo-side--soon .thallo-soon__media {
  order: 2;
}
.thallo-tile--soon .thallo-soon__media {
  aspect-ratio: 16 / 10;
}
.thallo-soon__body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.25rem 1.35rem 1.35rem;
}
.thallo-lead--soon .thallo-soon__body {
  justify-content: center;
  padding: 2.5rem;
}
.thallo-soon__label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #9ca3af;
}
.thallo-lead--soon,
.thallo-side--soon,
.thallo-tile--soon {
  display: grid;
}
.thallo-side--soon {
  grid-template-columns: minmax(0, 1fr) 7.5rem;
}
@media (min-width: 1000px) {
  .thallo-lead--soon {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .thallo-lead--soon .thallo-soon__media {
    order: 2;
    aspect-ratio: auto;
  }
}

/* ── 5 · The invitation ────────────────────────────────────────────────────
   One line, one button, ivory ground. Deliberately the plainest block on the
   page: a publication that ends in a second landing page is a publication
   nobody trusts. */
.thallo-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: var(--hub-gap);
  padding: 2rem 2.25rem;
  border: 1px solid var(--wp--preset--color--olive);
  border-radius: 24px;
  /* The dark olive, white letters: of the two surfaces the series keeps (Cami,
     2026-09-20 — grey for what informs, olive for what matters) this is the
     card that asks the reader to do something, so it takes the dark one. It
     sat on the ivory before, which read to her as the pale green it was not.
     The disc and the button swap to white on it so the card has one ground
     and two lights, rather than olive on olive. */
  background: var(--wp--preset--color--olive);
  color: #fff;
}
.thallo-close__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
}
.thallo-close__mark img {
  width: 1.9rem;
  height: 1.9rem;
  object-fit: contain;
  /* The isotype is dark on transparent, which on the white disc is the right
     way round already. */
}
.thallo-close__say {
  flex: 1 1 22rem;
}
.thallo-close__h {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #fff;
}
.thallo-close__p {
  margin: 0.6rem 0 0;
  max-width: 48ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.thallo-close__go {
  flex-shrink: 0;
  gap: 0.35rem;
  padding: 0.85rem 1.6rem;
}
.thallo-close .thallo-btn--solid {
  background: #fff;
  border-color: #fff;
  color: var(--wp--preset--color--olive);
}
.thallo-close .thallo-btn--solid:hover {
  background: #f3f4f6;
  border-color: #f3f4f6;
}
.thallo-hub .thallo-sub {
  margin-top: 1.5rem;
}

/* The floor of the hub. The list card is the last thing on the page, and the
   footer used to sit fifteen rem under it — three separate margins stacked
   on one another. On the hub the footer follows the card at ordinary section
   distance. Its hairline stays: the rule is the footer's edge. */
body.blog .thallo-hub.thallo-archive {
  padding-bottom: 2.5rem;
}
body.blog .thallo-foot {
  margin-top: 0;
  padding-top: var(--wp--preset--spacing--50);
}
@media (max-width: 760px) {
  .thallo-close {
    padding: 1.5rem 1.35rem;
  }
}

/* ── The invitation ────────────────────────────────────────────────────────
   Paper rather than white, so it separates from the page without becoming a
   second dark slab three inches under the first one, with the leaf washed out
   behind the button. */
.thallo-band {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 24px;
  margin-top: 4rem;
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
}
/* The photograph, washed almost out and pinned to the right edge behind the
   button. Half-way across the panel it read as a smudge somebody had failed to
   remove; against the edge, with the left side faded into the paper, it reads
   as what it is — the panel having a texture rather than a picture in it. */
.thallo-band__leaf {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 38%;
  object-fit: cover;
  object-position: 72% center;
  /* Faint enough that the note under the button is read as type rather than as
     type on a photograph. At 0.3 the mug behind "free · no account" was the
     first thing the eye found. */
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
  mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.thallo-band__say,
.thallo-band__do {
  position: relative;
  z-index: 1;
}
.thallo-band__say {
  flex: 1 1 26rem;
}
.thallo-band__eyebrow {
  margin: 0 0 0.7rem;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive-mid);
}
.thallo-band__h {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--wp--preset--color--olive-ink, #171a10);
}
.thallo-band__h em {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--wp--preset--color--olive);
}
.thallo-band__p {
  margin: 0.85rem 0 0;
  max-width: 46ch;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
}
.thallo-band__do {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  flex-shrink: 0;
}
.thallo-band__do .thallo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.75rem 1.35rem;
}
.thallo-band__note {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* ── The list ──────────────────────────────────────────────────────────────
   The address goes where the contact form's addresses go. The field marked
   `website_url` is the honeypot the endpoint already expects: off screen, not
   focusable, and never seen by a person. */
.thallo-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: #fff;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 24px;
  margin-top: 1.5rem;
  padding: 1.75rem 2.25rem;
}
.thallo-sub__say {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.thallo-sub__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--wp--preset--color--olive);
  color: #fff;
}
.thallo-sub__p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--wp--preset--color--olive-ink, #171a10);
}
/* A grid, not a wrapping flex row. A wrapping row is as wide as everything
   laid end to end — field, button and the note under them — so the form used
   to be a hundred and fifty pixels wider than it looked and the button sat
   that far short of the edge. The note gets a row of its own. */
.thallo-sub__form {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.6rem;
}
.thallo-sub__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.thallo-sub__input {
  width: 15rem;
  max-width: 100%;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 9999px;
  background: #fff;
  padding: 0.7rem 1.1rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--wp--preset--color--olive-ink, #171a10);
}
.thallo-sub__input::placeholder {
  color: #9ca3af;
}
.thallo-sub__input:focus {
  outline: 2px solid var(--wp--preset--color--olive);
  outline-offset: 1px;
  border-color: transparent;
}
.thallo-sub__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.thallo-sub__go {
  border: 0;
  padding: 0.72rem 1.35rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.thallo-sub__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.68rem;
  color: #9ca3af;
}
.thallo-sub__note.is-bad {
  color: #9b2c2c;
}
.thallo-sub__note.is-good {
  color: var(--wp--preset--color--olive);
  font-weight: 600;
}
@media (max-width: 760px) {
  .thallo-sub,
  .thallo-band {
    padding: 1.5rem 1.35rem;
  }
  .thallo-sub__form {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .thallo-sub__input {
    width: 100%;
  }
}


/* ── Contrast on the featured card ─────────────────────────────────────────
   The title arrived as a link, and a link inherits the global link colour from
   theme.json unless something says otherwise. On the green card that rendered
   near-black on near-black — the heading was there, at the right size, and
   unreadable. Every colour on this card is therefore stated against the card
   rather than inherited. */
.thallo-feat .thallo-feat__title,
.thallo-feat .thallo-feat__title a,
.thallo-feat .thallo-feat__title a:hover,
.thallo-feat .thallo-feat__title a:visited,
.thallo-feat .thallo-feat__title a:focus {
  color: #ffffff !important;
  text-decoration: none;
}
.thallo-feat .thallo-feat__title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.thallo-feat .thallo-feat__excerpt,
.thallo-feat .thallo-feat__excerpt p {
  color: rgba(255, 255, 255, 0.72) !important;
}
.thallo-feat .thallo-feat__go {
  color: var(--wp--preset--color--olive-soft) !important;
}
/* The same statement for the light cards, so a global link colour cannot turn
   a card title blue there either. */
.thallo-card .thallo-card__title,
.thallo-card .thallo-card__title a,
.thallo-card .thallo-card__title a:visited {
  color: #171a10 !important;
  text-decoration: none;
}
.thallo-card .thallo-card__title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The whole card is the link, so the photograph must not sit above it. */
.thallo-feat__media a,
.thallo-card__media a {
  display: block;
  height: 100%;
}

/* ── Uncategorized ─────────────────────────────────────────────────────────
   WordPress's default term, not a decision anybody made. A card wearing it as
   a badge says the writer forgot something. Hidden until there are real
   categories, at which point every one of these fills in on its own. */
.thallo-meta .wp-block-post-terms:empty,
.thallo-card__kind:empty {
  display: none;
}
.thallo-meta .wp-block-post-terms:empty + *::before {
  content: none;
}

/* ── The contents, beside the article ──────────────────────────────────────
   The prose sits in the same 52rem column the hero's title uses, centred on
   the page, and the list hangs in the left margin beside it. It used to be a
   two-column grid — list, then prose — centred as a pair, which pushed the
   article ~200px to the right of the headline it continues from: the title
   started at one edge, the paragraphs at another, and the page read as two
   layouts stacked. Three columns, the outer two equal, keeps the middle where
   the hero put it whatever the list weighs.

   The rail needs 12rem of margin on each side of the measure to exist at all,
   which is 1380px of viewport; below that the list sits above the article as
   a box — the same information in the shape that fits. */
/* The box, at the article's width and on its edge. The group it sits in is
   alignwide, and without this the list ran the full 72rem while the prose
   under it ran 52rem: a box wider than the thing it is a contents of. The
   same 52rem as the prose column, not narrower — anything narrower is
   centred in it, and the list started 64px to the right of the paragraphs
   it was a contents of. */
.thallo-post__with-toc > .thallo-toc {
  box-sizing: border-box;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1380px) {
  .thallo-post__with-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 52rem) minmax(0, 1fr);
    column-gap: 3.5rem;
    align-items: start;
    /* The group is alignwide inside main's constrained layout, which writes a
       72rem max-width from the block editor's own stylesheet — too narrow for
       a margin either side of the measure. The override has to be !important
       for the same reason it did when this was a pair. */
    max-width: none !important;
    width: 100%;
  }
  .thallo-post__with-toc > .thallo-toc {
    grid-column: 1;
    justify-self: end;
    width: 100%;
    max-width: 14rem;
    position: sticky;
    top: 7.5rem;
    margin: 0;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
  }
  .thallo-post__prose {
    grid-column: 2;
    margin: 0;
  }
}

/* Flush left inside the column. The paragraphs are capped at 68ch for the
   reading line, and the constrained layout centres anything narrower than the
   column with `margin-inline: auto !important` — so every paragraph started
   50px in from its own heading, and 250px in from the title above the fold.
   Same edge for all of it now. Higher specificity and !important, because the
   rule this beats has both. */
.thallo-post__prose .wp-block-post-content > :is(p, ul, ol) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* ── The black frame when you click ────────────────────────────────────────
   The browser draws a focus ring on anything you click — the logo on its way
   back to the site, a card, a button — and on a page this quiet it reads as a
   rendering fault rather than as a state.
 
   Removed with `:focus:not(:focus-visible)`, not with `outline: none`. The two
   are not the same: the second deletes the ring for everyone, and somebody
   navigating this blog by keyboard then has no way to tell where they are —
   a page you can only use with a mouse. `:focus-visible` is the browser's own
   answer to which of the two just happened, and every browser we support has
   had it for years.

   So: nothing on a click, and on a keyboard the olive ring below, which is the
   one the site uses. */
:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wp--preset--color--olive);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On the dark panels the olive disappears into the background. */
.thallo-feat a:focus-visible,
.thallo-nav__cta .thallo-btn--solid:focus-visible {
  outline-color: #fff;
}
/* The image links inside a card have no text of their own, so a ring around
   the picture is the only thing that would show — and the card lifts on focus
   anyway through the same rule as hover. */
.thallo-feat__media a:focus-visible,
.thallo-card__media a:focus-visible {
  outline-offset: -3px;
}


/* ── The article's opening, on its photograph ──────────────────────────────
   Everything inside the cover is white, and stays white whatever the picture
   is: the overlay is a flat 70% of ink rather than a gradient, so there is no
   corner of a photograph where the type lands on something bright. A hero that
   is legible on four out of five images is a hero that is illegible on the
   fifth, and the fifth is the one Camila will want to use. */
.thallo-hero {
  overflow: hidden;
  position: relative;
  /* The same side padding the page has (theme.json's root 1.5rem), so the
     52rem column inside the cover is the 52rem column the article uses and
     the title lands on the paragraphs' edge at every width — not only the
     wide ones where both fit with room to spare. The template writes 3.25rem
     inline, which put the hero 28px in from the prose on a phone. */
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
/* El contenedor interno del cover viene posicionado, así que una caja absoluta
   dentro se cuelga de él — de la columna de texto, no del panel. Devolverlo a
   `static` es lo que hace que la esquina sea la esquina. */
.thallo-hero .wp-block-cover__inner-container {
  position: static;
}
.thallo-hero .wp-block-cover__inner-container > * {
  color: #fff;
}
/* The dateline: where you are, when it was written, how long it takes.

   In the flow, above the title, at the text column's own left edge — and it
   was absolute in the panel's top corner until today. The corner is where the
   fixed navbar is: the pill covered the middle of the line and left the two
   ends of it sticking out on either side, which is not a frame around the
   piece, it is a collision. Nothing about the line changed except that it now
   sits where there is room for it. */
.thallo-hero .wp-block-cover__inner-container > .thallo-hero__top,
.thallo-hero__top {
  position: static;
  z-index: 2;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.thallo-hero .wp-block-cover__inner-container > .thallo-hero__top {
  /* Gana a la regla que pinta de blanco todo lo que hay dentro del cover: esta
     línea es marco, no texto, y en blanco puro compite con el titular. */
  color: rgba(255, 255, 255, 0.55);
}
.thallo-hero__top > *,
.thallo-hero__top > * a {
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
  color: inherit;
}
/* A dot between each pair, drawn rather than typed, so a missing category does
   not leave a separator with nothing on one side of it. */
.thallo-hero__top > * + *::before {
  content: '·';
  margin-right: 0.6rem;
  color: rgba(255, 255, 255, 0.3);
}
.thallo-hero__top a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.thallo-hero__top a:hover {
  color: #fff;
}
.thallo-hero__back a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.thallo-hero__title {
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
/* The excerpt is the promise the title makes, so it reads as prose rather than
   as a caption — the same size it had on white, with enough contrast against
   the photograph to be read rather than glanced at. */
/* Flush left, under the title. The block is as wide as the title's column —
   52rem, the cover's own contentSize — so the layout's auto margins put it
   exactly where they put the headline; the 46ch reading line is on the
   paragraph inside. It used to be the block that was 46ch, and the cover's
   `margin-left: auto !important` centred that inside the column: every post
   opened with its standfirst a hand's width in from its own title. */
.thallo-hero__lead,
.thallo-hero .wp-block-cover__inner-container > .thallo-hero__lead {
  margin: 0;
  max-width: 52rem;
  line-height: 1.6;
}
/* The excerpt block renders the text in a child paragraph that carries the
   theme's own grey, so colouring the wrapper did nothing — grey on a
   photograph, which is the one combination that cannot be read. The child is
   what has to be told. */
.thallo-hero__lead .wp-block-post-excerpt__excerpt {
  margin: 0;
  max-width: 46ch;
  color: #ffffff;
}
.thallo-hero__lead .wp-block-post-excerpt__more-text {
  display: none;
}
/* The picture leads on a phone as much as on a laptop, but 460px of it under a
   title that now wraps to four lines is a screen and a half before the article
   starts. */
@media (max-width: 700px) {
  .thallo-hero {
    min-height: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   The AI Shortlist — the research series.

   Two pages: the hub at /ai-shortlist/ and one page per volume under it.
   Both wear the blog's shell (.thallo-archive) so the navbar, the 1440px
   measure, the rules between sections and the closing blocks are the ones a
   reader has already seen — and both draw only from the five colours the
   rest of the site uses. The two things that are new here are the panel of
   figures on the hub, which is the site's own "measured" panel with its glass
   cards, and the ranking table, which is the results page's table with a bar
   in every row.
   ══════════════════════════════════════════════════════════════════════════ */

.thallo-shortlist {
  --hub-ivory: #fbfbf8;
  --hub-gap: 5rem;
  --cream: #f3e6c1; /* the figure colour on the site's dark panels */

  /* The type scale — five sizes, and every heading and paragraph on the hub
     and in a volume takes one of them. There were eleven (Cami, 2026-09-21:
     "una melcocha de tamaños"). The page title; the section heading, which
     is also the heading of the two dark panels; the card heading, for
     anything at h3 — a volume card, a note, a firm's reading, the case, the
     aside; the body; and the label, small capitals. The one line in the
     serif italic — the question, a quote, the overlap — has its own size,
     because it is a different voice, not a different rank. */
  --t-page: clamp(2.25rem, 4vw, 3rem);      /* /results/: text-4xl, sm:text-5xl */
  --t-section: clamp(1.75rem, 2.8vw, 2.25rem);
  --t-cta: clamp(2.25rem, 4.5vw, 3.75rem);  /* /results/ closing panel: text-4xl, sm:text-6xl */
  --t-card: 1.5rem;                          /* /results/ card headline: text-2xl */
  --t-body: 1rem;                            /* text-base */
  --t-small: 0.875rem;                       /* text-sm */
  --t-label: 0.6875rem;                      /* 11px */
  --t-italic: 1.35rem;
}

/* ── The entrance ──────────────────────────────────────────────────────────
   Classes assets/shortlist.js adds as it goes, never written into markup: a
   page without the script, or a reader who asked for less motion, sees the
   page at rest. The easing is the site's — a fast start that settles. */
.thallo-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.thallo-reveal.is-in {
  opacity: 1;
  transform: none;
}
.thallo-reveal--table tbody tr {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.thallo-reveal--table.is-in tbody tr {
  opacity: 1;
  transform: none;
}
.thallo-reveal--table .thallo-rate__fill {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.thallo-reveal--table.is-in .thallo-rate__fill {
  transform: scaleX(1);
}

/* ── The masthead ──────────────────────────────────────────────────────────
   Type alone, larger than the blog's: it is the name of a series, not a
   tagline. The question under it is set in the serif italic — the one
   register the site keeps for the line it wants remembered. */
/* Centrada. La serie se presenta como una publicación, no como un artículo:
   la cabecera es una portada, y una portada se lee desde el centro. El resto
   de la página — las columnas, las tablas, los volúmenes — sigue alineado a la
   izquierda, que es donde se lee un documento.

   Las medidas siguen siendo las de antes; lo único que cambia es que los
   bloques se centran entre sí con `margin-inline: auto`. Sin eso, un
   `text-align: center` deja el texto centrado dentro de una caja que sigue
   pegada a la izquierda, que es peor que no centrar nada. */
/* Measured against /results/ at 1440 (2026-09-21): the title 128px from
   the top, 16px to the line under it, 40px from that line to the mark, the
   mark 5rem at 80%, 40px under it, the section's hairline, and 64px to
   the next block. The same numbers here, so the hub's head is the site's
   head. */
.thallo-mast--series {
  margin-bottom: 0;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #f3f4f6;
  text-align: center;
}
.thallo-shortlist .thallo-mast--series + .thallo-run {
  margin-top: 4rem;
}
/* The size /results/ opens at — text-4xl to text-5xl, 2.25 to 3rem — and its
   emphasis: the last word in olive, upright. It was the serif italic at
   4.6rem; Cami (2026-09-21): the title was huge, and the italic is not the
   title's — it is the question's, underneath. */
.thallo-mast__title--series {
  max-width: 16ch;
  margin-inline: auto;
  font-size: var(--t-page);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.thallo-mast__accent {
  color: var(--wp--preset--color--olive);
}
.thallo-series__question {
  margin: 1rem 0 0;
}
/* Wider than a column of prose on purpose — 56ch puts the question on two
   lines and the intro on three, so the panel and the studies start a
   hundred pixels sooner (Cami, 2026-09-21). The sides were empty. */
.thallo-series__question .wp-block-post-excerpt__excerpt,
.thallo-series__question p {
  margin: 0 auto;
  max-width: 56ch;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: var(--t-italic);
  line-height: 1.35;
  color: var(--wp--preset--color--grey-900);
}
/* The mark under the masthead, turning once every thirty seconds as it does
   on /results/. At rest for a reader who asked their system for less motion. */
.thallo-mast__flower {
  display: block;
  width: 5rem;
  height: 5rem;
  margin: 2.5rem auto 0;
  opacity: 0.8;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.thallo-mast__flower.is-held {
  cursor: grabbing;
}
/* Once the script has the turn, the keyframe lets go — an animation would
   override the transform the script writes every frame. */
.thallo-mast__flower.is-driven img {
  animation: none;
}
.thallo-mast__flower img {
  user-select: none;
  -webkit-user-drag: none;
}
/* The reveal lands every masthead child at opacity 1; the mark stays at
   the site's 80%. */
.thallo-mast__flower.thallo-reveal.is-in {
  opacity: 0.8;
}
.thallo-mast__flower img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: thallo-turn 30s linear infinite;
}
@keyframes thallo-turn {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .thallo-mast__flower img {
    animation: none;
  }
}
.thallo-series__intro {
  margin-top: 1.25rem;
}
/* 100ch: two lines at 1280 and up, without running the width of the
   page — 118 did, and read as a banner (Cami, 2026-09-21). */
.thallo-series__intro p {
  max-width: 100ch;
  margin: 0 auto 0.6rem;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
}
.thallo-series__intro p:last-child {
  margin-bottom: 0;
}

/* ── The tool, run on a category ───────────────────────────────────────────
   The site's photograph panel — rounded, the picture pinned to its bottom
   edge, a scrim down the left so the type clears AA on the lit part of the
   wall — split in two: the four steps of the scan on the left, in the
   numbered rings the scan itself uses for "1 Your brand · 2 Your questions
   · 3 Scanning · 4 Report", and the scan's white card on the right, mid-run,
   as it sits on the photograph at /thallo-ai/scan/. */
.thallo-run {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem);
  background: #171a10 url('https://thallodigital.com/measured-bg.webp') center 100% / cover no-repeat;
  color: #fff;
}
.thallo-run__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 26, 16, 0.72), rgba(23, 26, 16, 0.35) 55%, rgba(23, 26, 16, 0.15));
}
.thallo-run__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 29rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.thallo-run__eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive-soft);
}
.thallo-run__h {
  margin: 0 0 0.75rem;
  max-width: 18ch;
  font-size: var(--t-section);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.thallo-run__p {
  margin: 0;
  max-width: 48ch;
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--wp--preset--color--olive-soft);
}

/* The steps: the scan's own stepper, stood on end. A ring with the number,
   a rule from one ring to the next, the label and its line. */
.thallo-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
}
.thallo-step {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0 0.75rem;
}
.thallo-step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(23, 26, 16, 0.5);
}
.thallo-step__say {
  padding-top: 0.15rem;
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--wp--preset--color--olive-soft);
}
.thallo-step__say strong {
  display: block;
  margin-bottom: 0.1rem;
  font-size: var(--t-body);
  font-weight: 700;
  color: #fff;
}
/* ── The card ────────────────────────────────────────────────────────────
   White, 24px corners, the site's card shadow — the shape the site gives a
   card on a photograph. What is on it is one question of Volume 01 and what
   came back: the figures are the study's, not a demonstration's, and nothing
   on it says "scan". */
.thallo-console {
  position: relative;
  padding: 1.15rem 1.35rem 1.1rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
  color: var(--wp--preset--color--grey-900);
}
.thallo-console__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-console__vol {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-900);
}
.thallo-console__vol span {
  margin-left: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9ca3af;
}
.thallo-console__tag {
  flex-shrink: 0;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(57, 71, 29, 0.1);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
}

/* The question types itself: a monospaced line whose width steps from nothing
   to its length, with a caret that blinks until it is done. Sized in ch
   because that is the unit a typed line has. */
.thallo-console__q {
  margin: 0.8rem 0 0;
}
.thallo-console__ql {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
}
.thallo-console__type {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--wp--preset--color--grey-900);
}

.thallo-console__models {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
}
.thallo-console__model {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0;
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.thallo-console__who {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--wp--preset--color--grey-900);
}
.thallo-console__who img {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  object-fit: contain;
}
.thallo-console__named {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.thallo-console__named span {
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: #f3f4f6;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--wp--preset--color--grey-900);
  white-space: nowrap;
}
.thallo-console__named span:first-child {
  background: rgba(57, 71, 29, 0.1);
  color: var(--wp--preset--color--olive);
}

.thallo-console__list {
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--wp--preset--color--ink);
}
.thallo-console__ll {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--olive);
}
.thallo-console__ll span {
  font-family: var(--wp--preset--font-family--mono);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #9ca3af;
}
.thallo-console__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.thallo-console__rows li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 2.6rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.3rem 0;
  font-size: 0.78rem;
}
.thallo-console__rows li > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.thallo-console__rows b {
  text-align: right;
  font-weight: 700;
  color: var(--wp--preset--color--olive);
  font-variant-numeric: tabular-nums;
}
.thallo-console__bar {
  display: block;
  height: 6px;
  border-radius: 9999px;
  background: var(--wp--preset--color--hairline);
  overflow: hidden;
}
.thallo-console__bar i {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  border-radius: 9999px;
  background: var(--wp--preset--color--olive);
  transform-origin: left center;
}
.thallo-console__foot {
  margin: 0.7rem 0 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.68rem;
  color: #9ca3af;
}

/* ── Its motion ──────────────────────────────────────────────────────────
   Started by the reveal that lifts the panel (`.is-in`, from
   assets/shortlist.js), so it plays once, when the reader reaches it, in
   the order the scan itself works: the question is typed, then the models
   answer one after another, then the bars fill. Everything ships finished
   in the markup; only the class starts it, and without the script — or with
   less motion asked for — the card is simply at rest, complete. */
.thallo-reveal .thallo-console__type {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  max-width: 0;
  border-right: 2px solid var(--wp--preset--color--olive);
}
.thallo-reveal.is-in .thallo-console__type {
  animation: thallo-type 1.6s steps(50, end) 0.3s forwards, thallo-caret 0.7s step-end 6 2.2s;
}
@keyframes thallo-type {
  from { max-width: 0; }
  to { max-width: 100%; }
}
@keyframes thallo-caret {
  50% { border-color: transparent; }
  to { border-color: transparent; }
}
.thallo-reveal .thallo-console__model {
  opacity: 0;
  transform: translateY(6px);
}
.thallo-reveal.is-in .thallo-console__model {
  animation: thallo-in 0.5s ease-out forwards;
  animation-delay: calc(2s + var(--i, 0) * 0.35s);
}
@keyframes thallo-in {
  to { opacity: 1; transform: none; }
}
.thallo-reveal .thallo-console__bar i {
  transform: scaleX(0);
}
.thallo-reveal.is-in .thallo-console__bar i {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(3.2s + var(--i, 0) * 0.12s);
  transform: scaleX(1);
}
/* The figures count (assets/shortlist.js) instead of fading in: a fade
   over a count hid half of it. They are simply there, at 0, until the
   bars start. */
@media (max-width: 1023.98px) {
  .thallo-run__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-run__h {
    max-width: none;
  }
}
@media (max-width: 560px) {
  .thallo-run {
    padding: 1.75rem 1.25rem;
  }
  .thallo-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-console {
    padding: 1.2rem 1.1rem 1.1rem;
  }
  /* No typing on a phone: the line wraps there, and a wrapping line cannot
     be typed with a width. It arrives whole. */
  .thallo-reveal .thallo-console__type,
  .thallo-reveal.is-in .thallo-console__type {
    max-width: none;
    white-space: normal;
    border-right: 0;
    animation: none;
  }
  .thallo-console__rows li {
    grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem;
  }
}

/* ── The volumes ───────────────────────────────────────────────────────────
   The cards, as /results/ lists its cases — the same shell, the same parts
   in the same order: the pills, the headline, one figure in olive with its
   line, the blurb, and the date against the button. Three across, the way
   the case studies sit; two on a tablet, one on a phone.

   A published volume is a link the whole card and lifts on hover like every
   card on the site. A scheduled one is a plain box on the grey ground with
   "Coming soon" said on it and a ghost button that is not a link — never a
   card that looks clickable and is not. Same edge and shadow as a published
   one: the ground and the pill carry the difference, not a flatter card. */
/* 3rem, not the section gap: the panel and the row of studies are one
   thought — the method, then what it produced — and 5rem read as two
   (Cami, 2026-09-21). */
/* The rule under the row — the hairline every section of the site ends on —
   before the photograph panel. */
.thallo-cards {
  margin-top: 2.25rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
/* Each card sits in a wrapper of its own, because the shortcode block runs
   its output through wpautop and an <a> standing free in a grid comes back
   with a stray <p> beside it — a seventh, empty grid cell. */
.thallo-cards__item {
  display: flex;
  min-width: 0;
}
/* The box is a flex row of one, so the card fills the row's height by being
   stretched rather than by a percentage — `height: 100%` inside a grid item
   is settled before the row is, and the cards overflowed their rows. */
.thallo-card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* Border-box, or the stretch is measured on the content and the 2rem of
     padding lands outside the row — the cards overflowed into the row below
     by exactly that much. The theme does not set it globally. */
  box-sizing: border-box;
  min-width: 0;
  /* One height for every card, on every page of the row: 24rem holds the
     fullest card (a published volume with its figure and line) and the
     empty ones stand at the same height instead of shrinking when the
     pager turns (Cami, 2026-09-21). */
  min-height: 24rem;
  padding: 2rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 20px -8px rgba(23, 26, 16, 0.14);
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
.thallo-card--soon {
  background: rgba(249, 250, 251, 0.6);
}
@media (hover: hover) {
  a.thallo-card:hover {
    transform: translateY(-4px);
    border-color: var(--wp--preset--color--olive);
    box-shadow: 0 24px 60px -30px rgba(57, 71, 29, 0.25);
  }
  a.thallo-card:hover .thallo-card__go {
    background: var(--wp--preset--color--olive-mid);
  }
}
a.thallo-card:focus-visible {
  outline: 2px solid var(--wp--preset--color--olive);
  outline-offset: 4px;
}
/* The pills — the same two the volumes wear on "In the answers" and "On the
   page", so a reader who has seen one knows the other. */
.thallo-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.thallo-tag--olive {
  color: var(--wp--preset--color--olive-mid);
  background: rgba(85, 103, 46, 0.12);
}
.thallo-tag--grey {
  color: #9ca3af;
  background: #f3f4f6;
}
/* Google's tag, in Google's colour. */
.thallo-tag--ink {
  color: #fff;
  background: var(--wp--preset--color--ink);
}
.thallo-card__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.thallo-card__h {
  display: block;
  margin-top: 1.25rem;
  font-size: var(--t-card);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--wp--preset--color--grey-900);
}
.thallo-card__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* The figure is the object on a live card: 2.1rem, olive, the site's own
   number style. It is the finding the volume opens with, read from the study
   — see thallo_shortlist_finding(). */
.thallo-card__stat {
  display: block;
  margin-top: 0.75rem;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--wp--preset--color--olive);
  font-variant-numeric: tabular-nums;
}
.thallo-card__label {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1.375;
  color: var(--wp--preset--color--olive);
}
/* On an upcoming card there is no figure, so this line stays small and grey:
   set at 2rem in olive it would read as a result whatever the words said. */
.thallo-card__soon {
  display: block;
  margin-top: 0.75rem;
  font-size: var(--t-small);
  font-weight: 500;
  color: #9ca3af;
}
.thallo-card__p {
  display: block;
  margin-top: 1rem;
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.625;
  color: var(--wp--preset--color--grey-500);
}
.thallo-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1.5rem;
}
.thallo-card__date {
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
}
.thallo-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--wp--preset--color--olive);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.thallo-card__go--soon {
  border: 1px solid var(--wp--preset--color--hairline);
  background: none;
  color: #9ca3af;
}
.thallo-card--soon .thallo-card__h {
  color: #9ca3af;
}
.thallo-card--soon .thallo-card__p {
  color: #9ca3af;
}
.thallo-cards__empty {
  margin: var(--hub-gap) 0 0;
  padding: 2rem 0;
  border-top: 1px solid var(--wp--preset--color--hairline);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  max-width: 56ch;
  color: var(--wp--preset--color--grey-500);
}

/* The filter, above the list it governs: pills rather than a select, so
   every option is visible at a glance. The pressed one is olive; the rest
   are white on a hairline and lift a little on hover, as on /results/. */
.thallo-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}
.thallo-filter__pill {
  padding: 0.5rem 1rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 9999px;
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wp--preset--color--grey-500);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.thallo-filter__pill:hover {
  color: var(--wp--preset--color--olive);
  border-color: var(--wp--preset--color--olive);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(57, 71, 29, 0.35);
}
.thallo-filter__pill.is-on {
  background: var(--wp--preset--color--olive);
  border-color: var(--wp--preset--color--olive);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.thallo-filter__pill:focus-visible {
  outline: 2px solid var(--wp--preset--color--olive);
  outline-offset: 3px;
}
.thallo-cards__item.is-off {
  display: none;
}

/* The pager under the row: an arrow, the page numbers, an arrow — round
   buttons in the filter's own language, the current page in olive, the
   arrows dimmed when there is nowhere to go. Drawn by the script from what
   is on the page; the nav is empty without it, and takes no room. */
.thallo-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.thallo-pager:empty {
  display: none;
}
.thallo-pager__n,
.thallo-pager__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 50%;
  background: #fff;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--wp--preset--color--grey-500);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.thallo-pager__n:hover,
.thallo-pager__arrow:hover:not([disabled]) {
  color: var(--wp--preset--color--olive);
  border-color: var(--wp--preset--color--olive);
}
.thallo-pager__n.is-on {
  background: var(--wp--preset--color--olive);
  border-color: var(--wp--preset--color--olive);
  color: #fff;
}
.thallo-pager__arrow[disabled] {
  color: #d1d5db;
  cursor: default;
}
.thallo-pager__n:focus-visible,
.thallo-pager__arrow:focus-visible {
  outline: 2px solid var(--wp--preset--color--olive);
  outline-offset: 3px;
}
@media (max-width: 1023.98px) {
  .thallo-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639.98px) {
  .thallo-cards__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-card {
    padding: 1.6rem;
  }
}

/* ── The closing panel ─────────────────────────────────────────────────────
   The photograph panel every page of the site ends on — /results/ says
   "Start with the evidence." on it — with the scan as the first button and
   the audit as the second. The scrim holds the white type down over the lit
   wood on the side the copy sits on. The buttons are the panel's own: white
   solid, and a white ghost; not the theme's olive ones, which would vanish
   into the photograph. */
.thallo-panel {
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 5vw, 4rem);
  border-radius: 28px;
  background: #171a10;
  color: #fff;
}
.thallo-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.thallo-panel__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 26, 16, 0.55), rgba(23, 26, 16, 0.2) 50%, transparent);
}
/* The text on the left, the two buttons on the right at the text's middle
   — where the site's panel keeps its form (Cami, 2026-09-21). Under 1024
   the buttons drop below the text. */
.thallo-panel__say {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 clamp(2rem, 5vw, 5rem);
}
.thallo-panel__say > .thallo-panel__h,
.thallo-panel__say > .thallo-panel__p {
  grid-column: 1;
}
.thallo-panel__h {
  margin: 0 0 1.25rem;
  max-width: 20ch;
  font-size: var(--t-section); /* not the site's 60px: that panel balances a form; this one carries two buttons (Cami, 2026-09-22) */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
}
.thallo-panel__p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 500;
  line-height: 1.625;
  color: var(--wp--preset--color--olive-soft);
}
.thallo-panel__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 0;
  min-width: 13rem;
}
.thallo-panel__go .thallo-panel__btn {
  justify-content: center;
}
@media (max-width: 1023.98px) {
  .thallo-panel__say {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-panel__go {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 2rem;
    min-width: 0;
  }
}
.thallo-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s, background-color 0.2s;
}
.thallo-panel__btn--solid {
  background: #fff;
  color: var(--wp--preset--color--olive);
}
.thallo-panel__btn--solid:hover {
  color: var(--wp--preset--color--ink);
}
.thallo-panel__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.thallo-panel__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 639.98px) {
  .thallo-panel__btn {
    width: 100%;
    justify-content: center;
  }
}

/* The list sits at the section rhythm on the hub, where it follows the
   volumes. In a volume it follows the invitation — two cards, one after the
   other — and a card's distance from a card is 1.5rem, the hub's own number
   for the same pair; 5rem between them read as two sections (Cami,
   2026-09-20). */
.thallo-shortlist .thallo-sub--series {
  margin-top: var(--hub-gap);
}
.thallo-volume .thallo-close--volume + .thallo-sub--series {
  margin-top: 1.5rem;
}
.thallo-shortlist .thallo-sub--series + .thallo-close {
  margin-top: 1.5rem;
}
.thallo-sub--series .thallo-sub__p strong {
  font-weight: 700;
  color: var(--wp--preset--color--grey-900);
}

/* ── A volume ──────────────────────────────────────────────────────────────
   A document: it opens at the reading measure, left-aligned, and the study
   follows in one column. Only the two ranking tables are allowed out to the
   wide measure — five columns of figures do not fit in the reading column.

   The measure is 50rem — a step wider than the blog's 44, because Cami read
   Volume 01 and asked for a little more room at the sides (not the full
   width). One variable, so the template's contentSize and every max-width in
   the study say the same number. */
.thallo-volume {
  --volume-measure: 50rem;
  /* The wide measure: 80rem. The site’s 1440 left the text of a section
     in the left third with nothing beside it; 72rem boxed the page. */
  --volume-wide: 78rem; /* 76 then "a little more" (Cami, 2026-09-22); the study stops 1.5rem short of 90vw so the panel can still step out past it */
}
/* Both measures are centred boxes with left-aligned text, so the head, the
   study and the wide tables all hang from the same two verticals — the study
   is a constrained block and centres itself; without `margin-inline: auto`
   the head sat flush left while the paragraphs under it did not, and the two
   read as misaligned even though each was "left". */
/* The wide measure is the site's container — 1440px, or 90vw between 1024
   and 1700 — the width /results/ lays its cards across. It was 72rem, and
   on a wide screen the study sat in a box with a hand's width of nothing
   either side and read as left-aligned (Cami, 2026-09-21). The reading
   column stays 50rem, centred inside it. */
/* The closing panel is the one block that steps out past the study's
   measure to the site's — the width the hub's panel and every dark panel
   on the site have (Cami, 2026-09-22: "agrandarlo para afuera"). The
   archive rule at the foot caps it at 1440 and 90vw. */
/* 2.5rem past the study on either side — a step out, not the site's
   full width, which read as too far (Cami, 2026-09-22). */
.thallo-volume > .thallo-panel,
.thallo-volume > .thallo-volume__colophon,
.thallo-volume > .thallo-next {
  max-width: min(calc(var(--volume-wide) + 6rem), calc(100vw - 3rem)); /* 3rem past the study on either side — a step past the navbar's edge, which is the point (Cami, 2026-09-22) */
}
.thallo-volume > .thallo-panel {
  padding-inline: 3rem;
}
/* The colophon and the next-volume line under the panel take the panel's
   edges, not the study's (Cami, 2026-09-22). */
.thallo-volume > .thallo-next p {
  max-width: none;
}
/* Its text starts where the study's does: the inner box is the study's
   measure, centred, so the panel steps out and the words stay on the
   line (Cami, 2026-09-22). */
.thallo-volume > .thallo-panel > .thallo-panel__say {
  max-width: min(var(--volume-wide), calc(90vw - 3rem)); /* the study's own formula, so the two edges are one */
  width: 100%;
  margin-inline: auto;
}
.thallo-volume > .thallo-volume__back,
.thallo-volume > .thallo-volume__head,
.thallo-volume > .thallo-close,
.thallo-volume > .thallo-sub,
.thallo-volume > .thallo-end,
.thallo-volume > .thallo-next,
.thallo-volume > .thallo-volume__body {
  max-width: min(var(--volume-wide), calc(90vw - 3rem));
  margin-inline: auto;
}
/* The study's wide track is capped at 90vw between 1024 and 1700 by the
   archive rule at the foot of this file; these three have to stop at the same
   line or they hang 6px past the tables above them. */

/* The question is centred on the hub, where the masthead is a cover. In a
   volume the head is left-aligned, so the same `margin: auto` left the
   question floating a hand's width in from the title's edge — the two lines
   have to start on the same vertical. */
.thallo-volume__head .thallo-series__question .wp-block-post-excerpt__excerpt,
.thallo-volume__head .thallo-series__question p {
  margin-inline: 0;
  max-width: 38ch;
}
/* Two columns, ending on the same line: the title and the question on the
   left, the photograph on the right — the way every study in Cami’s
   reference opens (2026-09-21). `align-items: end` is what makes the two
   columns finish together; without it the picture floats to the top of a
   taller text column. */
.thallo-volume__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
  gap: 2rem 3.5rem;
  align-items: end;
  padding-bottom: 2.5rem;
  margin-bottom: var(--sec-gap, 4rem);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-volume__art {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  background: #171a10;
}
.thallo-volume__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The chip in the corner: the scope of the study, said once, where the eye
   lands first. White on the photograph, with the site’s card shadow. */
.thallo-volume__chip {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--wp--preset--color--grey-900);
}
.thallo-volume__chip-l {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
}
@media (max-width: 1023.98px) {
  .thallo-volume__head {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-volume__art {
    aspect-ratio: 16 / 9;
  }
}
.thallo-volume__back {
  margin: 0 0 2rem;
}
.thallo-volume__back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s;
}
.thallo-volume__back a:hover {
  color: var(--wp--preset--color--olive);
}
.thallo-volume__title {
  max-width: 16ch;
  font-size: var(--t-page);
}

/* The rhythm of the study: a hairline and a full section's worth of air
   before every h2, the three h3 pairs on their own hairlines, the h4 group
   labels in the small capitals theme.json already gives them. Direct
   children only — a heading inside a group (the colophon) keeps its own
   spacing. */
.thallo-volume__body .wp-block-post-content > h2 {
  margin-top: 3.75rem;
  padding-top: 3rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
  margin-bottom: 1.25rem;
}
.thallo-volume__body .wp-block-post-content > h3 {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
  margin-bottom: 0.5rem;
}
.thallo-volume__body .wp-block-post-content > h2 + h3 {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: 0;
}
.thallo-volume__body .wp-block-post-content > h4 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
/* The study is a grid of one reading column, centred, with a wide track on
   either side: every block starts on the column's left edge, and the two
   tables marked wide take all three tracks. WordPress's constrained layout
   would instead centre each block on its own — so a 56ch lede sat a hand's
   width in from a 50rem paragraph and the page read as misaligned even
   though every block was "left". Its auto margins come with !important, hence
   the !important here: this is the one place the theme has to shout over the
   core stylesheet, and only at the two inline margins. */
.thallo-volume__body .wp-block-post-content {
  display: grid;
  grid-template-columns: [wide-start] 1fr [content-start] minmax(0, var(--volume-measure)) [content-end] 1fr [wide-end];
}
.thallo-volume__body .wp-block-post-content > * {
  grid-column: content;
  min-width: 0;
  margin-inline: 0 !important;
}
.thallo-volume__body .wp-block-post-content > .alignwide {
  grid-column: wide;
}
.thallo-volume__body .wp-block-post-content > p,
.thallo-volume__body .wp-block-post-content > .thallo-finding__p {
  max-width: var(--volume-measure);
}
.thallo-volume__body .wp-block-post-content > :is(h2, h3, h4) + p {
  margin-top: 0;
}

/* ── The finding ───────────────────────────────────────────────────────────
   One number, as large as the page allows, and two sentences. In the serif,
   because that is the face the site keeps for its large figures — The Shift's
   45% and 69%, the hub's 12 · 3 · 3 · 108, the split by question type below.
   It opened in Inter; the one large figure on the page not in the serif was
   the odd one out. */
.thallo-finding {
  padding-bottom: 2.5rem;
  /* No rule of its own: the h2 that follows draws it. */
}
.thallo-finding__stat {
  margin: 0 0 1.25rem !important;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(4.25rem, 10vw, 7.5rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.thallo-finding__p {
  margin: 0 !important;
  max-width: none !important;
  line-height: 1.5;
}
.thallo-cutoff {
  margin-top: -0.25rem;
  color: var(--wp--preset--color--grey-500);
}

/* ── The ranking table ─────────────────────────────────────────────────────
   The results page's panel: white, a hairline, a 24px radius, a soft shadow.
   The bar is drawn from the percentage the writer typed — see
   thallo_shortlist_rank_table() — and the track is the palest olive so the
   fill reads against it at any width. The two note columns drop out on a
   phone rather than scrolling the whole table sideways. */
.thallo-rank {
  margin: 1.5rem 0 1rem;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--wp--preset--color--hairline);
  background: #fff;
  box-shadow: 0 6px 20px -8px rgba(23, 26, 16, 0.14);
}
.thallo-rank table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: auto;
}
.thallo-rank :is(th, td) {
  padding: 1.1rem 1.5rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid #f3f4f6;
}
.thallo-rank th {
  padding-top: 1rem;
  padding-bottom: 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--grey-500);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  white-space: nowrap;
}
.thallo-rank :is(th, td):first-child {
  padding-left: 1.75rem;
}
.thallo-rank :is(th, td):last-child {
  padding-right: 1.75rem;
}
.thallo-rank tbody tr:last-child td {
  border-bottom: 0;
}
.thallo-rank tbody tr {
  transition: background-color 0.2s;
}
@media (hover: hover) {
  .thallo-rank tbody tr:hover {
    background: rgba(249, 250, 251, 0.7);
  }
}
.thallo-rank__rank {
  width: 3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}
.thallo-rank__firm {
  font-size: 1rem;
  font-weight: 700;
  color: var(--wp--preset--color--grey-900);
}
.thallo-rank__rate {
  width: 36%;
  min-width: 11rem;
}
.thallo-rank__pos {
  width: 7rem;
  text-align: right !important;
  font-weight: 600;
  color: var(--wp--preset--color--grey-900);
  font-variant-numeric: tabular-nums;
}
.thallo-rank__note {
  font-size: 0.9rem;
  white-space: nowrap;
  color: var(--wp--preset--color--grey-500);
}
.thallo-rate {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.thallo-rate__track {
  display: block;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 9999px;
  background: var(--wp--preset--color--hairline);
  overflow: hidden;
}
.thallo-rate__fill {
  display: block;
  height: 100%;
  width: calc(var(--pct, 0) * 1%);
  border-radius: 9999px;
  background: var(--wp--preset--color--olive);
  transform-origin: left center;
}
.thallo-rate__num {
  flex: 0 0 auto;
  min-width: 3.2rem;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--wp--preset--color--olive);
  font-variant-numeric: tabular-nums;
}
.thallo-rank figcaption,
.thallo-sources figcaption {
  margin: 0;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: left;
  color: var(--wp--preset--color--grey-500);
}
.thallo-rank figcaption {
  padding: 0.85rem 1.75rem 0.95rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
  background: #f9fafb;
}
@media (max-width: 720px) {
  .thallo-rank__pos,
  .thallo-rank__note {
    display: none;
  }
  .thallo-rank :is(th, td) {
    padding: 0.9rem 0.9rem;
  }
  .thallo-rank :is(th, td):first-child {
    padding-left: 1.1rem;
  }
  .thallo-rank :is(th, td):last-child {
    padding-right: 1.1rem;
  }
  .thallo-rank__rate {
    min-width: 0;
    width: 42%;
  }
  .thallo-rank__rank {
    width: 1.25rem;
    padding-right: 0.25rem;
  }
  .thallo-rank__firm {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  .thallo-rank figcaption {
    padding: 0.75rem 1.1rem 0.85rem;
  }
}
/* The Google comparison has no rank column; the firm carries the row. */
.thallo-rank--gap .thallo-rank__firm {
  padding-left: 1.75rem;
}

/* The parent theme rules every table cell on three sides. These tables draw
   their own hairlines and nothing else. */
.thallo-rank :is(th, td),
.thallo-sources :is(th, td),
.thallo-colophon__table :is(th, td) {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.thallo-rank :is(thead, tfoot),
.thallo-sources :is(thead, tfoot),
.thallo-colophon__table :is(thead, tfoot),
.thallo-rank table,
.thallo-sources table,
.thallo-colophon__table table {
  border: 0;
}

/* ── The sources ───────────────────────────────────────────────────────────
   No panel: three columns on hairlines, the share in olive at the right.
   It is a list with numbers, not a chart, and dressing it as one would put
   two panels of the same weight on one page. */
.thallo-sources {
  margin: 1.5rem 0 1.5rem;
}
.thallo-sources table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}
.thallo-sources :is(th, td) {
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  text-align: left;
  vertical-align: baseline;
}
.thallo-sources :is(th, td):last-child {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}
.thallo-sources th {
  border-bottom-color: var(--wp--preset--color--grey-900);
}
.thallo-sources td:first-child {
  font-weight: 700;
  color: var(--wp--preset--color--grey-900);
}
.thallo-sources td:nth-child(2) {
  font-size: 0.9rem;
  color: var(--wp--preset--color--grey-500);
}
.thallo-sources td:last-child {
  font-weight: 700;
  color: var(--wp--preset--color--olive);
  font-variant-numeric: tabular-nums;
}
.thallo-sources figcaption {
  padding-top: 0.75rem;
}

/* ══ The two surfaces ═══════════════════════════════════════════════════════

   A volume's argument is that the models and Google return two different
   shortlists, so the page has to be able to put them side by side and colour
   them apart. The brief that arrived for Volume 01 did that with a teal and a
   rust; neither is ours, and picking two new brand colours for one page is how
   a palette stops being one.

   Olive is the AI surface and grey is Google's — the pairing the theme already
   uses for `.thallo-tag--olive` and `.thallo-tag--grey`, so a reader who has
   seen a volume's tags already knows which is which before reading a label.
   Grey is the right weight for the counterweight too: Google is the thing being
   compared against, not the thing being argued for.

   One rule holds the whole section together: `--surface`, set per column, and
   every bar, figure and label inside reads from it. Adding a third surface —
   AI Overviews, from Volume 02 — is one more declaration, not another block. */
.thallo-surfaces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
}
/* A step lighter than the olive, so the bars and figures stand off the
   white (Cami, 2026-09-22). */
.thallo-surface {
  --surface: var(--wp--preset--color--olive-mid);
  --surface-soft: var(--wp--preset--color--hairline);
}
/* Google is the ink, not a grey: grey beside olive read as the same colour
   at a glance (Cami, 2026-09-22). Olive is AI, ink is Google, on every bar
   and figure of the study. */
.thallo-surface--google {
  --surface: var(--wp--preset--color--ink);
  --surface-soft: var(--wp--preset--color--hairline);
}
.thallo-surface__h {
  margin: 0 0 0.25rem;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--surface);
}
.thallo-surface__sub {
  margin: 0 0 1.1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--wp--preset--color--grey-500);
}

/* Each column is an ordinary ranking table, so `thallo_shortlist_rank_table()`
   draws its bars from the percentages the writer typed and nothing new has to
   be learned to edit one. What changes here is only the dress: no panel, no
   shadow, tighter rows, and the bar and the figure taking their colour from
   `--surface` instead of olive. Hence the `!important` on the two colour
   declarations — the panel rules for `.thallo-rank` are more specific, and
   the alternative is repeating that whole selector chain twice. */
.thallo-surface .wp-block-table,
.thallo-surface figure {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.thallo-surface table {
  width: 100%;
  border-collapse: collapse;
}
.thallo-surface thead {
  display: none;
}
.thallo-surface td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  vertical-align: baseline;
}
.thallo-surface .thallo-rank__rank {
  width: 1.6rem;
  padding-right: 0.6rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.72rem;
  color: var(--wp--preset--color--grey-500);
}
.thallo-surface .thallo-rank__firm {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--wp--preset--color--grey-900);
}
.thallo-surface .thallo-rank__note {
  display: block;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.74rem;
  white-space: normal;
  color: var(--wp--preset--color--grey-500);
}
.thallo-surface .thallo-rate__fill {
  background: var(--surface) !important;
}
.thallo-surface .thallo-rate__num {
  color: var(--surface) !important;
}
.thallo-surface .thallo-rate__track {
  background: var(--surface-soft);
}
.thallo-surface figcaption {
  display: none;
}

/* The line under the two columns, where the comparison is actually made — in
   the serif italic, the register the site keeps for the one sentence of a
   section a reader should leave with (the question under the title, the
   closing note). Upright it was a third face; italic it is the same one. */
.thallo-overlap {
  margin-top: 2.5rem;
  padding-top: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: var(--t-italic);
  line-height: 1.45;
  color: var(--wp--preset--color--grey-900);
}

@media (max-width: 781px) {
  .thallo-surfaces {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

/* ══ The per-model table ════════════════════════════════════════════════════

   Where the ranking table asks "who got named", this one asks "by whom" — one
   row per firm, one column per model. No bars: three bars per row across three
   columns is a chart pretending to be a table, and the point here is the
   disagreement between three figures a reader compares by eye.

   It is a plain table block, like every other table in a volume. `thallo-models`
   keeps it out of `thallo_shortlist_rank_table()`, which would otherwise draw a
   bar in any column headed with a word like "rate".

   The header row is olive with white letters and the note under the table is
   on plain grey — the two surfaces Cami keeps for the series (2026-09-20): the
   pale green is gone, and what is not important sits on grey, what is sits on
   the dark olive. The 1.5rem at the sides is the panel's own: the first cut of
   this table zeroed it and "Firm" touched the border. */
.thallo-models table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.thallo-models thead {
  background: var(--wp--preset--color--olive);
}
.thallo-models th {
  padding: 0.9rem 1.5rem;
  border-bottom: 0;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
  color: #fff;
  background: var(--wp--preset--color--olive);
}
.thallo-models td {
  padding: 0.95rem 1.5rem;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  font-variant-numeric: tabular-nums;
  color: var(--wp--preset--color--grey-900);
}
.thallo-models td:first-child {
  font-weight: 600;
  font-variant-numeric: normal;
}
.thallo-models tbody tr:last-child td {
  border-bottom: 0;
}
.thallo-models th:not(:first-child),
.thallo-models td:not(:first-child) {
  text-align: right;
}
.thallo-models figcaption {
  margin: 0;
  padding: 0.85rem 1.5rem 0.95rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
  background: #f9fafb;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.74rem;
  color: var(--wp--preset--color--grey-500);
}

/* ══ Named on both surfaces ═════════════════════════════════════════════════

   Two short readings of the same firm — what the models did with it, and what
   Google did — tagged with the same olive and grey as the two lists above. The
   tags are the existing `.thallo-tag`, so this section inherits its shape. */
.thallo-both {
  padding: 1.5rem 0;
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.thallo-both:first-of-type {
  border-top: 0;
}
.thallo-both h3 {
  margin: 0 0 0.6rem;
  font-size: var(--t-card);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.thallo-both p {
  margin: 0 0 0.6rem;
}
/* The two figures a firm has — what the models did, what Google did —
   over the reading, each with its bar in its colour, so the card says
   its point before it argues it (Cami, 2026-09-22: the cards were flat). */
.thallo-both__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
/* AI is the mid olive everywhere a figure is AI's — the shortlist, these
   cards, the four by question type, the domains — and Google is the ink
   (Cami, 2026-09-22). */
.thallo-both__stat {
  --surface: var(--wp--preset--color--olive-mid);
  display: block;
}
.thallo-both__stat--google {
  --surface: var(--wp--preset--color--ink);
}
.thallo-both__stat b {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--surface);
  font-variant-numeric: tabular-nums;
}
.thallo-both__stat i {
  position: relative;
  display: block;
  height: 6px;
  margin: 0.6rem 0 0.5rem;
  border-radius: 9999px;
  background: var(--wp--preset--color--hairline);
  overflow: hidden;
}
.thallo-both__stat i::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct, 0) * 1%);
  border-radius: 9999px;
  background: var(--surface);
  transform-origin: left center;
}
.thallo-both__stat small {
  display: block;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.thallo-reveal .thallo-both__stat i::before {
  transform: scaleX(0);
}
.thallo-reveal.is-in .thallo-both__stat i::before {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.thallo-both .thallo-tag {
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}

/* ══ The split by question type ═════════════════════════════════════════════

   Four figures on rules. The site's own stat row, at the size a number earns
   when it is the sentence — `data-count` in the markup makes them count up with
   everything else. */
.thallo-catgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin: 1.75rem 0 0.75rem;
}
.thallo-catgrid > div {
  border-top: 2px solid var(--wp--preset--color--olive);
  padding-top: 0.7rem;
}
.thallo-catgrid .thallo-cat__n {
  display: block;
  font-family: var(--wp--preset--font-family--serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--wp--preset--color--olive-mid);
  font-variant-numeric: tabular-nums;
}
/* A bar under each figure, filled to it, in the site's olive — the load
   line the reference had, and the thing that makes four numbers read as
   four measurements (Cami, 2026-09-22). Grows on reveal. */
.thallo-catgrid > div {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
@media (hover: hover) {
  .thallo-catgrid > div:hover,
  .thallo-case__card:hover {
    transform: translateY(-4px);
    border-color: var(--wp--preset--color--olive);
    box-shadow: 0 24px 60px -30px rgba(57, 71, 29, 0.25);
  }
  .thallo-case__card:hover {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
  }
}
.thallo-case__card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
/* The track is the whole, and stays; only the fill moves (Cami,
   2026-09-22). Track on ::after, fill on the figure's ::before, placed
   over it. */
.thallo-catgrid .thallo-cat__n {
  position: relative;
  padding-bottom: calc(0.75rem + 6px);
}
.thallo-catgrid .thallo-cat__n::after,
.thallo-catgrid .thallo-cat__n::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 6px;
  border-radius: 9999px;
}
.thallo-catgrid .thallo-cat__n::after {
  width: 100%;
  background: var(--wp--preset--color--hairline);
}
.thallo-catgrid .thallo-cat__n::before {
  width: calc(var(--pct, 0) * 1%);
  background: var(--wp--preset--color--olive-mid);
  transform-origin: left center;
  z-index: 1;
}
.thallo-reveal .thallo-cat__n::before {
  transform: scaleX(0);
}
.thallo-reveal.is-in .thallo-cat__n::before {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.thallo-catgrid .thallo-cat__l {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--wp--preset--color--grey-500);
}
@media (max-width: 781px) {
  .thallo-catgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
  }
}

/* ══ What the results are made of ═══════════════════════════════════════════

   A horizontal bar per kind of source. Same olive, same easing; the track is
   the tint so an empty row still reads as a row. The bar disappears on a phone
   and the count carries it — 240px of track inside 320px of screen is a
   decoration that costs the label its words. */
.thallo-mix {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}
.thallo-mix li {
  display: grid;
  grid-template-columns: 1fr 15rem 3rem;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  font-size: 0.95rem;
}
.thallo-mix .thallo-mix__track {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: #e5e7eb;
  overflow: hidden;
}
.thallo-mix .thallo-mix__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--pct, 0) * 1%);
  border-radius: 9999px;
  background: var(--wp--preset--color--ink);
  transform-origin: left center;
}
.thallo-mix .thallo-mix__n {
  text-align: right;
  font-weight: 700;
  color: var(--wp--preset--color--ink);
  font-variant-numeric: tabular-nums;
}
.thallo-reveal .thallo-mix__fill {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.thallo-reveal.is-in .thallo-mix__fill {
  transform: scaleX(1);
}
@media (max-width: 781px) {
  .thallo-mix li {
    grid-template-columns: 1fr 3rem;
  }
  .thallo-mix .thallo-mix__track {
    display: none;
  }
}

/* The cited domains: a numbered list, monospaced on the figure side, because
   a domain is a string and the count beside it is a measurement. */
.thallo-domains {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  counter-reset: thallo-d;
}
.thallo-domains li {
  counter-increment: thallo-d;
  display: flex;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-domains li::before {
  content: counter(thallo-d) ".";
  margin-right: 0.6rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.72rem;
  color: var(--wp--preset--color--grey-500);
}
.thallo-domains .thallo-d__name {
  flex: 1 1 auto;
  font-family: var(--wp--preset--font-family--mono);
  font-size: 0.92rem;
  color: var(--wp--preset--color--grey-900);
}
.thallo-domains .thallo-d__c {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--wp--preset--color--olive-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ══ The case ═══════════════════════════════════════════════════════════════

   The Engine's panel on /services/ — "What the Engine runs every month":
   the photograph, the name over it in white, three cards of glass in a row
   — with the firm read at length: who it is, what it publishes, what that
   produced. The caveat runs under the cards, fenced by a rule. Cami asked
   for this shape (2026-09-22) in place of the flat olive box. */
.thallo-case {
  position: relative;
  overflow: hidden;
  margin-top: 1.75rem;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 24px;
  background: #171a10 url('https://thallodigital.com/engine-bg.webp') center / cover no-repeat;
  color: #fff;
}
.thallo-case::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 26, 16, 0.55), rgba(23, 26, 16, 0.3));
}
.thallo-case > * {
  position: relative;
}
.thallo-case h3 {
  margin: 0 0 0.6rem;
  font-size: var(--t-section);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
}
/* The line under the name, as the Engine's panel carries its line. It runs
   the whole width of the box rather than breaking at 52ch: one line, not
   two, and the section is that much shorter (Cami, 2026-09-22). */
.thallo-case .thallo-case__lede {
  margin: 0 0 1.5rem;
  max-width: none;
  font-size: var(--t-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.thallo-case__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0 !important;
}
.thallo-case__cards > * {
  margin-top: 0 !important;
}
/* The glass halfway, as on the agreement stage. */
.thallo-case__card {
  padding: 1.5rem 1.6rem 1.6rem;
}
.thallo-case__card h4 {
  margin: 0 0 0.75rem;
  font-size: var(--t-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #fff;
}
/* A step down, to the size the caveat under them is already set at (Cami,
   2026-09-22): two lists of five lines read as a note beside the finding,
   not as a second argument. */
.thallo-case__card p,
.thallo-case__card li {
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.thallo-case__card p {
  margin: 0;
}
.thallo-case__card ul {
  margin: 0;
  padding-left: 1.05em;
}
.thallo-case__card li {
  margin-bottom: 0.5rem;
}
.thallo-case__card li:last-child {
  margin-bottom: 0;
}
.thallo-case .thallo-case__caveat {
  margin: 1.5rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: none;
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 1023.98px) {
  .thallo-case__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ The aside ══════════════════════════════════════════════════════════════

   What was seen but not measured. Deliberately quieter than a section — a rule
   down the left and no tint — because the whole point of it is that it does not
   carry the same weight as the study. A finding that was not measured the same
   way must not look like one that was. */
.thallo-aside {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-left: 3px solid var(--wp--preset--color--grey-500);
  border-radius: 12px;
  background: var(--wp--preset--color--white);
}
.thallo-aside__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.thallo-aside h3 {
  margin: 0 0 0.6rem;
  font-size: var(--t-card);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.thallo-aside p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: var(--wp--preset--color--grey-500);
}
.thallo-aside p:last-child {
  margin-bottom: 0;
}
.thallo-aside {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
}
.thallo-aside > .thallo-aside__eyebrow,
.thallo-aside > h3 {
  grid-column: 1 / -1;
}
.thallo-aside > p {
  margin-top: 1rem !important;
  margin-bottom: 0;
}
@media (max-width: 781px) {
  .thallo-aside {
    display: block;
  }
}

/* ══ The lede ═══════════════════════════════════════════════════════════════
   The two paragraphs that open a volume, a step up from body copy and a step
   down from the question in the masthead. */
/* On the wide track, like the head above it and the sections under it:
   the reading column would leave it a hand's width in from both. */
.thallo-volume__body .wp-block-post-content > .thallo-colophon {
  display: none;
}
.thallo-volume > .thallo-volume__colophon {
  margin-inline: auto;
}
.thallo-volume__colophon .thallo-colophon {
  margin-top: 3rem;
}
.thallo-volume__body .wp-block-post-content > .thallo-lede {
  grid-column: wide;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
  max-width: 56ch;
}

/* ── The closing line ──────────────────────────────────────────────────────
   The serif italic, on its own rule: the one sentence of the section a
   reader should leave with. */
.thallo-volume__body .wp-block-post-content > .thallo-closing-note {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
  max-width: var(--volume-measure);
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: var(--t-italic);
  line-height: 1.4;
  color: var(--wp--preset--color--grey-900);
}

/* ── The questions ─────────────────────────────────────────────────────── */
.thallo-questions {
  margin: 0;
  padding-left: 2.25em;
  max-width: var(--volume-measure);
}
.thallo-questions li {
  margin: 0 0 0.6rem;
  padding-left: 0.25rem;
  color: var(--wp--preset--color--grey-900);
}
.thallo-questions li::marker {
  font-weight: 700;
  color: var(--wp--preset--color--olive);
  font-variant-numeric: tabular-nums;
}

/* ── The colophon ──────────────────────────────────────────────────────────
   On plain grey — it informs, it does not argue — so it reads as the note at
   the end and not as another section. It was on paper, the site's ivory,
   which Cami read as a pale green next to the white; grey is the surface the
   series keeps for what is not the point.
   The two-column table is the method — a definition list the editor can
   write into — and the paragraph under it is the honesty clause every volume
   carries. */
.thallo-colophon {
  margin-top: 3.5rem;
  padding: 1.75rem 2rem 1.9rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 20px;
  background: #f9fafb;
}
.thallo-colophon > h4 {
  margin: 0 0 0.75rem;
}
.thallo-colophon__table {
  margin: 0;
}
.thallo-colophon__table table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}
.thallo-colophon__table td {
  padding: 0.55rem 1rem 0.55rem 0;
  border-bottom: 1px solid rgba(23, 26, 16, 0.08);
  font-size: 0.9rem;
  line-height: 1.5;
  vertical-align: top;
  color: var(--wp--preset--color--grey-500);
}
.thallo-colophon__table td:first-child {
  width: 9.5rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--wp--preset--color--grey-900);
}
.thallo-colophon__table tr:last-child td {
  border-bottom: 0;
}
.thallo-colophon__honesty {
  margin: 1.1rem 0 0;
  max-width: 68ch;
  color: var(--wp--preset--color--grey-500);
}
@media (max-width: 560px) {
  .thallo-colophon {
    padding: 1.35rem 1.25rem 1.5rem;
  }
  .thallo-colophon__table td:first-child {
    width: 6.5rem;
    white-space: normal;
  }
}

/* ══ The study, in sections ═══════════════════════════════════════════════

   Cami’s reference (2026-09-21) reads as a run of sections, each with a
   small label over its heading, its text, and its material laid out in two
   columns with a photograph or a card at the side, on alternating grey
   bands. The content file writes each section as a `thallo-sec` group at
   the wide measure — see content/ai-shortlist/*.html — and these rules give
   the groups their shape. Nothing here reaches into a volume written the
   old way: a plain h2 with paragraphs under it still gets the rules above. */
.thallo-sec {
  margin-top: 3.5rem;
}
.thallo-sec--band {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 3rem);
  border-radius: 28px;
  background: #f9fafb;
}
.thallo-kicker {
  margin: 0 0 0.6rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.thallo-sec > h2 {
  margin: 0 0 0.75rem;
  max-width: 24ch;
  font-size: var(--t-section);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.thallo-sec > p {
  max-width: 60ch;
  margin: 0 0 1.5rem;
}
.thallo-sec > p:last-child {
  margin-bottom: 0;
}

/* The grids: main and side; three across for the finding; a pair. */
.thallo-sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: 2rem 3rem;
  align-items: start;
}
.thallo-sec__three {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 17rem);
  gap: 2rem 2.5rem;
  align-items: center;
}
/* Stretch, not start: the two cards of a pair stand the same height
   whatever they hold (Cami, 2026-09-21, and again 2026-09-22 — I read a
   later note as asking for this back and it was not; the pair is meant to
   be one shape). The shorter card carries white under its last line, and
   that is the trade she chose. */
.thallo-sec__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2.5rem;
  align-items: stretch;
}
/* WordPress gives every block after another its block gap as a top margin,
   grid or not — so the second column of a pair started 1.5rem under the
   first. The grids own the spacing between their cells. */
.thallo-sec__grid > *,
.thallo-sec__three > *,
.thallo-sec__pair > * {
  margin-top: 0 !important;
}
.thallo-sec__main > p,
.thallo-sec__say > p {
  max-width: none;
}
.thallo-sec__main > :first-child,
.thallo-sec__say > :first-child {
  margin-top: 0;
}

/* The finding, in its column: the h2 at the left already carries the
   sentence, so the figure is smaller than it was alone on the page, and the
   line under it says what it counts. */
.thallo-sec .thallo-finding {
  padding-bottom: 0;
}
/* The finding's figure in the button's olive — the dark one, the one
   "Read the findings" wears (Cami, 2026-09-22). */
.thallo-sec .thallo-finding__stat {
  color: var(--wp--preset--color--olive) !important;
  margin: 0 0 0.6rem !important;
  font-size: clamp(3.25rem, 5.5vw, 4.75rem);
}
.thallo-finding__l {
  margin: 0;
  max-width: 24ch;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--wp--preset--color--grey-500);
}
/* !important against the block's own has-large-font-size, which core sets
   with one — the finding reads at the body size like every other paragraph. */
.thallo-sec .thallo-finding__p {
  font-size: var(--t-body) !important;
}

/* The photograph at the side: the site’s own pictures, in a rounded
   frame, taller than wide so it stands beside a column of text. */
.thallo-photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  background: #171a10;
}
.thallo-sec__three .thallo-photo {
  aspect-ratio: 1;
}
.thallo-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The note card and the quote card. Grey on white, white on the band. */
.thallo-note,
.thallo-quote {
  padding: 1.6rem 1.75rem;
  border-radius: 20px;
  background: #f3f4f6;
}
.thallo-sec--band .thallo-note,
.thallo-sec--band .thallo-quote {
  background: #fff;
  border: 1px solid var(--wp--preset--color--hairline);
}
.thallo-note h3 {
  margin: 0 0 0.6rem;
  font-size: var(--t-card);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--grey-900);
}
.thallo-note p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
}
/* The one line to leave the section with: the serif italic, as the
   question under the title. */
.thallo-quote p {
  margin: 0;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: var(--t-italic);
  line-height: 1.4;
  color: var(--wp--preset--color--grey-900);
}

/* The two readings side by side, each in its own frame. */
.thallo-sec__pair .thallo-both,
.thallo-sec__pair .thallo-both:first-of-type {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 20px;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, box-shadow 0.3s;
}
/* The lift every card on the site has under the pointer (Cami, 2026-09-22). */
@media (hover: hover) {
  .thallo-sec__pair .thallo-both:hover {
    transform: translateY(-4px);
    border-color: var(--wp--preset--color--olive);
    box-shadow: 0 24px 60px -30px rgba(57, 71, 29, 0.25);
  }
}

/* The four figures as cards, two by two, beside the photograph. */
.thallo-sec__main .thallo-catgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0.25rem 0 0.75rem;
}
.thallo-sec__main .thallo-catgrid > div {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-top: 1px solid var(--wp--preset--color--hairline);
  border-radius: 16px;
  background: #fff;
}
.thallo-sec .thallo-cutoff {
  margin-bottom: 1.25rem;
}

/* The bars and the domains in the band: on white cards there, so they
   keep an edge against the grey. */
.thallo-sec--band .thallo-mix,
.thallo-sec--band .thallo-domains {
  margin-top: 0;
  padding: 0.25rem 1.5rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 16px;
  background: #fff;
}
.thallo-sec--band .thallo-mix li:last-child,
.thallo-sec--band .thallo-domains li:last-child {
  border-bottom: 0;
}
.thallo-sec__main .thallo-mix + p,
.thallo-sec__main .thallo-domains + p {
  margin-top: 1.25rem;
}
.thallo-sec__main p + .thallo-domains {
  margin-top: 1rem;
}

/* Edge to edge. The text of a section runs the section's width — the bars,
   the domains, the case's lines, the aside — instead of stopping at a
   reading measure with the right half of the page empty (Cami,
   2026-09-21). The theme's 68ch cap on paragraphs is lifted inside a
   section for the same reason. Only the finding's two columns keep a
   measure, because there the figure fills the other half. */
.thallo-sec p,
.thallo-sec ul,
.thallo-sec ol,
.thallo-sec > .thallo-mix,
.thallo-sec > .thallo-domains,
.thallo-volume .thallo-sec > p,
.thallo-volume .thallo-case .thallo-case__caveat,
.thallo-volume .thallo-colophon__honesty {
  max-width: none;
}
.thallo-volume .thallo-sec > h2 {
  max-width: 32ch;
}
.thallo-sec__two .thallo-sec__say > p {
  max-width: 68ch;
}
.thallo-sec > .thallo-mix + p,
.thallo-sec > .thallo-domains + p {
  margin-top: 1.25rem;
}
.thallo-sec > p + .thallo-domains {
  margin-top: 1rem;
}

/* The questions: four groups in a two-by-two, divided by a cross — one
   rule across, one rule down, meeting in the middle (Cami, 2026-09-22) —
   rather than two rules that happen to sit at different heights. Each
   cell pads away from the rules; the outer edges pad nothing. */
/* Two rows of one height — the taller of the two — so the cross sits at
   the middle whatever the groups hold; each cell centres its group in
   its half (Cami, 2026-09-22: "no me gusta que sea irregular"). */
.thallo-qgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  margin-top: 1.5rem;
}
.thallo-qcell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.thallo-qgrid > * {
  margin-top: 0 !important;
}
.thallo-qcell {
  padding: 1.75rem clamp(1.5rem, 3vw, 3rem);
}
.thallo-qcell:nth-child(odd) {
  padding-left: 0;
  border-right: 1px solid var(--wp--preset--color--hairline);
}
.thallo-qcell:nth-child(even) {
  padding-right: 0;
}
.thallo-qcell:nth-child(-n + 2) {
  padding-top: 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-qcell:nth-child(n + 3) {
  padding-bottom: 0;
}
.thallo-qcell h4 {
  margin: 0 0 1rem;
}
/* The numbers stand on the label's edge and the text on one edge after
   them — a hanging figure, not an indented list (Cami, 2026-09-22: the
   cross "aún no se ve ordenado"). */
.thallo-qcell .thallo-questions {
  max-width: none;
  padding-left: 0;
  list-style: none;
  counter-reset: thallo-q;
}
.thallo-qcell .thallo-questions li {
  counter-increment: thallo-q;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 0.25rem;
  padding-left: 0;
}
.thallo-qcell .thallo-questions li::before {
  content: counter(thallo-q) ".";
  font-weight: 700;
  color: var(--wp--preset--color--olive);
  font-variant-numeric: tabular-nums;
}
/* The lists start at 4, 7 and 10; the counter has to know. */
.thallo-qcell .thallo-questions[start="4"] { counter-reset: thallo-q 3; }
.thallo-qcell .thallo-questions[start="7"] { counter-reset: thallo-q 6; }
.thallo-qcell .thallo-questions[start="10"] { counter-reset: thallo-q 9; }
.thallo-qcell .thallo-questions li {
  margin-bottom: 0.85rem;
}
.thallo-qcell .thallo-questions li:last-child {
  margin-bottom: 0;
}
@media (max-width: 781px) {
  .thallo-qgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-qcell {
    padding: 1.5rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--wp--preset--color--hairline) !important;
  }
  .thallo-qcell:last-child {
    border-bottom: 0 !important;
  }
}

/* The questions, two columns of two groups. */
.thallo-qcol h4 {
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.thallo-qcol > h4:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.thallo-qcol .thallo-questions li {
  margin-bottom: 0.85rem;
}
.thallo-sec__pair--questions {
  column-gap: clamp(3rem, 6vw, 6rem);
}
.thallo-qcol .thallo-questions {
  max-width: none;
}

/* The case and the aside stay as they are, only closer to their heading. */
.thallo-sec .thallo-case {
  margin-top: 0.5rem;
}
.thallo-sec .thallo-aside {
  margin: 1.5rem 0 0;
}
.thallo-sec .thallo-overlap {
  max-width: 60ch;
}

@media (max-width: 1023.98px) {
  .thallo-sec__grid,
  .thallo-sec__three,
  .thallo-sec__pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-sec__three .thallo-photo,
  .thallo-photo {
    aspect-ratio: 16 / 9;
  }
  .thallo-sec__grid .thallo-sec__side {
    order: -1;
  }
  .thallo-sec__grid .thallo-sec__side .thallo-photo {
    display: none;
  }
}
@media (max-width: 639.98px) {
  .thallo-sec--band {
    padding: 1.5rem 1.25rem;
  }
  /* Four columns of figures do not fit 327px; the panel scrolls sideways
     rather than cutting the Gemini column off behind its rounded edge. */
  .thallo-models {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .thallo-models table {
    min-width: 26rem;
  }
  .thallo-models th,
  .thallo-models td {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ══ The study, in the site’s own hand ═════════════════════════════════

   The structure is the reference’s; the type, the colours and the pieces
   are Thallo’s — Inter at the scale every page of the site uses, the
   house grey for the bands, the site’s buttons and marks. Cami
   (2026-09-21, third look): "como todas las demás páginas de Thallo, pero
   siguiendo la estructura". A pass in the serif was tried and rejected. */
.thallo-volume {
  --band: #f7f8f9;   /* the house tint, the grey every tinted section of the site carries */
  --ring: rgba(23, 26, 16, 0.18);
}
/* One distance between every block of a volume: 4rem, the gap Cami picked
   as right (2026-09-22, aside → questions). The head to the first
   section, the last section to the panel, the panel to the colophon and
   the colophon to the next-volume line all say the same number. */
.thallo-volume {
  --sec-gap: 4rem;
}
.thallo-volume .thallo-sec {
  margin-top: var(--sec-gap);
}
.thallo-volume > .thallo-volume__body {
  margin-top: 0 !important;
}
.thallo-volume__body .wp-block-post-content > .thallo-sec:first-of-type,
.thallo-volume__body .wp-block-post-content > .thallo-lede + .thallo-sec {
  margin-top: 0;
}
.thallo-volume .thallo-close--volume,
.thallo-volume .thallo-panel--volume {
  margin-top: var(--sec-gap);
}
.thallo-volume > .thallo-volume__colophon {
  margin-top: var(--sec-gap);
}
.thallo-volume__colophon .thallo-colophon {
  margin-top: 0;
}
.thallo-volume > .thallo-next {
  margin-top: var(--sec-gap);
}
.thallo-volume .thallo-sec .thallo-aside {
  margin-top: 2rem;
}
.thallo-volume .thallo-sec--band {
  background: var(--band);
  padding: clamp(2rem, 3.5vw, 3rem) clamp(1.75rem, 3.5vw, 3.25rem);
}
.thallo-volume .thallo-note,
.thallo-volume .thallo-quote {
  background: var(--band);
}
.thallo-volume .thallo-sec--band .thallo-note,
.thallo-volume .thallo-sec--band .thallo-quote {
  background: #fff;
  border: 1px solid var(--wp--preset--color--hairline);
}
.thallo-volume .thallo-sec > .thallo-overlap {
  font-size: var(--t-italic);
}
/* The measure of the text under a heading: wide enough not to leave half
   the column empty, narrow enough to read. One number everywhere. */
.thallo-volume .thallo-sec > h2 {
  max-width: 32ch;
}

/* ── The head, as the reference opens ──
   Two equal columns: the text on the left, the photograph on the right
   standing exactly the height of the text — the kicker’s top line is the
   picture’s top edge, the button’s bottom is its bottom edge. The way
   back sits above the grid so it does not push the picture up past the
   title. */
.thallo-volume__head {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}
.thallo-volume > .thallo-volume__back {
  margin-bottom: 1.5rem;
}
.thallo-volume__text {
  display: flex;
  flex-direction: column;
}
.thallo-volume__text .thallo-volume__title {
  max-width: 14ch;
}
.thallo-volume__text .thallo-series__question .wp-block-post-excerpt__excerpt,
.thallo-volume__text .thallo-series__question p {
  max-width: 44ch;
}
.thallo-volume__lede {
  margin-top: 1.5rem;
}
.thallo-volume__lede p {
  max-width: 64ch;
  margin: 0 0 0.9rem;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--wp--preset--color--grey-500);
}
.thallo-volume__go {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding: 0.8rem 1.4rem;
  border-radius: 9999px;
  background: var(--wp--preset--color--olive);
  font-size: var(--t-small);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s;
}
.thallo-volume__lede + .thallo-volume__go {
  margin-top: 1.75rem;
}
.thallo-volume__go:hover {
  background: var(--wp--preset--color--olive-mid);
}
/* The lede stays in the content, where the writer put it, and shows once. */
.thallo-volume__body .wp-block-post-content > .thallo-lede {
  display: none;
}
/* A fixed frame, not the column's height — stretched to the column it
   grew with every line of text (Cami, 2026-09-21: "quedó muy grande"). As
   wide as its column and 16:15 tall, the proportion the boardroom picture
   had when it read right, hanging from the bottom of the text so it ends
   on the button. The photograph is cropped to it from a little above
   centre, so the desk and the plant both stay. */
.thallo-volume__art {
  aspect-ratio: 16 / 15;
  height: auto;
  min-height: 0;
  align-self: end;
}
.thallo-volume__art img {
  object-position: 50% 45%;
}
/* The reference’s handwritten aside, in our italic, off the picture’s
   top-right corner. */
/* The aside and the card arrive on the photograph when the page opens —
   the aside from above, the card from below, each settling where it
   sits — and stay (Cami, 2026-09-22). The head is revealed by the script
   like every block; without it, or with less motion asked for, both are
   simply there. */
/* From the right, both — the aside first, the card after (Cami, 2026-09-22). */
/* A longer travel, the site's easing — a fast start that settles — and the
   two a beat apart, so they read as one gesture rather than two pops
   (Cami, 2026-09-22: "más fluido"). */
.thallo-reveal .thallo-volume__note,
.thallo-reveal .thallo-volume__chip {
  opacity: 0;
  transform: translateX(72px);
}
.thallo-reveal.is-in .thallo-volume__note,
.thallo-reveal.is-in .thallo-volume__chip {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s ease-out, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The same moment for both: one motion, one delay (Cami, 2026-09-22). */
.thallo-reveal.is-in .thallo-volume__note,
.thallo-reveal.is-in .thallo-volume__chip {
  transition-delay: 0.4s;
}
.thallo-volume__note {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wp--preset--color--grey-900);
}
/* The card at the picture’s foot: an icon in a ring, two lines, an arrow. */
.thallo-volume__chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.7rem 0.9rem 0.7rem 0.7rem;
  border-radius: 16px;
  text-decoration: none;
  color: var(--wp--preset--color--grey-900);
  transition: transform 0.2s;
}
.thallo-reveal.is-in .thallo-volume__chip:hover {
  transform: translateY(-2px);
  transition: transform 0.2s;
}
.thallo-volume__chip-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: 1px solid var(--ring);
  border-radius: 50%;
  color: var(--wp--preset--color--olive);
}
.thallo-volume__chip-t {
  font-size: var(--t-small);
  font-weight: 600;
}
.thallo-volume__chip-a {
  display: inline-flex;
  margin-left: 0.25rem;
  color: var(--wp--preset--color--grey-500);
}

/* ── The grids line up ──
   A photograph at the side stands the full height of what it sits beside;
   a card at the side hangs from the top. The three-across finding starts
   every column on the same line. */
.thallo-sec__grid,
.thallo-sec__three {
  align-items: stretch;
}
.thallo-sec__grid .thallo-sec__side .thallo-note,
.thallo-sec__grid .thallo-sec__side .thallo-quote {
  align-self: start;
}
.thallo-sec__side {
  display: flex;
  flex-direction: column;
}
.thallo-sec__side .thallo-photo {
  flex: 1 1 auto;
  aspect-ratio: auto;
  min-height: 16rem;
}
.thallo-sec__three .thallo-photo {
  aspect-ratio: auto;
  min-height: 14rem;
}
.thallo-sec__three .thallo-sec__say,
.thallo-sec__three .thallo-finding {
  align-self: start;
}
/* The figure column keeps the rule the reference draws between the text
   and the number. */
.thallo-sec__three .thallo-finding {
  padding-left: 2.5rem;
  border-left: 1px solid var(--wp--preset--color--hairline);
}

/* ── The finding, two columns ──
   As the reference sets it: the label, the heading and the text on the
   left; the figure on the right, past a rule, its top on the heading's
   line. No photograph — the number is the picture. */
.thallo-sec__two {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  gap: 2rem clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.thallo-sec__two > * {
  margin-top: 0 !important;
}
.thallo-sec__two .thallo-sec__say > h2 {
  margin: 0 0 1rem;
  max-width: 22ch;
  font-size: var(--t-section);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.thallo-sec__two .thallo-sec__say > p {
  max-width: 68ch;
}
.thallo-sec__two .thallo-sec__say > h2 {
  max-width: 28ch;
}
.thallo-sec__two .thallo-finding__l {
  max-width: 30ch;
}
/* The figure sits at the vertical centre of the text beside it; the rule
   still runs the column's full height (Cami, 2026-09-21). */
/* Centred both ways in its column — the middle of the square the column
   is (Cami, 2026-09-22). */
.thallo-sec__two .thallo-finding {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-left: clamp(2rem, 4vw, 3.5rem);
  border-left: 1px solid var(--wp--preset--color--hairline);
  align-self: stretch;
}
@media (max-width: 1023.98px) {
  .thallo-sec__two {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-sec__two .thallo-finding {
    padding-left: 0;
    border-left: 0;
  }
}

/* ── The stage ──
   A photograph as the ground of exactly the table and the card beside it —
   from where the table starts to where it ends, no further (Cami,
   2026-09-21). The site's dark panel: the picture pinned behind, a scrim
   so the cards keep an edge, the two cards white on it. The paragraphs
   that follow go back on white. */
.thallo-stage {
  position: relative;
  overflow: hidden;
  margin: 1.75rem 0 2rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 24px;
  background: #171a10;
}
.thallo-stage__bg {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  aspect-ratio: auto;
  border-radius: 0;
}
.thallo-stage__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thallo-stage__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 26, 16, 0.55), rgba(23, 26, 16, 0.3));
}
.thallo-stage > .thallo-sec__grid {
  position: relative;
  margin-top: 0 !important;
  align-items: center;
}
.thallo-stage .thallo-sec__side {
  justify-content: center;
}
/* The dark glass — the cards floating on the photograph panel of
   /results/, the site's signature move: near-black at 72% with a white/8
   edge, the photograph blurred behind, white type. The Engine's lighter
   glass was tried first and the text sank into the picture (Cami,
   2026-09-21). */
/* ── The one glass ─────────────────────────────────────────────────────────
   Every card on a photograph in a volume — the agreement table and its
   note, the case's two cards — is this and nothing else (Cami,
   2026-09-22: "no quiero tener dos glass diferentes"). Halfway between
   the Engine's 8% white and the results panel's 72% black: the picture
   reads through, the type sits on something. One radius, one edge, one
   blur, one shadow. */
.thallo-stage .thallo-rank,
.thallo-stage .thallo-note,
.thallo-case__card {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(20, 20, 18, 0.42);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
}
.thallo-stage .thallo-note {
  align-self: auto;
}
/* The mark on the card is the isotype, white — the flower, not the two
   rings, on the dark glass. Inverted from the dark-on-transparent file. */
.thallo-volume .thallo-stage .thallo-note::before {
  border: 0;
  width: 2rem;
  height: 2rem;
  background: url("https://thallodigital.com/flower.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
  animation: thallo-turn 30s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .thallo-volume .thallo-stage .thallo-note::before {
    animation: none;
  }
}
.thallo-stage .thallo-note h3 {
  color: #fff;
}
.thallo-stage .thallo-note p {
  color: rgba(255, 255, 255, 0.7);
}
.thallo-stage .thallo-models thead,
.thallo-stage .thallo-models th {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.thallo-stage .thallo-models td {
  border-bottom-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.thallo-stage .thallo-models td:first-child {
  color: #fff;
}
.thallo-stage .thallo-models figcaption {
  border-top-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}
.thallo-stage .thallo-rank tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* The paragraphs under the stage take its width — the reading measure
   left them on the left with the panel's width above them empty. */
.thallo-sec > .thallo-stage + p {
  margin-top: 0;
}
.thallo-sec > .thallo-stage ~ p {
  max-width: none;
}

/* ── Marks in rings ── the reference points with an arrow in a thin ring;
   the note card wears two rings. */
/* No arrow under the figure: it pointed at nothing (Cami, 2026-09-22). */
.thallo-volume .thallo-note::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--ring);
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339471D' stroke-width='1.6'%3E%3Ccircle cx='9' cy='12' r='5'/%3E%3Ccircle cx='15' cy='12' r='5'/%3E%3C/svg%3E") center / 1.2rem no-repeat;
}

/* ── The photograph strip ── */
.thallo-photo--strip {
  aspect-ratio: 16 / 5;
  margin-top: 2rem;
  border-radius: 20px;
}
@media (max-width: 1023.98px) {
  .thallo-photo--strip {
    aspect-ratio: 16 / 7;
  }
  .thallo-sec__side .thallo-photo,
  .thallo-sec__three .thallo-photo {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .thallo-sec__three .thallo-finding {
    padding-left: 0;
    border-left: 0;
  }
}

.thallo-volume .thallo-surface__h {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wp--preset--color--grey-900);
}
/* The marks of the surface — the three models, or Google's G — before its
   label, so a reader knows whose list it is before reading (Cami,
   2026-09-22). Each on a white disc with a hairline, overlapping a little. */
.thallo-surface__marks {
  display: inline-flex;
  align-items: center;
}
.thallo-surface__marks img {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  box-sizing: border-box;
}
.thallo-surface__marks img + img {
  margin-left: -0.4rem;
}

.thallo-volume .thallo-sec__main .thallo-catgrid > div {
  background: #fff;
}

/* ── What comes next ─────────────────────────────────────────────────────── */
.thallo-next {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--wp--preset--color--hairline);
}
.thallo-next p {
  margin: 0;
  max-width: 60ch;
  font-size: 1rem;
  color: var(--wp--preset--color--grey-900);
}
.thallo-next a {
  color: var(--wp--preset--color--olive);
}
.thallo-volume .thallo-close--volume,
.thallo-volume .thallo-panel--volume {
  margin-top: 3.5rem;
}
/* The floor of a volume, as on the hub: the "next volume" line is the last
   thing on the page and the footer used to sit 138px under it — the main's
   padding and the footer's margin stacked. One ordinary section distance. */
body.thallo-shortlist-volume .thallo-volume.thallo-archive {
  padding-bottom: 2.5rem;
}
body.thallo-shortlist-volume .thallo-foot {
  margin-top: 0;
}

/* Al final del archivo a propósito: la regla que fija el ancho de la barra
   vive más arriba, y entre dos declaraciones con la misma especificidad gana la
   última — un media query no suma especificidad, así que puesta antes no hacía
   nada. */
@media (min-width: 1024px) and (max-width: 1699.98px) {
  .thallo-nav__bar,
  .thallo-archive > * {
    max-width: 90vw;
  }
}

/* Last on purpose, after every rule that names these blocks: the one
   section gap of a volume, said once more where nothing can outrank it. */
.thallo-volume .thallo-panel--volume,
.thallo-volume .thallo-close--volume,
.thallo-volume > .thallo-volume__colophon,
.thallo-volume > .thallo-next {
  margin-top: var(--sec-gap, 4rem);
}
.thallo-volume__colophon .thallo-colophon {
  margin-top: 0;
}
.thallo-volume > .thallo-volume__colophon,
.thallo-volume > .thallo-next {
  max-width: min(calc(var(--volume-wide) + 6rem), calc(100vw - 3rem)); /* 3rem past the study on either side — a step past the navbar's edge, which is the point (Cami, 2026-09-22) */
}

/* ── The rhythm inside a section ──────────────────────────────────────────
   Measured and reset as one scale (Cami, 2026-09-22: "más espacio a
   todo"): the heading to its line 20px, the line to the material 40, the
   material to the text after it 40, paragraph to paragraph 24; inside a
   card the name to its figures 16, the figures to the reading 28; the
   aside's label to its heading 8, the heading to its text 24. Last in the
   file so nothing above outranks it. */
.thallo-volume .thallo-sec > h2,
.thallo-volume .thallo-sec__two .thallo-sec__say > h2 {
  margin-bottom: 1rem;
}
.thallo-volume .thallo-sec > p {
  margin-bottom: 1.25rem;
}
.thallo-volume .thallo-sec > p + .thallo-stage,
.thallo-volume .thallo-sec > p + .thallo-sec__grid,
.thallo-volume .thallo-sec > p + .thallo-sec__pair,
.thallo-volume .thallo-sec > p + .thallo-qgrid,
.thallo-volume .thallo-sec > p + .thallo-case,
.thallo-volume .thallo-sec > p + .thallo-surfaces,
.thallo-volume .thallo-sec > p + .thallo-mix {
  margin-top: 2rem !important;
}
.thallo-volume .thallo-sec > .thallo-stage + p,
.thallo-volume .thallo-sec > .thallo-mix + p,
.thallo-volume .thallo-sec > .thallo-domains + p,
.thallo-volume .thallo-sec > .thallo-surfaces + .thallo-overlap,
.thallo-volume .thallo-sec > .thallo-case + .thallo-aside,
.thallo-volume .thallo-sec > p + .thallo-domains {
  margin-top: 2rem !important;
}
.thallo-volume .thallo-sec__main .thallo-catgrid + .thallo-cutoff {
  margin-top: 1rem;
}
.thallo-volume .thallo-sec__main .thallo-cutoff + p {
  margin-top: 1.5rem;
}
.thallo-volume .thallo-both h3 {
  margin-bottom: 0.8rem;
}
.thallo-volume .thallo-both__stats {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}
.thallo-volume .thallo-both p {
  margin-bottom: 0.9rem;
}
.thallo-volume .thallo-case h3 {
  margin-bottom: 0.75rem;
}
.thallo-volume .thallo-case .thallo-case__lede {
  margin-bottom: 1.75rem;
}
.thallo-volume .thallo-case .thallo-case__caveat {
  margin-top: 2rem;
  padding-top: 1.5rem;
}
.thallo-volume .thallo-aside {
  padding: 1.75rem 2rem 2rem;
}
.thallo-volume .thallo-aside__eyebrow {
  margin-top: 0 !important;
  margin-bottom: 0.5rem;
}
.thallo-volume .thallo-aside > h3 {
  margin-bottom: 0.25rem;
}
.thallo-volume .thallo-aside > p:not(.thallo-aside__eyebrow) {
  margin-top: 1rem !important;
}
.thallo-volume .thallo-sec__two .thallo-sec__say > p {
  margin-bottom: 1.25rem;
}
.thallo-volume .thallo-qcell {
  padding-block: 1.5rem;
}
.thallo-volume .thallo-qcell h4 {
  margin-bottom: 1rem;
}
.thallo-volume .thallo-colophon {
  padding: 2rem 2.25rem 2.25rem;
}
.thallo-volume .thallo-colophon__table td {
  padding-block: 0.7rem;
}
.thallo-volume .thallo-colophon__honesty {
  margin-top: 1.5rem;
}

.thallo-volume .thallo-sec > p + .thallo-qgrid {
  margin-top: 1.5rem !important;
}
.thallo-volume .thallo-qcell:nth-child(-n + 2) {
  padding-top: 0;
}
.thallo-volume .thallo-qcell:nth-child(n + 3) {
  padding-bottom: 0;
}

/* Replay on click (assets/shortlist.js): the figure-by-type bar is a
   pseudo-element, so a class collapses it for one frame and the transition
   grows it back. The rows and cards that replay say so with the pointer. */
.thallo-reveal.is-in .thallo-cat__n.is-replaying::before,
.thallo-reveal.is-in .thallo-both__stat.is-replaying i::before {
  transform: scaleX(0);
  transition: none;
}
.thallo-rank tbody tr,
.thallo-models tbody tr,
.thallo-mix li,
.thallo-catgrid > div,
.thallo-both,
.thallo-console__rows li {
  cursor: pointer;
}

/* No orphan on the last line of a paragraph — "the list." alone under
   six full lines (Cami, 2026-09-22). Browsers that know `pretty` rebalance
   the last lines; for the rest, assets/shortlist.js ties the last two
   words together so the last line is never one word. Headings balance. */
.thallo-volume p,
.thallo-volume li {
  text-wrap: pretty;
}
.thallo-volume h1,
.thallo-volume h2,
.thallo-volume h3 {
  text-wrap: balance;
}

/* ── The hub's masthead, balanced and with air ────────────────────────────
   A centred line that breaks long-then-short reads as a mistake; `balance`
   makes the two lines of the question and of the intro the same length.
   And a step more room between the four pieces (Cami, 2026-09-22). */
.thallo-mast--series .thallo-series__question .wp-block-post-excerpt__excerpt,
.thallo-mast--series .thallo-series__question p,
.thallo-mast--series .thallo-series__intro p {
  text-wrap: balance;
}
.thallo-mast--series .thallo-series__question {
  margin-top: 1.5rem;
}
.thallo-mast--series .thallo-series__intro {
  margin-top: 2rem;
}
.thallo-mast--series .thallo-series__intro p {
  margin-bottom: 1rem;
  max-width: 92ch;
}
.thallo-mast--series .thallo-series__intro p:last-child {
  margin-bottom: 0;
}
.thallo-mast--series .thallo-mast__flower {
  margin-top: 3rem;
}
.thallo-mast--series {
  padding-bottom: 3rem;
}

/* The flower sits between the question and the intro now; the title gets
   a step more room under it (Cami, 2026-09-22). */
.thallo-mast--series .thallo-series__question {
  margin-top: 2rem;
}
.thallo-mast--series .thallo-mast__flower {
  margin: 2.5rem auto 0;
}
.thallo-mast--series .thallo-series__intro {
  margin-top: 2.5rem;
}

/* The heading over the volumes: the section's label, a title at the
   section size, its line — centred, as the head above it is. */
.thallo-vols__head {
  margin: var(--hub-gap) auto 2rem;
  max-width: 56ch;
  text-align: center;
}
.thallo-vols__head .thallo-kicker {
  margin: 0 0 1.5rem;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--grey-500);
}
.thallo-vols__h {
  margin: 0 0 0.75rem;
  font-size: var(--t-section);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--grey-900);
}
.thallo-vols__p {
  margin: 0;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--wp--preset--color--grey-500);
  text-wrap: balance;
}
.thallo-vols__head + .thallo-cards {
  margin-top: 0;
}

/* The pager's number discs fill and lift under the pointer — the filter
   pills' own move (Cami, 2026-09-22). The arrows stay as they are. */
.thallo-pager__n {
  transition: color 0.2s, border-color 0.2s, background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) {
  .thallo-pager__n:not(.is-on):hover {
    background: var(--wp--preset--color--olive);
    border-color: var(--wp--preset--color--olive);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -12px rgba(57, 71, 29, 0.35);
  }
}

/* The step rings on the method panel go white under the pointer — the
   Engine's move on /services/, where the glass card turns white and its
   type dark. The whole step is the hover target, so passing over its text
   lights its number too (Cami, 2026-09-22). */
.thallo-step__n {
  transition: background-color 0.4s, border-color 0.4s, color 0.4s;
}
@media (hover: hover) {
  .thallo-step:hover .thallo-step__n {
    background: #fff;
    border-color: #fff;
    color: var(--wp--preset--color--ink);
  }
}

/* The hub's title alone sits a little lower under the bar; the question
   keeps its distance from it (Cami, 2026-09-22). */
.thallo-mast--series .thallo-mast__title--series {
  margin-top: 1.25rem;
}

/* The question closer under the title (Cami, 2026-09-22). */
.thallo-mast--series .thallo-series__question {
  margin-top: 1rem;
}

/* ══ The blog’s front page ══════════════════════════════════════════════════
   The hub’s pieces, on the blog. The search sits centred under the mark;
   an article card carries its picture on top of the volume card’s body;
   one or two articles fill the row rather than leave holes. */
.thallo-blog-home .thallo-mast__title--series {
  max-width: 22ch;
}
.thallo-find--centre {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
.thallo-find--centre .thallo-search--big {
  flex: 0 1 30rem;
  max-width: 30rem;
  width: 100%;
}
.thallo-blog-home .thallo-vols__head {
  margin-top: var(--hub-gap);
}
.thallo-card--article {
  padding: 0;
  min-height: 0;
}
.thallo-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: var(--wp--preset--color--olive);
}
.thallo-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.thallo-card--article:hover .thallo-card__media img {
  transform: scale(1.03);
}
.thallo-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.5rem 1.75rem 1.75rem;
}
.thallo-card__body .thallo-card__h {
  margin-top: 1rem;
}
/* One or two articles: the row is still three tracks wide, and the cards
   share it — a single one across the row, the picture beside the text. */
.thallo-cards__grid--1 {
  grid-template-columns: minmax(0, 1fr);
}
.thallo-cards__grid--1 .thallo-card--article {
  flex-direction: row;
}
.thallo-cards__grid--1 .thallo-card__media {
  flex: 0 0 48%;
  aspect-ratio: auto;
  border-radius: 24px 0 0 24px;
}
.thallo-cards__grid--1 .thallo-card__body {
  padding: 2.5rem 2.75rem;
  justify-content: center;
}
.thallo-cards__grid--1 .thallo-card__h {
  font-size: var(--t-section);
  max-width: 18ch;
}
.thallo-cards__grid--1 .thallo-card__p {
  max-width: 52ch;
  font-size: var(--t-body);
}
.thallo-cards__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.thallo-blog-home .thallo-cards {
  padding-bottom: 0;
  border-bottom: 0;
}
.thallo-blog-home .thallo-panel {
  margin-top: var(--hub-gap);
}
@media (max-width: 781px) {
  .thallo-cards__grid--1 .thallo-card--article {
    flex-direction: column;
  }
  .thallo-cards__grid--1 .thallo-card__media {
    flex: none;
    aspect-ratio: 16 / 10;
    border-radius: 24px 24px 0 0;
  }
  .thallo-cards__grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The article card's body carries the site's old "→" on hover (the blog's
   own card rule, above); this card has a button for that. And the line
   under the title in the serif italic, as the hub's. */
.thallo-card--article .thallo-card__body::after {
  content: none;
}
.thallo-blog-home .thallo-series__question {
  margin: 1rem auto 0;
  max-width: 44ch;
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-size: var(--t-italic);
  line-height: 1.35;
  color: var(--wp--preset--color--grey-900);
  text-wrap: balance;
}

/* ── The blog's hero: text left, photograph right ────────────────────────
   A volume's head, on the blog. The picture ends on the search's line;
   the text is left-aligned inside its column. */
.thallo-blog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: 0;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
}
.thallo-blog-hero > * {
  margin-top: 0 !important;
}
.thallo-blog-hero .thallo-mast__title--series {
  margin-inline: 0;
  margin-top: 0;
  max-width: 14ch;
}
.thallo-blog-home .thallo-blog-hero .thallo-series__question {
  margin: 1.25rem 0 0;
  max-width: 34ch;
}
.thallo-find--hero {
  margin-top: 2rem;
}
.thallo-find--hero .thallo-search--big {
  flex: 0 1 26rem;
  max-width: 26rem;
  width: 100%;
}
.thallo-blog-hero__art {
  aspect-ratio: 16 / 11;
  height: auto;
  min-height: 0;
  align-self: end;
}
@media (max-width: 1023.98px) {
  .thallo-blog-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .thallo-blog-hero__art {
    aspect-ratio: 16 / 9;
  }
}
/* The text column stands the picture's height: the title on its top line,
   the search on its bottom line, the line between them. */
.thallo-blog-hero {
  align-items: stretch;
}
.thallo-blog-hero__text {
  display: flex;
  flex-direction: column;
}
.thallo-blog-hero__text .thallo-find--hero {
  margin-top: auto;
  padding-top: 2rem;
}
/* "Ideas that make your brand / more visible to AI." — the break is the
   sentence's, not the width's (Cami, 2026-09-22). */
.thallo-blog-hero .thallo-mast__title--series {
  max-width: none;
}
.thallo-blog-hero .thallo-mast__title--series .thallo-mast__br {
  display: block;
}
.thallo-blog-hero__art {
  aspect-ratio: 16 / 10;
}
/* An article without a picture gets the house grey, not the olive — grey
   for what is not the point (Cami, 2026-09-22). No mark on it. */
.thallo-card__media--bare {
  background: #f3f4f6;
}
.thallo-card__media--bare::before,
.thallo-card__media--bare::after {
  content: none;
}

/* The blog's line under its title in Inter, as the site's standfirsts —
   the italic is the series', not the blog's (Cami, 2026-09-22). */
.thallo-blog-home .thallo-blog-hero .thallo-series__question {
  font-family: var(--wp--preset--font-family--sans);
  font-style: normal;
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.6;
  max-width: 44ch;
  color: var(--wp--preset--color--grey-500);
}
/* An article without a picture is the quiet one: its button grey, and
   under the pointer its edge and shadow grey where a published card's go
   olive (Cami, 2026-09-22). The date on one line. */
.thallo-card--article .thallo-card__date {
  white-space: nowrap;
}
.thallo-card--quiet .thallo-card__go {
  background: #f3f4f6;
  color: var(--wp--preset--color--grey-500);
}
@media (hover: hover) {
  a.thallo-card--quiet:hover {
    border-color: #9ca3af;
    box-shadow: 0 24px 60px -30px rgba(23, 26, 16, 0.25);
  }
  a.thallo-card--quiet:hover .thallo-card__go {
    background: #e5e7eb;
    color: var(--wp--preset--color--grey-900);
  }
}

/* The blog's closing photograph shows its upper part — the cup, the pen —
   and the embossed mark on the notebook drops out of the crop (Cami,
   2026-09-22). */
.thallo-blog-home .thallo-panel__img {
  object-position: 50% 50%;
}

/* The blog's hero: the text as one block — title, line, search, close
   together — centred on the photograph's middle (Cami, 2026-09-22). */
.thallo-blog-hero {
  align-items: center;
}
.thallo-blog-hero__text {
  justify-content: center;
}
.thallo-blog-hero__text .thallo-find--hero {
  margin-top: 0;
  padding-top: 1.5rem;
}
.thallo-blog-home .thallo-blog-hero .thallo-series__question {
  margin-top: 1rem;
}
/* The hero photograph is 1039×901 — near square — and is shown whole, as
   Cami cropped it (2026-09-22): the frame takes its proportion, the text
   column beside it a little narrower. */
.thallo-blog-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}
.thallo-blog-hero__art {
  aspect-ratio: 1039 / 901;
}
/* Shorter: the frame at 4:3, the photograph cropped from a little below
   its centre so the books and the laptop stay (Cami, 2026-09-22). */
.thallo-blog-hero__art {
  aspect-ratio: 4 / 3;
}
.thallo-blog-hero__art img {
  object-position: 50% 62%;
}
/* The blog's panel on the stationery photograph: cropped a little above
   its middle, where the notepad and the pen sit; the scrim as everywhere. */
.thallo-blog-home .thallo-panel__img {
  object-position: 50% 45%;
}
/* This photograph is lit across its whole width, so the scrim is heavier
   than the site's and runs edge to edge (Cami, 2026-09-22: "muy clara"). */
.thallo-blog-home .thallo-panel__scrim {
  background: linear-gradient(90deg, rgba(23, 26, 16, 0.78), rgba(23, 26, 16, 0.55) 55%, rgba(23, 26, 16, 0.45));
}

/* ══ A volume on a phone ═══════════════════════════════════════════════════
   Last in the file on purpose: the desktop rules above are specific and
   some of them are unconditional, so the phone layout has to be stated
   after all of them. One column everywhere, the reading column the full
   width, the head stacked with the picture under the text, nothing that
   hangs off the right edge (Cami, 2026-09-22: the phone screenshots). */
@media (max-width: 1023.98px) {
  .thallo-volume > .thallo-volume__head {
    display: block;
    padding-bottom: 2rem;
  }
  .thallo-volume__text {
    display: block;
  }
  .thallo-volume__text .thallo-volume__title {
    max-width: none;
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
  .thallo-volume__text .thallo-series__question .wp-block-post-excerpt__excerpt,
  .thallo-volume__text .thallo-series__question p {
    max-width: none;
    font-size: 1.2rem;
  }
  .thallo-volume__lede p {
    max-width: none;
  }
  .thallo-volume__go {
    margin-top: 1.5rem;
  }
  .thallo-volume__art {
    margin-top: 2rem;
    aspect-ratio: 4 / 3;
    min-height: 0;
    height: auto;
  }
  .thallo-volume__note {
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.9rem;
  }
  .thallo-volume__chip {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.6rem 0.75rem;
  }
  .thallo-volume__chip-t {
    font-size: 0.78rem;
  }
  /* The study: no side tracks, one column the width of the page. */
  .thallo-volume__body .wp-block-post-content {
    display: block;
  }
  .thallo-volume__body .wp-block-post-content > * {
    max-width: none;
  }
  .thallo-volume .thallo-sec {
    margin-top: 3rem;
  }
  .thallo-volume .thallo-sec > h2 {
    max-width: none;
    font-size: clamp(1.5rem, 6.5vw, 1.9rem);
  }
  .thallo-sec__two,
  .thallo-sec__grid,
  .thallo-sec__three,
  .thallo-sec__pair,
  .thallo-case__cards,
  .thallo-qgrid {
    display: block;
  }
  .thallo-sec__two > * + *,
  .thallo-sec__grid > * + *,
  .thallo-sec__pair > * + *,
  .thallo-case__cards > * + * {
    margin-top: 1.5rem !important;
  }
  .thallo-sec__two .thallo-finding {
    padding-left: 0;
    border-left: 0;
    align-items: flex-start;
    text-align: left;
    margin-top: 1.5rem !important;
  }
  .thallo-sec .thallo-finding__stat {
    font-size: clamp(3rem, 14vw, 4rem);
  }
  .thallo-sec__side .thallo-photo {
    display: none;
  }
  .thallo-stage {
    padding: 1rem;
  }
  .thallo-stage > .thallo-sec__grid > * + * {
    margin-top: 1rem !important;
  }
  /* The ranking tables: the note column goes, the firm wraps, the figure
     stays on its line. */
  .thallo-rank__note,
  .thallo-rank__pos {
    display: none !important;
  }
  .thallo-rank :is(th, td) {
    padding: 0.7rem 0.5rem;
  }
  .thallo-rank :is(th, td):first-child {
    padding-left: 0.75rem;
  }
  .thallo-rank :is(th, td):last-child {
    padding-right: 0.75rem;
  }
  .thallo-surface .thallo-rank__firm {
    font-size: 0.92rem;
  }
  .thallo-rank__rate {
    min-width: 7rem;
  }
  /* Four columns in the phone's width: smaller type, tighter cells, no
     sideways scroll — a table that scrolls hides its point. */
  .thallo-models {
    overflow-x: visible;
  }
  .thallo-models table {
    min-width: 0;
    font-size: 0.8rem;
  }
  .thallo-models th,
  .thallo-models td {
    padding: 0.65rem 0.4rem;
  }
  .thallo-models th:first-child,
  .thallo-models td:first-child {
    padding-left: 0.75rem;
  }
  .thallo-models th:last-child,
  .thallo-models td:last-child {
    padding-right: 0.75rem;
  }
  .thallo-models th {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
  }
  .thallo-models td:first-child {
    font-size: 0.82rem;
  }
  /* The four figures two by two; the bars and domains at the page width. */
  .thallo-sec__main .thallo-catgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  /* One line per domain: the name in a smaller mono that shrinks to fit,
     the count on the right, the "(trade press)" note dropped below in its
     own small line rather than breaking the name (Cami, 2026-09-22). */
  .thallo-domains li {
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.55rem 0;
  }
  .thallo-domains li::before {
    margin-right: 0.35rem;
    flex: 0 0 auto;
  }
  .thallo-domains .thallo-d__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .thallo-domains .thallo-d__name em {
    display: none;
  }
  .thallo-domains .thallo-d__c {
    flex: 0 0 auto;
    font-size: 0.85rem;
  }
  .thallo-sec--band .thallo-domains {
    padding: 0.25rem 0.9rem;
  }
  .thallo-case {
    padding: 1.5rem 1.25rem;
  }
  .thallo-case__card {
    padding: 1.25rem;
  }
  .thallo-aside {
    display: block;
    padding: 1.5rem 1.25rem;
  }
  .thallo-qcell {
    padding: 1.25rem 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--wp--preset--color--hairline) !important;
  }
  .thallo-qcell:last-child {
    border-bottom: 0 !important;
  }
  /* The panel, the colophon and the next line at the page's width. */
  .thallo-volume > .thallo-panel,
  .thallo-volume > .thallo-volume__colophon,
  .thallo-volume > .thallo-next {
    max-width: none;
  }
  .thallo-volume > .thallo-panel {
    padding: 2rem 1.25rem;
  }
  .thallo-volume > .thallo-panel > .thallo-panel__say {
    max-width: none;
  }
  .thallo-panel__h {
    font-size: clamp(1.6rem, 7vw, 2rem);
  }
  .thallo-colophon {
    padding: 1.5rem 1.25rem !important;
  }
}
@media (max-width: 560px) {
  .thallo-volume .thallo-sec--band {
    padding: 1.5rem 1.1rem;
  }
  .thallo-volume__chip-a,
  .thallo-volume__chip-i {
    display: none;
  }
}

/* ══ The blog's front page on a phone ═══════════════════════════════════════
   Last, after the hero's unconditional two-column rules: the text at the
   page's width, the search under it, the photograph under that
   (Cami, 2026-09-22). */
@media (max-width: 1023.98px) {
  .thallo-blog-hero {
    display: block;
    padding-bottom: 2rem;
  }
  .thallo-blog-hero__text {
    display: block;
  }
  .thallo-blog-hero .thallo-mast__title--series {
    max-width: none;
    font-size: clamp(2rem, 8vw, 2.6rem);
  }
  .thallo-blog-hero .thallo-mast__title--series .thallo-mast__br {
    display: inline;
  }
  .thallo-blog-home .thallo-blog-hero .thallo-series__question {
    max-width: none;
  }
  .thallo-find--hero {
    margin-top: 1.5rem;
    padding-top: 0;
  }
  .thallo-find--hero .thallo-search--big {
    max-width: none;
    flex: 1 1 auto;
  }
  .thallo-blog-hero__art {
    margin-top: 2rem !important;
    aspect-ratio: 4 / 3;
  }
  .thallo-blog-home .thallo-vols__head {
    margin-top: 3rem;
  }
  .thallo-blog-home .thallo-panel {
    margin-top: 3rem;
  }
}

/* One or two articles: ordinary cards, one or two tracks of the three,
   centred — not one card blown up across the row, which read as a mistake
   in production (Cami, 2026-09-22). Last, over the earlier grid--1 rules. */
.thallo-cards__grid--1,
.thallo-cards__grid--2 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.thallo-cards__grid--1 > .thallo-cards__item {
  grid-column: 2;
}
.thallo-cards__grid--2 > .thallo-cards__item:first-child {
  grid-column: 1;
}
.thallo-cards__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc(66.66% - 0.42rem);
  margin-inline: auto;
}
.thallo-cards__grid--1 .thallo-card--article {
  flex-direction: column;
}
.thallo-cards__grid--1 .thallo-card__media {
  flex: none;
  aspect-ratio: 16 / 10;
  border-radius: 24px 24px 0 0;
}
.thallo-cards__grid--1 .thallo-card__body {
  padding: 1.5rem 1.75rem 1.75rem;
  justify-content: flex-start;
}
.thallo-cards__grid--1 .thallo-card__h {
  font-size: var(--t-card);
  max-width: none;
}
.thallo-cards__grid--1 .thallo-card__p {
  max-width: none;
  font-size: var(--t-small);
}
@media (max-width: 1023.98px) {
  .thallo-cards__grid--1,
  .thallo-cards__grid--2 {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
  .thallo-cards__grid--1 > .thallo-cards__item {
    grid-column: auto;
  }
}
/* The coming-soon article card: grey ground, muted title, nothing that
   looks clickable — the volume card's own quiet state. */
.thallo-card--article.thallo-card--soon .thallo-card__h,
.thallo-card--article.thallo-card--soon .thallo-card__p {
  color: #9ca3af;
}
.thallo-card--article.thallo-card--soon .thallo-card__media--bare {
  background: #eef0f2;
}

/* Google in a mid slate rather than the ink: against olive the near-black
   read as "dark", not as a second colour (Cami, 2026-09-22). One value,
   said once, for every Google figure in a volume. */
.thallo-volume {
  --google: #4b5563;
}
.thallo-volume .thallo-surface--google {
  --surface: var(--google);
}
.thallo-volume .thallo-both__stat--google {
  --surface: var(--google);
}
.thallo-volume .thallo-mix .thallo-mix__fill {
  background: var(--google);
}
.thallo-volume .thallo-mix .thallo-mix__n {
  color: var(--google);
}
.thallo-volume .thallo-tag--ink {
  background: var(--google);
}

/* The questions print under the invitation (thallo_shortlist_questions);
   hidden where the writer keeps them, at the end of the content. */
/* The questions are the last section of the content and print again under
   the invitation, so the copy in the body is hidden — as the colophon is. */
.thallo-volume__body .wp-block-post-content > .thallo-sec:last-child {
  display: none;
}
.thallo-volume__questions .thallo-sec {
  margin-top: 0;
}
.thallo-volume > .thallo-volume__questions {
  max-width: min(calc(var(--volume-wide) + 6rem), calc(100vw - 3rem));
  margin: var(--sec-gap, 4rem) auto 0;
}
.thallo-volume__questions .thallo-sec > .thallo-kicker,
.thallo-volume__questions .thallo-sec > h2,
.thallo-volume__questions .thallo-sec > p,
.thallo-volume__questions .thallo-qgrid {
  max-width: min(var(--volume-wide), calc(90vw - 3rem));
  margin-inline: auto;
}

/* The two readings start on one line: the tag sits above its paragraph
   rather than in front of it, so "In the answers" and "On the page" — two
   labels of different widths — no longer push their text to different
   places (Cami, 2026-09-22). */
.thallo-both p .thallo-tag {
  display: table;
  margin: 0 0 0.5rem;
}
.thallo-volume .thallo-both p + p {
  margin-top: 1.25rem;
}

/* The pair, one step further apart: AI back to the dark olive, Google a
   blue (Cami, 2026-09-22). The olive rules must exclude Google - the AI
   surface carries no modifier of its own, so a bare .thallo-surface would
   paint both.

   Two tones, not one. Cami picked #bb9a71, a warm sand that sits away from
   the olive without fighting it - but at 2.6:1 on white it cannot carry
   text. So the sand draws (bars, fills, swatches, the big figures) and a
   deeper cut of the same hue writes (labels, the table's percentages, the
   tag). Same colour, read twice. */
.thallo-volume {
  --google: #bb9a71;
  --google-deep: #8a6d45;
}
.thallo-volume .thallo-surface:not(.thallo-surface--google) {
  --surface: var(--wp--preset--color--olive);
}
.thallo-volume .thallo-both__stat--ai {
  --surface: var(--wp--preset--color--olive);
}
.thallo-volume .thallo-catgrid .thallo-cat__n {
  color: var(--wp--preset--color--olive);
}
.thallo-volume .thallo-catgrid .thallo-cat__n::before {
  background: var(--wp--preset--color--olive);
}
.thallo-volume .thallo-domains .thallo-d__c {
  color: var(--wp--preset--color--olive);
}
/* "In the answers" reads as its surface does: the dark olive, white on
   it — the pale green was the one thing still tinted (Cami, 2026-09-22).
   Its opposite number, "On the page", is the same shape in the grey. */
.thallo-volume .thallo-tag--olive {
  color: #fff;
  background: var(--wp--preset--color--olive);
}
/* And Google, after them, so nothing above can claim its half. */
.thallo-volume .thallo-surface--google,
.thallo-volume .thallo-both__stat--google {
  --surface: var(--google);
}
.thallo-volume .thallo-both__stat--google b {
  color: var(--google);
}
/* What is written rather than drawn. */
.thallo-volume .thallo-surface--google .thallo-surface__h,
.thallo-volume .thallo-mix .thallo-mix__n {
  color: var(--google-deep);
}
/* And if Google's label carries its colour, so does the other one (Cami,
   2026-09-22): a title in ink beside a title in sand reads as one of them
   being the heading and the other a note. */
.thallo-volume .thallo-surface:not(.thallo-surface--google) .thallo-surface__h {
  color: var(--wp--preset--color--olive);
}
.thallo-volume .thallo-surface--google .thallo-rate__num {
  color: var(--google-deep) !important;
}
.thallo-volume .thallo-tag--ink {
  color: #fff;
  background: var(--google-deep);
}
.thallo-volume .thallo-mix .thallo-mix__fill {
  background: var(--google);
}
.thallo-volume .thallo-mix .thallo-mix__n {
  color: var(--google);
}
.thallo-volume .thallo-tag--ink {
  color: #fff;
  background: var(--google);
}

/* ══ The twelve questions, folded away ══════════════════════════════════════
   The section keeps its label, its title and its line; the grid opens on a
   click (Cami, 2026-09-22: "esa parte estorba un poco"). The summary is a
   row on a rule, the way the rest of the study divides itself, rather than
   a button — nothing else on the page is a button that is not a call to
   action. */
.thallo-volume__questions .thallo-qdrop {
  max-width: min(var(--volume-wide), calc(90vw - 3rem));
  margin: 2rem auto 0;
  border-top: 1px solid var(--wp--preset--color--hairline);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.thallo-qdrop__s {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--wp--preset--color--olive);
  transition: color 0.25s ease;
}
/* Safari still draws the triangle from the shadow tree. */
.thallo-qdrop__s::-webkit-details-marker {
  display: none;
}
.thallo-qdrop__s::marker {
  content: '';
}
@media (hover: hover) {
  .thallo-qdrop__s:hover {
    color: var(--wp--preset--color--grey-900);
  }
}
.thallo-qdrop__s:focus-visible {
  outline: 2px solid var(--wp--preset--color--olive);
  outline-offset: 4px;
  border-radius: 4px;
}
.thallo-qdrop__chev {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.thallo-qdrop[open] .thallo-qdrop__chev {
  transform: rotate(180deg);
}
/* One label at a time: "Show…" while it is shut, "Hide…" once it is open. */
.thallo-qdrop__t--open,
.thallo-qdrop[open] .thallo-qdrop__t--shut {
  display: none;
}
.thallo-qdrop[open] .thallo-qdrop__t--open {
  display: inline;
}
.thallo-qdrop__body {
  padding-bottom: 1.75rem;
}
.thallo-volume__questions .thallo-qdrop__body .thallo-qgrid {
  margin-top: 0;
  max-width: none;
}
/* It slides where the browser can measure a height it was never given, and
   simply appears where it cannot. Scoped to the fold: interpolate-size on
   :root would change how every other keyword size on the page animates. */
@supports (interpolate-size: allow-keywords) {
  .thallo-qdrop {
    interpolate-size: allow-keywords;
  }
  .thallo-qdrop::details-content {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.35s ease,
      content-visibility 0.45s allow-discrete;
  }
  .thallo-qdrop[open]::details-content {
    height: auto;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .thallo-qdrop::details-content {
    transition: none;
  }
  .thallo-qdrop__chev {
    transition: none;
  }
}

/* ══ The pair's two readings line up ════════════════════════════════════════
   "On the page" has to start on the same line in both cards, without moving
   "In the answers" (Cami, 2026-09-22). The two paragraphs above it are four
   lines in one card and one in the other, so nothing inside a card can do
   it: the cards have to measure their rows together.

   Subgrid. The pair owns four rows — the name, the two figures, the first
   reading, the second — and each card adopts them instead of laying out its
   own. Row three takes the height of the taller paragraph, so row four
   begins at the same y in both. Equal card heights come free with it.

   Where subgrid is missing the cards lay out as they did, which is the
   thing being fixed, not a break. The row gap goes to zero because the
   spacing between these four is margins, set above, and a grid gap would
   land on top of them. */
@supports (grid-template-rows: subgrid) {
  .thallo-sec__pair:has(> .thallo-both) {
    grid-template-rows: repeat(4, auto);
    row-gap: 0;
  }
  .thallo-sec__pair > .thallo-both {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}
/* Under 1024 the pair stacks and is no longer a grid, so the cards have no
   rows to adopt. They go back to block flow, where their margins collapse
   the way the spacing above was written for. */
@media (max-width: 1023.98px) {
  .thallo-sec__pair > .thallo-both {
    display: block;
  }
}