/** Video insert **/

.video--wrapper.video--vimeo--wrapper {}

.video--thumbnail.video--vimeo--thumbnail {
    display: none
}

.video.video--vimeo {}

:root {
  --font-size: 17px;
  --line-height: 24px;
  --header-height: 1.2;
  --font-size--header: 38px;
  --line-height--header: 48px;
  --body-font: "Fluxisch Else";
  --header-font: "Fluxisch Else";
  --link-color: black;
  --link-color--visited: black;
  --link-color--hover: black;
  --body-background-color: #f3f3f3;
}
 
body, html {
  font-size: var(--font-size);
  line-height: var(--line-height);  
  font-family: var(--body-font);
  background: var(--body-background-color);
}

body {
  max-width: 100ch;
  margin: calc(2 * var(--line-height)) auto;
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 3fr 1fr;
  padding-left: 10ch;
  column-gap: calc(2 * var(--line-height));
}

h1 {
 font-family: var(--header-font);
 font-size: var(--font-size--header);
 line-height: var(--line-height--header);
 margin: 0 0 calc(4 * var(--line-height)) 0
}

h2::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 0.2rem;
  vertical-align: baseline;
}

h2, h3 {
 font-family: var(--header-font);
 font-size: var(--font-size);
 margin: calc(2 * var(--line-height)) 0 0 0;
 line-height: var(--line-height);
 text-transform: uppercase;
}

h4, h5, h6 {
 margin: var(--line-height) 0 0 0;
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-color--hover);
    text-decoration: none;
}

a:visited {
    color: var(--link-color--visited);
}

header {
  display: flex;
  vertical-align: baseline;
  margin: 2em 0;
  grid-column-end: span 2;
}
 
.navbar--organisation {
    flex: 0 0 75mm;
    margin-left: calc(-75mm - 2ch);
}
 
nav ul {
  list-style-type: none;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  max-width: 100%;
  flex-wrap: wrap;
  flex-direction: column;
}
 
nav ul li {
  margin: 0 2ch 1ch 0;
}

.navbar--reports--subnav,
.navbar--pages--subnav,
.navbar--labels--subnav
{
  display: none;
}
 
main {
  position: relative;
}
 
/** References which aren't direct links (they don't have the data-direct-link attribute) */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
    color: inherit;
    text-decoration: none;
}

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

[data-link-target-type="label"]:hover .reference--target {
    text-decoration: underline;
}

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

 
[data-link-target-type="label"][data-direct-link] .reference--label,
[data-link-target-type="label"] .reference-label--target .reference-label--target--label {
  display: inline-block;
  background: #efefef;
  padding: .5ch;
  margin-top: -.5ch;
  font-family:var(--body-font);
}
 
.link-source {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  margin-top: 0;
  font-size: 85%;
}

ul.label--context-list {
  padding: 0;
  list-style-type: none;
}

ul.label--context-list li {
  margin-bottom: calc(2 * var(--line-height));
}

/** Hide elements which were marked as instructions in the pad */
.instruction {
    display: none;
}
 
.tag--question {
  font-size: 110%;
  color: green;
}
 
.tag--important  {
    text-decoration-line: underline;
    text-decoration-style: double;
}
 
.tag--trouble {
    text-decoration-line: underline;
    text-decoration-style: wavy;
}
 
.tag--commentary {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}
 
.tag--citation {
    background-color: beige;
}
 
b {
    border: solid black 2px;
}


.going-hybrid--labels ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.going-hybrid--labels ul li {
    margin-top: var(--line-height);
}
.going-hybrid--labels ul li a {
    padding: .3em .5em;
    border: 2px solid;
    text-decoration: none;
}
.going-hybrid--labels ul li a:hover {
    background: white;
}
 
img {
    max-width: 100%;
}


 
/**Anwhich aren't direct links (they don't have the data-direct-link attribute) */

[data-link-target-type="label"],
[data-link-target-type="label"]:visited {
    color: inherit;
    text-decoration: none;
}

[data-link-target-type="label"]:hover {
    color: var(--link-color);
}

[data-link-target-type="label"] .reference--target {
  float: right;
  width: 20ch;
  margin-right: -25ch;
  clear: right;
  text-decoration: none;
  color: var(--link-color);
}

[data-link-target-type="label"]:hover .reference--target {
    text-decoration: underline;
}

[data-link-target-type="label"] .reference--label--inline {
    text-decoration: underline;
    text-decoration-style: dotted;
}

body {
    max-width: 100ch;
    margin: calc(2 * var(--line-height)) auto;
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 3fr 1fr;
    padding-left: 10ch;
    column-gap: calc(2 * var(--line-height));
}

@media screen and (max-width: 800px) {
    body {
        padding-left: 0;
        margin-left: 6ch;
        margin-right: 2ch;
    }
   .navbar--organisation {
        position: absolute;
        margin-left: -2ch;
        transform: rotate(90deg);
        transform-origin: top left;
    }
}

@media screen and (min-width: 800px) and (max-width: calc(116ch + 150mm)) {
    body {
        margin-left: calc(75mm + 4ch);
        margin-right: 2ch;
        padding-left: 0;
    }
}

.navbar--index, .navbar--reports, .navbar--pages {
    display: none;
    }
    
    /* =========================================
   WORKSHOP HANDOUT ADDITIONS (SCREEN)
   ========================================= */
:root {
  /* Change this HEX code to your organization's primary brand color */
  --workshop-accent: #000000; 
  --workshop-box-bg: #009444;
  --workshop-box-color: #eaeaea;
}


blockquote {
  position: relative;
  background-color: transparent; /* Background is handled by the blurred layer */
  border-left: none; /* Cleaned up since sharp borders conflict with a blur */
  padding: calc(1.5 * var(--line-height)) 3ch;
  margin: calc(2 * var(--line-height)) 0;
  color: var(--workshop-box-color);
  font-style: normal;
  font-size: calc(var(--font-size) * 1.2);
  z-index: 1; /* Keeps your text crisp and on top */
}

blockquote a,
blockquote a:visited,
blockquote a:hover,
blockquote a:active {
  color: var(--workshop-box-color);
}

/* 1. Register custom properties so CSS can animate percentages smoothly */
@property --tl { syntax: '<percentage>'; initial-value: 30%; inherits: false; }
@property --tr { syntax: '<percentage>'; initial-value: 70%; inherits: false; }
@property --br { syntax: '<percentage>'; initial-value: 40%; inherits: false; }
@property --bl { syntax: '<percentage>'; initial-value: 60%; inherits: false; }

/* 2. Define keyframes that mix up the values */
@keyframes blob-morph {
  0%   { --tl: 30%; --tr: 70%; --br: 60%; --bl: 40%; }
  33%  { --tl: 60%; --br: 30%; --bl: 70%; --tr: 40%; }
  66%  { --tl: 40%; --tr: 50%; --br: 70%; --bl: 30%; }
  100% { --tl: 30%; --tr: 70%; --br: 60%; --bl: 40%; }
}

/* Creates the blurred blob background */
blockquote::before {
  content: '';
  position: absolute;
  inset: -20px; /* Expands the background outward so the blur fades smoothly */
  filter: blur(78px); /* Adjust this value to make it more or less blurry */
 
 background: linear-gradient(135deg, var(--workshop-box-bg), var(--workshop-box-bg));
  border-radius: var(--tl) var(--tr) var(--br) var(--bl) / var(--bl) var(--br) var(--tr) var(--tl);
  animation: blob-morph 15s infinite ease-in-out alternate;
  z-index: -1;
}

blockquote p:last-child {
  margin-bottom: 0;
}




/* =========================================
   1. METADATA BLOCK
   Trigger: [anything](#meta)
   ========================================= */
/* Hide the trigger */
p:has(a[href="#meta"]) { 
  display: none; 
}
/* Style the paragraph immediately following the trigger */
p:has(a[href="#meta"]) + p {
  font-family: var(--header-font);
  font-size: calc(var(--font-size) * 1);
  padding-bottom: var(--line-height);
  margin-bottom: calc(2 * var(--line-height));
  grid-column-end: span 2; 
}


/* =========================================
   2. THREE-COLUMN TABLE
   Trigger: [anything](#table3)
   ========================================= */
/* Hide the trigger */
p:has(a[href="#table3"]) { 
  display: none; 
}
/* Turn the bulleted list immediately following into a 3-column table */
p:has(a[href="#table3"]) + ul {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0 0 calc(2 * var(--line-height)) 0;
  border: 1px solid #DDDDDD;
  grid-column-end: span 2;
}
p:has(a[href="#table3"]) + ul li {
  padding: 10px 15px;
  border-bottom: 1px solid #DDDDDD;
  border-right: 1px solid #DDDDDD;
  margin: 0;
}
/* Remove right border on the last column */
p:has(a[href="#table3"]) + ul li:nth-child(3n) { border-right: none; }
/* Style the first 3 items as headers */
p:has(a[href="#table3"]) + ul li:nth-child(-n+3) {
  font-weight: bold;
}


/* =========================================
   3. PROCESS FLOWCHART
   Trigger: [anything](#flow)
   ========================================= */
/* Hide the trigger */
p:has(a[href="#flow"]) { 
  display: none; 
}
/* Turn the numbered list immediately following into a flowchart */
p:has(a[href="#flow"]) + ol {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: calc(2 * var(--line-height));
  grid-column-end: span 2;
}
p:has(a[href="#flow"]) + ol li {
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  position: relative;
}
/* Draw arrows between boxes */
p:has(a[href="#flow"]) + ol li:not(:last-child)::after {
  content: "➔";
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}

/* =========================================
   CIRCULAR PROCESS FLOWCHART (DIRECTED - MATCHED CODE 2 ARROWS)
   Triggers: 
   [Cycle](#circle-flow) (Clockwise)
   [Bi-Cycle](#circle-flow-bi) (Bidirectional)
   ========================================= */

/* 1. Hide the triggers */
p:has(a[href^="#circle-flow"]) {
  display: none;
}

/* 2. Container Setup */
p:has(a[href^="#circle-flow"]) + ol {
  --radius: 220px;      /* Distance from center to items */
  --item-size: 140px;   /* Size of each circular bubble */
  --item-radius: calc(var(--item-size) / 2);
  --gap: 16px;          /* Guaranteed exact space between bubble and arrows */
  
  /* 
     SVG Arrowhead definitions 
     The stems (H24 and H0) now extend all the way to the tip of the arrow 
     so there is no empty gap inside the arrowhead's V-shape.
  */
  --arrow-fwd: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M0 12H24 M18 6l6 6-6 6"/></svg>');
  --arrow-back: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M24 12H0 M6 6l-6 6 6 6"/></svg>');
  
  position: relative;
  width: calc(var(--radius) * 2 + var(--item-size));
  height: calc(var(--radius) * 2 + var(--item-size));
  list-style-type: none;
  padding: 0;
  margin: 3rem auto;
}

/* 3. Dynamic Item Counting & Chord Math */
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(3)) { --total: 3; --chord-factor: 1.732; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(4)) { --total: 4; --chord-factor: 1.414; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(5)) { --total: 5; --chord-factor: 1.176; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(6)) { --total: 6; --chord-factor: 1.000; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(7)) { --total: 7; --chord-factor: 0.868; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(8)) { --total: 8; --chord-factor: 0.765; }

/* 4. Assign an index to each child */
p:has(a[href^="#circle-flow"]) + ol li:nth-child(1) { --index: 0; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(2) { --index: 1; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(3) { --index: 2; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(4) { --index: 3; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(5) { --index: 4; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(6) { --index: 5; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(7) { --index: 6; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(8) { --index: 7; }

/* 5. Item Positioning and Bubble Styles */
p:has(a[href^="#circle-flow"]) + ol li {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--item-size);
  height: var(--item-size);
  margin-top: calc(-1 * var(--item-radius));
  margin-left: calc(-1 * var(--item-radius));
  
  --angle: calc((360deg / var(--total)) * var(--index) - 90deg);
  --arrow-angle: calc(var(--angle) + (180deg / var(--total)) + 90deg);
  
  transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #333;
  border-radius: 50%;
  padding: 10px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-size: 0.9em;
  line-height: 1.2;
  z-index: 2;
}

/* If user uses italics (*text*) to trigger a bidirectional connection */
p:has(a[href^="#circle-flow"]) + ol li em {
  font-style: normal;
}

/* 6. The Connecting Arrow (Unidirectional) */
p:has(a[href^="#circle-flow"]) + ol li::before {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: 50%;
  
  --chord-length-total: calc(var(--radius) * var(--chord-factor));
  width: calc(var(--chord-length-total) - (2 * var(--item-radius)) - (2 * var(--gap)));
  height: 24px;
  z-index: -1;
  
  transform-origin: left center;
  transform: rotate(var(--arrow-angle)) translate(calc(var(--item-radius) + var(--gap)));

  background-image: 
    linear-gradient(#333, #333), 
    var(--arrow-fwd);
  
  background-position: left center, right center;
  /* Reduced from -6px to -12px so the gradient safely overlaps 12px of the SVG stem */
  background-size: calc(100% - 12px) 2.5px, 24px 24px;
  background-repeat: no-repeat;
}

/* 7. Bidirectional connection handling */
p:has(a[href^="#circle-flow-bi"]) + ol li::before,
p:has(a[href^="#circle-flow"]) + ol li:has(em):before {
  background-image: 
    linear-gradient(#333, #333), 
    var(--arrow-fwd),
    var(--arrow-back);
  
  background-position: center center, right center, left center;
  /* Reduced from -12px to -24px so the gradient safely overlaps 12px of BOTH SVG stems */
  background-size: calc(100% - 24px) 2.5px, 24px 24px, 24px 24px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}


/* =========================================
   LINEAR PROCESS FLOWCHART (SINGLE ROW)
   Triggers: 
   [Linear](#linear-flow) (Forward)
   [Bi-Linear](#linear-flow-bi) (Bidirectional)
   ========================================= */

/* 1. Hide the triggers */
p:has(a[href^="#linear-flow"]) {
  display: none;
}

/* 2. Container Setup (Single Line Enforced) */
p:has(a[href^="#linear-flow"]) + ol {
  --item-size: 100px;
  --arrow-space: 70px;  /* Total space between each bubble */
  --gap: 16px;          /* Guaranteed exact space between bubble and arrows */
  
  /* SVG Arrowhead definitions (same as circular) */
  --arrow-fwd: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M0 0 L10 5 L0 10 z" fill="%23a0a0a0"/></svg>');
  --arrow-back: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M10 0 L0 5 L10 10 z" fill="%23a0a0a0"/></svg>');
  
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;         /* Forces a single continuous line */
  align-items: center;
  gap: var(--arrow-space);   /* Automatically spaces bubbles out */
  
  list-style-type: none;
  margin: 3rem 0;
  padding: 15px 5px;         /* Padding prevents shadow clipping */
  overflow-x: auto;          /* Allows horizontal scrolling if list is long */
  
  /* Optional: Make the scrollbar unobtrusive */
  scrollbar-width: thin;
}

/* 3. Bubble Styles */
p:has(a[href^="#linear-flow"]) + ol li {
  box-sizing: border-box;
  flex: 0 0 auto;            /* Prevents bubbles from squishing on small screens */
  position: relative;
  width: var(--item-size);
  height: var(--item-size);
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #333;
  border-radius: 50%;
  padding: 10px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-size: 0.9em;
  line-height: 1.2;
}

/* 4. Remove italics for bidirectional override */
p:has(a[href^="#linear-flow"]) + ol li em {
  font-style: normal;
}

/* 5. The Connecting Arrow (Applied to the right side of all but the last item) */
p:has(a[href^="#linear-flow"]) + ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  
  /* Start the line exactly where the gap starts */
  left: calc(100% + var(--gap));
  
  /* Line takes up the Flex gap space minus the paddings on both ends */
  width: calc(var(--arrow-space) - (2 * var(--gap)));
  height: 10px;
  transform: translateY(-50%);
  z-index: -1;

  /* Default Setup: Forward Arrow */
  background-image: 
    linear-gradient(#a0a0a0, #a0a0a0), 
    var(--arrow-fwd);
  background-position: left center, right center;
  background-size: calc(100% - 9px) 2px, 10px 10px;
  background-repeat: no-repeat;
}

/* 6. Bidirectional connection handling */
p:has(a[href="#linear-flow-bi"]) + ol li:not(:last-child)::after,
p:has(a[href="#linear-flow"]) + ol li:has(em):not(:last-child)::after {
  background-image: 
    linear-gradient(#a0a0a0, #a0a0a0), 
    var(--arrow-fwd),
    var(--arrow-back);
  
  /* Center the line between the two arrowheads */
  background-position: center center, right center, left center;
  background-size: calc(100% - 18px) 2px, 10px 10px, 10px 10px;
}

/* =========================================
   LINEAR PROCESS FLOWCHART (SMART GRID)
   Triggers: 
   [Linear-Cards](#linear-cards) (Forward)
   [Bi-Linear-Cards](#linear-cards-bi) (Bidirectional)
   ========================================= */

/* 1. Hide the triggers */
p:has(a[href^="#linear-cards"]) {
  display: none;
}

/* 2. Base Grid Setup (Mobile First: 1 Column) */
p:has(a[href^="#linear-cards"]) + ol {
  --gap: 40px;             /* Space between rows and columns */
  
  display: grid;
  grid-template-columns: 1fr; 
  gap: var(--gap);
  
  list-style-type: none;
  margin: 3rem 0;
  padding: 0;
}

/* 3. Card Styles */
p:has(a[href^="#linear-cards"]) + ol li {
  box-sizing: border-box;
  position: relative;
  
  display: flex;
  flex-direction: column;
  justify-content: center; 
  text-align: left;
  
  background: #ffffff;
  border: 2px solid #333;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  font-size: 0.95em;
  line-height: 1.55;
}

/* 4. Italics Reset (Preserves your bi-directional trigger) */
p:has(a[href^="#linear-cards"]) + ol li em {
  font-style: normal;
}

/* 5. ARROW SIZING & PLACEMENT BASE */
p:has(a[href^="#linear-cards"]) + ol li::after {
  content: "";
  position: absolute;
  z-index: 10;
  width: 28px; /* Unified size for all arrows */
  height: 28px;
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================================
   MOBILE ARROWS (All Point Down)
   ========================================= */
p:has(a[href^="#linear-cards"]) + ol li:not(:last-child)::after {
  /* Dead center in the bottom gap */
  left: 50%;
  bottom: calc(-1 * (var(--gap) / 2));
  transform: translate(-50%, 50%);
  
  /* Down Arrow */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16 M6 14l6 6 6-6"/></svg>');
}
/* Mobile Bidirectional Down */
p:has(a[href="#linear-cards-bi"]) + ol li:not(:last-child)::after,
p:has(a[href="#linear-cards"]) + ol li:has(em):not(:last-child)::after {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v16 M6 14l6 6 6-6 M6 10l6-6 6 6"/></svg>');
}


/* =========================================
   DESKTOP ARROWS (2 Columns)
   Triggers above 650px screen width
   ========================================= */
@media (min-width: 650px) {
  
  p:has(a[href^="#linear-cards"]) + ol {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ODD CARDS (1, 3, 5): Point Right */
  p:has(a[href^="#linear-cards"]) + ol li:nth-child(odd):not(:last-child)::after {
    left: auto; bottom: auto;
    
    /* Dead center in the right gap */
    top: 50%;
    right: calc(-1 * (var(--gap) / 2));
    transform: translate(50%, -50%);
    
    /* Right Arrow */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16 M14 6l6 6-6 6"/></svg>');
  }
  /* Odd Bidirectional Right */
  p:has(a[href="#linear-cards-bi"]) + ol li:nth-child(odd):not(:last-child)::after,
  p:has(a[href="#linear-cards"]) + ol li:nth-child(odd):has(em):not(:last-child)::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16 M14 6l6 6-6 6 M10 6l-6 6 6 6"/></svg>');
  }

  /* EVEN CARDS (2, 4, 6): The Diagonal Crosshairs Arrow */
  p:has(a[href^="#linear-cards"]) + ol li:nth-child(even):not(:last-child)::after {
    top: auto; right: auto;
    
    /* Places the arrow exactly in the intersection between all 4 cards */
    left: calc(-1 * (var(--gap) / 2));
    bottom: calc(-1 * (var(--gap) / 2));
    transform: translate(-50%, 50%); 
    
    /* Diagonal Down-Left Arrow ↙ */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18 M6 10v8h8"/></svg>');
  }
  /* Even Bidirectional Diagonal Return */
  p:has(a[href="#linear-cards-bi"]) + ol li:nth-child(even):not(:last-child)::after,
  p:has(a[href="#linear-cards"]) + ol li:nth-child(even):has(em):not(:last-child)::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18 M6 10v8h8 M10 6h8v8"/></svg>');
  }
}