/*
Theme Name: MacLocalLLM Blocksy Child
Description: Version-controlled presentation layer for MacLocalLLM.com.
Author: IKEO Group
Template: blocksy
Version: 0.9.10
Text Domain: maclocalllm-blocksy-child
*/

:root {
  --mllm-ink: #0a1018;
  --mllm-panel: #111a25;
  --mllm-panel-soft: #182534;
  --mllm-silver: #dbe5ec;
  --mllm-muted: #91a4b5;
  --mllm-cyan: #6ee7f2;
  --mllm-lime: #b9f27c;
  --mllm-coral: #ff806b;
  --mllm-paper: #f4f7f9;
  --mllm-line: rgba(145, 164, 181, 0.22);
  --mllm-grid: rgba(110, 231, 242, 0.16);
  --mllm-shadow: 0 28px 80px rgba(2, 7, 12, 0.3);
  --mllm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mllm-glow-cyan: 0 0 70px -30px rgba(110, 231, 242, 0.36);
}

body {
  background: var(--mllm-ink);
  color: var(--mllm-silver);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.site-title {
  color: var(--mllm-paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.045em;
}

a { color: var(--mllm-cyan); }

body[data-header*="type-1"] .ct-header [data-row*="middle"] {
  background: rgba(10, 16, 24, 0.88);
  border-bottom: 1px solid var(--mllm-line);
  backdrop-filter: blur(18px);
}

.site-title,
.menu > li > a,
.mobile-menu a { color: var(--mllm-paper); }

.menu > li > a,
.mobile-menu a,
.wp-element-button,
.wp-block-button__link,
.mllm-kicker,
.mllm-label,
.mllm-chip,
.mllm-stat-key {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.wp-element-button,
.wp-block-button__link {
  align-items: center;
  background: var(--mllm-cyan);
  border: 1px solid var(--mllm-cyan);
  border-radius: 10px;
  color: var(--mllm-ink);
  display: inline-flex;
  justify-content: center;
  min-height: 50px;
  padding: 0.85rem 1.35rem;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  background: #9af2fa;
  box-shadow: 0 12px 30px rgba(110, 231, 242, 0.2);
  color: var(--mllm-ink);
  transform: translateY(-2px);
}

.is-style-outline > .wp-block-button__link {
  background: transparent;
  border-color: var(--mllm-line);
  color: var(--mllm-silver);
}

.is-style-outline > .wp-block-button__link:hover {
  border-color: var(--mllm-cyan);
  color: var(--mllm-paper);
}

.mllm-page { overflow: clip; }
.mllm-page > .wp-block-group { margin-block: 0; }

/* Blocksy sizes every container from --theme-container-width = min(100%, 90vw),
   so a 1400px cap never engaged on a 1440px screen (page and header both sat
   at 1296px). Widen the edge spacing on desktop; phones keep Blocksy's own.
   html:root outranks the :root the theme prints inline. */
@media (min-width: 1000px) {
  html:root { --theme-container-edge-spacing: 95vw; }
}

.mllm-shell {
  margin-inline: auto;
  max-width: 1400px;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}

.mllm-section { padding-block: clamp(3.25rem, 6vw, 5.5rem); }

/* Site-wide lattice. One fixed layer behind every page: a pointy-top hexagon
   tile (silicon, not spreadsheet) at low opacity, vignetted so it is strongest
   behind the opening of a page and never fully disappears. Content scrolls
   over it, which is where the sense of depth comes from. It sits at z-index -1
   inside the body's own stacking context, so it paints above the body colour
   and below everything else without any element needing a z-index. */
body { isolation: isolate; }

body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55.43' height='96' viewBox='0 0 55.43 96'%3E%3Cpath d='M27.71 0 L55.43 16 L55.43 48 L27.71 64 L0 48 L0 16 Z M27.71 64 V96' fill='none' stroke='rgba(110,231,242,0.16)' stroke-width='1.1'/%3E%3C/svg%3E");
  background-position: 50% 0;
  content: "";
  inset: 0;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 0%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.3) 100%);
  mask-image: radial-gradient(130% 95% at 50% 0%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

@media print { body::before { content: none; } }

.mllm-kicker {
  align-items: center;
  color: var(--mllm-cyan);
  display: flex;
  gap: 0.7rem;
  margin: 0 0 1.4rem;
}

.mllm-kicker::before {
  background: var(--mllm-cyan);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(110, 231, 242, 0.65);
  content: "";
  height: 0.55rem;
  width: 0.55rem;
}

.mllm-display {
  font-size: clamp(3.45rem, 8.5vw, 8.2rem);
  line-height: 0.9;
  margin: 0;
  max-width: 10.5ch;
}

.mllm-lede {
  color: var(--mllm-muted);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
  line-height: 1.7;
  max-width: 44rem;
}

.mllm-hero {
  background:
    radial-gradient(circle at 80% 25%, rgba(110, 231, 242, 0.14), transparent 24rem),
    radial-gradient(circle at 15% 10%, rgba(185, 242, 124, 0.07), transparent 22rem),
    var(--mllm-ink);
  min-height: min(850px, calc(100vh - 76px));
  position: relative;
}

/* One column: the headline sits above the diagram, and the diagram gets the
   full shell width instead of sharing it. */
.mllm-hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: inherit;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  text-align: center;
}

.mllm-hero-grid .mllm-hero-copy .mllm-display,
.mllm-hero-grid .mllm-hero-copy .mllm-lede { margin-inline: auto; }
.mllm-hero-grid .mllm-hero-copy .wp-block-buttons { justify-content: center; }

.mllm-hero-copy .mllm-lede { margin-block: 2rem 2.3rem; }

/* Hero visual: an inline SVG of the thesis itself — work flows into the Mac and
   resolves there; one thin thread reaches the cloud. Animated in the SVG's own
   stylesheet, gated on prefers-reduced-motion; static, it is still the diagram. */
.mllm-hero-visual {
  filter: drop-shadow(0 30px 60px rgba(2, 7, 12, 0.6));
  margin: 0;
  width: min(100%, 1120px);
}


.mllm-hero-visual svg {
  display: block;
  height: auto;
  width: 100%;
}

.mllm-hardware-section { padding-top: clamp(3.5rem, 6vw, 5.5rem); }

.mllm-hardware-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mllm-hardware-card {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 18px;
  overflow: hidden;
}

.mllm-hardware-card-wide {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
}

.mllm-hardware-card figure { aspect-ratio: 16 / 9; margin: 0; overflow: hidden; }
.mllm-hardware-card img { border-radius: 14px; display: block; height: 100%; object-fit: cover; width: 100%; }
.mllm-hardware-card figure { border-radius: 14px; }
.mllm-hardware-card-wide figure { aspect-ratio: auto; min-height: 340px; }
.mllm-hardware-copy { padding: clamp(1.5rem, 3vw, 2.4rem); }
.mllm-hardware-copy h3 { font-size: clamp(1.65rem, 3vw, 2.35rem); margin: 0.6rem 0 1rem; }
.mllm-hardware-copy p { color: var(--mllm-muted); margin-bottom: 0; }

.mllm-section-heading {
  align-items: end;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mllm-section-heading h2 {
  font-size: clamp(2.7rem, 6vw, 5.5rem);
  line-height: 0.94;
  margin: 0;
  max-width: 10ch;
}

.mllm-section-heading p { color: var(--mllm-muted); margin: 0; max-width: 33rem; }

.mllm-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mllm-card {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 16px;
  min-height: 300px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
}

.mllm-card::after {
  background: var(--mllm-cyan);
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  transition: opacity 160ms ease;
}

.mllm-card:hover::after { opacity: 1; }
.mllm-card h3 { font-size: clamp(1.65rem, 3vw, 2.2rem); margin-top: 4rem; }
.mllm-card p { color: var(--mllm-muted); }
.mllm-label { color: var(--mllm-cyan); }

/* Formerly a paper-white slab; a bright block in the middle of a dark page read
   as a different site. Now a rounded panel in the same palette. */
.mllm-light {
  background: linear-gradient(180deg, rgba(244, 247, 249, 0.04), transparent), var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3.5rem);
}

.mllm-light .mllm-card { background: var(--mllm-panel-soft); }

.mllm-method {
  align-items: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}

.mllm-method-intro,
.mllm-method-list {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 18px;
  padding: clamp(2rem, 5vw, 4rem);
}

.mllm-method-intro h2 { font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 0.94; }
.mllm-method-list { counter-reset: method; }

.mllm-method-row {
  border-bottom: 1px solid var(--mllm-line);
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 3rem 1fr;
  padding-block: 1.6rem;
}

.mllm-method-row:last-child { border-bottom: 0; }
.mllm-method-row h3 { margin: 0 0 0.45rem; }
.mllm-method-row p { color: var(--mllm-muted); margin: 0; }
.mllm-stat-key { color: var(--mllm-silver); }

.mllm-prose { margin-inline: auto; max-width: 960px; }
.mllm-prose h1 { font-size: clamp(3.4rem, 8vw, 7rem); line-height: 0.92; }
.mllm-prose h2 { font-size: clamp(2rem, 4vw, 3.4rem); margin-top: 2.5em; }
.mllm-prose p,
.mllm-prose li { color: var(--mllm-muted); line-height: 1.78; }

.mllm-benchmark-lede {
  color: var(--mllm-silver);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.65;
}

.mllm-benchmark-meta,
.mllm-benchmark-source {
  color: var(--mllm-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.025em;
}

.mllm-article .entry-content > .alignwide {
  margin-inline: auto;
  max-width: min(1200px, calc(100vw - 2 * clamp(1.2rem, 4vw, 3rem)));
}

.mllm-data-table-wrap {
  border: 1px solid var(--mllm-line);
  border-radius: 22px;
  margin-block: 2.25rem;
  overflow-x: auto;
}

.mllm-data-table {
  background: var(--mllm-panel);
  border: 0;
  color: var(--mllm-silver);
  font-size: 0.94rem;
  margin: 0;
  min-width: 760px;
}

.mllm-data-table th,
.mllm-data-table td { border-color: var(--mllm-line); }
.mllm-data-table th { background: var(--mllm-panel-soft); color: var(--mllm-paper); text-align: left; }
.mllm-data-table tbody tr:nth-child(even) { background: rgba(145, 164, 181, 0.045); }
.mllm-data-table .mllm-fail-row { background: rgba(255, 128, 107, 0.08); }
.mllm-data-table .mllm-number { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

.mllm-result {
  border: 1px solid currentColor;
  border-radius: 999px;
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.55rem;
  text-transform: uppercase;
}

.mllm-result-pass { color: var(--mllm-lime); }
.mllm-result-fail { color: var(--mllm-coral); }

.mllm-chart {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 22px;
  margin-block: 2.25rem;
  padding: clamp(1.4rem, 4vw, 2.3rem);
}

.mllm-chart-title { color: var(--mllm-paper); font-size: 1.2rem; font-weight: 700; }
.mllm-chart-title span { color: var(--mllm-muted); display: block; font-size: 0.78rem; font-weight: 500; margin-top: 0.2rem; }
.mllm-chart-row { align-items: center; display: grid; gap: 1rem; grid-template-columns: 180px 1fr 92px; margin-top: 1rem; }
.mllm-chart-name { color: var(--mllm-silver); font-size: 0.84rem; }
.mllm-chart-track { background: rgba(145, 164, 181, 0.12); border-radius: 999px; height: 0.7rem; overflow: hidden; }
.mllm-chart-bar { background: linear-gradient(90deg, var(--mllm-muted), var(--mllm-silver)); border-radius: inherit; display: block; height: 100%; min-width: 4px; }
.mllm-chart-row-local .mllm-chart-bar { background: var(--mllm-cyan); }
.mllm-chart-value { color: var(--mllm-paper); font-variant-numeric: tabular-nums; text-align: right; }
.mllm-chart-foot { border-top: 1px solid var(--mllm-line); color: var(--mllm-muted); font-size: 0.84rem; margin: 1.5rem 0 0; padding-top: 1rem; }

.mllm-benchmark-note,
.mllm-benchmark-callout,
.mllm-method-box {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-left: 4px solid var(--mllm-cyan);
  border-radius: 18px;
  margin-block: 2rem;
  padding: clamp(1.3rem, 3vw, 2rem);
}

.mllm-benchmark-callout { border-left-color: var(--mllm-lime); }
.mllm-method-box { border-left-color: var(--mllm-cyan); }
.mllm-method-box h3 { margin-top: 0; }
.mllm-method-box li { color: var(--mllm-muted); margin-bottom: 0.65rem; }

.mllm-routing-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 2rem; }
.mllm-routing-card { background: var(--mllm-panel); border: 1px solid var(--mllm-line); border-radius: 18px; padding: 1.5rem; }
.mllm-routing-card h3 { font-size: 1.35rem; margin: 0.45rem 0 0.8rem; }
.mllm-routing-card p { color: var(--mllm-muted); margin-bottom: 0; }
.mllm-routing-label { color: var(--mllm-cyan); font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; }
.mllm-routing-card-local { border-color: rgba(110, 231, 242, 0.45); }
.mllm-article .entry-header .meta-author { display: none; }

/* --- Article header: the same opening as a landing page -----------------
   Blocksy prints .hero-section > .entry-header (title, excerpt, meta) at the
   960px reading measure with a 30px title. Landing pages open with a cyan
   kicker, a display title and a lede, so the article does too: category and
   date become the kicker, the title takes the compact display scale, and the
   header spans the same 1200px as the hero image. The excerpt is hidden
   because every article already opens with its own lede and byline.
   ---------------------------------------------------------------------- */
/* Blocksy's .is-width-constrained caps the header at the narrow measure and the
   hero-section[data-type] rule ties ours on the excerpt, so both are outranked
   explicitly. The header's parent is the full container, so auto margins centre it. */
.mllm-article .hero-section.is-width-constrained {
  margin-inline: auto;
  max-width: none;
  padding-block: clamp(2rem, 4vw, 3.5rem) 0.5rem;
  width: min(1200px, calc(100vw - 2 * clamp(1rem, 2.5vw, 2rem)));
}

.mllm-article .entry-header { align-items: flex-start; display: flex; flex-direction: column; gap: 1.2rem; }
.mllm-article .hero-section .entry-header .page-description { display: none; }

.mllm-article .entry-header .page-title {
  color: var(--mllm-paper);
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0;
  max-width: 18ch;
}

.mllm-article .entry-header .entry-meta {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  margin: 0;
  order: -1;
}

.mllm-article .entry-header .entry-meta::before {
  background: var(--mllm-lime);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(185, 242, 124, 0.65);
  content: "";
  flex: none;
  height: 0.55rem;
  width: 0.55rem;
}

.mllm-article .entry-header .entry-meta,
.mllm-article .entry-header .entry-meta a,
.mllm-article .entry-header .entry-meta time {
  color: var(--mllm-cyan);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mllm-article .entry-header .entry-meta a:hover { color: var(--mllm-paper); }


/* --- Article visuals ---------------------------------------------------
   Diagrams arrive through theme shortcodes (kses strips inline SVG), hero
   images through a plain image block. Both share the panel treatment so an
   essay and a benchmark read as the same publication.
   ---------------------------------------------------------------------- */

.mllm-article-visual {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 22px;
  margin-block: 2.25rem;
  padding: clamp(1rem, 3vw, 2rem);
}

.mllm-article-visual svg { display: block; height: auto; width: 100%; }

.mllm-article-hero { margin: 0 0 2.5rem; }
/* Same treatment for an image used mid-article rather than as the opening
   hero, which needs its top margin back. */
.mllm-article-hero--inline { margin-block: clamp(2rem, 4vw, 3rem); }
.mllm-article-hero img { border: 1px solid var(--mllm-line); border-radius: 22px; box-shadow: var(--mllm-shadow); display: block; height: auto; width: 100%; }
.mllm-article-hero figcaption,
.mllm-article-visual figcaption { color: var(--mllm-muted); font-size: 0.8rem; margin-top: 0.75rem; text-align: left; }

.mllm-data-table code { background: rgba(145, 164, 181, 0.12); border-radius: 6px; color: var(--mllm-paper); font-size: 0.82em; padding: 0.12em 0.4em; white-space: nowrap; }

/* Step strip: an ordered sequence read left to right. Cyan is the working
   colour; the one step that produces evidence is the only lime rule, and a
   silver rule marks a step that is bookkeeping rather than change. */
.mllm-steps {
  display: grid;
  gap: 1.25rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}

.mllm-steps li { border-top: 3px solid var(--mllm-cyan); color: var(--mllm-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; padding-top: 0.85rem; }
.mllm-steps li strong { color: var(--mllm-paper); display: block; font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace; font-size: 0.76rem; letter-spacing: 0.06em; margin-bottom: 0.4rem; text-transform: uppercase; }
.mllm-steps li.is-proof { border-top-color: var(--mllm-lime); }
.mllm-steps li.is-neutral { border-top-color: var(--mllm-silver); }

/* Maturity path: prompt → runbook → skill → automation. */
.mllm-path {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.9rem;
  list-style: none;
  margin: 2rem 0;
  padding: 0;
}

.mllm-path li {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 999px;
  color: var(--mllm-paper);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin: 0;
  padding: 0.6rem 1.15rem;
  position: relative;
  text-transform: uppercase;
}

.mllm-path li + li::before { color: var(--mllm-cyan); content: "\2192"; left: -1.45rem; position: absolute; top: 50%; transform: translateY(-50%); }
.mllm-path li:last-child { border-color: rgba(110, 231, 242, 0.45); box-shadow: var(--mllm-glow-cyan); }

[data-footer*="type-1"] { background: #070b11; border-top: 1px solid var(--mllm-line); }

@media (max-width: 900px) {
  .mllm-hero-grid,
  .mllm-method { grid-template-columns: 1fr; }
  .mllm-card-grid { grid-template-columns: 1fr; }
  .mllm-hardware-grid,
  .mllm-hardware-card-wide { grid-template-columns: 1fr; }
  .mllm-hardware-card-wide { grid-column: auto; }
  .mllm-routing-grid { grid-template-columns: 1fr; }
  .mllm-section-heading { align-items: start; flex-direction: column; }
  .mllm-section-heading h2 { max-width: none; }
  .mllm-section-heading p { max-width: none; }
  .mllm-hero-visual { width: 100%; }
  .mllm-hardware-card-wide figure { aspect-ratio: 16 / 9; min-height: 0; }
}

@media (max-width: 560px) {
  .mllm-display { font-size: clamp(3.1rem, 18vw, 5.2rem); }
  .mllm-section { padding-block: 3rem; }
  .mllm-card { min-height: auto; }
  .mllm-chart-row { gap: 0.55rem; grid-template-columns: 1fr auto; }
  .mllm-chart-track { grid-column: 1 / -1; grid-row: 2; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}


/* ---------------------------------------------------------------------------
   Stage — layered cards
   Three stacked panels suggesting depth, spreading further apart on hover.
   --------------------------------------------------------------------------- */

.mllm-stage {
  margin-bottom: 2.75rem;
  margin-top: clamp(3rem, 7vw, 5rem);
  min-height: 320px;
  position: relative;
}

/* Cycle indicators, added by theme.js; one per card, the front card lit. */
.mllm-stage-dots {
  bottom: -2rem;
  display: flex;
  gap: 0.55rem;
  inset-inline: 0;
  justify-content: center;
  position: absolute;
}

.mllm-stage-dot {
  background: var(--mllm-line);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 9px;
  padding: 0;
  transition: background-color 300ms var(--mllm-ease), transform 300ms var(--mllm-ease);
  width: 9px;
}

.mllm-stage-dot.is-active {
  background: var(--mllm-cyan);
  transform: scale(1.3);
}

.mllm-stage-dot:focus-visible { outline: 2px solid var(--mllm-cyan); outline-offset: 3px; }

.mllm-stage-card {
  background:
    linear-gradient(180deg, rgba(244, 247, 249, 0.07), rgba(244, 247, 249, 0.02)),
    rgba(17, 26, 37, 0.92);
  border: 1px solid var(--mllm-line);
  border-radius: 28px;
  bottom: 0;
  box-shadow: var(--mllm-shadow);
  display: flex;
  flex-direction: column;
  inset-inline: 0;
  margin-inline: auto;
  min-height: 250px;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3.5vw, 2.6rem);
  position: absolute;
  transform-origin: 50% 100%;
  transition: transform 700ms var(--mllm-ease), opacity 700ms var(--mllm-ease);
  width: 100%;
}

.mllm-stage-card--back,
.mllm-stage-card--mid {
  background:
    linear-gradient(180deg, rgba(244, 247, 249, 0.12), rgba(244, 247, 249, 0.04)),
    var(--mllm-panel-soft);
}

.mllm-stage-card--back {
  opacity: 0.55;
  transform: translateY(-72px) scale(0.86);
  z-index: 1;
}

.mllm-stage-card--mid {
  opacity: 0.8;
  transform: translateY(-36px) scale(0.93);
  z-index: 2;
}

.mllm-stage-card--front {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--mllm-shadow), var(--mllm-glow-cyan);
  z-index: 3;
}

.mllm-stage:hover .mllm-stage-card--back { transform: translateY(-88px) scale(0.86); }
.mllm-stage:hover .mllm-stage-card--mid  { transform: translateY(-46px) scale(0.93); }

/* ---------------------------------------------------------------------------
   Tier panels — what runs locally vs what does not
   --------------------------------------------------------------------------- */

.mllm-tier-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2.5rem;
}

.mllm-tier {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: transform 600ms var(--mllm-ease);
}

.mllm-tier:hover { transform: translateY(-4px); }

.mllm-tier--local { border-top: 2px solid var(--mllm-cyan); }
.mllm-tier--cloud { border-top: 2px solid var(--mllm-silver); }

.mllm-tier ul { list-style: none; margin: 1rem 0 0; padding: 0; }

.mllm-tier li {
  border-top: 1px solid var(--mllm-line);
  padding: 0.6rem 0;
}

.mllm-tier li span {
  color: var(--mllm-muted);
  display: block;
  font-size: 0.82rem;
}

.mllm-section-visual {
  border: 1px solid var(--mllm-line);
  border-radius: 22px;
  box-shadow: var(--mllm-shadow);
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  overflow: hidden;
}

.mllm-section-visual img {
  border-radius: inherit;
  display: block;
  height: auto;
  width: 100%;
}

.mllm-page .wp-block-image img { border-radius: 16px; }

/* ---------------------------------------------------------------------------
   Motion
   Content is always visible without JavaScript. The reveal state applies only
   once theme.js has marked the document with .mllm-js, and never when the
   visitor has asked for reduced motion.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Header mark — raccoon beside the wordmark, tagline beneath it.

   Deliberately built on core WordPress (custom_logo) and Blocksy's stable
   markup (.site-branding > .site-logo-container + .site-title-container) rather
   than Blocksy's header_placements schema, so a parent-theme update cannot
   break it. The tagline is rendered here; if the native Site Tagline switch is
   ever turned on in the Customizer, :has() suppresses this copy so it never
   appears twice.
   --------------------------------------------------------------------------- */

body .site-branding[data-logo],
body .site-branding {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 0.85rem;
}

.site-logo-container img {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--mllm-line), 0 0 24px -8px rgba(110, 231, 242, 0.45);
  height: auto;
  max-height: 44px;
  transition: transform 500ms var(--mllm-ease);
  width: auto;
}

.site-logo-container:hover img { transform: rotate(-6deg) scale(1.06); }

.site-title-container { text-align: left; }

.site-title-container::after,
.site-description {
  color: var(--mllm-muted);
  display: block;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.3;
  margin: 0.2rem 0 0;
  text-transform: uppercase;
}

.site-title-container::after { content: "Local LLMs on Apple Silicon"; }
.site-title-container:has(.site-description)::after { content: none; }

@media (max-width: 689px) {
  .site-title-container::after,
  .site-description { display: none; }   /* too small to earn its space on a phone */
}

/* ---------------------------------------------------------------------------
   Accent semantics (v0.8.0)
   cyan   = interaction and local-system flow      lime  = verified / pass
   coral  = failure                                 silver = cloud / neutral info
   Nav interaction is cyan; Blocksy's default made the active item lime.
   --------------------------------------------------------------------------- */

body .ct-header [data-id="menu"] .menu > li > .ct-menu-link:hover,
body .ct-header [data-id="menu"] .menu > li.current-menu-item > .ct-menu-link,
body .ct-header [data-id="menu"] .menu > li.current_page_item > .ct-menu-link {
  --theme-link-hover-color: var(--mllm-cyan);
  --theme-link-active-color: var(--mllm-cyan);
  color: var(--mllm-cyan);
}

/* ---------------------------------------------------------------------------
   Landing-page pattern components (v0.8.0)
   compact hero → featured item → card index → method/trust → destination
   --------------------------------------------------------------------------- */

.mllm-hero--compact { min-height: 0; }

.mllm-hero-compact-grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.mllm-display--compact {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 0.98;
  max-width: 14ch;
}

.mllm-hero-visual--compact {
  border: 1px solid var(--mllm-line);
  border-radius: 22px;
  box-shadow: var(--mllm-shadow);
  margin: 0;
  overflow: hidden;
}

.mllm-hero-visual--compact img { display: block; height: auto; width: 100%; }
.mllm-hero-visual--compact.is-mark { background: transparent; border: 0; box-shadow: none; justify-self: center; max-width: 220px; }
.mllm-hero-visual--compact.is-mark img { border-radius: 50%; box-shadow: var(--mllm-shadow), var(--mllm-glow-cyan); }

/* Featured item: one real thing, given room. */
.mllm-feature {
  background: linear-gradient(180deg, rgba(244, 247, 249, 0.05), transparent), var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 22px;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: clamp(1.6rem, 3.5vw, 2.6rem);
}

.mllm-feature h2,
.mllm-feature h3 { margin-top: 0.4rem; }
.mllm-feature .mllm-lede { font-size: 1.02rem; }
.mllm-feature .mllm-chart { margin-block: 0; }
.mllm-chart--compact { padding: clamp(1rem, 2.5vw, 1.5rem); }
.mllm-chart--compact .mllm-chart-title { font-size: 1rem; }
.mllm-chart--compact .mllm-chart-row { padding-block: 0.35rem; }

/* Card index: numbered destinations with a meta row. */
.mllm-card-index {
  color: var(--mllm-silver);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  position: absolute;
  right: clamp(1.4rem, 3vw, 2.2rem);
  top: clamp(1.4rem, 3vw, 2.2rem);
}

.mllm-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.mllm-chip--status {
  border: 1px solid var(--mllm-line);
  border-radius: 999px;
  color: var(--mllm-muted);
  padding: 0.28rem 0.65rem;
}

.mllm-chip--ready { border-color: rgba(185, 242, 124, 0.45); color: var(--mllm-lime); }
.mllm-chip--planned { color: var(--mllm-muted); }

.mllm-card-link {
  color: var(--mllm-cyan);
  display: inline-block;
  font-weight: 600;
  margin-top: 1rem;
  text-decoration: none;
}

.mllm-card-link::after { content: " \2192"; }
.mllm-card-link:hover { text-decoration: underline; }

/* Post cards rendered by the core Query Loop block (homepage latest three,
   /articles/ index). The theme styles the block's own classes so the cards
   stay editor-managed; nothing here depends on post markup. */
.mllm-post-loop .wp-block-post-template {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.mllm-post-loop--index .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mllm-post-loop .wp-block-post { margin: 0; }

.mllm-post-card {
  background: var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  position: relative;
}

.mllm-post-card::after {
  background: var(--mllm-cyan);
  border-radius: 0 0 16px 16px;
  bottom: 0;
  content: "";
  height: 3px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  transition: opacity 160ms ease;
}

.mllm-post-card:hover::after { opacity: 1; }
.mllm-post-card-image { margin: 0 0 0.4rem; }
.mllm-post-card-image img { border: 1px solid var(--mllm-line); border-radius: 12px; display: block; height: auto; width: 100%; }
.mllm-post-card-terms { color: var(--mllm-cyan); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mllm-post-card-terms a { color: inherit; text-decoration: none; }
.mllm-post-card-terms .wp-block-post-terms__separator { color: var(--mllm-muted); }
.mllm-post-card-title { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.18; margin: 0; }
.mllm-post-card-title a { color: var(--mllm-paper); text-decoration: none; }
.mllm-post-card-title a:hover { color: var(--mllm-cyan); }
.mllm-post-card-excerpt { color: var(--mllm-muted); font-size: 0.95rem; line-height: 1.6; }
.mllm-post-card-excerpt p { margin: 0; }
.mllm-post-card-excerpt .wp-block-post-excerpt__more-text { margin-top: 0.6rem; }
.mllm-post-card-excerpt .wp-block-post-excerpt__more-link { color: var(--mllm-cyan); font-weight: 600; text-decoration: none; }
.mllm-post-card-excerpt .wp-block-post-excerpt__more-link::after { content: " \2192"; }
.mllm-post-card-excerpt .wp-block-post-excerpt__more-link:hover { text-decoration: underline; }
.mllm-post-card-date { color: var(--mllm-muted); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.06em; margin-top: auto; padding-top: 0.5rem; text-transform: uppercase; }

.mllm-post-loop .wp-block-query-pagination { color: var(--mllm-muted); font-size: 0.9rem; gap: 1rem; margin-top: 2rem; }
.mllm-post-loop .wp-block-query-pagination a { color: var(--mllm-cyan); text-decoration: none; }
.mllm-post-loop .wp-block-query-pagination .page-numbers.current { color: var(--mllm-paper); }
.mllm-post-loop .wp-block-query-no-results p { color: var(--mllm-muted); }

/* Closing destination: where to go next. */
.mllm-destination {
  align-items: center;
  background: linear-gradient(180deg, rgba(110, 231, 242, 0.08), transparent), var(--mllm-panel);
  border: 1px solid var(--mllm-line);
  border-radius: 22px;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}

.mllm-destination h3 { margin: 0.3rem 0 0.4rem; }
.mllm-destination p { margin: 0; }

.mllm-section-visual--constrained { margin-inline: auto; max-width: 680px; }

/* Kicker + heading + lede stacked; the default heading is a two-item row. */
/* Stacked headings own the full row. The 10ch cap on .mllm-section-heading h2
   is for the two-column variant (narrow title left, description right); left in
   place here it pinned the heading to half the shell and stranded the rest. */
.mllm-section-heading--stack { align-items: flex-start; flex-direction: column; gap: 0.7rem; }
.mllm-section-heading--stack h2 { max-width: none; }
.mllm-section-heading--stack .mllm-lede,
.mllm-section-heading--stack p { margin: 0; max-width: 44rem; }
.mllm-section--index .mllm-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .mllm-section--index .mllm-card-grid { grid-template-columns: 1fr; } }

/* Comparison tables: scroll affordance and stacked rows on narrow screens.
   theme.js wraps .mllm-data-table-wrap in .mllm-table-frame and labels cells. */
.mllm-table-frame { position: relative; }

.mllm-table-frame::after {
  background: linear-gradient(90deg, rgba(17, 26, 37, 0), var(--mllm-panel));
  border-radius: 0 16px 16px 0;
  bottom: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 300ms var(--mllm-ease);
  width: 56px;
}

.mllm-table-frame.is-scrollable:not(.is-at-end)::after { opacity: 1; }

.mllm-table-hint {
  bottom: 0.7rem;
  color: var(--mllm-cyan);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0.9rem;
  text-transform: uppercase;
  transition: opacity 300ms var(--mllm-ease);
}

.mllm-table-frame.is-scrollable:not(.has-scrolled) .mllm-table-hint { opacity: 1; }

@media (max-width: 560px) {
  .mllm-data-table.has-labels thead { display: none; }
  .mllm-data-table.has-labels tr { border-bottom: 1px solid var(--mllm-line); display: block; padding: 0.55rem 0; }
  .mllm-data-table.has-labels td { border: 0; display: flex; gap: 1rem; justify-content: space-between; padding: 0.35rem 0.9rem; }
  .mllm-data-table.has-labels td::before {
    color: var(--mllm-muted);
    content: attr(data-label);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .mllm-table-frame::after,
  .mllm-table-hint { display: none; }
}

/* Footer with some authority: menu row above the promise. */
[data-footer*="type-1"] .ct-footer [data-id="menu"] .menu a {
  color: var(--mllm-silver);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-footer*="type-1"] .ct-footer [data-id="menu"] .menu a:hover { color: var(--mllm-cyan); }
[data-footer*="type-1"] .ct-footer [data-id="copyright"] { color: var(--mllm-muted); font-size: 0.9rem; line-height: 1.6; max-width: 62ch; }
[data-footer*="type-1"] .ct-footer [data-id="copyright"] strong { color: var(--mllm-paper); }

@media (max-width: 900px) {
  .mllm-hero-compact-grid,
  .mllm-feature,
  .mllm-destination { grid-template-columns: 1fr; }
  .mllm-hero-visual--compact { max-width: 560px; }
  .mllm-card-index { position: static; display: block; margin-bottom: 0.6rem; }
}

/* Homepage: the method block reads as a three-up trust strip rather than a
   full panel; the full treatment lives on About and Benchmarks. */
body.home .mllm-method { grid-template-columns: 1fr; gap: 1.4rem; }
body.home .mllm-method-intro .mllm-lede { max-width: 60ch; }
body.home .mllm-method-list {
  display: grid;
  gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
}
body.home .mllm-method-row { border-bottom: 0; display: block; padding-block: 0.4rem; }
body.home .mllm-method-row .mllm-stat-key { display: inline-block; margin-right: 0.6rem; }
body.home .mllm-method-row h3 { display: inline; font-size: 1.02rem; }
body.home .mllm-method-row p { color: var(--mllm-muted); font-size: 0.95rem; margin: 0.35rem 0 0; }
body.home .mllm-hardware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { body.home .mllm-method-list, body.home .mllm-hardware-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Community — points to r/MacLocalLLM, where discussion actually happens.
   --------------------------------------------------------------------------- */

.mllm-community { border-top: 1px solid var(--mllm-line); }

.mllm-community-grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 220px) 1fr;
}

.mllm-community-mark { margin: 0; }

.mllm-community-mark img {
  border-radius: 50%;
  box-shadow: var(--mllm-shadow), var(--mllm-glow-cyan);
  height: auto;
  max-width: 220px;
  transition: transform 700ms var(--mllm-ease);
  width: 100%;
}

.mllm-community:hover .mllm-community-mark img { transform: rotate(-4deg) scale(1.04); }

@media (max-width: 780px) {
  .mllm-community-grid { grid-template-columns: 1fr; }
  .mllm-community-mark img { max-width: 140px; }
}

/* ===========================================================================
   Motion layer  (ported from baanarun-blocksy-child)

   Every rule below is gated behind prefers-reduced-motion: no-preference and
   the .mllm-js class that assets/theme.js adds. With JavaScript off, or with
   reduced motion requested, the page renders complete and static.

   Stagger is driven by --mllm-i, set per element by the script, so a list of
   any length steps correctly instead of stopping at nth-child(4).
   =========================================================================== */

@keyframes mllm-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Slow aurora drift behind the hero. Transform-only, so it stays on the GPU. */
@keyframes mllm-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.12); }
  100% { transform: translate3d(-3%, -2%, 0) scale(1.05); }
}

@media (prefers-reduced-motion: no-preference) {

  /* --- Reveal on scroll ------------------------------------------------- */

  .mllm-js .mllm-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity 900ms var(--mllm-ease),
      transform 900ms var(--mllm-ease);
    transition-delay: calc(var(--mllm-i, 0) * 70ms);
  }

  /* Long-form copy moves less: a whole article sliding is seasick. */
  .mllm-js .mllm-reveal--soft {
    transform: translateY(12px);
    transition-duration: 640ms;
    transition-delay: calc(var(--mllm-i, 0) * 45ms);
  }

  .mllm-js .mllm-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* --- Hero entrance ----------------------------------------------------- */

  .mllm-hero-copy > *,
  .mllm-stage {
    animation: mllm-rise 900ms var(--mllm-ease) both;
  }

  .mllm-hero-copy > *:nth-child(2) { animation-delay: 90ms; }
  .mllm-hero-copy > *:nth-child(3) { animation-delay: 180ms; }
  .mllm-hero-copy > *:nth-child(4) { animation-delay: 270ms; }
  .mllm-stage { animation-delay: 360ms; }

  /* Aurora wash. Sits behind the hero content and never intercepts a click. */
  .mllm-hero::after {
    animation: mllm-drift 26s ease-in-out infinite;
    background:
      radial-gradient(38% 46% at 22% 62%, rgba(110, 231, 242, 0.16), transparent 70%),
      radial-gradient(32% 40% at 74% 34%, rgba(185, 242, 124, 0.12), transparent 70%);
    content: "";
    inset: -10%;
    pointer-events: none;
    position: absolute;
    z-index: 0;
  }

  .mllm-hero > * { position: relative; z-index: 1; }

  /* --- Benchmark charts --------------------------------------------------
     Bars wipe left to right as the chart enters view. clip-path is used
     rather than width or scaleX so the cyan-to-lime gradient is revealed at
     its true proportions instead of being compressed.
     ---------------------------------------------------------------------- */

  .mllm-js .mllm-chart-row .mllm-chart-bar {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1100ms var(--mllm-ease);
    transition-delay: calc(var(--mllm-i, 0) * 90ms);
  }

  .mllm-js .mllm-chart-row.is-in .mllm-chart-bar {
    clip-path: inset(0 0 0 0);
  }

  /* The number lands once its bar has mostly drawn. */
  .mllm-js .mllm-chart-row .mllm-chart-value {
    opacity: 0;
    transition: opacity 520ms var(--mllm-ease);
    transition-delay: calc(var(--mllm-i, 0) * 90ms + 420ms);
  }

  .mllm-js .mllm-chart-row.is-in .mllm-chart-value {
    opacity: 1;
  }

  /* --- Card and table polish --------------------------------------------- */

  .mllm-card,
  .mllm-hardware-card {
    transition:
      transform 600ms var(--mllm-ease),
      border-color 400ms var(--mllm-ease),
      box-shadow 600ms var(--mllm-ease);
  }

  .mllm-card:hover,
  .mllm-hardware-card:hover {
    box-shadow: var(--mllm-shadow), var(--mllm-glow-cyan);
    transform: translateY(-5px);
  }

  .mllm-data-table tbody tr {
    transition: background-color 300ms var(--mllm-ease);
  }

  .mllm-data-table tbody tr:hover {
    background-color: rgba(110, 231, 242, 0.06);
  }
}

/* Explicitly still everything for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .mllm-stage-card,
  .mllm-tier,
  .mllm-card,
  .mllm-hardware-card {
    transition: none;
  }
}

/* Absolutely-positioned layered cards are unreadable on a phone: collapse them. */
@media (max-width: 780px) {
  .mllm-stage { min-height: 0; }

  .mllm-stage-card {
    margin-bottom: 1rem;
    opacity: 1;
    position: static;
    transform: none;
  }

  .mllm-stage:hover .mllm-stage-card--back,
  .mllm-stage:hover .mllm-stage-card--mid { transform: none; }
  .mllm-stage-dots { display: none; }
}

/* Article sequences step in as they enter view; the reveal class on the list
   supplies .is-in and theme.js indexes the items. */
@media (prefers-reduced-motion: no-preference) {
  .mllm-js .mllm-path.mllm-reveal > li,
  .mllm-js .mllm-steps.mllm-reveal > li {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 600ms var(--mllm-ease), transform 600ms var(--mllm-ease);
    transition-delay: calc(var(--mllm-i, 0) * 140ms + 200ms);
  }

  .mllm-js .mllm-path.mllm-reveal.is-in > li,
  .mllm-js .mllm-steps.mllm-reveal.is-in > li { opacity: 1; transform: none; }
}


@media (max-width: 900px) {
  .mllm-post-loop .wp-block-post-template,
  .mllm-post-loop--index .wp-block-post-template { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
  .mllm-post-card { transition: transform 600ms var(--mllm-ease), border-color 400ms var(--mllm-ease), box-shadow 600ms var(--mllm-ease); }
  .mllm-post-card:hover { box-shadow: var(--mllm-shadow), var(--mllm-glow-cyan); transform: translateY(-5px); }
}