/*
 * Editorial Essay — Blueprint skin + Marketing Loops diagrams.
 *
 * Loaded only for posts using template-editorial-blueprint.php, after
 * editorial-essay.css. Every rule is prefixed
 * `#primary.editorial-post.ed-skin-blueprint` — one class more than the base
 * file's `#primary.editorial-post`, so equal-shape rules here win without
 * !important, and the theme's `body.single-post #primary <x>` rules (see the
 * header of editorial-essay.css) stay beaten.
 *
 * Diagram classes use the `ed-loop-` prefix (never `opal-`: style.css adds
 * 9rem padding to any opal-prefixed div). Diagram markup lives in the post
 * body (docs/loops-essay-body.html); behaviour in js/editorial-loops.js.
 *
 * Motion contract: every animated state has a static end state that is the
 * DEFAULT. JS opts figures into motion by adding .is-armed (hidden/start
 * state) and then .is-live. Without JS, or under prefers-reduced-motion,
 * figures render finished. The base file's reduced-motion block also kills
 * every animation/transition under #primary.editorial-post.
 */

/* ---------------------------------------------------------------- *
 * Page shell — paper + grid behind the header, and the sticky-rail fix
 * that editorial-essay.css scopes to the default template's body class.
 * ---------------------------------------------------------------- */

body.post-template-template-editorial-blueprint {
  background-color: #f4f2ec;
}

body.post-template-template-editorial-blueprint #page {
  overflow: clip;
}

#primary.editorial-post.ed-skin-blueprint {
  --ed-paper: #f4f2ec;
  --ed-ink: #14213d;
  --ed-muted: #5c6170;
  --ed-blue: #2a70ea;
  --ed-blue-pale: #e3ebfb;
  --ed-line: #d6d0c2;
  --bp-grid: rgba(20, 33, 61, 0.055);
  --bp-faint: #b9b19f;
  --bp-red: #d6453d;
  --bp-card: #fffdf8;
  --bp-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  background-color: var(--ed-paper);
  background-image:
    linear-gradient(var(--bp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center top;
  color: var(--ed-ink);
}

/* ---------------------------------------------------------------- *
 * Type: Garamond display stays; annotations go monospace.
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-eyebrow,
#primary.editorial-post.ed-skin-blueprint .ed-read-time,
#primary.editorial-post.ed-skin-blueprint .ed-rail-progress,
#primary.editorial-post.ed-skin-blueprint .ed-loop-tag {
  font-family: var(--bp-mono);
  font-weight: 500;
  letter-spacing: 0.08em;
}

#primary.editorial-post.ed-skin-blueprint .ed-title em,
#primary.editorial-post.ed-skin-blueprint .ed-main h2[data-chapter] em {
  font-style: italic;
  color: var(--ed-blue);
  /* VC Garamond italic overhangs its box (see memory: italic clipping). */
  padding-right: 0.08em;
}

#primary.editorial-post.ed-skin-blueprint .ed-chapter-kicker {
  color: var(--ed-blue);
  text-transform: none;
  letter-spacing: 0.02em;
}

#primary.editorial-post.ed-skin-blueprint .ed-main .ed-chapter-kicker {
  border-top: 1px solid var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-main h2[data-chapter] {
  padding-left: 0;
  padding-top: 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-main h2[data-chapter]::before {
  position: static;
  display: block;
  margin-bottom: 14px;
  content: "CH." attr(data-chapter-number);
  font: 500 0.75rem/1 var(--bp-mono);
  letter-spacing: 0.12em;
  color: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-lead::first-letter {
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-annotated > div > p {
  font-size: 1.0625rem;
  line-height: 1.85;
}

#primary.editorial-post.ed-skin-blueprint .ed-underline {
  text-decoration-color: var(--ed-blue);
}

/* Rail: monospace index, blue technical marker on the current chapter. */
#primary.editorial-post.ed-skin-blueprint .ed-rail-inner nav a span {
  font-family: var(--bp-mono);
  font-size: 0.6875rem;
  color: var(--bp-faint);
}

#primary.editorial-post.ed-skin-blueprint .ed-rail-inner nav a {
  position: relative;
  border-left: 1px solid var(--ed-line);
  padding-left: 14px;
  transition: color 0.3s, border-color 0.3s;
}

#primary.editorial-post.ed-skin-blueprint .ed-rail-inner nav a.is-current {
  border-left: 2px solid var(--ed-blue);
  padding-left: 13px;
}

#primary.editorial-post.ed-skin-blueprint .ed-rail-progress,
#primary.editorial-post.ed-skin-blueprint .ed-cover {
  border-color: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-start {
  border-color: var(--ed-ink);
  background: var(--ed-paper);
}

/* ---------------------------------------------------------------- *
 * Loop masthead (populated by editorial-loops.js)
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-masthead--loop {
  margin-top: -52px;
  margin-bottom: -16px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 360;
  overflow: hidden;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead text {
  font-family: var(--bp-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  fill: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-guide {
  fill: none;
  stroke: var(--bp-faint);
  stroke-width: 1;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-dash {
  stroke-dasharray: 3 5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-faint {
  opacity: 0.45;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-ring {
  fill: none;
  stroke: var(--ed-blue);
  stroke-width: 1.5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-tick {
  fill: var(--ed-paper);
  stroke: var(--ed-ink);
  stroke-width: 1.2;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-blue {
  fill: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-code {
  fill: var(--ed-blue);
  font-size: 13px;
  letter-spacing: 0.02em;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-orbit,
#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-arc {
  transform-box: view-box;
  animation: ed-loop-spin 16s linear infinite;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead.is-paused .m-orbit,
#primary.editorial-post.ed-skin-blueprint .ed-loop-masthead.is-paused .m-arc {
  animation-play-state: paused;
}

@keyframes ed-loop-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  #primary.editorial-post.ed-skin-blueprint .ed-masthead--loop {
    margin-top: -74px;
    margin-bottom: -24px;
  }

  #primary.editorial-post.ed-skin-blueprint .ed-loop-masthead {
    aspect-ratio: auto;
    height: 380px;
  }
}

@media (max-width: 700px) {
  #primary.editorial-post.ed-skin-blueprint .ed-loop-masthead .m-wide {
    display: none;
  }
}

@media (max-width: 500px) {
  #primary.editorial-post.ed-skin-blueprint .ed-masthead--loop {
    margin-top: -69px;
    margin-bottom: -12px;
  }

  #primary.editorial-post.ed-skin-blueprint .ed-loop-masthead {
    height: 300px;
  }
}

/* ---------------------------------------------------------------- *
 * Pull quotes
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-loop-quote {
  margin: 64px 0;
  padding: 26px 0 30px 28px;
  border-left: 2px solid var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-quote > .ed-eyebrow {
  display: block;
  color: var(--ed-blue);
  text-transform: none;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-quote blockquote {
  font: 300 clamp(40px, 4.4vw, 68px) / 1.04 var(--ed-serif);
  letter-spacing: -0.02em;
  color: var(--ed-ink);
  text-wrap: balance;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-quote blockquote em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--ed-blue);
  padding-right: 0.08em;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-quote--end {
  margin-top: 80px;
  border-left: 0;
  border-top: 1px solid var(--ed-ink);
  padding: 34px 0 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-thesis {
  font: 400 clamp(26px, 2.4vw, 34px) / 1.25 var(--ed-serif);
  max-width: 720px;
  color: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-thesis em {
  font-family: var(--ed-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ed-blue);
  padding-right: 0.08em;
}

/* Margin note as a code listing. */
#primary.editorial-post.ed-skin-blueprint .ed-loop-code {
  border-top-color: var(--ed-blue);
  color: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-code .ed-eyebrow {
  color: var(--ed-blue);
  text-transform: none;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-code code {
  display: block;
  margin-top: 14px;
  font: 400 0.875rem/1.8 var(--bp-mono);
  background: none;
  padding: 0;
  color: var(--ed-ink);
  white-space: normal;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-code code .k {
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-code code .i {
  display: block;
  padding-left: 2ch;
}

/* ---------------------------------------------------------------- *
 * Figure frame shared by all six diagrams
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig {
  container-type: inline-size;
  position: relative;
  margin: 48px 0 56px;
  border: 1px solid var(--ed-ink);
  background-color: var(--bp-card);
  background-image:
    linear-gradient(rgba(42, 112, 234, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 112, 234, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* Registration corners — a drafting-sheet detail. */
#primary.editorial-post.ed-skin-blueprint .ed-loop-fig::before,
#primary.editorial-post.ed-skin-blueprint .ed-loop-fig::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--ed-blue);
  pointer-events: none;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig::before {
  top: -5px;
  left: -5px;
  border-width: 2px 0 0 2px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig::after {
  right: -5px;
  bottom: -5px;
  border-width: 0 2px 2px 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ed-line);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-tag {
  display: inline-block;
  font-size: 0.6875rem;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig-top > .ed-loop-tag:first-child {
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 0.6875rem/1.4 var(--bp-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig-top > .ed-loop-legend:nth-of-type(3) {
  margin-left: auto;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-legend i {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ed-blue);
  border-radius: 50%;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-legend i.is-core {
  background: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-hint {
  margin-left: auto;
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-cap {
  padding: 14px 20px;
  border-top: 1px solid var(--ed-line);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text {
  font-family: var(--bp-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  fill: var(--ed-ink);
}

/* ---------------------------------------------------------------- *
 * FIG 01 — project line morphs into a loop
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint [data-loop="morph"] .ed-loop-svg {
  padding: 18px 12px 6px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-morph-guide {
  fill: none;
  stroke: var(--bp-faint);
  stroke-dasharray: 3 5;
  opacity: 0.6;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-morph-path {
  fill: none;
  stroke: var(--ed-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-morph-nodes circle {
  fill: var(--bp-card);
  stroke: var(--ed-ink);
  stroke-width: 1.5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-morph-nodes .ed-loop-learn {
  fill: var(--ed-blue);
  stroke: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg .ed-loop-morph-labels text {
  text-anchor: middle;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-learn,
#primary.editorial-post.ed-skin-blueprint .ed-loop-morph-loop text {
  fill: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-big {
  font: 300 44px/1 var(--ed-serif);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-morph-proj {
  opacity: 0;
}

/* ---------------------------------------------------------------- *
 * FIG 02 — gridlock
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-loop-gridlock {
  display: grid;
  gap: 18px;
  padding: 24px 20px 18px;
}

@container (min-width: 700px) {
  #primary.editorial-post.ed-skin-blueprint .ed-loop-gridlock {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    padding: 30px 30px 24px;
  }
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stat {
  display: grid;
  gap: 10px;
  align-content: start;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stat-num {
  font: 300 clamp(80px, 9vw, 120px) / 0.9 var(--ed-serif);
  letter-spacing: -0.04em;
  color: var(--ed-blue);
  font-variant-numeric: tabular-nums;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stat-label {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-track-line {
  stroke: var(--ed-ink);
  stroke-width: 1.5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-node {
  fill: var(--bp-card);
  stroke: var(--ed-ink);
  stroke-width: 1.5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-node.ed-loop-end {
  fill: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-mistake circle {
  fill: #fbe9e7;
  stroke: var(--bp-red);
  stroke-width: 1.5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-mistake path {
  stroke: var(--bp-red);
  stroke-width: 2;
  stroke-linecap: round;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-mistake {
  transform-box: fill-box;
  transform-origin: center;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-red {
  fill: var(--bp-red);
  font-size: 11px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg .ed-loop-stages text {
  fill: var(--ed-muted);
  font-size: 11px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-runner {
  fill: var(--ed-blue);
  opacity: 0;
}

#primary.editorial-post.ed-skin-blueprint [data-loop="gridlock"].is-live .ed-loop-runner {
  opacity: 1;
}

/* One 9s cycle = three 3s projects; each mistake flashes as the runner
   reaches the midpoint of its own track. */
#primary.editorial-post.ed-skin-blueprint [data-loop="gridlock"].is-live .ed-loop-mistake {
  animation: ed-loop-hit 9s linear infinite;
}

#primary.editorial-post.ed-skin-blueprint [data-loop="gridlock"].is-live .ed-loop-track:nth-of-type(2) .ed-loop-mistake {
  animation-delay: 3s;
}

#primary.editorial-post.ed-skin-blueprint [data-loop="gridlock"].is-live .ed-loop-track:nth-of-type(3) .ed-loop-mistake {
  animation-delay: 6s;
}

@keyframes ed-loop-hit {
  0%, 12% { transform: scale(1); }
  16.5% { transform: scale(1.55); }
  22%, 100% { transform: scale(1); }
}

/* ---------------------------------------------------------------- *
 * Dials (FIG 03 anatomy, FIG 05 org) — HTML buttons positioned on an
 * SVG ring with CSS trig, so they stay real, focusable controls.
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-loop-dial {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1;
  margin-inline: auto;
  --r: 35%;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-dial--org {
  --r: 37.5%;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ring-guide {
  fill: none;
  stroke: var(--bp-faint);
  stroke-dasharray: 3 5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ring-progress {
  fill: none;
  stroke: var(--ed-blue);
  stroke-width: 2.5;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--progress, 1));
  transition: stroke-dashoffset 0.6s ease;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-dial-label {
  font-size: 12px;
  fill: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-dial-lap {
  font: 300 22px/1 var(--ed-serif);
  letter-spacing: 0.02em;
  fill: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stage,
#primary.editorial-post.ed-skin-blueprint .ed-loop-station {
  position: absolute;
  left: calc(50% + var(--r) * cos(var(--a) * 60deg - 90deg));
  top: calc(50% + var(--r) * sin(var(--a) * 60deg - 90deg));
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--ed-ink);
  border-radius: 999px;
  background: var(--bp-card);
  color: var(--ed-ink);
  font: 500 0.6875rem/1.1 var(--bp-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stage span {
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stage:hover,
#primary.editorial-post.ed-skin-blueprint .ed-loop-station:hover {
  border-color: var(--ed-blue);
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stage[aria-current="step"],
#primary.editorial-post.ed-skin-blueprint .ed-loop-station[aria-pressed="true"] {
  background: var(--ed-blue);
  border-color: var(--ed-blue);
  color: #fff;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stage[aria-current="step"] span {
  color: #fff;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-stage:focus-visible,
#primary.editorial-post.ed-skin-blueprint .ed-loop-station:focus-visible,
#primary.editorial-post.ed-skin-blueprint .ed-loop-controls button:focus-visible,
#primary.editorial-post.ed-skin-blueprint .ed-loop-toggle button:focus-visible {
  outline: 2px solid var(--ed-blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- *
 * FIG 03 — anatomy stepper
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-loop-anatomy,
#primary.editorial-post.ed-skin-blueprint .ed-loop-org {
  display: grid;
  gap: 26px;
  padding: 30px 22px 26px;
}

@container (min-width: 760px) {
  #primary.editorial-post.ed-skin-blueprint .ed-loop-anatomy,
  #primary.editorial-post.ed-skin-blueprint .ed-loop-org {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
    gap: 34px;
    padding: 36px 34px 30px;
  }
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-panels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

/* JS shows one panel at a time; without JS all six read as an ordered list. */
#primary.editorial-post.ed-skin-blueprint .ed-loop-panels > li[hidden],
#primary.editorial-post.ed-skin-blueprint .ed-loop-lesson[hidden] {
  display: none;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-panels > li,
#primary.editorial-post.ed-skin-blueprint .ed-loop-lesson {
  display: grid;
  gap: 12px;
  align-content: start;
}

#primary.editorial-post.ed-skin-blueprint .is-enhanced .ed-loop-panels > li:not([hidden]),
#primary.editorial-post.ed-skin-blueprint .is-enhanced .ed-loop-lesson:not([hidden]) {
  animation: ed-loop-in 0.45s ease both;
}

@keyframes ed-loop-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-panels h3,
#primary.editorial-post.ed-skin-blueprint .ed-loop-lesson h3 {
  font: 400 clamp(28px, 2.6vw, 36px) / 1.08 var(--ed-serif);
  letter-spacing: -0.015em;
  color: var(--ed-ink);
  margin: 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-explain,
#primary.editorial-post.ed-skin-blueprint .ed-loop-lesson p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-card {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 16px 16px 14px;
  border: 1px solid var(--ed-ink);
  background: #fff;
  font-size: 0.875rem;
  line-height: 1.5;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-card p {
  margin: 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-card b {
  font-weight: 600;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-card-tag {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font: 500 0.625rem/1.3 var(--bp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-card-tag i {
  font-style: normal;
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-card mark {
  background: none;
  color: inherit;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-email.is-flagged mark {
  background: #fbe0dc;
  box-shadow: inset 0 -2px 0 var(--bp-red);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-flag {
  justify-self: start;
  padding: 4px 8px;
  background: var(--bp-red);
  color: #fff;
  font: 500 0.6875rem/1.3 var(--bp-mono);
  letter-spacing: 0.04em;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-flag--ok {
  background: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-note {
  background: #fff6d6;
  border-color: #c9a640;
  font: 400 1.25rem/1.3 var(--ed-serif);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-rule {
  border-style: dashed;
  border-color: var(--ed-blue);
  background: var(--ed-blue-pale);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-rule.is-approved {
  border-style: solid;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-email.is-better {
  border-color: var(--ed-blue);
  box-shadow: 4px 4px 0 var(--ed-blue-pale);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-controls:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ed-ink);
  border-radius: 50%;
  background: var(--bp-card);
  color: var(--ed-ink);
  font-size: 18px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-controls button:hover {
  background: var(--ed-ink);
  color: #fff;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-count {
  font: 500 0.75rem/1 var(--bp-mono);
  letter-spacing: 0.1em;
  color: var(--ed-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- *
 * FIG 04 — compounding rings
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"] .ed-loop-svg {
  padding: 22px 14px 10px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ring {
  fill: none;
  stroke: var(--ed-blue);
  stroke-width: 2;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-core {
  fill: var(--ed-blue);
  opacity: 0.9;
  transform-box: fill-box;
  transform-origin: center;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-carry {
  fill: none;
  stroke: var(--ed-blue);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-small {
  font-size: 10px;
  fill: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-on-core {
  font-size: 9px;
  fill: #fff;
}

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed .ed-loop-ring {
  stroke-dashoffset: 1;
}

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed .ed-loop-core,
#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed .ed-loop-carry,
#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed text {
  opacity: 0;
}

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed .ed-loop-core {
  transform: scale(0.2);
}

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed.is-live .ed-loop-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s ease calc(var(--d, 0) * 1s);
}

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed.is-live .ed-loop-core {
  opacity: 0.9;
  transform: scale(1);
  transition: opacity 0.6s ease calc(var(--d, 0) * 1s + 0.5s), transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--d, 0) * 1s + 0.5s);
}

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed.is-live .ed-loop-carry,
#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed.is-live text {
  opacity: 1;
  transition: opacity 0.6s ease calc(var(--d, 0) * 1s + 0.8s);
}

#primary.editorial-post.ed-skin-blueprint [data-loop="compound"].is-armed.is-live text.ed-loop-on-core {
  opacity: 1;
}

/* ---------------------------------------------------------------- *
 * FIG 05 — org-wide loop
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-loop-ring-flow {
  fill: none;
  stroke: var(--ed-blue);
  stroke-width: 1.5;
  stroke-dasharray: 2 10;
  opacity: 0.7;
  animation: ed-loop-flow 3s linear infinite;
}

@keyframes ed-loop-flow {
  to { stroke-dashoffset: -48; }
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-spokes line {
  stroke: var(--bp-faint);
  stroke-dasharray: 3 4;
  transition: stroke 0.3s;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-spokes line.is-active {
  stroke: var(--ed-blue);
  stroke-dasharray: none;
  stroke-width: 2;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-core-node {
  fill: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-core-label {
  fill: #fff;
  font-size: 11px;
  letter-spacing: 0.12em;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-core-count {
  fill: #cfe0ff;
  font-size: 10px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-pulse {
  fill: var(--ed-blue);
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-shapes {
  justify-self: start;
  padding: 5px 9px;
  border: 1px dashed var(--ed-blue);
  color: var(--ed-blue);
  font: 500 0.6875rem/1.3 var(--bp-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-lessons {
  display: grid;
  gap: 30px;
}

/* ---------------------------------------------------------------- *
 * FIG 06 — ledger
 * ---------------------------------------------------------------- */

#primary.editorial-post.ed-skin-blueprint .ed-loop-toggle:not([hidden]) {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--ed-ink);
  padding: 2px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-toggle button {
  border: 0;
  background: transparent;
  padding: 6px 12px;
  min-height: 32px;
  font: 500 0.6875rem/1 var(--bp-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ed-muted);
  cursor: pointer;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-toggle button[aria-pressed="true"] {
  background: var(--ed-ink);
  color: #fff;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-toggle button[data-ledger-view="loops"][aria-pressed="true"] {
  background: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0;
  background: none;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger th,
#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger td {
  padding: 18px 22px;
  vertical-align: top;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--ed-line);
  background: none;
  transition: opacity 0.45s ease, color 0.45s ease;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger th + th,
#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger td + td {
  border-left: 2px solid var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger th {
  font: 400 clamp(22px, 2.2vw, 30px) / 1.1 var(--ed-serif);
  color: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger th .ed-loop-tag {
  display: block;
  margin-bottom: 8px;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger th + th .ed-loop-tag {
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger td {
  font: 400 clamp(19px, 1.7vw, 23px) / 1.25 var(--ed-serif);
  color: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger td:first-child {
  color: var(--ed-muted);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger tbody tr:last-child td {
  border-bottom: 0;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-cycle {
  color: var(--ed-blue);
  font-family: var(--ed-sans);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger[data-view="loops"] td:first-child,
#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger[data-view="projects"] td:last-child {
  opacity: 0.38;
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger[data-view="loops"] td:last-child {
  color: var(--ed-blue);
}

#primary.editorial-post.ed-skin-blueprint .ed-loop-ledger[data-view="projects"] td:first-child {
  color: var(--ed-ink);
}

#primary.editorial-post.ed-skin-blueprint [data-loop="ledger"].is-armed tbody tr {
  opacity: 0;
  transform: translateY(10px);
}

#primary.editorial-post.ed-skin-blueprint [data-loop="ledger"].is-armed.is-live tbody tr {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease calc(var(--i, 0) * 0.12s), transform 0.5s ease calc(var(--i, 0) * 0.12s);
}

@container (max-width: 520px) {
  #primary.editorial-post.ed-skin-blueprint .ed-loop-ledger th,
  #primary.editorial-post.ed-skin-blueprint .ed-loop-ledger td {
    padding: 14px 12px;
  }
}

/* ---------------------------------------------------------------- *
 * Phones — dial buttons shrink; org stations get a little more room.
 * ---------------------------------------------------------------- */

@container (max-width: 420px) {
  #primary.editorial-post.ed-skin-blueprint .ed-loop-stage,
  #primary.editorial-post.ed-skin-blueprint .ed-loop-station {
    padding: 5px 7px;
    font-size: 0.625rem;
    letter-spacing: 0.03em;
    gap: 4px;
  }

  #primary.editorial-post.ed-skin-blueprint .ed-loop-anatomy,
  #primary.editorial-post.ed-skin-blueprint .ed-loop-org {
    padding-inline: 12px;
  }

  #primary.editorial-post.ed-skin-blueprint .ed-loop-fig-top,
  #primary.editorial-post.ed-skin-blueprint .ed-loop-cap {
    padding-inline: 14px;
  }
}

/* Phones: the wide SVGs scale down with their box, so their text scales
   too. Raise the user-unit size per figure (ratio of viewBox width to the
   ~340px box at 390) so rendered labels stay >= 11px, and drop the purely
   decorative annotations that would collide at that size. */
@container (max-width: 520px) {
  #primary.editorial-post.ed-skin-blueprint [data-loop="morph"] svg.ed-loop-svg text,
  #primary.editorial-post.ed-skin-blueprint [data-loop="compound"] svg.ed-loop-svg text {
    font-size: 26px;
    letter-spacing: 0.02em;
  }

  #primary.editorial-post.ed-skin-blueprint [data-loop="gridlock"] svg.ed-loop-svg text {
    font-size: 21px;
    letter-spacing: 0.02em;
  }

  #primary.editorial-post.ed-skin-blueprint [data-loop="morph"] svg.ed-loop-svg text.ed-loop-big {
    font-size: 64px;
  }

  #primary.editorial-post.ed-skin-blueprint [data-loop="compound"] svg.ed-loop-svg text.ed-loop-small,
  #primary.editorial-post.ed-skin-blueprint [data-loop="compound"] svg.ed-loop-svg text.ed-loop-on-core,
  #primary.editorial-post.ed-skin-blueprint [data-loop="gridlock"] svg.ed-loop-svg .ed-loop-stages text:nth-child(2),
  #primary.editorial-post.ed-skin-blueprint [data-loop="gridlock"] svg.ed-loop-svg .ed-loop-stages text:nth-child(3) {
    display: none;
  }
}

@container (max-width: 520px) {
  #primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-core-label {
    font-size: 15px;
  }

  #primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-core-count {
    font-size: 15px;
  }

  #primary.editorial-post.ed-skin-blueprint .ed-loop-fig svg text.ed-loop-dial-label {
    font-size: 15px;
  }
}

/* Reduced motion: the base file already zeroes every animation and
   transition under #primary.editorial-post; JS also never arms figures.
   The org ring's flow is decorative, so drop the dashes entirely. */
@media (prefers-reduced-motion: reduce) {
  #primary.editorial-post.ed-skin-blueprint .ed-loop-ring-flow {
    display: none;
  }
}