/** Shopify CDN: Minification failed

Line 20:0 Unexpected "#"
Line 20:2 Unexpected "{"
Line 20:11 Expected ":"
Line 27:0 Unexpected "#"
Line 27:2 Unexpected "{"
Line 27:11 Expected ":"
Line 35:0 Unexpected "#"
Line 35:2 Unexpected "{"
Line 35:11 Expected ":"
Line 41:0 Unexpected "#"
... and 212 more hidden warnings

**/


/* CSS from section stylesheet tags */
/* ===== Layout shell ===== */
#{{ section.id }}.island-discovery-board {
  padding: 2.5rem 0 3rem;
  display: flex;
  justify-content: center;
  background: transparent;
}

#{{ section.id }} .discovery-board__inner {
  width: 100%;
  max-width: 1200px;
  padding: 0 1.25rem;
  margin: 0 auto;
}

/* ===== Board frame (background image) ===== */
#{{ section.id }} .discovery-board {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

#{{ section.id }} .discovery-board__bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay layer */
#{{ section.id }} .discovery-board__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ===== Polaroid hover (base reset) ===== */
#{{ section.id }} .db-hover-card {
  box-shadow: none;
}

/* Animate just inner content */
#{{ section.id }} .db-hover-card .discovery-board__polaroid-image img,
#{{ section.id }} .db-hover-card .discovery-board__polaroid-caption {
  transition:
    transform 180ms ease,
    filter 180ms ease,
    text-shadow 180ms ease;
}

/* ===== Top banner label ===== */
#{{ section.id }} .discovery-board__label-top {
  position: absolute;
  left: 19%;
  top: 6.6%;
  width: 40%;
  height: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  text-align: center;
}

#{{ section.id }} .discovery-board__label-top-text {
  font-family: var(--font-heading-family, system-ui);
  font-weight: 800;
  font-size: 1.8vw;
  letter-spacing: 0.04em;
  color: #5a3a16;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45);

  max-width: 90%;
  line-height: 1.2;
  display: inline-block;
  transform: rotate(-4deg);
}

#{{ section.id }} .discovery-board__label-top-link {
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* ===== Bottom-left tag label ===== */
#{{ section.id }} .discovery-board__label-tag {
  position: absolute;
  left: 14%;
  bottom: 16%;
  width: 18%;
  height: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  text-align: center;
}

#{{ section.id }} .discovery-board__label-tag-text {
  font-family: var(--font-body-family, system-ui);
  font-weight: 600;
  font-size: 1.4vw;
  line-height: 1.3;
  color: #5a3a16;

  max-width: 90%;
  display: inline-block;
  transform: rotate(-5.5deg);
}

/* ===== Polaroid base container ===== */
#{{ section.id }} .discovery-board__polaroid {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
}

#{{ section.id }} .discovery-board__polaroid-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

#{{ section.id }} .discovery-board__polaroid-image-wrap {
  position: absolute;
  overflow: hidden;
}

#{{ section.id }} .discovery-board__polaroid-image {
  width: 100%;
  height: 100%;
}

#{{ section.id }} .discovery-board__polaroid-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

#{{ section.id }} .discovery-board__polaroid-caption-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#{{ section.id }} .discovery-board__polaroid-caption {
  font-family: var(--font-heading-family, system-ui);
  font-weight: 800;
  text-transform: uppercase;
  color: #3c2a16;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
}

/* ===================================================== */
/* ============== PER-POLAROID LAYOUT ================== */
/* ===================================================== */

/* ---- LEFT POLAROID ---- */
#{{ section.id }} .discovery-board__polaroid--left {
  left: 20.8%;
  top: 25%;
  width: 22.5%;
  height: 40%;
  transform: rotate(-4.5deg);
}

#{{ section.id }} .discovery-board__polaroid--left .discovery-board__polaroid-image-wrap {
  left: 8.1%;
  right: 8.9%;
  top: 8.4%;
  bottom: 23.4%;
}

#{{ section.id }} .discovery-board__polaroid--left .discovery-board__polaroid-caption-wrap {
  left: 15%;
  right: 15%;
  bottom: 4.5%;
  height: 18%;
}

#{{ section.id }} .discovery-board__polaroid--left .discovery-board__polaroid-caption {
  font-size: 1.5vw;
  transform: rotate(0.2deg);
}

/* ---- TOP-RIGHT POLAROID ---- */
#{{ section.id }} .discovery-board__polaroid--top-right {
  right: 16.8%;
  top: 12%;
  width: 23%;
  height: 39%;
  transform: rotate(5deg);
}

#{{ section.id }} .discovery-board__polaroid--top-right .discovery-board__polaroid-image-wrap {
  left: 7.4%;
  right: 7.7%;
  top: 6.7%;
  bottom: 23%;
}

#{{ section.id }} .discovery-board__polaroid--top-right .discovery-board__polaroid-caption-wrap {
  left: 15%;
  right: 15%;
  bottom: 3.5%;
  height: 18%;
}

#{{ section.id }} .discovery-board__polaroid--top-right .discovery-board__polaroid-caption {
  font-size: 1.5vw;
  transform: rotate(0.2deg);
}

/* ---- BOTTOM-RIGHT POLAROID ---- */
#{{ section.id }} .discovery-board__polaroid--bottom-right {
  right: 27.5%;
  bottom: 5.2%;
  width: 22%;
  height: 40%;
  transform: rotate(5.45deg);
}

#{{ section.id }} .discovery-board__polaroid--bottom-right .discovery-board__polaroid-image-wrap {
  left: 10.2%;
  right: 10.8%;
  top: 10.4%;
  bottom: 25%;
}

#{{ section.id }} .discovery-board__polaroid--bottom-right .discovery-board__polaroid-caption-wrap {
  left: 18%;
  right: 18%;
  bottom: 6%;
  height: 18%;
}

#{{ section.id }} .discovery-board__polaroid--bottom-right .discovery-board__polaroid-caption {
  font-size: 1.5vw;
  transform: rotate(-0.2deg);
}

/* ===================================================== */
/* ============== FINAL HOVER EFFECT ==================== */
/* ===================================================== */

@media (hover: hover) and (pointer: fine) {
  #{{ section.id }} .db-hover-card:hover .discovery-board__polaroid-image img {
    transform: scale(1.032); /* softened from 1.04 */
    filter: brightness(1.032) contrast(1.02);
  }

  #{{ section.id }} .db-hover-card:hover .discovery-board__polaroid-caption {
    transform: translateY(-0.064em); /* softened from 0.08em */
    text-shadow: 0 1.2px 0 rgba(255, 255, 255, 0.75);
  }
}

/* ===== Mobile tweaks ===== */
@media (max-width: 768px) {
  #{{ section.id }}.island-discovery-board {
    padding: 1.5rem 0 2.25rem;
  }

  #{{ section.id }} .discovery-board__polaroid-caption {
    font-size: 2.3vw;
  }
}
/* ===== Layout shell ===== */
#{{ section.id }}.island-journal {
  padding: 2.5rem 0 3rem;
  display: flex;
  justify-content: center;
  background: transparent;
}

#{{ section.id }} .island-journal__inner {
  width: 100%;
  max-width: 1200px;
  padding: 0 1.25rem;
  margin: 0 auto;
}

/* ===== Notebook frame (fixed background image) ===== */
#{{ section.id }} .journal-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

#{{ section.id }} .journal-frame__bg {
  width: 100%;
  height: auto;
  display: block;
}

/* Overlay that sits directly on top of the notebook image */
#{{ section.id }} .journal-frame__overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto; /* make overlay & children clickable */
  z-index: 1;
}

/* Each page fills the overlay */
#{{ section.id }} .journal-page {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Active page baseline */
#{{ section.id }} .journal-page.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* ===== Page curl keyframes ===== */
@keyframes journalFlipForwardIn {
  from {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: perspective(1200px) rotateY(-45deg);
  }
  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: perspective(1200px) rotateY(0deg);
  }
}

@keyframes journalFlipForwardOut {
  from {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: perspective(1200px) rotateY(0deg);
  }
  to {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: perspective(1200px) rotateY(45deg);
  }
}

@keyframes journalFlipBackIn {
  from {
    opacity: 0;
    transform-origin: 0% 50%;
    transform: perspective(1200px) rotateY(45deg);
  }
  to {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: perspective(1200px) rotateY(0deg);
  }
}

@keyframes journalFlipBackOut {
  from {
    opacity: 1;
    transform-origin: 50% 50%;
    transform: perspective(1200px) rotateY(0deg);
  }
  to {
    opacity: 0;
    transform-origin: 100% 50%;
    transform: perspective(1200px) rotateY(-45deg);
  }
}

#{{ section.id }} .journal-page--flip-forward-in {
  animation: journalFlipForwardIn 0.45s ease-out forwards;
}
#{{ section.id }} .journal-page--flip-forward-out {
  animation: journalFlipForwardOut 0.45s ease-in forwards;
}
#{{ section.id }} .journal-page--flip-back-in {
  animation: journalFlipBackIn 0.45s ease-out forwards;
}
#{{ section.id }} .journal-page--flip-back-out {
  animation: journalFlipBackOut 0.45s ease-in forwards;
}

/* ===== Left-side content (title + blurb) ===== */
/* Box aligned to left page writing area */
#{{ section.id }} .journal-page__left {
  position: absolute;

  left: 9%;
  top: 35.5%;
  width: 36%;
  height: 45%;  /* tuned height for blurb */

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Separate wrappers so title + blurb can be adjusted independently */
#{{ section.id }} .journal-page__title-wrap {
  width: 100%;
  text-align: center; /* centered title, blurb stays left */
  padding-left: 0.6vw;  /* nudges title right */
}

#{{ section.id }} .journal-page__text-wrap {
  width: 100%;
  margin-top: 0.3vw;
  padding-left: 2.0vw;  /* nudges blurb right */
}

/* Typography — this is your original tuned behavior */
#{{ section.id }} .journal-page__title {
  font-family: var(--font-heading-family, system-ui);
  font-weight: 800;
  font-size: 2.8vw;       /* ~31px at 1200px width */
  line-height: 1.1;
  color: #3c2a16;
  margin: -0.4vw 0 0.8vw;
}

#{{ section.id }} .journal-page__text {
  font-family: var(--font-body-family, system-ui);
  font-weight: 500;
  font-size: 1.7vw;       /* ~20px at 1200px width */
  line-height: 3.9vw;     /* consistent vertical spacing */
  color: #3c2a16;
}

#{{ section.id }} .journal-page__text p {
  margin: 0 0 0.7em;
}
#{{ section.id }} .journal-page__text p:last-child {
  margin-bottom: 0;
}

/* ===== Right-side content (image + caption) ===== */
#{{ section.id }} .journal-page__right {
  position: absolute;

  right: 12.15%;
  top: 37.4%;
  width: 31%;
  height: 40%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Separate wraps for image vs caption */
#{{ section.id }} .journal-page__image-wrap {
  width: 100%;
}

#{{ section.id }} .journal-page__caption-wrap {
  width: 100%;
  text-align: center;
  margin-top: 2.2vw;  /* breathing room */
}

/* Fixed-ratio frame that fits inside drawn photo area */
#{{ section.id }} .journal-page__image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4.15 / 3;
  border-radius: 8px;
  overflow: hidden;
}

#{{ section.id }} .journal-page__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* gently cut in the corners so the journal's tabs can peek through */
  clip-path: polygon(
    9% 0, 91% 0, 100% 13%,
    100% 87%, 91% 100%, 9% 100%,
    0 87%, 0 13%
  );
}

#{{ section.id }} .journal-page__caption {
  margin-top: 0.6vw;     /* hugging the caption line */
  font-family: var(--font-body-family, system-ui);
  font-weight: 500;
  font-size: 1vw;        /* ~12px at 1200px width */
  line-height: 1.8vw;
  color: #3c2a16;
}

/* ===== Navigation arrows ===== */
#{{ section.id }} .journal-nav {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#{{ section.id }} .journal-nav__btn {
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease,
    opacity 160ms ease;
  pointer-events: auto;
  z-index: 5;
}

#{{ section.id }} .journal-nav__btn--prev {
  left: 3%;
}
#{{ section.id }} .journal-nav__btn--next {
  right: 3%;
}

#{{ section.id }} .journal-nav__btn svg {
  width: 18px;
  height: 18px;
}

#{{ section.id }} .journal-nav__btn:hover {
  background: #fff6dd;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.3);
}

/* ===== Handwritten-style page number (inside right page) ===== */
#{{ section.id }} .journal-page-indicator {
  position: absolute;
  bottom: 18.5%;
  right: 7.5%;
  font-family: var(--font-body-family, system-ui);
  font-size: 1vw;
  color: #3c2a16;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* ===== Mobile tweaks (ONLY nav & indicator) ===== */
@media (max-width: 768px) {
  /* Keep the arrow size smaller (good for mobile) */
  #{{ section.id }} .journal-nav__btn {
    width: 36px;
    height: 36px;
    top: 52%;          /* <-- match desktop vertical placement */
    transform: translateY(-50%);
  }

  /* Put arrows back on left/right edges */
  #{{ section.id }} .journal-nav__btn--prev {
    left: 3%;          /* <-- same as desktop */
  }
  #{{ section.id }} .journal-nav__btn--next {
    right: 3%;         /* <-- same as desktop */
  }

  /* Page number can stay where it is */
  #{{ section.id }} .journal-page-indicator {
    bottom: 18.5%;
    right: 7.5%;
    font-size: 1.5vw;
  }
}

/* ===== Ultra-wide safety: cap font growth so it doesn't fall off ===== */
@media (min-width: 1400px) {
  #{{ section.id }} .journal-page__title {
    font-size: 34px; /* approx 2.8vw at 1200px */
  }

  #{{ section.id }} .journal-page__text {
    font-size: 20px;      /* approx 1.7vw at 1200px */
    line-height: 47px;    /* approx 3.9vw at 1200px */
  }

  #{{ section.id }} .journal-page__caption {
    font-size: 11px;      /* slightly under 12px for safety */
    line-height: 18px;    /* a bit tighter so it hugs the line */
  }
}