/* Article layout for research pages (shares tokens with style.css) */
.post { max-width: 38rem; margin: 0 auto; }   /* the text column is the measure and is centred; media breaks out around it */
.post-head { padding: 1.5rem 0 1.25rem; border-bottom: 1px solid var(--divider); margin-bottom: 1.75rem; }
.post-head h1 { font-size: 1.85rem; line-height: 1.2; letter-spacing: -0.01em; }
.post-head .sub { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.95rem; }
.post-meta { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.35rem 1rem; margin-top: 1.1rem; font-size: 0.84rem; }
.post-meta dt { color: var(--muted); margin: 0; }
.post-meta dd { margin: 0; }
.post-meta a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.post-meta a:hover { color: var(--ink); }
.post-meta .links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }

.post p { font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1rem; }
.post p strong { color: var(--ink); font-weight: 600; }
.post h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 2.25rem 0 0.75rem; position: relative; }
.post h3 a.anchor { position: absolute; left: -1.25rem; color: var(--rail); text-decoration: none; font-family: var(--sans); font-size: 0.9rem; top: 0.35rem; }
.post h3:hover a.anchor { color: var(--link); }
.post ul { padding-left: 1.2rem; margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.post li { margin-bottom: 0.35rem; }
.post .tldr { border-left: 2px solid var(--ink); padding: 0.15rem 0 0.15rem 1rem; margin: 1.25rem 0 1.5rem; }
.post .tldr p { margin: 0; color: var(--ink); }

figure.fig { margin: 1.5rem 0 1.75rem; }
figure.fig.narrow { max-width: 100%; }
figure.fig.mid { max-width: 100%; }
figure.fig.narrow video { width: 100%; height: auto; display: block; }
figure.fig img, figure.fig video { width: 100%; height: auto; display: block; }
/* Figures with white or light backgrounds: multiply onto the paper in the light theme
   (white becomes paper, inks stay), and sit on a paper-coloured plate in the dark theme. */
img.blend { mix-blend-mode: multiply; }
:root[data-theme="dark"] img.blend { mix-blend-mode: normal; background: #f5f4ef; padding: 0.5rem; box-sizing: border-box; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img.blend { mix-blend-mode: normal; background: #f5f4ef; padding: 0.5rem; box-sizing: border-box; } }
figcaption { font-size: 0.8rem; line-height: 1.5; color: var(--muted); margin-top: 0.55rem; }
figcaption b { color: var(--ink-soft); font-weight: 600; }

/* hero video + filmstrip with phase markers */
.hero { margin: 0 0 1.75rem; }
.hero video { width: 100%; height: auto; display: block; background: #000; }
.strip { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1px; margin-top: 4px; cursor: pointer; }
.strip img { width: 100%; height: auto; display: block; opacity: 0.55; transition: opacity 120ms; }
.strip img.is-current, .strip img:hover { opacity: 1; }
.phases { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); margin-top: 4px; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.phases span { border-top: 2px solid var(--rail); padding-top: 0.25rem; padding-right: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phases span.is-current { border-top-color: var(--ink); color: var(--ink); }
.hero-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; }

/* numbered stages (a real sequence) */
.post ol.stages { list-style: none; counter-reset: stage; padding: 0; margin: 0.25rem 0 1rem; }
.post ol.stages li { counter-increment: stage; position: relative; padding-left: 2.6rem; margin-bottom: 0.9rem; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.post ol.stages li::before { content: counter(stage); position: absolute; left: 0; top: -0.15rem; font-family: var(--serif); font-size: 1.5rem; color: var(--muted); }
.post ol.stages li b { color: var(--ink); font-weight: 600; }
.hero img { width: 100%; height: auto; display: block; }
.pair img { width: 100%; height: auto; display: block; }

/* side-by-side media */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
.pair video { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.pair .lab { font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 0.35rem; }

/* results table */
.post table { border-collapse: collapse; width: 100%; font-size: 0.84rem; margin: 0.75rem 0 0.5rem; font-variant-numeric: tabular-nums; }
.post th, .post td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--divider); vertical-align: top; }
.post th { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--ink); font-size: 0.78rem; }
.post td.num, .post th.num { text-align: right; white-space: nowrap; }
.post tr.ours td { color: var(--ink); font-weight: 600; }
.post tr.abl td:first-child { padding-left: 1.25rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }

pre.bib { background: var(--paper-hover); border: 1px solid var(--divider); padding: 0.9rem 1rem; font-size: 0.78rem; line-height: 1.5; overflow-x: auto; margin: 0.75rem 0 0; }

.post-foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--divider); font-size: 0.84rem; color: var(--muted); }
.post-foot a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .post-meta { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .post-meta dt { margin-top: 0.5rem; }
  .post h3 a.anchor { display: none; }
  .phases { font-size: 0.6rem; }
}

/* media breaks out of the text column on wide screens */
@media (min-width: 1100px) {
  /* no transform here: a transform isolates mix-blend-mode, which would keep white figure backgrounds white */
  .hero, figure.fig:not(.narrow), .table-wrap { width: min(56rem, calc(100vw - 4rem)); margin-left: calc(50% - min(28rem, 50vw - 2rem)) !important; }
  figure.fig.mid { width: min(44rem, calc(100vw - 4rem)); max-width: none; margin-left: calc(50% - min(22rem, 50vw - 2rem)) !important; }
  .table-wrap table { max-width: 46rem; margin-left: auto; margin-right: auto; }
}

/* captions belong to the text column, not to the width of the media they sit under */
.post figcaption, .post .hero-note { max-width: 38rem; margin-left: auto; margin-right: auto; }