/* ============================================
   JENNY FIGMENT — Kid-facing uplift layer
   Pastel color blocks, crayon accents, playful motion.
   Loaded after components.css on every page.
   ============================================ */

:root {
  /* Pastel band palette — soft enough for body copy to sit on */
  --pastel-pink: #ffeaf3;
  --pastel-blue: #e6f2ff;
  --pastel-green: #eaf7e7;
  --pastel-yellow: #fff6dc;
  --pastel-lilac: #f3ecff;

  /* Saturated crayon versions for rules, dots and doodles */
  --crayon-pink: #f2609b;
  --crayon-blue: #5b93e0;
  --crayon-green: #6fb469;
  --crayon-yellow: #f0b429;
}

/* ---------- Pastel section bands ---------- */
.band-pink,
.band-blue,
.band-green,
.band-yellow,
.band-lilac { background-image: none; }

.band-pink   { background-color: var(--pastel-pink); }
.band-blue   { background-color: var(--pastel-blue); }
.band-green  { background-color: var(--pastel-green); }
.band-yellow { background-color: var(--pastel-yellow); }
.band-lilac  { background-color: var(--pastel-lilac); }

/* ---------- Scrapbook paper section transitions (site-wide) ---------- */
.paper-band {
  position: relative;
  overflow: hidden;
}

.paper-band > .container {
  position: relative;
  z-index: 1;
}

.paper-rules {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 2.1rem, rgba(91, 147, 224, 0.16) 2.1rem 2.2rem),
    linear-gradient(90deg, transparent 0 3.5rem, rgba(242, 96, 155, 0.3) 3.5rem 3.62rem, transparent 3.62rem);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 70%, transparent 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 70%, transparent 90%, transparent);
}

.paper-torn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2rem;
  z-index: 2;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.paper-torn--cream        { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23f5e8df'/%3E%3C/svg%3E"); }
.paper-torn--cream-light  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23fffaf7'/%3E%3C/svg%3E"); }
.paper-torn--yellow       { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23fff6dc'/%3E%3C/svg%3E"); }
.paper-torn--cream-paper  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C30,2 55,22 80,12 C110,2 130,20 160,10 C195,0 215,18 245,8 C275,0 300,16 335,6 C365,0 385,18 420,8 C450,0 470,20 505,10 C535,0 560,22 595,12 C625,2 645,20 680,10 C710,0 735,18 770,8 C800,0 820,16 855,6 C885,0 910,20 945,10 C975,0 995,18 1030,8 C1060,0 1085,22 1120,12 C1150,2 1175,16 1200,8 L1200,28 L0,28 Z' fill='%23fdf8f3'/%3E%3C/svg%3E"); }

/* ---------- Crayon rule under section titles ---------- */
.crayon-underline {
  position: relative;
  padding-bottom: var(--space-4);
}

.crayon-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 7.5rem;
  height: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%23f2609b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.crayon-underline--blue::after   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%235b93e0' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.crayon-underline--green::after  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%236fb469' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.crayon-underline--yellow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%23f0b429' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }

.crayon-underline.text-center::after,
.text-center .crayon-underline::after {
  left: 50%;
  transform: translateX(-50%);
}

/* Stroke pinned under a single word inside a heading */
.crayon-word {
  position: relative;
  display: inline-block;
}

.crayon-word::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.18em;
  height: 0.15em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C18,2 32,10 48,5 C64,0 78,9 94,4 C104,1 112,6 118,4' fill='none' stroke='%23f2609b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ---------- Doodle divider between bands ---------- */
.doodle-divider {
  height: 1.75rem;
  border: 0;
  margin: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M0,14 C20,4 40,20 60,12 C80,4 100,20 120,12 C140,4 160,20 180,12 C200,4 220,20 240,12' fill='none' stroke='%23f2609b' stroke-width='3' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 240px 24px;
  background-position: center;
}

/* ---------- Confetti dots as a corner accent ---------- */
.dot-confetti {
  position: relative;
  overflow: hidden;
}

.dot-confetti::before {
  content: '';
  position: absolute;
  top: -1.5rem;
  right: -1.5rem;
  width: 11rem;
  height: 11rem;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--crayon-pink) 46%, transparent 47%),
    radial-gradient(circle, var(--crayon-blue) 46%, transparent 47%),
    radial-gradient(circle, var(--crayon-yellow) 46%, transparent 47%);
  background-size: 14px 14px, 10px 10px, 12px 12px;
  background-position: 20px 30px, 70px 12px, 46px 78px;
  background-repeat: no-repeat;
  opacity: 0.55;
}

/* ---------- Playful motion ---------- */
@keyframes kid-wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-1.6deg); }
  75%  { transform: rotate(1.6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes kid-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.wiggle-hover {
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.wiggle-hover:hover,
.wiggle-hover:focus-visible {
  animation: kid-wiggle 480ms var(--ease-smooth);
}

.pop-press:active {
  animation: kid-pop 220ms var(--ease-bounce);
}

/* Existing components get the same playfulness without markup changes */
.mini-book-card:hover,
.book-card:hover {
  transform: translateY(-6px) rotate(-1deg);
}

.path-card {
  transition: transform var(--duration-normal) var(--ease-bounce),
              box-shadow var(--duration-normal) var(--ease-smooth);
}

.path-card:hover {
  transform: translateY(-4px) rotate(0.6deg);
  box-shadow: var(--shadow-md);
}

/* Media kit thumbnail cards: the image inside already carries its own shadow,
   so the card frame just doubles up. Keep the lift, drop the box. */
.path-card--flat,
.path-card--flat:hover,
.path-card--flat:focus-visible {
  background: none;
  border: 0;
  box-shadow: none;
}

.btn:active,
.btn-kids-zone:active,
.purchase-btn:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .wiggle-hover:hover,
  .wiggle-hover:focus-visible,
  .pop-press:active { animation: none; }
  .mini-book-card:hover,
  .book-card:hover,
  .path-card:hover { transform: none; }
}

/* ---------- Homepage "something for everyone": taped scrapbook cards ----------
   Scoped to .home-paths so the .path-card reuse on the media kit page is untouched.
   The cards used to be pastel-blue on a pastel-blue band — same colour, so the
   Kids card vanished into its own section. White paper fixes that outright. */
.home-paths .path-card {
  position: relative;
  overflow: visible;
  background-color: #fffdf9;
  /* faint ruled paper, offset so the first line falls under the heading */
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 1.85rem,
    rgba(91, 147, 224, 0.12) 1.85rem 1.92rem
  );
  background-position: 0 3rem;
  border: 1px solid rgba(43, 22, 27, 0.1);
  border-radius: 3px 10px 10px 3px;
  padding-top: var(--space-8);
  box-shadow:
    0 12px 22px -12px rgba(43, 22, 27, 0.34),
    0 2px 5px rgba(43, 22, 27, 0.12);
  transform: rotate(var(--tilt, -1.4deg));
}

/* Masking tape — same recipe as the taped covers on the bookshelf below */
.home-paths .path-card::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 50%;
  width: 5.2rem;
  height: 1.5rem;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape, rgba(126, 197, 226, 0.62));
  border-left: 1px dashed rgba(255, 255, 255, 0.55);
  border-right: 1px dashed rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(43, 22, 27, 0.14);
  z-index: 2;
}

.home-paths .path-card--kids { --tilt: -1.4deg; --tape: rgba(126, 197, 226, 0.62); }
.home-paths .path-card--adults { --tilt: 1.2deg; --tape: rgba(157, 202, 156, 0.62); }
.home-paths .path-card--adults::before { transform: translateX(-50%) rotate(5deg); }

.home-paths .path-card:hover,
.home-paths .path-card:focus-within {
  transform: rotate(0deg) translateY(-6px);
  box-shadow:
    0 20px 30px -14px rgba(43, 22, 27, 0.36),
    0 3px 8px rgba(43, 22, 27, 0.14);
}

.home-paths .path-card a::after {
  content: " →";
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease-bounce);
}

.home-paths .path-card:hover a::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  /* keep the resting tilt (static, not motion) — just don't move on hover */
  .home-paths .path-card:hover,
  .home-paths .path-card:focus-within { transform: rotate(var(--tilt, -1.4deg)); }
  .home-paths .path-card:hover a::after { transform: none; }
}

/* ---------- Section note under the visit detail cards ---------- */
.visits-detail-note {
  max-width: 62ch;
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--burgundy-warm);
}

/* Four titles on the shelf now */
@media (min-width: 48em) {
  .book-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .book-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ---------- Bookshelf: covers taped up, full art, no card box ---------- */
.book-shelf--covers {
  column-gap: var(--space-6);
  row-gap: 3.5rem;
  align-items: end;
  padding-top: var(--space-5);
}

.book-shelf--covers .mini-book-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
  transform: rotate(var(--tilt, 0deg));
  transition: transform var(--duration-normal) var(--ease-bounce);
  --ink: var(--crayon-blue, #4a90b8);
}

.book-shelf--covers .mini-book-card:nth-child(4n + 2) { --ink: var(--crayon-yellow, #d99b23); }
.book-shelf--covers .mini-book-card:nth-child(4n + 3) { --ink: var(--crayon-pink, #d1698f); }
.book-shelf--covers .mini-book-card:nth-child(4n + 4) { --ink: var(--crayon-green, #6d9c6c); }

.book-shelf--covers .mini-book-card:nth-child(4n + 1) { --tilt: -1.6deg; }
.book-shelf--covers .mini-book-card:nth-child(4n + 2) { --tilt: 1.1deg; }
.book-shelf--covers .mini-book-card:nth-child(4n + 3) { --tilt: -0.8deg; }
.book-shelf--covers .mini-book-card:nth-child(4n + 4) { --tilt: 1.7deg; }

.book-shelf--covers .mini-book-card:hover,
.book-shelf--covers .mini-book-card:focus-visible {
  transform: rotate(0deg) translateY(-10px) scale(1.03);
  box-shadow: none;
}

/* The cover itself: full art, book-like edge, a strip of tape at the top */
.shelf-cover {
  display: block;
  position: relative;
  margin: 0 auto var(--space-5);
  max-width: 15rem;
  filter: drop-shadow(0 14px 12px rgba(43, 22, 27, 0.16));
  transition: filter var(--duration-normal) var(--ease-smooth);
}

.book-shelf--covers .mini-book-card:hover .shelf-cover,
.book-shelf--covers .mini-book-card:focus-visible .shelf-cover {
  filter: drop-shadow(0 26px 18px rgba(43, 22, 27, 0.22));
}

.shelf-cover::before {
  /* tape */
  content: "";
  position: absolute;
  top: -0.85rem;
  left: 50%;
  width: 4.6rem;
  height: 1.5rem;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape, rgba(126, 197, 226, 0.62));
  border-left: 1px dashed rgba(255, 255, 255, 0.55);
  border-right: 1px dashed rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(43, 22, 27, 0.14);
  z-index: 2;
}

.book-shelf--covers .mini-book-card:nth-child(4n + 2) .shelf-cover::before {
  --tape: rgba(246, 200, 95, 0.62);
  transform: translateX(-50%) rotate(5deg);
}
.book-shelf--covers .mini-book-card:nth-child(4n + 3) .shelf-cover::before {
  --tape: rgba(233, 148, 174, 0.6);
  transform: translateX(-52%) rotate(-7deg);
}
.book-shelf--covers .mini-book-card:nth-child(4n + 4) .shelf-cover::before {
  --tape: rgba(157, 202, 156, 0.62);
  transform: translateX(-48%) rotate(3deg);
}

.shelf-cover .mini-book-card__thumb,
.shelf-cover .art-placeholder--cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  /* Force every cover into the same box regardless of its source file's
     own proportions — cover-lucky-penny.png is a wider/shorter image
     (1226x1604) than the other three (~691x1024), which otherwise made
     it render visibly shorter in the grid. */
  aspect-ratio: 691 / 1024;
  object-fit: cover;
  margin: 0;
  border-radius: 2px 6px 6px 2px;
  background: #fff;
  box-shadow:
    inset 3px 0 0 rgba(255, 255, 255, 0.35),
    0 10px 20px -8px rgba(43, 22, 27, 0.38),
    0 2px 5px rgba(43, 22, 27, 0.16);
}

/* spine highlight + page edge, drawn over the art */
.shelf-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px 6px 6px 2px;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(43, 22, 27, 0.28) 0,
      rgba(43, 22, 27, 0.06) 3px,
      rgba(255, 255, 255, 0.34) 5px,
      rgba(255, 255, 255, 0) 12px),
    linear-gradient(270deg, rgba(43, 22, 27, 0.14) 0, rgba(43, 22, 27, 0) 6px);
  z-index: 1;
}

.shelf-cover .art-placeholder--cover {
  aspect-ratio: 691 / 1024;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4);
  background:
    repeating-linear-gradient(135deg, rgba(43, 22, 27, 0.045) 0 8px, transparent 8px 16px),
    var(--pastel-blue, #e7f2f8);
  border: 2px dashed rgba(43, 22, 27, 0.18);
  color: var(--burgundy-warm, #6b4a4f);
}

.shelf-cover .art-placeholder--cover .art-placeholder__title {
  font-family: var(--font-kids);
  font-size: var(--text-lg);
  line-height: 1.15;
}

.shelf-cover .art-placeholder--cover .art-placeholder__hint {
  font-size: var(--text-sm);
  opacity: 0.75;
}

.book-shelf--covers .mini-book-card h3 {
  font-family: var(--font-kids);
  font-size: var(--text-lg);
  line-height: 1.2;
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 auto var(--space-2);
  padding-bottom: 0.35rem;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0 3px;
  transition: background-size var(--duration-normal) var(--ease-smooth);
}

.book-shelf--covers .mini-book-card:hover h3,
.book-shelf--covers .mini-book-card:focus-visible h3 {
  background-size: 72% 3px;
}

.book-shelf--covers .mini-book-card p {
  font-size: var(--text-sm);
  line-height: 1.5;
  text-wrap: pretty;
  max-width: 22ch;
  margin-inline: auto;
}

.shelf-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: var(--space-3);
  font-family: var(--font-kids);
  font-size: var(--text-sm);
  color: var(--ink);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--duration-normal) var(--ease-smooth),
              transform var(--duration-normal) var(--ease-bounce);
}

.book-shelf--covers .mini-book-card:hover .shelf-cta,
.book-shelf--covers .mini-book-card:focus-visible .shelf-cta {
  opacity: 1;
  transform: translateY(0);
}

.shelf-cta::after {
  content: "\2192";
}

/* Touch devices never hover, so the CTA has to be visible from the start */
@media (hover: none) {
  .shelf-cta { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .book-shelf--covers .mini-book-card:hover,
  .book-shelf--covers .mini-book-card:focus-visible { transform: rotate(var(--tilt, 0deg)); }
  .shelf-cta { opacity: 1; transform: none; }
}

/* ---------- Hero featured book card: scrapbook page, cover-forward ----------
   Structure taken from the design; colours kept on the current Lucky Penny
   palette (ember #c9601f, magenta #c8347f, cream #fdf5e8, night-violet
   shadows) and the tape kept as the bookshelf yellow. */
.paint-note--penny {
  --penny-pink: #b32a70;
  --penny-cta: #c8347f;
  --penny-orange: #c9601f;
  padding: var(--space-7, 2.75rem) var(--space-6);
  border: 0;
  border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, rgba(43, 22, 27, 0.035) 0 1px, transparent 1px 1.75rem),
    linear-gradient(180deg, #fffdf6, #fdf5e8);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 44px -14px rgba(36, 21, 72, 0.36),
    0 3px 10px rgba(36, 21, 72, 0.14);
  transform: rotate(-0.8deg);
}

/* torn bottom edge of the note */
.paint-note--penny::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 10px;
  background: inherit;
  -webkit-mask-image: radial-gradient(7px 10px at 8px 0, transparent 98%, #000 100%);
  mask-image: radial-gradient(7px 10px at 8px 0, transparent 98%, #000 100%);
  -webkit-mask-size: 16px 10px;
  mask-size: 16px 10px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

/* tape strip, matching the bookshelf covers */
.paint-note--penny::before {
  top: -0.7rem;
  left: 1.6rem;
  width: 5.25rem;
  height: 1.4rem;
  border-radius: 1px;
  background: rgba(246, 200, 95, 0.62);
  border-left: 1px dashed rgba(255, 255, 255, 0.6);
  border-right: 1px dashed rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 2px rgba(43, 22, 27, 0.14);
  transform: rotate(-5deg);
}

.paint-note--penny .paint-note__layout {
  position: relative;
  gap: var(--space-6);
}

@media (min-width: 36em) {
  .paint-note--penny .paint-note__layout {
    grid-template-columns: 1fr minmax(9rem, 11.5rem);
    align-items: center;
  }
}

.paint-note__label--new {
  background: var(--penny-pink);
  box-shadow: 0 3px 0 rgba(36, 21, 72, 0.18);
  transform: rotate(-1.5deg);
  white-space: nowrap;
  max-width: none;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  padding: 0.6rem 1.35rem;
}

.paint-note--penny h2 {
  font-family: var(--font-kids);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem);
  line-height: 1.02;
  color: var(--penny-orange);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85);
}

.paint-note--penny .paint-note__body {
  position: relative;
  z-index: 3;
}

.paint-note--penny .paint-note__body p {
  color: var(--burgundy-warm);
  text-wrap: pretty;
  max-width: 34ch;
}

.paint-note--penny .paint-note__body p.paint-note__label--new {
  max-width: none;
  width: max-content;
  position: relative;
  z-index: 3;
  white-space: nowrap;
  text-wrap: nowrap;
  max-inline-size: none;
}

.paint-note__meta {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(107, 84, 91, 0.72) !important;
  margin-bottom: var(--space-4) !important;
}

.paint-note--penny .paint-note__cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  position: relative;
  z-index: 3;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-kids);
  font-size: var(--text-base);
  color: var(--penny-cta);
  padding-bottom: 0.25rem;
  background-image: none;
  transition: color var(--duration-fast);
}

.paint-note--penny .paint-note__cta::after {
  content: "\2192";
  transition: transform var(--duration-normal) var(--ease-bounce);
}

.paint-note--penny .paint-note__cta:hover {
  color: var(--penny-orange);
  text-decoration: none;
}

.paint-note--penny .paint-note__cta:hover::after {
  transform: translateX(4px);
}

/* cover: bigger, book-like, with spine and page edge */
.paint-note--penny .paint-note__cover-wrap {
  position: relative;
  overflow: visible;
  /* Single-column layout below 36em has no grid track to size the cover, and
     `max-width: none` on .paint-note__cover (below) drops the base 11rem cap —
     without this the cover fills the whole card. The 36em block resets it. */
  width: min(11rem, 58%);
  margin-inline: auto;
  border-radius: 2px 7px 7px 2px;
  transform: rotate(2.5deg);
  box-shadow:
    0 16px 26px -12px rgba(36, 21, 72, 0.44),
    0 3px 8px rgba(36, 21, 72, 0.2);
}

.paint-note--penny .paint-note__cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(43, 22, 27, 0.3) 0,
      rgba(43, 22, 27, 0.07) 3px,
      rgba(255, 255, 255, 0.36) 5px,
      rgba(255, 255, 255, 0) 13px),
    linear-gradient(270deg, rgba(43, 22, 27, 0.15) 0, rgba(43, 22, 27, 0) 7px);
  z-index: 2;
}

.paint-note--penny .paint-note__cover-wrap:hover {
  transform: rotate(0.5deg) translateY(-5px);
  box-shadow:
    0 24px 32px -14px rgba(36, 21, 72, 0.48),
    0 4px 10px rgba(36, 21, 72, 0.22);
}

.paint-note--penny .paint-note__cover {
  width: 100%;
  max-width: none;
  border-radius: inherit;
}

/* Two columns: the grid track sizes the cover, so drop the narrow-screen cap.
   Must come *after* the .paint-note__cover-wrap rule above — media queries add
   no specificity, so source order is what settles the tie. */
@media (min-width: 36em) {
  .paint-note--penny .paint-note__cover-wrap {
    width: auto;
    margin-inline: 0;
  }
}

/* Narrow: cover sits between the description and the CTA, so the link reads as
   the last thing in the card. display:contents lifts the body's children into
   the layout grid so the cover can be ordered between them; row-gap goes to 0
   because those children already carry their own margins. */
@media (max-width: 35.999em) {
  .paint-note--penny .paint-note__layout { row-gap: 0; }

  .paint-note--penny .paint-note__body { display: contents; }

  .paint-note--penny .paint-note__cover-wrap {
    order: 1;
    margin-block: var(--space-2) var(--space-5);
  }

  .paint-note--penny .paint-note__cta { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .paint-note--penny .paint-note__cover-wrap:hover { transform: rotate(2.5deg); }
  .paint-note--penny .paint-note__cta:hover::after { transform: none; }
}