/* ============================================
   JENNY FIGMENT — Home page uplift layer
   The scrapbook treatments that only the home page uses: the taped
   "something for everyone" cards, the bookshelf of taped covers, and the
   featured Lucky Penny note.

   Split out of uplift.css so the other fifteen pages stop downloading it.
   Loaded after uplift.css on index.html, which is the order these rules were
   written in — several of them override .path-card and .mini-book-card there.
   ============================================ */

/* ---------- 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; }
}

/* 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; }
}

/* Featured book title set from the Lucky Penny cover lettering instead of type. */
.paint-note--penny h2.paint-note__title {
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  line-height: 0;
  text-shadow: none;
}

.paint-note__wordmark {
  display: block;
  width: clamp(13rem, 11rem + 14vw, 20rem);
  height: auto;
  max-width: 100%;
  filter: drop-shadow(1px 2px 0 rgba(255, 255, 255, 0.85));
}