/* Study-note artwork keyed to _posts front matter img values. */

.note-card .post-image,
.study-post .post-image {
  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, .035);
}

.note-card .post-image::before,
.note-card .post-image::after,
.study-post .post-image::before,
.study-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, .075),
    inset 0 1px 0 rgba(255, 255, 255, .24);
}

.post-image[class~="2025-05-17-todd-mcgowan-hegel-refuting-ayn-rand"],
.study-post .post-image[class~="2025-05-17-todd-mcgowan-hegel-refuting-ayn-rand"] {
  --note-before-hover: translate(-5px, -4px) rotate(3deg);
  --note-after-hover: translate(5px, 5px) rotate(-5deg);
  background:
    radial-gradient(ellipse at 72% 18%, rgba(255, 255, 255, .32), transparent 24%),
    linear-gradient(128deg, var(--navy-deep) 0 41%, var(--cream) 41% 67%, var(--rose) 67% 100%);
}

.post-image[class~="2025-05-17-todd-mcgowan-hegel-refuting-ayn-rand"]::before {
  --art-radius: 14px 6px 18px 7px;
  left: 16%;
  top: 15%;
  width: 50%;
  height: 68%;
  background:
    linear-gradient(125deg, rgba(255, 255, 253, .76), rgba(255, 255, 253, .06)),
    linear-gradient(90deg, var(--navy), var(--teal));
  clip-path: polygon(8% 0, 90% 8%, 72% 42%, 98% 66%, 54% 100%, 0 82%, 21% 47%);
  transform: rotate(3deg);
}

.post-image[class~="2025-05-17-todd-mcgowan-hegel-refuting-ayn-rand"]::after {
  --art-radius: 3px;
  right: 20%;
  top: 19%;
  width: 7%;
  height: 68%;
  background: linear-gradient(180deg, var(--red), var(--navy-deep));
  clip-path: polygon(35% 0, 100% 0, 58% 39%, 92% 39%, 38% 100%, 0 100%, 43% 52%, 9% 52%);
  transform: rotate(-5deg);
}

.post-image[class~="2025-05-25-what-is-critical-reading-zizek"],
.study-post .post-image[class~="2025-05-25-what-is-critical-reading-zizek"] {
  --note-before-hover: translate(5px, -3px);
  --note-after-hover: translate(-5px, 4px) rotate(10deg);
  background:
    linear-gradient(110deg, rgba(255, 255, 255, .44), transparent 33%),
    repeating-linear-gradient(90deg, rgba(16, 39, 90, .08) 0 6%, transparent 6% 15%),
    linear-gradient(135deg, var(--sky), var(--paper));
}

.post-image[class~="2025-05-25-what-is-critical-reading-zizek"]::before {
  --art-radius: 999px 12px 999px 12px;
  left: 12%;
  top: 20%;
  width: 72%;
  height: 23%;
  background: linear-gradient(90deg, var(--teal), rgba(22, 124, 120, .12));
}

.post-image[class~="2025-05-25-what-is-critical-reading-zizek"]::after {
  --art-radius: 5px;
  right: 19%;
  bottom: 18%;
  width: 22%;
  height: 40%;
  background: linear-gradient(180deg, var(--red), var(--gold));
  clip-path: polygon(0 13%, 76% 0, 100% 19%, 54% 100%, 9% 82%);
  transform: rotate(10deg);
}

.post-image[class~="2025-10-25-relationship-between-life-expectancy-and-vulnerability"],
.study-post .post-image[class~="2025-10-25-relationship-between-life-expectancy-and-vulnerability"] {
  --note-before-hover: translateY(-5px) scaleY(1.02);
  --note-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 20% 18%, rgba(255, 255, 255, .34), transparent 24%),
    linear-gradient(180deg, var(--cream) 0 46%, var(--sage) 46% 100%);
}

.post-image[class~="2025-10-25-relationship-between-life-expectancy-and-vulnerability"]::before {
  --art-radius: 7px;
  left: 24%;
  top: 14%;
  width: 34%;
  height: 72%;
  background: linear-gradient(180deg, var(--gold), rgba(190, 134, 38, .26), var(--navy));
  clip-path: polygon(0 0, 100% 0, 66% 42%, 100% 100%, 0 100%, 34% 42%);
}

.post-image[class~="2025-10-25-relationship-between-life-expectancy-and-vulnerability"]::after {
  --art-radius: 50%;
  right: 16%;
  bottom: 17%;
  width: 23%;
  height: 31%;
  background:
    radial-gradient(ellipse at 42% 35%, rgba(255, 255, 255, .22), transparent 18%),
    var(--red);
}

.post-image[class~="2025-10-29-jersey-flight-refutes-christianity"],
.study-post .post-image[class~="2025-10-29-jersey-flight-refutes-christianity"] {
  --note-before-hover: translate(5px, -4px) rotate(-2deg);
  --note-after-hover: translate(-5px, 4px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .38), transparent 33%),
    linear-gradient(90deg, var(--paper), var(--cream));
}

.post-image[class~="2025-10-29-jersey-flight-refutes-christianity"]::before {
  --art-radius: 9px;
  left: 14%;
  top: 16%;
  width: 58%;
  height: 62%;
  background:
    linear-gradient(110deg, rgba(255, 255, 253, .78), rgba(255, 255, 253, .2)),
    linear-gradient(90deg, var(--sky), var(--rose));
  border-left: 5px solid rgba(23, 56, 120, .76);
  transform: rotate(-2deg);
}

.post-image[class~="2025-10-29-jersey-flight-refutes-christianity"]::after {
  --art-radius: 999px;
  right: 13%;
  top: 43%;
  width: 56%;
  height: 11%;
  background: linear-gradient(90deg, var(--red), rgba(173, 61, 44, .46));
}

.post-image[class~="2025-10-31-deutsch-critiques-inductionism"],
.study-post .post-image[class~="2025-10-31-deutsch-critiques-inductionism"] {
  --note-before-hover: translate(4px, -4px) skewX(-4deg);
  --note-after-hover: translate(-5px, 5px);
  background:
    radial-gradient(ellipse at 78% 18%, rgba(255, 255, 255, .36), transparent 26%),
    linear-gradient(160deg, var(--paper) 0 28%, var(--sage) 28% 100%);
}

.post-image[class~="2025-10-31-deutsch-critiques-inductionism"]::before {
  --art-radius: 5px 5px 18px 18px;
  left: 14%;
  top: 22%;
  width: 66%;
  height: 54%;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 253, .7) 0 8%, transparent 8% 18%),
    linear-gradient(90deg, rgba(190, 134, 38, .36), var(--gold));
  clip-path: polygon(7% 0, 100% 17%, 78% 100%, 0 79%);
  transform: skewX(-4deg);
}

.post-image[class~="2025-10-31-deutsch-critiques-inductionism"]::after {
  --art-radius: 6px;
  right: 13%;
  bottom: 19%;
  width: 18%;
  height: 22%;
  background: var(--red);
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
}

.post-image[class~="2025-11-04-deutsch-explains-popper-epistemology"],
.study-post .post-image[class~="2025-11-04-deutsch-explains-popper-epistemology"] {
  --note-before-hover: translate(-4px, -5px) rotate(-5deg);
  --note-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 83% 76%, rgba(190, 134, 38, .18), transparent 24%),
    linear-gradient(145deg, var(--cream), var(--paper));
}

.post-image[class~="2025-11-04-deutsch-explains-popper-epistemology"]::before {
  --art-radius: 8px;
  left: 17%;
  top: 15%;
  width: 48%;
  height: 66%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 253, .55) 0 8%, transparent 8% 18%),
    linear-gradient(160deg, var(--teal), var(--navy));
  transform: rotate(-5deg);
}

.post-image[class~="2025-11-04-deutsch-explains-popper-epistemology"]::after {
  --art-radius: 999px 999px 8px 8px;
  right: 16%;
  bottom: 18%;
  width: 22%;
  height: 36%;
  background: linear-gradient(180deg, var(--red), rgba(173, 61, 44, .4));
}

.post-image[class~="2025-11-15-deutsch-criteria-for-reality"],
.study-post .post-image[class~="2025-11-15-deutsch-criteria-for-reality"] {
  --note-before-hover: translate(5px, -4px);
  --note-after-hover: translate(-4px, 5px) rotate(6deg);
  background:
    radial-gradient(circle at 12% 82%, rgba(190, 134, 38, .17), transparent 24%),
    linear-gradient(135deg, var(--navy-deep), var(--sky));
}

.post-image[class~="2025-11-15-deutsch-criteria-for-reality"]::before {
  --art-radius: 50%;
  left: -18%;
  top: -21%;
  width: 74%;
  height: 96%;
  border: 7px solid rgba(255, 255, 253, .72);
  background: transparent;
}

.post-image[class~="2025-11-15-deutsch-criteria-for-reality"]::after {
  --art-radius: 4px;
  right: 20%;
  top: 31%;
  width: 12%;
  height: 43%;
  background: linear-gradient(180deg, var(--red), var(--gold));
  transform: rotate(6deg);
}

.post-image[class~="2025-11-20-is-software-real"],
.study-post .post-image[class~="2025-11-20-is-software-real"] {
  --note-before-hover: translate(5px, -4px) rotate(4deg);
  --note-after-hover: translate(-5px, 4px);
  background:
    linear-gradient(115deg, rgba(16, 39, 90, .16), transparent 32%),
    linear-gradient(145deg, var(--paper) 0 52%, var(--sky) 52% 100%);
}

.post-image[class~="2025-11-20-is-software-real"]::before {
  --art-radius: 10px;
  left: 11%;
  top: 20%;
  width: 68%;
  height: 46%;
  background:
    linear-gradient(120deg, rgba(255, 255, 253, .7), rgba(255, 255, 253, .12)),
    linear-gradient(90deg, rgba(23, 56, 120, .08), rgba(22, 124, 120, .24));
  border-bottom: 6px solid rgba(16, 39, 90, .65);
  transform: rotate(4deg);
}

.post-image[class~="2025-11-20-is-software-real"]::after {
  --art-radius: 999px;
  left: 18%;
  bottom: 24%;
  width: 62%;
  height: 8%;
  background: linear-gradient(90deg, var(--navy-deep), var(--teal), var(--red));
}

.post-image[class~="2025-11-24-virtual-reality"],
.study-post .post-image[class~="2025-11-24-virtual-reality"] {
  --note-before-hover: translate(-5px, -4px) rotate(-8deg);
  --note-after-hover: translate(5px, 5px) scale(1.03);
  background:
    conic-gradient(from 218deg at 72% 44%, rgba(255, 255, 253, .32), transparent 16%, rgba(22, 124, 120, .38), transparent 46%),
    linear-gradient(135deg, var(--navy-deep), var(--teal) 58%, var(--paper));
}

.post-image[class~="2025-11-24-virtual-reality"]::before {
  --art-radius: 12px 999px 999px 12px;
  left: 14%;
  top: 18%;
  width: 52%;
  height: 46%;
  background:
    linear-gradient(130deg, rgba(255, 255, 253, .5), rgba(255, 255, 253, .08)),
    var(--sky);
  transform: rotate(-8deg);
}

.post-image[class~="2025-11-24-virtual-reality"]::after {
  --art-radius: 999px;
  right: 13%;
  bottom: 17%;
  width: 39%;
  height: 29%;
  background: radial-gradient(ellipse at 40% 32%, rgba(255, 255, 253, .42), transparent 20%, rgba(190, 134, 38, .72) 21% 100%);
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-1"],
.study-post .post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-1"] {
  --note-before-hover: translate(4px, -5px) rotate(8deg);
  --note-after-hover: translate(-5px, 4px);
  background:
    radial-gradient(circle at 88% 74%, rgba(173, 61, 44, .16), transparent 20%),
    linear-gradient(135deg, var(--paper), var(--cream));
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-1"]::before {
  --art-radius: 50%;
  left: -12%;
  top: 12%;
  width: 64%;
  height: 76%;
  background: conic-gradient(from 28deg, var(--navy) 0 23%, var(--teal) 23% 49%, var(--gold) 49% 72%, var(--sky) 72% 100%);
  transform: rotate(8deg);
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-1"]::after {
  --art-radius: 50%;
  right: 16%;
  top: 22%;
  width: 13%;
  height: 18%;
  background: var(--red);
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-2"],
.study-post .post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-2"] {
  --note-before-hover: translate(-5px, -4px) rotate(11deg);
  --note-after-hover: translate(5px, 4px);
  background:
    radial-gradient(ellipse at 76% 18%, rgba(255, 255, 255, .32), transparent 24%),
    linear-gradient(135deg, var(--sage), var(--sky));
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-2"]::before {
  --art-radius: 50%;
  left: 7%;
  top: 7%;
  width: 62%;
  height: 82%;
  border: 8px solid rgba(255, 255, 253, .65);
  border-right-color: rgba(23, 56, 120, .82);
  border-bottom-color: rgba(22, 124, 120, .76);
  background: transparent;
  transform: rotate(11deg);
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-2"]::after {
  --art-radius: 6px;
  right: 14%;
  top: 38%;
  width: 30%;
  height: 14%;
  background: linear-gradient(90deg, var(--gold), var(--red));
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-3"],
.study-post .post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-3"] {
  --note-before-hover: translate(5px, -4px);
  --note-after-hover: translate(-5px, 5px) rotate(-4deg);
  background:
    linear-gradient(105deg, var(--sky) 0 37%, var(--paper) 37% 64%, var(--sage) 64% 100%);
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-3"]::before {
  --art-radius: 999px 18px 18px 999px;
  left: 9%;
  top: 19%;
  width: 42%;
  height: 58%;
  background:
    linear-gradient(120deg, rgba(255, 255, 253, .26), transparent 35%),
    var(--navy);
}

.post-image[class~="2025-12-15-universality-and-the-limits-of-dsrp-theory-part-3"]::after {
  --art-radius: 18px 999px 999px 18px;
  right: 9%;
  top: 22%;
  width: 39%;
  height: 52%;
  background:
    linear-gradient(130deg, rgba(255, 255, 253, .36), transparent 36%),
    var(--gold);
  border-left: 7px solid var(--red);
  transform: rotate(-4deg);
}

.post-image[class~="2025-12-24-a-conversation-with-derek-cabrera-about-dsrp-ontology"],
.study-post .post-image[class~="2025-12-24-a-conversation-with-derek-cabrera-about-dsrp-ontology"] {
  --note-before-hover: translate(4px, -5px);
  --note-after-hover: translate(-5px, 4px);
  background:
    radial-gradient(ellipse at 23% 20%, rgba(255, 255, 255, .34), transparent 24%),
    linear-gradient(180deg, var(--paper), var(--sky));
}

.post-image[class~="2025-12-24-a-conversation-with-derek-cabrera-about-dsrp-ontology"]::before {
  --art-radius: 10px 10px 24px 24px;
  left: 17%;
  top: 13%;
  width: 66%;
  height: 72%;
  background:
    linear-gradient(105deg, transparent 0 32%, rgba(255, 255, 253, .52) 32% 48%, transparent 48% 100%),
    linear-gradient(180deg, var(--navy-deep), var(--teal));
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
}

.post-image[class~="2025-12-24-a-conversation-with-derek-cabrera-about-dsrp-ontology"]::after {
  --art-radius: 7px;
  right: 15%;
  top: 17%;
  width: 28%;
  height: 17%;
  background: linear-gradient(90deg, var(--red), var(--cream));
}

.post-image[class~="2026-04-22-nietzche-war-tactics"],
.study-post .post-image[class~="2026-04-22-nietzche-war-tactics"] {
  --note-before-hover: translate(-5px, -3px) rotate(-3deg);
  --note-after-hover: translate(5px, 5px);
  background:
    radial-gradient(circle at 82% 20%, rgba(190, 134, 38, .24), transparent 22%),
    linear-gradient(155deg, var(--navy-deep) 0 58%, var(--teal) 58% 100%);
}

.post-image[class~="2026-04-22-nietzche-war-tactics"]::before {
  --art-radius: 4px 16px 16px 4px;
  left: 8%;
  top: 48%;
  width: 70%;
  height: 24%;
  background: linear-gradient(90deg, var(--gold), rgba(190, 134, 38, .34));
  clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
  transform: rotate(-3deg);
}

.post-image[class~="2026-04-22-nietzche-war-tactics"]::after {
  --art-radius: 4px;
  right: 14%;
  top: 24%;
  width: 13%;
  height: 50%;
  background: linear-gradient(180deg, var(--red), var(--navy-deep));
}

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

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

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

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

  .note-card:hover .post-image::before,
  .note-card:hover .post-image::after,
  .study-post:hover .post-image::before,
  .study-post:hover .post-image::after {
    transform: none;
  }
}