@font-face {
  font-family: 'Bergamasco';
  src: url('fonts/custom/Bergamasco%20Regular%20Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bergamasco';
  src: url('fonts/custom/Bergamasco%20Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bergamasco';
  src: url('fonts/custom/Bergamasco%20Bold%20Italic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cactus Jack';
  src: url('fonts/custom/Cactus%20Jack.otf') format('opentype'); font-display: swap;
}
@font-face {
  font-family: 'Komix';
  src: url('fonts/custom/Komix.ttf') format('truetype'); font-display: swap;
}
@font-face {
  font-family: 'My Handwriting';
  src: url('fonts/custom/My%20handwriting.ttf') format('truetype'); font-display: swap;
}

:root {
  --peach:    #f3d9c8;
  --cream:    #fef6ee;
  --eggshell: #fbf3e0;
  --rose:     #e8919a;
  --mustard:  #e0b04a;
  --sage:     #9ec8a3;
  --terra:    #b85651;
  --plum:     #8a6b9c;
  --ink:      #4a2f24;
  --ink-soft: #6e4a3a;
  --ribbon:   #cf6a72;
  --hotpink:  #e7548e;
  --babypink: #fbd5e0;
  --lavender: #d9c5e8;
  --mint:     #c8ecd4;
  --sky:      #b6dff7;
  --gold:     #daa520;
  --wood:     #8b5e3c;
  --wood-lt:  #c49a6c;
  --lace:     rgba(255,255,255,0.85);
  --dark-bg:  #1a1008;
  --dark-mid: #2a1c10;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
  width: 100%;
  min-height: 100%;
  color: var(--ink);
  font-family: 'Bergamasco', Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
  background-color: var(--dark-bg);
}

/* ═══════════════════════════════════════════
   DARK FLORAL PATTERN BASE
   dense flower pattern on dark background
   ═══════════════════════════════════════════ */
.bow-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('icons/decoblog/dark-floral-delicate.jpeg');
  background-size: 400px 400px;
  background-repeat: repeat;
  opacity: 0.45;
}

/* ═══════════════════════════════════════════
   ARGYLE / DIAMOND PATTERN BASE
   the signature DecoBlog checkerboard — dark
   ═══════════════════════════════════════════ */
.argyle-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(
      120deg,
      transparent,
      transparent 40px,
      rgba(180, 120, 60, 0.25) 40px,
      rgba(180, 120, 60, 0.25) 41px
    ),
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 40px,
      rgba(180, 120, 60, 0.25) 40px,
      rgba(180, 120, 60, 0.25) 41px
    ),
    repeating-linear-gradient(
      120deg,
      rgba(80, 45, 20, 0.7) 0px,
      rgba(45, 25, 10, 0) 80px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(80, 45, 20, 0.7) 0px,
      rgba(45, 25, 10, 0) 80px
    ),
    linear-gradient(
      180deg,
      #2a1c10 0%,
      #1a1008 30%,
      #2a1c10 60%,
      #1a1008 100%
    );
}

/* ═══════════════════════════════════════════
   POLKA-DOT WASH
   ═══════════════════════════════════════════ */
.polka-bg {
  position: fixed;
  inset: 0;
  background-image: url('icons/decoblog/polka-dot.jpeg');
  background-size: 360px 180px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  opacity: 0.06;
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════
   LACE & FLOWER BORDER STRIPS
   real Adobe Stock assets along top and bottom
   ═══════════════════════════════════════════ */
.lace-strip {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 50;
  pointer-events: none;
}
.lace-top {
  top: 0;
  height: 56px;
  background: white;
  -webkit-mask-image: url('icons/decoblog/lace-doily-h.png');
  -webkit-mask-size: auto 56px;
  -webkit-mask-position: center top;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-mode: luminance;
  mask-image: url('icons/decoblog/lace-doily-h.png');
  mask-size: auto 56px;
  mask-position: center top;
  mask-repeat: repeat-x;
  mask-mode: luminance;
  opacity: 0.85;
}
.lace-bottom {
  bottom: 0;
  height: 56px;
  background: white;
  -webkit-mask-image: url('icons/decoblog/lace-simple-h.png');
  -webkit-mask-size: auto 56px;
  -webkit-mask-position: center top;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-mode: luminance;
  mask-image: url('icons/decoblog/lace-simple-h.png');
  mask-size: auto 56px;
  mask-position: center top;
  mask-repeat: repeat-x;
  mask-mode: luminance;
  opacity: 0.8;
}

/* ═══════════════════════════════════════════
   ORNAMENTAL VIEWPORT FRAME
   thick decorative border around everything
   ═══════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 6px;
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px var(--dark-bg),
    inset 0 0 0 4px rgba(218, 165, 32, 0.25),
    0 0 0 2px var(--dark-bg),
    0 0 0 4px rgba(218, 165, 32, 0.15);
  pointer-events: none;
  z-index: 55;
}
body::after {
  content: '';
  position: fixed;
  inset: 14px;
  border: 1.5px dashed rgba(218, 165, 32, 0.25);
  border-radius: 8px;
  pointer-events: none;
  z-index: 55;
}


/* ═══════════════════════════════════════════
   DECO-MODE COLLAGE BORDER
   dense maximalist scattering — mascots,
   flowers, leaves, fairies
   ═══════════════════════════════════════════ */
.deco-border {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.deco-border img {
  position: absolute;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.5));
}

/* ── LEFT COLUMN (top → bottom) ── */
.deco-border .frog-ballerina-39 { top: 0;      left: 0;      width: 120px; }
.deco-border .cutout-1-4        { top: 0;      left: 0;      width: 120px; }
.deco-border .magnolia-33       { top: 8px;    left: 80px;   width: 120px; transform: scaleX(-1); }
.deco-border .rose-35           { top: 18px;   left: 73px;   width: 120px; transform: rotate(50deg); }
.deco-border .ladybug-13        { top: 46px;   left: 42px;   width: 120px; }
.deco-border .dancer-4-20       { top: 92px;   left: 75px;   width: 120px; }
.deco-border .dancer-2-19       { top: 162px;  left: 9px;    width: 120px; }
.deco-border .dancer-1-17       { top: 264px;  left: 91px;   width: 120px; }
.deco-border .dancer-3-31       { top: 289px;  left: -2px;   width: 170px; }
.deco-border .frog-ballerina-26 { top: 365px;  left: 124px;  width: 100px; transform: scaleX(-1); }
.deco-border .dandelion-16      { top: 399px;  left: -3px;   width: 120px; }
.deco-border .key-striped-15    { top: 446px;  left: 54px;   width: 180px; }
.deco-border .formal-1-1        { top: 513px;  left: -2px;   width: 200px; }
.deco-border .dandelion-21      { top: 634px;  left: 99px;   width: 120px; }
.deco-border .key-tied-37       { top: 634px;  left: 129px;  width: 120px; transform: scaleX(-1); }

/* ── RIGHT COLUMN (top → bottom) ── */
.deco-border .dancer-1-37       { top: -45px;  right: 161px; width: 120px; }
.deco-border .carousel-24       { top: 0;      right: -42px; width: 120px; transform: rotate(-50deg); }
.deco-border .dancer-6-40       { top: 30px;   right: 68px;  width: 120px; }
.deco-border .dancer-2-18       { top: 49px;   right: -22px; width: 120px; }
.deco-border .magnolia-6        { top: 92px;   right: 151px; width: 120px; }
.deco-border .cutout-3-14       { top: 137px;  right: 196px; width: 120px; transform: rotate(90deg); }
.deco-border .formal-6-12       { top: 172px;  right: 126px; width: 120px; }
.deco-border .dancer-1-28       { top: 184px;  right: -14px; width: 120px; }
.deco-border .frog-ornate-22    { top: 224px;  right: 46px;  width: 120px; }
.deco-border .frog-ornate-38    { top: 275px;  right: 184px; width: 80px; }
.deco-border .frog-ballerina-5  { top: 324px;  right: 118px; width: 140px; }
.deco-border .formal-4-34       { top: 330px;  right: 203px; width: 60px;  transform: rotate(-30deg); }
.deco-border .magnolia-32       { top: 350px;  right: -24px; width: 120px; }
.deco-border .dancer-4-25       { top: 354px;  right: 47px;  width: 120px; transform: scaleX(-1); }
.deco-border .sunflower-8       { top: 394px;  right: -27px; width: 120px; }
.deco-border .fairies-36        { top: 418px;  right: 1px;   width: 200px; }
.deco-border .rose-38           { top: 425px;  right: 166px; width: 120px; transform: rotate(-30deg); }
.deco-border .dancer-3-27       { top: 500px;  right: -37px; width: 160px; }
.deco-border .magnolia-7        { top: 518px;  right: 152px; width: 120px; }
.deco-border .frog-ornate-23    { top: 538px;  right: 177px; width: 120px; }
.deco-border .dancer-5-3        { top: 567px;  right: 106px; width: 160px; }
.deco-border .dancer-6-43       { top: 683px;  right: 48px;  width: 120px; }
.deco-border .magnolia-44       { top: 694px;  right: -53px; width: 170px; transform: rotate(-50deg); }


@media (max-width: 1080px) {
  .deco-border { display: none; }
}

/* ═══════════════════════════════════════════
   SPARKLE / GLITTER LAYER
   tiny floating stars and diamonds
   ═══════════════════════════════════════════ */
.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  animation: twinkle 2.5s ease-in-out infinite;
}
.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: var(--gold);
}
.sparkle::before {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
  border-radius: 1px;
}
.sparkle::after {
  left: 0; top: 50%;
  width: 100%; height: 2px;
  transform: translateY(-50%);
  border-radius: 1px;
}

.sp1  { top: 8%;   left: 12%;  animation-delay: 0s; }
.sp2  { top: 15%;  right: 18%; animation-delay: 0.4s; }
.sp3  { top: 28%;  left: 22%;  animation-delay: 0.8s; width: 8px; height: 8px; }
.sp4  { top: 35%;  right: 25%; animation-delay: 1.2s; }
.sp5  { top: 48%;  left: 8%;   animation-delay: 0.2s; width: 5px; height: 5px; }
.sp6  { top: 55%;  right: 10%; animation-delay: 1.6s; }
.sp7  { top: 62%;  left: 30%;  animation-delay: 0.6s; width: 4px; height: 4px; }
.sp8  { top: 72%;  right: 20%; animation-delay: 1.0s; width: 7px; height: 7px; }
.sp9  { top: 82%;  left: 15%;  animation-delay: 1.4s; }
.sp10 { top: 90%;  right: 12%; animation-delay: 0.3s; width: 5px; height: 5px; }
.sp11 { top: 42%;  left: 45%;  animation-delay: 1.8s; width: 4px; height: 4px; }
.sp12 { top: 68%;  right: 35%; animation-delay: 2.0s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.0) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none; opacity: 0.4; }
}

/* ═══════════════════════════════════════════
   PAPER-TAG SIDE NAV
   ═══════════════════════════════════════════ */
.tags {
  position: fixed;
  top: 110px;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}
.tag {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 10px 18px 10px 36px;
  background: var(--eggshell);
  color: var(--ink);
  font-family: 'Bergamasco', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
  border: 1.6px solid var(--ink);
  border-left: none;
  box-shadow: 2px 3px 0 rgba(74, 47, 36, 0.25);
  transform: rotate(-2deg);
  transition: transform 0.15s, background 0.15s;
}
.tag:nth-child(2) { transform: rotate(1deg); }
.tag:nth-child(3) { transform: rotate(-1deg); }
.tag:nth-child(4) { transform: rotate(2deg); }
.tag:hover {
  background: var(--rose);
  color: #fff;
  transform: translateX(6px) rotate(0deg);
}
.tag .suit {
  font-family: 'Cactus Jack', serif;
  font-size: 18px;
  line-height: 1;
  color: var(--terra);
}
.tag .suit.diamond { color: var(--rose); }
.tag .suit.spade   { color: var(--ink); }
.tag .suit.heart   { color: var(--terra); }

@media (max-width: 1180px) {
  .tags { display: none; }
}

/* ═══════════════════════════════════════════
   STAGE / PAGE COLUMN
   ═══════════════════════════════════════════ */
.stage {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 32px 100px;
  z-index: 5;
}

/* ═══════════════════════════════════════════
   RIBBON BANNER (hero eyebrow)
   a folded ribbon with tails
   ═══════════════════════════════════════════ */
.ribbon-banner {
  position: relative;
  display: inline-block;
  margin: 0 auto 18px;
  padding: 8px 40px;
  background: var(--ribbon);
  color: #fff;
  font-family: 'My Handwriting', cursive;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 3px 6px rgba(74, 47, 36, 0.25);
}
.ribbon-banner::before,
.ribbon-banner::after {
  content: '';
  position: absolute;
  top: 0;
  width: 20px;
  height: 100%;
}
.ribbon-banner::before {
  left: -20px;
  background: var(--ribbon);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}
.ribbon-banner::after {
  right: -20px;
  background: var(--ribbon);
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* ═══════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════ */
.hero {
  position: relative;
  margin: 32px 0 40px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* open-book spread */
.book {
  position: relative;
  width: min(680px, 100%);
  aspect-ratio: 1.55 / 1;
  background:
    linear-gradient(90deg,
      var(--eggshell) 0 49.4%,
      rgba(74, 47, 36, 0.18) 49.4% 50.6%,
      var(--eggshell) 50.6% 100%);
  border: 2.5px solid var(--ink);
  border-radius: 18px / 22px;
  transform: rotate(-1.2deg);
  box-shadow:
    0 18px 0 -8px rgba(74, 47, 36, 0.18),
    4px 10px 0 rgba(74, 47, 36, 0.35),
    0 0 0 6px var(--dark-mid),
    0 0 0 8px rgba(218, 165, 32, 0.25);
}
.book::before {
  content: '';
  position: absolute;
  inset: 14% 53% 14% 6%;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 28px,
    rgba(74, 47, 36, 0.18) 28px 29px
  );
  pointer-events: none;
}
.book::after {
  content: '';
  position: absolute;
  bottom: 8px; right: 12px;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, transparent 50%, rgba(74, 47, 36, 0.18) 50%);
  border-bottom-right-radius: 14px;
}
.book-title {
  position: absolute;
  top: 22%; right: 6%;
  width: 42%;
  text-align: center;
  transform: rotate(1.4deg);
}
.title-vol {
  display: inline-block;
  position: relative;
  font-family: 'Cactus Jack', serif;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 0.92;
  color: var(--ink);
  padding: 0 12px;
}
.title-vol::before {
  content: '';
  position: absolute;
  inset: 18% -4% 12% -4%;
  background: var(--rose);
  z-index: -1;
  transform: rotate(-2deg);
  clip-path: polygon(2% 8%, 8% 0, 18% 6%, 28% 0, 40% 4%, 52% 0, 65% 6%, 78% 0, 92% 4%, 100% 12%,
                     98% 92%, 90% 100%, 80% 94%, 68% 100%, 55% 92%, 42% 100%, 28% 94%, 16% 100%, 4% 92%, 0 80%);
}
.title-name {
  display: block;
  font-family: 'Cactus Jack', serif;
  font-size: clamp(34px, 5vw, 54px);
  color: var(--terra);
  margin-top: 12px;
}
.subtitle {
  display: block;
  margin-top: 14px;
  font-family: 'Bergamasco', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.meta {
  display: block;
  margin-top: 8px;
  font-family: 'Komix', 'Comic Sans MS', sans-serif;
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
}

/* mascot standing on the book */
.hero-mascot {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 130px;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgba(74, 47, 36, 0.45));
}

/* hero flower accents flanking the book */
.hero-flower {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  filter: drop-shadow(2px 4px 0 rgba(0, 0, 0, 0.4));
}
.hero-flower-l {
  left: -80px; bottom: 40px;
  width: 140px;
  transform: rotate(-12deg);
  opacity: 0.88;
}
.hero-flower-r {
  right: -90px; top: 20px;
  width: 160px;
  transform: rotate(8deg);
  opacity: 0.85;
}

/* watercolor speech bubble */
.bubble {
  position: absolute;
  top: 12px; left: 6%;
  max-width: 240px;
  padding: 22px 22px 26px;
  color: var(--ink);
  font-family: 'My Handwriting', cursive;
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
  background:
    radial-gradient(120% 110% at 30% 30%, rgba(255, 182, 193, 0.6) 0%, rgba(255, 182, 193, 0.4) 60%, transparent 78%),
    radial-gradient(110% 110% at 70% 70%, rgba(251, 213, 224, 0.7) 0%, rgba(251, 213, 224, 0.4) 60%, transparent 80%),
    radial-gradient(140% 140% at 50% 50%, rgba(255, 248, 240, 0.95) 0%, rgba(255, 248, 240, 0.85) 50%, transparent 78%);
  clip-path: polygon(
    8% 12%, 18% 4%, 32% 8%, 46% 2%, 60% 6%, 74% 0%, 88% 6%, 96% 16%,
    100% 30%, 96% 44%, 100% 58%, 92% 72%, 96% 84%, 80% 92%, 74% 100%,
    62% 94%, 50% 100%, 38% 96%, 26% 100%, 14% 92%, 2% 84%, 6% 70%,
    0% 56%, 4% 42%, 0% 28%, 4% 16%);
  transform: rotate(-3deg);
}
.bubble .who {
  display: block;
  font-family: 'Komix', 'Comic Sans MS', sans-serif;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 6px;
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -22px; right: 28px;
  width: 36px; height: 36px;
  background: rgba(255, 248, 240, 0.92);
  clip-path: polygon(0 0, 100% 0, 30% 100%);
  transform: rotate(8deg);
}

@media (max-width: 720px) {
  .book { aspect-ratio: 1.2 / 1; }
  .book::before { inset: 18% 50% 16% 8%; }
  .book-title { width: 50%; right: 4%; }
  .hero-mascot { width: 96px; }
  .bubble { position: relative; left: auto; top: auto; max-width: none; margin: 0 auto 18px; }
  .bubble::after { display: none; }
  .hero-flower { display: none; }
}

/* ═══════════════════════════════════════════
   RIBBON DIVIDER
   a horizontal ribbon with a bow/suit in center
   ═══════════════════════════════════════════ */
.ribbon-divider {
  position: relative;
  height: 28px;
  margin: 36px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ribbon-divider::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  background: linear-gradient(180deg,
    var(--ribbon) 0%,
    #d4727c 40%,
    var(--ribbon) 50%,
    #c05a64 60%,
    var(--ribbon) 100%);
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(74, 47, 36, 0.2);
}
.ribbon-bow {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--eggshell);
  border: 2px solid var(--ribbon);
  border-radius: 50%;
  font-family: 'Cactus Jack', serif;
  font-size: 20px;
  color: var(--terra);
  box-shadow: 0 2px 6px rgba(74, 47, 36, 0.2);
}


/* ═══════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════ */
.section {
  position: relative;
  margin: 48px 0;
}

/* section title card — wooden-sign style */
.section-card {
  position: relative;
  margin: 0 auto 24px;
  max-width: 520px;
  padding: 22px 32px 24px;
  background:
    linear-gradient(165deg,
      #f7e7d4 0%,
      #f0dcc4 25%,
      #ecdaba 50%,
      #f0dcc4 75%,
      #f7e7d4 100%);
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  box-shadow:
    3px 4px 0 rgba(74, 47, 36, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(74, 47, 36, 0.1);
  transform: rotate(-0.8deg);
}
.section:nth-of-type(even) .section-card { transform: rotate(0.6deg); }

/* scalloped lace trim along bottom of card */
.section-card::after {
  content: '';
  position: absolute;
  bottom: -22px;
  left: -8px; right: -8px;
  height: 44px;
  background: white;
  -webkit-mask-image: url('icons/decoblog/lace-doily-h.png');
  -webkit-mask-size: auto 44px;
  -webkit-mask-position: center top;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-mode: luminance;
  mask-image: url('icons/decoblog/lace-doily-h.png');
  mask-size: auto 44px;
  mask-position: center top;
  mask-repeat: repeat-x;
  mask-mode: luminance;
  opacity: 0.9;
}

/* washi tape strip */
.section-card::before {
  content: '';
  position: absolute;
  top: -10px; left: 18%;
  width: 96px; height: 22px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(232, 145, 154, 0.55) 0 6px,
      rgba(251, 213, 224, 0.55) 6px 12px
    );
  border-left: 1px dashed rgba(74, 47, 36, 0.3);
  border-right: 1px dashed rgba(74, 47, 36, 0.3);
  transform: rotate(-6deg);
}
.section:nth-of-type(even) .section-card::before {
  left: auto; right: 14%;
  transform: rotate(7deg);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(158, 200, 163, 0.6) 0 6px,
      rgba(251, 213, 224, 0.55) 6px 12px
    );
}

/* suit badge */
.section-card .badge {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--eggshell);
  border: 2px solid var(--ribbon);
  display: grid;
  place-items: center;
  font-family: 'Cactus Jack', serif;
  font-size: 22px;
  line-height: 1;
  color: var(--terra);
  box-shadow:
    1px 2px 0 rgba(74, 47, 36, 0.3),
    0 0 0 3px var(--dark-mid);
}
.section-card .badge.diamond { color: var(--rose); }
.section-card .badge.spade   { color: var(--ink); }
.section-card .badge.heart   { color: var(--terra); }

.section-card .num {
  display: block;
  text-align: center;
  font-family: 'Cactus Jack', serif;
  font-size: 56px;
  color: var(--mustard);
  line-height: 0.9;
  margin: 8px 0 4px;
}
.section-card .name {
  display: block;
  text-align: center;
  font-family: 'Bergamasco', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
}
.section-card .underline {
  display: block;
  margin: 8px auto 0;
  width: 200px;
  height: 8px;
}

/* section body text on a soft note card */
.section-body {
  position: relative;
  max-width: 580px;
  margin: 0 auto;
  padding: 24px 28px;
  background: rgba(255, 248, 238, 0.9);
  border: 1.5px solid rgba(207, 106, 114, 0.35);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.section-body::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 12px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(217, 197, 232, 0.6) 0 5px,
      rgba(251, 213, 224, 0.5) 5px 10px
    );
  border-left: 1px dashed rgba(74, 47, 36, 0.2);
  border-right: 1px dashed rgba(74, 47, 36, 0.2);
  border-radius: 1px;
}

p {
  font-family: 'Bergamasco', Georgia, serif;
  font-size: 18px;
  line-height: 1.85;
  margin-bottom: 18px;
  text-align: left;
  color: var(--ink);
}
p:last-child { margin-bottom: 0; }
p .hi {
  background: var(--mustard);
  color: var(--ink);
  padding: 0 6px;
  font-style: italic;
  font-weight: 700;
  border-radius: 2px;
}
p em   { font-style: italic; color: var(--terra); }
p .pink { color: var(--ribbon); font-style: italic; }
p .red  { color: var(--terra); }
p .sky  { color: var(--plum); }

/* in-flow scrap */
.flow-scrap {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgba(74, 47, 36, 0.4));
}
.flow-scrap.left  { left: -120px; }
.flow-scrap.right { right: -120px; }
.flow-scrap img { display: block; width: 100%; height: auto; }
@media (max-width: 980px) {
  .flow-scrap { display: none; }
}

/* ═══════════════════════════════════════════
   CAROUSEL RIG
   ═══════════════════════════════════════════ */
.carousel-rig {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 32px auto 24px;
  pointer-events: none;
  filter: drop-shadow(0 8px 0 rgba(74, 47, 36, 0.35));
}
.carousel-rig .stand {
  position: absolute;
  left: 12%; bottom: 0;
  width: 76%; height: auto;
  z-index: 1;
}
.carousel-rig .wheel {
  position: absolute;
  width: 88%;
  left: 9%; top: -12%;
  transform-origin: 50% 50%;
  animation: carousel-spin 14s linear infinite;
  z-index: 2;
}
@keyframes carousel-spin {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .carousel-rig .wheel { animation: none; }
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.end {
  text-align: center;
  margin: 60px 0 12px;
  color: var(--gold);
  font-family: 'Cactus Jack', serif;
  font-size: 28px;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
}
.footer {
  text-align: center;
  margin-top: 18px;
  padding: 12px 24px;
  font-family: 'Komix', 'Comic Sans MS', sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255, 240, 220, 0.6);
  opacity: 0.7;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(218, 165, 32, 0.2);
}