/* Figures that hold a live slide visual (an iframe to one of the embed pages). */
.post-body figure.embed { margin: 2.75rem 0; }
.post-body figure.embed.wide { width: min(820px, 94vw); margin-left: 50%; transform: translateX(-50%); }
.post-body figure.embed.xwide { width: min(1100px, 96vw); margin-left: 50%; transform: translateX(-50%); }
.post-body figure.embed iframe {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color-scheme: light;
}
.post-body figure.embed figcaption { margin-top: 0.75rem; }
.post-body figure.embed .embed-open {
  display: inline-block;
  margin-left: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .post-body figure.embed.wide,
  .post-body figure.embed.xwide { width: 100%; margin-left: 0; transform: none; }
}

/* Plain tables for the timelines. */
.post-body table.timeline { width: 100%; border-collapse: collapse; margin: 1.75rem 0 2.25rem; font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.45; }
.post-body table.timeline th { text-align: left; font-weight: 600; color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 0.75rem 0.5rem 0; border-bottom: 1px solid var(--border); }
.post-body table.timeline td { vertical-align: top; padding: 0.7rem 0.75rem 0.7rem 0; border-bottom: 1px solid var(--border); }
.post-body table.timeline td:first-child { white-space: nowrap; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted); padding-top: 0.8rem; }
.post-body table.timeline td strong { display: block; }
.post-body table.timeline td small { display: block; color: var(--text-muted); font-size: 0.85rem; }
@media (max-width: 540px) {
  .post-body table.timeline, .post-body table.timeline tbody, .post-body table.timeline tr, .post-body table.timeline td { display: block; }
  .post-body table.timeline thead { display: none; }
  .post-body table.timeline tr { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
  .post-body table.timeline td { border: 0; padding: 0.1rem 0; }
}

/* The timeline strips are seven columns wide: on a phone, show the plain table instead. */
.post-body .phone-only { display: none; }
@media (max-width: 640px) {
  .post-body .desk-only { display: none; }
  .post-body .phone-only { display: table; }
}

/* The shifts as a vertical timeline in the article column (2026-10-01). It keeps the look of the wide
   strips from the session deck: a thin burgundy line with a ring at each date, the date in small
   burgundy capitals, and a card (no top border here: seven stacked rules read as stripes) whose tint deepens from one shift to the next. Plain HTML in the
   article, so it reads the same in a feed reader and needs no script. */
.post-body .shifts {
  --sh-when: 10.25rem;
  --sh-rail: 1.5rem;
  --sh-gap: 1rem;
  --sh-burgundy: #912338;
  --sh-quiet: #5f5a55;
  margin: 2.75rem 0 3rem;
  font-family: var(--font-sans);
}
.post-body .shifts-head,
.post-body .shifts ol > li {
  display: grid;
  grid-template-columns: var(--sh-when) var(--sh-rail) minmax(0, 1fr);
  column-gap: var(--sh-gap);
}
.post-body .shifts-head { font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--text); padding-bottom: 0.8rem; }
.post-body .shifts-head span:first-child { text-align: right; }
.post-body .shifts-head span:last-child { grid-column: 3; }
.post-body .shifts ol { list-style: none; padding: 0; margin: 0; }
.post-body .shifts ol > li { margin: 0; }
.post-body .shifts ol > li:nth-child(1) { --sh-n: 1; }
.post-body .shifts ol > li:nth-child(2) { --sh-n: 2; }
.post-body .shifts ol > li:nth-child(3) { --sh-n: 3; }
.post-body .shifts ol > li:nth-child(4) { --sh-n: 4; }
.post-body .shifts ol > li:nth-child(5) { --sh-n: 5; }
.post-body .shifts ol > li:nth-child(6) { --sh-n: 6; }
.post-body .shifts ol > li:nth-child(7) { --sh-n: 7; }
.post-body .shifts ol > li:nth-child(8) { --sh-n: 8; }
.post-body .shifts ol > li:nth-child(9) { --sh-n: 9; }
.post-body .shifts ol > li:nth-child(10) { --sh-n: 10; }

/* The line, one segment per shift, and the ring that sits on it. */
.post-body .shifts ol > li::after {
  content: '';
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 1.5px;
  background: var(--sh-burgundy);
  opacity: 0.55;
}
.post-body .shifts ol > li:first-child::after { margin-top: 0.75rem; }
.post-body .shifts ol > li:last-child::after { align-self: start; height: 0.75rem; }
.post-body .shifts ol > li::before {
  content: '';
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: start;
  z-index: 1;
  box-sizing: border-box;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.3rem;
  border: 3px solid var(--sh-burgundy);
  border-radius: 50%;
  background: var(--bg);
}

.post-body .shifts .sh-when,
.post-body .shifts .sh-means { grid-row: 1; }
.post-body .shifts .sh-when { grid-column: 1; text-align: right; padding-top: 0.2rem; }
.post-body .shifts .sh-when time { display: block; font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--sh-burgundy); }
.post-body .shifts .sh-when strong { display: block; margin: 0.3rem 0 0.2rem; font-size: 1.18rem; font-weight: 600; line-height: 1.25; color: var(--text); }
.post-body .shifts .sh-when span { display: block; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; line-height: 1.4; color: var(--sh-quiet); }
.post-body .shifts .sh-means {
  grid-column: 3;
  margin-bottom: 0.7rem;
  padding: 0.8rem 1rem 0.9rem;
  border-radius: 6px;
  background: rgb(145 35 56 / calc(0.02 + var(--sh-n) * 0.015));
}
.post-body .shifts ol > li:last-child .sh-means { margin-bottom: 0; }
.post-body .shifts .sh-means strong { display: block; font-size: 1.18rem; font-weight: 600; line-height: 1.25; color: var(--text); }
.post-body .shifts .sh-means span { display: block; margin-top: 0.25rem; font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.5; color: #2f2a27; }

/* On first view the line draws from the top, one segment at a time. article.js adds the classes, and
   leaves them off when the reader asks for reduced motion. */
.post-body .shifts.sh-draw ol > li::after { transform: scaleY(0); transform-origin: 50% 0; }
.post-body .shifts.sh-draw.sh-drawn ol > li::after {
  transform: none;
  transition: transform 0.14s linear;
  transition-delay: calc((var(--sh-n) - 1) * 0.14s);
}

@media (max-width: 600px) {
  .post-body .shifts { --sh-rail: 1rem; --sh-gap: 0.8rem; }
  .post-body .shifts-head { display: none; }
  .post-body .shifts ol > li { grid-template-columns: var(--sh-rail) minmax(0, 1fr); }
  .post-body .shifts ol > li::before { grid-column: 1; grid-row: 1; margin-top: 0.15rem; }
  .post-body .shifts ol > li::after { grid-column: 1; grid-row: 1 / span 2; }
  .post-body .shifts .sh-when { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 0.45rem; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.7rem; }
  .post-body .shifts .sh-when strong { margin: 0; flex-basis: 100%; order: 2; }
  .post-body .shifts .sh-when span { order: 1; }
  .post-body .shifts .sh-means { grid-column: 2; grid-row: 2; margin-bottom: 1.1rem; }
}