/* Publication artwork keyed to _posts front matter img values. */

.analysis-card .post-image,
.publication-post .post-image {
  --art-navy-deep: color-mix(in srgb, var(--navy-deep) 50%, var(--paper));
  --art-navy: color-mix(in srgb, var(--navy) 50%, var(--paper));
  --art-teal: color-mix(in srgb, var(--teal) 50%, var(--paper));
  --art-red: color-mix(in srgb, var(--red) 50%, var(--paper));
  --art-gold: color-mix(in srgb, var(--gold) 50%, var(--paper));
  --art-sky: color-mix(in srgb, var(--sky) 50%, var(--paper));
  --art-sage: color-mix(in srgb, var(--sage) 50%, var(--paper));
  --art-rose: color-mix(in srgb, var(--rose) 50%, var(--paper));
  --art-cream: color-mix(in srgb, var(--cream) 50%, var(--paper));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -18px 28px rgba(16, 39, 90, .018);
}

.analysis-card .post-image::before,
.analysis-card .post-image::after,
.publication-post .post-image::before,
.publication-post .post-image::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: var(--art-radius, 999px);
  box-shadow:
    0 5px 14px rgba(16, 39, 90, .038),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.post-image[class~="2026-04-05-economics-of-cyber-professionalization"],
.publication-post .post-image[class~="2026-04-05-economics-of-cyber-professionalization"] {
  --publication-before-hover: translate(-5px, -4px) scale(1.02);
  --publication-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 82% 22%, rgba(255, 255, 255, .35), transparent 24%),
    linear-gradient(135deg, var(--art-cream) 0 36%, var(--paper) 36% 62%, var(--art-navy-deep) 62% 100%);
}

.post-image[class~="2026-04-05-economics-of-cyber-professionalization"]::before {
  --art-radius: 999px;
  left: 12%;
  top: 22%;
  width: 55%;
  height: 48%;
  background:
    radial-gradient(circle at 22% 34%, var(--art-gold) 0 11%, transparent 12%),
    radial-gradient(circle at 48% 48%, var(--art-gold) 0 10%, transparent 11%),
    radial-gradient(circle at 76% 31%, var(--art-gold) 0 12%, transparent 13%),
    linear-gradient(90deg, rgba(190, 134, 38, .09), rgba(255, 255, 253, .42));
}

.post-image[class~="2026-04-05-economics-of-cyber-professionalization"]::after {
  --art-radius: 50%;
  right: -13%;
  bottom: -26%;
  width: 60%;
  height: 82%;
  background:
    radial-gradient(ellipse at 35% 27%, rgba(255, 255, 255, .18), transparent 18%),
    linear-gradient(145deg, var(--art-teal), var(--art-navy));
}

.post-image[class~="2026-04-04-financing-cybersecurity-professionalization"],
.publication-post .post-image[class~="2026-04-04-financing-cybersecurity-professionalization"] {
  --publication-before-hover: translateY(-5px);
  --publication-after-hover: translate(5px, 4px);
  background:
    linear-gradient(180deg, var(--art-sky) 0 46%, var(--paper) 46% 100%);
}

.post-image[class~="2026-04-04-financing-cybersecurity-professionalization"]::before {
  --art-radius: 50% 50% 16px 16px;
  left: 9%;
  bottom: -24%;
  width: 82%;
  height: 64%;
  background:
    radial-gradient(ellipse at 66% 18%, rgba(255, 255, 253, .34), transparent 20%),
    linear-gradient(180deg, var(--art-teal), var(--art-navy));
}

.post-image[class~="2026-04-04-financing-cybersecurity-professionalization"]::after {
  --art-radius: 6px;
  right: 19%;
  top: 22%;
  width: 12%;
  height: 48%;
  background: linear-gradient(180deg, var(--art-gold), var(--art-red));
}

.post-image[class~="2026-04-03-auditing-the-state-with-ai"],
.publication-post .post-image[class~="2026-04-03-auditing-the-state-with-ai"] {
  --publication-before-hover: translate(-5px, -4px) rotate(-5deg);
  --publication-after-hover: translate(5px, 4px);
  background:
    linear-gradient(90deg, rgba(16, 39, 90, .41) 0 33%, transparent 33% 100%),
    linear-gradient(135deg, var(--paper), var(--art-sky));
}

.post-image[class~="2026-04-03-auditing-the-state-with-ai"]::before {
  --art-radius: 7px;
  left: 28%;
  top: 17%;
  width: 35%;
  height: 60%;
  background:
    linear-gradient(145deg, rgba(255, 255, 253, .68), rgba(255, 255, 253, .14)),
    var(--art-teal);
  clip-path: polygon(0 12%, 72% 0, 100% 50%, 28% 100%, 0 88%);
  transform: rotate(-5deg);
}

.post-image[class~="2026-04-03-auditing-the-state-with-ai"]::after {
  --art-radius: 999px;
  right: 10%;
  bottom: 24%;
  width: 54%;
  height: 11%;
  background: linear-gradient(90deg, var(--art-gold), var(--art-red), rgba(173, 61, 44, .14));
}

.post-image[class~="2026-03-26-estimating-the-cost-of-a-cybersecurity-professionalization-scheme"],
.publication-post .post-image[class~="2026-03-26-estimating-the-cost-of-a-cybersecurity-professionalization-scheme"] {
  --publication-before-hover: translate(4px, -5px);
  --publication-after-hover: translate(-5px, 4px);
  background:
    radial-gradient(ellipse at 76% 20%, rgba(255, 255, 255, .34), transparent 24%),
    linear-gradient(180deg, var(--paper) 0 44%, var(--art-cream) 44% 100%);
}

.post-image[class~="2026-03-26-estimating-the-cost-of-a-cybersecurity-professionalization-scheme"]::before {
  --art-radius: 7px 7px 17px 17px;
  left: 12%;
  bottom: 16%;
  width: 74%;
  height: 28%;
  background:
    linear-gradient(180deg, rgba(255, 255, 253, .18), transparent),
    var(--art-navy-deep);
}

.post-image[class~="2026-03-26-estimating-the-cost-of-a-cybersecurity-professionalization-scheme"]::after {
  --art-radius: 6px;
  left: 47%;
  top: 17%;
  width: 18%;
  height: 46%;
  background: linear-gradient(180deg, var(--art-red), var(--art-gold));
}

.post-image[class~="2026-03-22-estimating-the-cost-of-cyber-professionalization"],
.publication-post .post-image[class~="2026-03-22-estimating-the-cost-of-cyber-professionalization"] {
  --publication-before-hover: translate(-5px, -4px) rotate(4deg);
  --publication-after-hover: translate(5px, 4px) scale(1.02);
  background:
    radial-gradient(ellipse at 20% 76%, rgba(22, 124, 120, .08), transparent 24%),
    linear-gradient(135deg, var(--art-cream), var(--paper));
}

.post-image[class~="2026-03-22-estimating-the-cost-of-cyber-professionalization"]::before {
  --art-radius: 999px 18px 18px 999px;
  left: 10%;
  top: 15%;
  width: 46%;
  height: 68%;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 253, .42) 0 8%, transparent 8% 18%),
    linear-gradient(90deg, var(--art-gold), rgba(190, 134, 38, .11));
  transform: rotate(4deg);
}

.post-image[class~="2026-03-22-estimating-the-cost-of-cyber-professionalization"]::after {
  --art-radius: 50%;
  right: 13%;
  bottom: 12%;
  width: 34%;
  height: 48%;
  background:
    radial-gradient(ellipse at 41% 29%, rgba(255, 255, 255, .22), transparent 18%),
    var(--art-red);
}

.post-image[class~="2026-03-12-a-manual-for-productive-discussions-about-professionalisation"],
.publication-post .post-image[class~="2026-03-12-a-manual-for-productive-discussions-about-professionalisation"] {
  --publication-before-hover: translateY(-5px);
  --publication-after-hover: translate(5px, 4px);
  background:
    conic-gradient(from 45deg at 50% 50%, var(--art-sage) 0 25%, var(--paper) 25% 50%, var(--art-sky) 50% 75%, var(--art-cream) 75% 100%);
}

.post-image[class~="2026-03-12-a-manual-for-productive-discussions-about-professionalisation"]::before {
  --art-radius: 50%;
  left: 30%;
  top: 26%;
  width: 40%;
  height: 48%;
  background:
    radial-gradient(ellipse at 44% 34%, rgba(255, 255, 255, .32), transparent 19%),
    var(--art-navy);
}

.post-image[class~="2026-03-12-a-manual-for-productive-discussions-about-professionalisation"]::after {
  --art-radius: 999px;
  left: 38%;
  bottom: 19%;
  width: 24%;
  height: 10%;
  background: linear-gradient(90deg, var(--art-gold), var(--art-red));
}

.post-image[class~="2026-03-11-cyber-professionalisation-consultation-part-2"],
.publication-post .post-image[class~="2026-03-11-cyber-professionalisation-consultation-part-2"] {
  --publication-before-hover: translate(5px, -4px);
  --publication-after-hover: translate(-5px, 4px);
  background:
    linear-gradient(90deg, var(--art-navy-deep) 0 38%, var(--paper) 38% 100%);
}

.post-image[class~="2026-03-11-cyber-professionalisation-consultation-part-2"]::before {
  --art-radius: 9px 999px 999px 9px;
  left: 28%;
  top: 15%;
  width: 52%;
  height: 70%;
  background:
    linear-gradient(90deg, rgba(255, 255, 253, .74), rgba(255, 255, 253, .08)),
    var(--art-sky);
}

.post-image[class~="2026-03-11-cyber-professionalisation-consultation-part-2"]::after {
  --art-radius: 4px;
  right: 15%;
  top: 25%;
  width: 11%;
  height: 48%;
  background: linear-gradient(180deg, rgba(173, 61, 44, .09), var(--art-red));
}

.post-image[class~="2026-03-10-cyber-professionalisation-consultation-part-1"],
.publication-post .post-image[class~="2026-03-10-cyber-professionalisation-consultation-part-1"] {
  --publication-before-hover: translate(-5px, -4px) rotate(-4deg);
  --publication-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 78% 22%, rgba(255, 255, 255, .34), transparent 24%),
    linear-gradient(135deg, var(--art-sky), var(--paper));
}

.post-image[class~="2026-03-10-cyber-professionalisation-consultation-part-1"]::before {
  --art-radius: 8px;
  left: 12%;
  top: 18%;
  width: 38%;
  height: 44%;
  background: var(--art-cream);
  box-shadow:
    12px 10px 0 rgba(243, 233, 213, .31),
    24px 20px 0 rgba(243, 233, 213, .17),
    0 5px 14px rgba(16, 39, 90, .038);
  transform: rotate(-4deg);
}

.post-image[class~="2026-03-10-cyber-professionalisation-consultation-part-1"]::after {
  --art-radius: 999px;
  right: 14%;
  bottom: 21%;
  width: 30%;
  height: 16%;
  background:
    radial-gradient(circle at 26% 50%, var(--art-gold) 0 18%, transparent 19%),
    radial-gradient(circle at 52% 50%, var(--art-teal) 0 18%, transparent 19%),
    radial-gradient(circle at 78% 50%, var(--art-red) 0 18%, transparent 19%);
}

.post-image[class~="2025-11-12-professionalization-untold"],
.publication-post .post-image[class~="2025-11-12-professionalization-untold"] {
  --publication-before-hover: translate(5px, -4px);
  --publication-after-hover: translate(-5px, 4px) rotate(-3deg);
  background:
    radial-gradient(ellipse at 22% 23%, rgba(255, 255, 255, .16), transparent 23%),
    linear-gradient(135deg, var(--art-navy-deep), var(--art-teal));
}

.post-image[class~="2025-11-12-professionalization-untold"]::before {
  --art-radius: 10px;
  left: 12%;
  top: 17%;
  width: 62%;
  height: 58%;
  background:
    linear-gradient(120deg, rgba(255, 255, 253, .2), transparent 34%),
    var(--art-cream);
  clip-path: polygon(0 0, 88% 0, 74% 35%, 100% 58%, 64% 100%, 0 84%);
}

.post-image[class~="2025-11-12-professionalization-untold"]::after {
  --art-radius: 999px;
  right: 11%;
  bottom: 20%;
  width: 68%;
  height: 9%;
  background: linear-gradient(90deg, transparent 0 16%, var(--art-red) 16% 84%, transparent 84% 100%);
  transform: rotate(-3deg);
}

.post-image[class~="2025-10-24-refuting-cyber-skills-frameworks"],
.publication-post .post-image[class~="2025-10-24-refuting-cyber-skills-frameworks"] {
  --publication-before-hover: translate(-5px, -4px) skewY(3deg);
  --publication-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 79% 24%, rgba(190, 134, 38, .1), transparent 24%),
    linear-gradient(135deg, var(--art-sage), var(--paper));
}

.post-image[class~="2025-10-24-refuting-cyber-skills-frameworks"]::before {
  --art-radius: 8px;
  left: 10%;
  top: 20%;
  width: 66%;
  height: 52%;
  background:
    repeating-linear-gradient(90deg, rgba(23, 56, 120, .275) 0 5%, transparent 5% 14%),
    repeating-linear-gradient(0deg, rgba(23, 56, 120, .175) 0 6%, transparent 6% 16%);
  transform: skewY(3deg);
}

.post-image[class~="2025-10-24-refuting-cyber-skills-frameworks"]::after {
  --art-radius: 6px;
  right: 14%;
  bottom: 19%;
  width: 24%;
  height: 20%;
  background: linear-gradient(135deg, var(--art-red), var(--art-gold));
  clip-path: polygon(0 0, 100% 0, 72% 100%, 0 72%);
}

.post-image[class~="2025-10-23-active-defense-and-hacking-back"],
.publication-post .post-image[class~="2025-10-23-active-defense-and-hacking-back"] {
  --publication-before-hover: translate(5px, -4px) rotate(9deg);
  --publication-after-hover: translate(-5px, 5px);
  background:
    linear-gradient(90deg, var(--paper) 0 45%, var(--art-navy-deep) 45% 100%);
}

.post-image[class~="2025-10-23-active-defense-and-hacking-back"]::before {
  --art-radius: 50%;
  left: 18%;
  top: 18%;
  width: 56%;
  height: 64%;
  border: 7px solid var(--art-teal);
  border-left-color: transparent;
  border-bottom-color: transparent;
  background: transparent;
  transform: rotate(9deg);
}

.post-image[class~="2025-10-23-active-defense-and-hacking-back"]::after {
  --art-radius: 6px;
  right: 19%;
  top: 34%;
  width: 13%;
  height: 38%;
  background: linear-gradient(180deg, var(--art-red), var(--art-gold));
}

.post-image[class~="2025-10-12-australia-cyber-education"],
.publication-post .post-image[class~="2025-10-12-australia-cyber-education"] {
  --publication-before-hover: translateX(5px);
  --publication-after-hover: translate(-5px, 4px);
  background:
    linear-gradient(180deg, var(--paper) 0 46%, var(--art-cream) 46% 100%);
}

.post-image[class~="2025-10-12-australia-cyber-education"]::before {
  --art-radius: 999px;
  left: -8%;
  top: 42%;
  width: 72%;
  height: 17%;
  background:
    linear-gradient(90deg, rgba(23, 56, 120, .11), var(--art-navy), rgba(23, 56, 120, .1));
}

.post-image[class~="2025-10-12-australia-cyber-education"]::after {
  --art-radius: 5px;
  right: 14%;
  top: 28%;
  width: 16%;
  height: 48%;
  background: linear-gradient(180deg, var(--art-red), var(--art-navy-deep));
}

.post-image[class~="2025-09-08-red-teaming-the-national-cyber-strategy"],
.publication-post .post-image[class~="2025-09-08-red-teaming-the-national-cyber-strategy"] {
  --publication-before-hover: translate(-5px, -4px);
  --publication-after-hover: translate(5px, 4px) rotate(8deg);
  background:
    repeating-radial-gradient(ellipse at 36% 52%, rgba(255, 255, 253, .22) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, var(--art-navy-deep), var(--art-sky));
}

.post-image[class~="2025-09-08-red-teaming-the-national-cyber-strategy"]::before {
  --art-radius: 50%;
  left: -16%;
  top: 7%;
  width: 62%;
  height: 82%;
  background:
    radial-gradient(ellipse at 60% 41%, rgba(255, 255, 253, .12), transparent 24%),
    rgba(16, 39, 90, .36);
}

.post-image[class~="2025-09-08-red-teaming-the-national-cyber-strategy"]::after {
  --art-radius: 5px;
  right: 15%;
  top: 25%;
  width: 28%;
  height: 34%;
  background: linear-gradient(135deg, rgba(173, 61, 44, .46), rgba(190, 134, 38, .23));
  clip-path: polygon(0 0, 100% 26%, 72% 100%, 12% 78%);
  transform: rotate(8deg);
}

.post-image[class~="2025-06-11-understand-before-you-fix"],
.publication-post .post-image[class~="2025-06-11-understand-before-you-fix"] {
  --publication-before-hover: translate(4px, -5px);
  --publication-after-hover: translate(-5px, 4px) rotate(-7deg);
  background:
    linear-gradient(135deg, var(--paper), var(--art-sage));
}

.post-image[class~="2025-06-11-understand-before-you-fix"]::before {
  --art-radius: 10px;
  left: 13%;
  top: 16%;
  width: 60%;
  height: 58%;
  background:
    linear-gradient(90deg, transparent 0 28%, rgba(22, 124, 120, .225) 28% 36%, transparent 36% 100%),
    linear-gradient(135deg, transparent 0 42%, rgba(23, 56, 120, .21) 42% 50%, transparent 50% 100%),
    linear-gradient(45deg, transparent 0 56%, rgba(190, 134, 38, .225) 56% 64%, transparent 64% 100%);
}

.post-image[class~="2025-06-11-understand-before-you-fix"]::after {
  --art-radius: 999px;
  right: 14%;
  bottom: 19%;
  width: 32%;
  height: 12%;
  background: linear-gradient(90deg, var(--art-red), rgba(173, 61, 44, .09));
  transform: rotate(-7deg);
}

.post-image[class~="2025-06-05-testifying-secret-meetings-professionalisation"],
.publication-post .post-image[class~="2025-06-05-testifying-secret-meetings-professionalisation"] {
  --publication-before-hover: translate(5px, -3px);
  --publication-after-hover: translate(-5px, 4px);
  background:
    radial-gradient(ellipse at 74% 42%, rgba(173, 61, 44, .07), transparent 24%),
    linear-gradient(90deg, var(--art-navy-deep), var(--paper));
}

.post-image[class~="2025-06-05-testifying-secret-meetings-professionalisation"]::before {
  --art-radius: 999px 13px 13px 999px;
  left: 12%;
  top: 21%;
  width: 68%;
  height: 42%;
  background:
    linear-gradient(90deg, rgba(255, 255, 253, .2), rgba(255, 255, 253, .56), rgba(255, 255, 253, .08));
}

.post-image[class~="2025-06-05-testifying-secret-meetings-professionalisation"]::after {
  --art-radius: 6px;
  right: 16%;
  bottom: 21%;
  width: 20%;
  height: 30%;
  background: linear-gradient(180deg, var(--art-red), rgba(173, 61, 44, .17));
}

.post-image[class~="2025-06-02-the-spectre-of-dual-roles"],
.publication-post .post-image[class~="2025-06-02-the-spectre-of-dual-roles"] {
  --publication-before-hover: translate(-5px, -4px);
  --publication-after-hover: translate(5px, 4px);
  background:
    linear-gradient(135deg, var(--paper), var(--art-sky));
}

.post-image[class~="2025-06-02-the-spectre-of-dual-roles"]::before {
  --art-radius: 50%;
  left: 13%;
  top: 22%;
  width: 64%;
  height: 46%;
  background:
    radial-gradient(ellipse at 34% 50%, rgba(23, 56, 120, .31) 0 31%, transparent 32%),
    radial-gradient(ellipse at 66% 50%, rgba(22, 124, 120, .31) 0 31%, transparent 32%);
}

.post-image[class~="2025-06-02-the-spectre-of-dual-roles"]::after {
  --art-radius: 999px;
  left: 45%;
  top: 13%;
  width: 10%;
  height: 72%;
  background: linear-gradient(180deg, var(--art-gold), var(--art-red));
}

.post-image[class~="2025-05-28-government-austcyber-tried-professionalisation-and-failed"],
.publication-post .post-image[class~="2025-05-28-government-austcyber-tried-professionalisation-and-failed"] {
  --publication-before-hover: translate(5px, -4px) skewX(-5deg);
  --publication-after-hover: translate(-5px, 4px) rotate(4deg);
  background:
    radial-gradient(ellipse at 77% 23%, rgba(255, 255, 255, .18), transparent 24%),
    linear-gradient(180deg, var(--art-navy-deep) 0 47%, var(--art-sage) 47% 100%);
}

.post-image[class~="2025-05-28-government-austcyber-tried-professionalisation-and-failed"]::before {
  --art-radius: 9px;
  left: 13%;
  top: 19%;
  width: 60%;
  height: 48%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 253, .24) 0 5%, transparent 5% 18%),
    linear-gradient(135deg, rgba(255, 255, 253, .52), rgba(255, 255, 253, .08));
  transform: skewX(-5deg);
}

.post-image[class~="2025-05-28-government-austcyber-tried-professionalisation-and-failed"]::after {
  --art-radius: 4px;
  right: 14%;
  bottom: 18%;
  width: 28%;
  height: 22%;
  background: linear-gradient(135deg, var(--art-gold), var(--art-red));
  transform: rotate(4deg);
}

.post-image[class~="2025-05-26-analyzing-the-language-of-professionalisation"],
.publication-post .post-image[class~="2025-05-26-analyzing-the-language-of-professionalisation"] {
  --publication-before-hover: translate(-5px, -4px) scaleX(1.03);
  --publication-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 78% 26%, rgba(190, 134, 38, .09), transparent 24%),
    linear-gradient(135deg, var(--paper), var(--art-cream));
}

.post-image[class~="2025-05-26-analyzing-the-language-of-professionalisation"]::before {
  --art-radius: 999px 9px 999px 9px;
  left: 10%;
  top: 28%;
  width: 78%;
  height: 22%;
  background: linear-gradient(90deg, var(--art-navy), var(--art-teal), rgba(22, 124, 120, .06));
}

.post-image[class~="2025-05-26-analyzing-the-language-of-professionalisation"]::after {
  --art-radius: 5px;
  right: 22%;
  bottom: 22%;
  width: 26%;
  height: 28%;
  background: linear-gradient(135deg, var(--art-red), rgba(173, 61, 44, .1));
  clip-path: polygon(0 18%, 50% 0, 100% 18%, 70% 100%, 30% 100%);
}

.post-image[class~="2025-05-18-smb1001-opencase-when-a-cybersecurity-standard-becomes-the-villain"],
.publication-post .post-image[class~="2025-05-18-smb1001-opencase-when-a-cybersecurity-standard-becomes-the-villain"] {
  --publication-before-hover: translate(5px, -4px);
  --publication-after-hover: translate(-5px, 4px) rotate(-5deg);
  background:
    linear-gradient(90deg, var(--art-navy-deep) 0 54%, var(--paper) 54% 100%);
}

.post-image[class~="2025-05-18-smb1001-opencase-when-a-cybersecurity-standard-becomes-the-villain"]::before {
  --art-radius: 0 999px 999px 0;
  left: 33%;
  top: 18%;
  width: 42%;
  height: 62%;
  background:
    linear-gradient(110deg, rgba(255, 255, 253, .78), rgba(255, 255, 253, .18)),
    var(--art-gold);
}

.post-image[class~="2025-05-18-smb1001-opencase-when-a-cybersecurity-standard-becomes-the-villain"]::after {
  --art-radius: 5px;
  left: 15%;
  bottom: 19%;
  width: 50%;
  height: 13%;
  background: linear-gradient(90deg, var(--art-red), rgba(173, 61, 44, .16));
  transform: rotate(-5deg);
}

.post-image[class~="2025-05-12-would-professionalisation-have-stopped-veronica-theriault"],
.publication-post .post-image[class~="2025-05-12-would-professionalisation-have-stopped-veronica-theriault"] {
  --publication-before-hover: translate(-5px, -4px) rotate(6deg);
  --publication-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 23% 21%, rgba(255, 255, 255, .38), transparent 24%),
    linear-gradient(135deg, var(--art-rose), var(--paper));
}

.post-image[class~="2025-05-12-would-professionalisation-have-stopped-veronica-theriault"]::before {
  --art-radius: 50%;
  left: 20%;
  top: 14%;
  width: 46%;
  height: 58%;
  background:
    radial-gradient(ellipse at 42% 34%, rgba(255, 255, 253, .3), transparent 18%),
    rgba(173, 61, 44, .39);
  transform: rotate(6deg);
}

.post-image[class~="2025-05-12-would-professionalisation-have-stopped-veronica-theriault"]::after {
  --art-radius: 7px;
  right: 15%;
  bottom: 19%;
  width: 34%;
  height: 24%;
  background: linear-gradient(90deg, var(--art-navy), rgba(23, 56, 120, .08));
}

.post-image[class~="2025-05-05-listening-before-leaping-aisa-s-cautionary-path-on-accreditation"],
.publication-post .post-image[class~="2025-05-05-listening-before-leaping-aisa-s-cautionary-path-on-accreditation"] {
  --publication-before-hover: translateY(-5px);
  --publication-after-hover: translate(5px, 4px);
  background:
    linear-gradient(180deg, var(--art-sky) 0 48%, var(--paper) 48% 100%);
}

.post-image[class~="2025-05-05-listening-before-leaping-aisa-s-cautionary-path-on-accreditation"]::before {
  --art-radius: 999px;
  left: 13%;
  bottom: 29%;
  width: 74%;
  height: 14%;
  background: linear-gradient(90deg, rgba(22, 124, 120, .08), var(--art-teal), rgba(22, 124, 120, .08));
}

.post-image[class~="2025-05-05-listening-before-leaping-aisa-s-cautionary-path-on-accreditation"]::after {
  --art-radius: 6px;
  right: 20%;
  top: 25%;
  width: 18%;
  height: 32%;
  background: linear-gradient(180deg, var(--art-gold), rgba(190, 134, 38, .17));
}

.post-image[class~="2025-05-05-would-professionalisation-have-stopped-hacker-from-hell"],
.publication-post .post-image[class~="2025-05-05-would-professionalisation-have-stopped-hacker-from-hell"] {
  --publication-before-hover: translate(5px, -4px) rotate(-4deg);
  --publication-after-hover: translate(-5px, 4px);
  background:
    linear-gradient(145deg, var(--paper), var(--art-sky));
}

.post-image[class~="2025-05-05-would-professionalisation-have-stopped-hacker-from-hell"]::before {
  --art-radius: 12px;
  left: 14%;
  top: 18%;
  width: 60%;
  height: 48%;
  background:
    linear-gradient(120deg, rgba(255, 255, 253, .62), rgba(255, 255, 253, .18)),
    var(--art-cream);
  border-bottom: 6px solid rgba(16, 39, 90, .25);
  transform: rotate(-4deg);
}

.post-image[class~="2025-05-05-would-professionalisation-have-stopped-hacker-from-hell"]::after {
  --art-radius: 5px;
  right: 15%;
  bottom: 18%;
  width: 23%;
  height: 30%;
  background: linear-gradient(135deg, var(--art-red), rgba(173, 61, 44, .11));
  clip-path: polygon(0 0, 100% 24%, 76% 100%, 18% 78%);
}

.post-image[class~="2025-04-28-6-out-of-220-orgs-recommended-professionalisation"],
.publication-post .post-image[class~="2025-04-28-6-out-of-220-orgs-recommended-professionalisation"] {
  --publication-before-hover: translate(-5px, -4px);
  --publication-after-hover: translate(5px, 4px) scale(1.03);
  background:
    radial-gradient(circle at 20% 24%, rgba(255, 255, 255, .4), transparent 23%),
    radial-gradient(circle at 24% 62%, rgba(23, 56, 120, .06) 0 3%, transparent 4%),
    radial-gradient(circle at 38% 38%, rgba(23, 56, 120, .06) 0 3%, transparent 4%),
    radial-gradient(circle at 55% 68%, rgba(23, 56, 120, .06) 0 3%, transparent 4%),
    radial-gradient(circle at 72% 36%, rgba(23, 56, 120, .06) 0 3%, transparent 4%),
    linear-gradient(135deg, var(--paper), var(--art-cream));
}

.post-image[class~="2025-04-28-6-out-of-220-orgs-recommended-professionalisation"]::before {
  --art-radius: 999px;
  left: 14%;
  top: 19%;
  width: 50%;
  height: 54%;
  background:
    radial-gradient(circle at 24% 35%, rgba(23, 56, 120, .07) 0 8%, transparent 9%),
    radial-gradient(circle at 48% 54%, rgba(23, 56, 120, .07) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 33%, rgba(23, 56, 120, .07) 0 8%, transparent 9%);
}

.post-image[class~="2025-04-28-6-out-of-220-orgs-recommended-professionalisation"]::after {
  --art-radius: 999px;
  right: 18%;
  bottom: 21%;
  width: 24%;
  height: 18%;
  background:
    radial-gradient(circle at 22% 50%, var(--art-gold) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, var(--art-gold) 0 18%, transparent 19%),
    radial-gradient(circle at 78% 50%, var(--art-red) 0 18%, transparent 19%);
}

.post-image[class~="2025-04-21-ransomware-69s-australia"],
.publication-post .post-image[class~="2025-04-21-ransomware-69s-australia"] {
  --publication-before-hover: translate(5px, -4px) scale(1.03);
  --publication-after-hover: translate(-5px, 4px);
  background:
    repeating-radial-gradient(circle at 16% 54%, rgba(173, 61, 44, .21) 0 4%, rgba(173, 61, 44, .08) 4% 8%, transparent 8% 16%),
    linear-gradient(135deg, var(--art-sky), var(--paper));
}

.post-image[class~="2025-04-21-ransomware-69s-australia"]::before {
  --art-radius: 50%;
  left: 20%;
  top: 22%;
  width: 42%;
  height: 52%;
  background:
    radial-gradient(ellipse at 45% 35%, rgba(255, 255, 253, .28), transparent 18%),
    rgba(173, 61, 44, .32);
}

.post-image[class~="2025-04-21-ransomware-69s-australia"]::after {
  --art-radius: 7px;
  right: 13%;
  bottom: 22%;
  width: 31%;
  height: 20%;
  background: linear-gradient(90deg, var(--art-navy-deep), var(--art-gold));
}

.post-image[class~="2025-03-27-the-spectres-of-cybersecurity-professionalisation"],
.publication-post .post-image[class~="2025-03-27-the-spectres-of-cybersecurity-professionalisation"] {
  --publication-before-hover: translate(5px, -4px);
  --publication-after-hover: translate(-5px, 4px);
  background:
    radial-gradient(ellipse at 72% 26%, rgba(255, 255, 253, .14), transparent 24%),
    linear-gradient(135deg, var(--art-navy-deep), var(--art-teal));
}

.post-image[class~="2025-03-27-the-spectres-of-cybersecurity-professionalisation"]::before {
  --art-radius: 999px 18px 999px 18px;
  left: 8%;
  top: 18%;
  width: 74%;
  height: 42%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 253, .42), transparent);
}

.post-image[class~="2025-03-27-the-spectres-of-cybersecurity-professionalisation"]::after {
  --art-radius: 999px;
  right: 14%;
  bottom: 19%;
  width: 36%;
  height: 12%;
  background: linear-gradient(90deg, rgba(173, 61, 44, .08), var(--art-red), rgba(173, 61, 44, .06));
}

.post-image[class~="2025-03-13-professionalisation-as-the-profane-made-sacred"],
.publication-post .post-image[class~="2025-03-13-professionalisation-as-the-profane-made-sacred"] {
  --publication-before-hover: translateY(-5px);
  --publication-after-hover: translate(5px, 4px) rotate(-4deg);
  background:
    linear-gradient(180deg, var(--art-cream) 0 37%, var(--art-navy-deep) 37% 100%);
}

.post-image[class~="2025-03-13-professionalisation-as-the-profane-made-sacred"]::before {
  --art-radius: 6px;
  left: 14%;
  top: 19%;
  width: 70%;
  height: 18%;
  background: linear-gradient(90deg, rgba(190, 134, 38, .17), var(--art-gold), rgba(190, 134, 38, .1));
}

.post-image[class~="2025-03-13-professionalisation-as-the-profane-made-sacred"]::after {
  --art-radius: 7px;
  right: 17%;
  bottom: 19%;
  width: 44%;
  height: 30%;
  background:
    linear-gradient(125deg, rgba(255, 255, 253, .16), transparent 34%),
    var(--art-red);
  clip-path: polygon(0 12%, 100% 0, 76% 100%, 14% 84%);
  transform: rotate(-4deg);
}

.post-image[class~="2025-02-26-who-decides-who-is-a-cyber-professional"],
.publication-post .post-image[class~="2025-02-26-who-decides-who-is-a-cyber-professional"] {
  --publication-before-hover: translate(-5px, -4px);
  --publication-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 79% 26%, rgba(255, 255, 255, .32), transparent 24%),
    linear-gradient(135deg, var(--paper) 0 44%, var(--art-sky) 44% 100%);
}

.post-image[class~="2025-02-26-who-decides-who-is-a-cyber-professional"]::before {
  --art-radius: 8px 8px 18px 18px;
  left: 11%;
  bottom: 16%;
  width: 66%;
  height: 34%;
  background:
    linear-gradient(180deg, rgba(255, 255, 253, .16), transparent),
    var(--art-navy);
}

.post-image[class~="2025-02-26-who-decides-who-is-a-cyber-professional"]::after {
  --art-radius: 50%;
  right: 14%;
  top: 20%;
  width: 19%;
  height: 26%;
  background: linear-gradient(135deg, var(--art-red), var(--art-gold));
}

.analysis-card .post-image::before,
.analysis-card .post-image::after,
.publication-post .post-image::before,
.publication-post .post-image::after {
  transition: transform 420ms cubic-bezier(.2, .75, .25, 1), opacity 260ms ease;
}

.analysis-card:hover .post-image::before,
.publication-post:hover .post-image::before {
  transform: var(--publication-before-hover, none);
}

.analysis-card:hover .post-image::after,
.publication-post:hover .post-image::after {
  transform: var(--publication-after-hover, none);
}

@media (prefers-reduced-motion: reduce) {
  .analysis-card .post-image,
  .analysis-card .post-image::before,
  .analysis-card .post-image::after,
  .publication-post .post-image,
  .publication-post .post-image::before,
  .publication-post .post-image::after {
    transition: none;
  }

  .analysis-card:hover .post-image::before,
  .analysis-card:hover .post-image::after,
  .publication-post:hover .post-image::before,
  .publication-post:hover .post-image::after {
    transform: none;
  }
}