/* =========================================
   SoftLight Yoga — practice journal page
   styles/journal.css
   ========================================= */

.sy-journal-main {
  /* чуть компактнее вертикальный ритм, чем на других страницах */
}

/* -----------------------------------------
   1. Journal hero
   ----------------------------------------- */

.sy-journal-hero {
  position: relative;
  padding-block: 3.2rem 3.8rem;
}

.sy-journal-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-hero__title {
  font-size: 2.4rem;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: #e5e7eb;
}

.sy-journal-hero__text {
  font-size: 0.98rem;
  color: var(--sy-text-soft);
  max-width: 36rem;
}

.sy-journal-hero__text + .sy-journal-hero__text {
  margin-top: 0.8rem;
}

.sy-journal-hero__text--secondary {
  color: var(--sy-text-muted);
}

.sy-journal-hero__tags {
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.sy-journal-hero__tag {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  border: 1px solid rgba(148, 163, 184, 0.6);
  background: rgba(15, 23, 42, 0.98);
}

/* hero visuals */

.sy-journal-hero__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-hero__photo {
  position: absolute;
  border-radius: 1.7rem;
  padding: 0.5rem 0.6rem 0.8rem;
  background: var(--sy-bg-soft);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 26px 52px rgba(15, 23, 42, 0.98);
  max-width: 260px;
  transition:
    transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}

.sy-journal-hero__photo img {
  display: block;
  border-radius: 1.35rem;
  max-width: 350px;
}

.sy-journal-hero__photo--main {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-hero__photo--side {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-hero__photo--note {
  bottom: 14%;
  left: 40%;
  max-width: 200px;
}

.sy-journal-hero__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   2. Prompt constellations
   ----------------------------------------- */

.sy-journal-prompts {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-prompts__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr);
  gap: 1.6rem;
}

.sy-journal-prompts__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-prompts__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-prompts__grid {
  border-radius: 2rem;
  padding: 1.1rem 1.3rem 1.3rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.22), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(249, 168, 212, 0.22), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 26px 52px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.sy-journal-prompts__card {
  border-radius: 1.5rem;
  padding: 0.75rem 0.85rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.95);
}

.sy-journal-prompts__label {
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
}

.sy-journal-prompts__list {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
}

.sy-journal-prompts__item {
  font-size: 0.86rem;
  color: var(--sy-text-soft);
  margin-bottom: 0.25rem;
}

/* photos inside prompts */

.sy-journal-prompts__photos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.sy-journal-prompts__photo {
  border-radius: 1.4rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.98);
  max-width: 220px;
  transition:
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    border-color 200ms ease-out;
}

.sy-journal-prompts__photo img {
  display: block;
  border-radius: 1.2rem;
  max-width: 350px;
}

.sy-journal-prompts__photo:hover {
  transform: translateY(-3px);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   3. Tiny wins timeline
   ----------------------------------------- */

.sy-journal-timeline {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-timeline__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-timeline__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-timeline__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-timeline__steps {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  border-left: 2px solid rgba(148, 163, 184, 0.5);
}

.sy-journal-timeline__step {
  position: relative;
  padding-left: 1.2rem;
  padding-bottom: 0.9rem;
}

.sy-journal-timeline__step:last-child {
  padding-bottom: 0;
}

.sy-journal-timeline__dot {
  position: absolute;
  left: -5px;
  top: 0.3rem;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #facc6b 0, transparent 60%);
  box-shadow: 0 0 18px rgba(250, 204, 107, 0.9);
}

.sy-journal-timeline__label {
  font-size: 0.94rem;
  color: #e5e7eb;
}

.sy-journal-timeline__note {
  margin-top: 0.15rem;
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* visual side */

.sy-journal-timeline__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-timeline__photo {
  position: absolute;
  border-radius: 1.7rem;
  padding: 0.45rem 0.55rem 0.75rem;
  background: var(--sy-bg-soft);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-timeline__photo img {
  display: block;
  border-radius: 1.3rem;
  max-width: 350px;
}

.sy-journal-timeline__photo--dots {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-timeline__photo--mug {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-timeline__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 1024px) {
  .sy-journal-hero__inner,
  .sy-journal-timeline__inner {
    gap: 2.4rem;
  }

  .sy-journal-hero__title {
    font-size: 2.1rem;
  }

  .sy-journal-prompts__title,
  .sy-journal-timeline__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 900px) {
  .sy-journal-hero__inner,
  .sy-journal-timeline__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-hero__visual,
  .sy-journal-timeline__visual {
    margin-top: 1.4rem;
    min-height: 280px;
  }

  .sy-journal-prompts__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-hero__photo {
    max-width: 230px;
  }

  .sy-journal-timeline__photo {
    max-width: 220px;
  }
}

@media (max-width: 640px) {
  .sy-journal-hero,
  .sy-journal-prompts,
  .sy-journal-timeline {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-journal-hero__text,
  .sy-journal-prompts__text,
  .sy-journal-timeline__text {
    font-size: 0.9rem;
  }

  .sy-journal-hero__visual,
  .sy-journal-timeline__visual {
    min-height: 260px;
  }

  .sy-journal-prompts__photo {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  .sy-journal-hero__photo,
  .sy-journal-timeline__photo {
    position: relative;
    transform: none;
    max-width: 100%;
  }

  .sy-journal-hero__visual,
  .sy-journal-timeline__visual {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .sy-journal-hero__photo--note {
    max-width: 160px;
  }

  .sy-journal-prompts__grid {
    padding-inline: 1rem;
  }
}
/* -----------------------------------------
   4. Layouts for different kinds of days
   ----------------------------------------- */

.sy-journal-layouts {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-layouts__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-layouts__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-layouts__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-layouts__list {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sy-journal-layouts__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 0.6rem;
  align-items: flex-start;
}

.sy-journal-layouts__tag {
  font-size: 0.88rem;
  font-weight: 500;
  color: #e5e7eb;
}

.sy-journal-layouts__note {
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* board with sample layouts */

.sy-journal-layouts__board {
  border-radius: 2rem;
  padding: 1.1rem 1.2rem 1.3rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.22), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.24), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 26px 52px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: center;
}

.sy-journal-layouts__strip {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sy-journal-layouts__card {
  border-radius: 1.2rem;
  padding: 0.5rem 0.7rem 0.7rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.9);
}

.sy-journal-layouts__card-title {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  margin-bottom: 0.25rem;
}

.sy-journal-layouts__card-lines {
  position: relative;
  height: 40px;
  border-radius: 0.9rem;
  overflow: hidden;
  background-image: linear-gradient(
    to bottom,
    rgba(148, 163, 184, 0.35) 1px,
    transparent 1px
  );
  background-size: 100% 10px;
}

.sy-journal-layouts__card-lines--short {
  opacity: 0.4;
}

.sy-journal-layouts__card-lines--mid {
  opacity: 0.7;
}

.sy-journal-layouts__card-lines--full {
  opacity: 1;
}

/* photos */

.sy-journal-layouts__photos {
  position: relative;
  min-height: 210px;
}

.sy-journal-layouts__photo {
  position: absolute;
  border-radius: 1.5rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.98);
  max-width: 220px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-layouts__photo img {
  display: block;
  border-radius: 1.2rem;
  max-width: 350px;
}

.sy-journal-layouts__photo--flat {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-layouts__photo--single {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-layouts__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   5. Word bank instead of goals
   ----------------------------------------- */

.sy-journal-words {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-words__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-words__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-words__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-words__chips {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sy-journal-words__chip {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.9);
}

.sy-journal-words__hint {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: var(--sy-text-muted);
}

/* word bank photos */

.sy-journal-words__photos {
  display: grid;
  gap: 0.8rem;
}

.sy-journal-words__photo {
  border-radius: 1.5rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.98);
}

.sy-journal-words__photo img {
  display: block;
  border-radius: 1.2rem;
  max-width: 350px;
}

.sy-journal-words__photo--sticky {
  transform: translateY(4px);
}

/* -----------------------------------------
   6. Where your journal can live
   ----------------------------------------- */

.sy-journal-places {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-places__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-places__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-places__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-places__grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.sy-journal-places__card {
  border-radius: 1.4rem;
  padding: 0.7rem 0.8rem;
  background: var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: var(--sy-shadow-soft);
}

.sy-journal-places__label {
  font-size: 0.9rem;
  color: #e5e7eb;
}
.sy-journal-places__note {
  margin-top: 0.25rem;
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* визуальная часть */

.sy-journal-places__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-places__photo {
  position: absolute;
  border-radius: 1.6rem;
  padding: 0.45rem 0.55rem 0.75rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-places__photo img {
  display: block;
  border-radius: 1.25rem;
  max-width: 350px;
}

.sy-journal-places__photo--night {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-places__photo--tablet {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-places__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}
/* ---------- Responsive: sections 4–6 ---------- */

@media (max-width: 1024px) {
  .sy-journal-layouts__inner,
  .sy-journal-words__inner,
  .sy-journal-places__inner {
    gap: 2.4rem;
  }

  .sy-journal-layouts__title,
  .sy-journal-words__title,
  .sy-journal-places__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 900px) {
  .sy-journal-layouts__inner,
  .sy-journal-words__inner,
  .sy-journal-places__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-layouts__board {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-layouts__photos,
  .sy-journal-places__visual {
    margin-top: 1.3rem;
    min-height: 280px;
  }

  .sy-journal-layouts__photo,
  .sy-journal-places__photo {
    max-width: 220px;
  }

  .sy-journal-words__photos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sy-journal-layouts,
  .sy-journal-words,
  .sy-journal-places {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-journal-layouts__text,
  .sy-journal-words__text,
  .sy-journal-places__text {
    font-size: 0.9rem;
  }

  .sy-journal-layouts__photos,
  .sy-journal-places__visual {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .sy-journal-layouts__photo,
  .sy-journal-places__photo {
    position: relative;
    transform: none;
    max-width: 100%;
  }

  .sy-journal-layouts__photos,
  .sy-journal-places__visual {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .sy-journal-layouts__board {
    padding-inline: 1rem;
  }
}

/* -----------------------------------------
   7. Quiet conversations with yourself
   ----------------------------------------- */

.sy-journal-dialogues {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-dialogues__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-dialogues__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-dialogues__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-dialogues__text + .sy-journal-dialogues__text {
  margin-top: 0.6rem;
}

.sy-journal-dialogues__text--hint {
  color: var(--sy-text-muted);
}

/* board */

.sy-journal-dialogues__board {
  border-radius: 2rem;
  padding: 1rem 1.1rem 1.3rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.24), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(249, 168, 212, 0.24), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 26px 52px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: center;
}

.sy-journal-dialogues__row {
  border-radius: 1.4rem;
  padding: 0.6rem 0.75rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.95);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.1fr);
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.55rem;
}

.sy-journal-dialogues__side {
  font-size: 0.86rem;
}

.sy-journal-dialogues__label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  margin-bottom: 0.15rem;
}

.sy-journal-dialogues__line {
  color: var(--sy-text-soft);
}

.sy-journal-dialogues__side--soft .sy-journal-dialogues__line {
  color: #e5e7eb;
}

.sy-journal-dialogues__line--soft {
  font-style: italic;
}

.sy-journal-dialogues__arrow {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  position: relative;
}

.sy-journal-dialogues__arrow::before {
  content: "→";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: var(--sy-text-muted);
}

/* photos */

.sy-journal-dialogues__photos {
  position: relative;
  min-height: 210px;
}

.sy-journal-dialogues__photo {
  position: absolute;
  border-radius: 1.5rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.98);
  max-width: 210px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-dialogues__photo img {
  display: block;
  border-radius: 1.2rem;
  max-width: 350px;
}

.sy-journal-dialogues__photo--margin {
  top: 0;
  left: 6%;
  transform: rotate(-4deg);
}

.sy-journal-dialogues__photo--bubbles {
  bottom: -4%;
  right: 4%;
  transform: rotate(4deg);
}

.sy-journal-dialogues__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   8. Colour highlights across the week
   ----------------------------------------- */

.sy-journal-highlights {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-highlights__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-highlights__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-highlights__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-highlights__hint {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--sy-text-muted);
}

/* week strip */

.sy-journal-highlights__board {
  border-radius: 2rem;
  padding: 1rem 1.1rem 1.2rem;
  background: var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: center;
}

.sy-journal-highlights__week {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  border-radius: 999px;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.18), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(249, 168, 212, 0.18), transparent 60%),
              rgba(15, 23, 42, 0.96);
}

.sy-journal-highlights__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.sy-journal-highlights__dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(148, 163, 184, 0.9);
}

.sy-journal-highlights__dot--calm {
  background: #4ade80;
}

.sy-journal-highlights__dot--proud {
  background: #f97316;
}

.sy-journal-highlights__dot--wobbly {
  background: #f87171;
}

.sy-journal-highlights__dot--rest {
  background: #64748b;
}

.sy-journal-highlights__dot--comfort {
  background: #facc15;
}

.sy-journal-highlights__dot--open {
  background: #38bdf8;
}

.sy-journal-highlights__dot--soft {
  background: #f9a8d4;
}

.sy-journal-highlights__day-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--sy-text-muted);
}

/* legend + photos */

.sy-journal-highlights__legend-title {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  margin-bottom: 0.3rem;
}

.sy-journal-highlights__legend-list {
  margin: 0;
  padding-left: 1rem;
}

.sy-journal-highlights__legend-item {
  font-size: 0.84rem;
  color: var(--sy-text-soft);
  margin-bottom: 0.2rem;
}

.sy-journal-highlights__photos {
  display: grid;
  gap: 0.7rem;
}

.sy-journal-highlights__photo {
  border-radius: 1.5rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.98);
}

.sy-journal-highlights__photo img {
  display: block;
  border-radius: 1.2rem;
  max-width: 350px;
}

.sy-journal-highlights__photo--calendar {
  transform: translateY(4px);
}

/* -----------------------------------------
   9. Pages for difficult days
   ----------------------------------------- */

.sy-journal-gentle-days {
  position: relative;
  padding-block: 3rem 3.8rem;
}

.sy-journal-gentle-days__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-gentle-days__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-gentle-days__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-gentle-days__list {
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.sy-journal-gentle-days__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--sy-text-soft);
}

.sy-journal-gentle-days__marker {
  width: 10px;
  height: 10px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #facc6b 0, transparent 60%);
  box-shadow: 0 0 14px rgba(250, 204, 107, 0.9);
}

.sy-journal-gentle-days__hint {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: var(--sy-text-muted);
}

/* visuals */

.sy-journal-gentle-days__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-gentle-days__photo {
  position: absolute;
  border-radius: 1.6rem;
  padding: 0.45rem 0.55rem 0.75rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-gentle-days__photo img {
  display: block;
  border-radius: 1.25rem;
  max-width: 350px;
}

.sy-journal-gentle-days__photo--page {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-gentle-days__photo--patch {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-gentle-days__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* ---------- Responsive: sections 7–9 ---------- */

@media (max-width: 1024px) {
  .sy-journal-dialogues__inner,
  .sy-journal-highlights__inner,
  .sy-journal-gentle-days__inner {
    gap: 2.4rem;
  }

  .sy-journal-dialogues__title,
  .sy-journal-highlights__title,
  .sy-journal-gentle-days__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 900px) {
  .sy-journal-dialogues__inner,
  .sy-journal-highlights__inner,
  .sy-journal-gentle-days__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-dialogues__board {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-dialogues__photos,
  .sy-journal-gentle-days__visual {
    margin-top: 1.3rem;
    min-height: 280px;
  }

  .sy-journal-dialogues__photo,
  .sy-journal-gentle-days__photo {
    max-width: 220px;
  }

  .sy-journal-highlights__board {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sy-journal-dialogues,
  .sy-journal-highlights,
  .sy-journal-gentle-days {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-journal-dialogues__text,
  .sy-journal-highlights__text,
  .sy-journal-gentle-days__text {
    font-size: 0.9rem;
  }

  .sy-journal-dialogues__photos,
  .sy-journal-gentle-days__visual {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .sy-journal-dialogues__photo,
  .sy-journal-gentle-days__photo {
    position: relative;
    transform: none;
    max-width: 100%;
  }

  .sy-journal-dialogues__photos,
  .sy-journal-gentle-days__visual {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .sy-journal-highlights__board {
    padding-inline: 1rem;
  }
}
/* -----------------------------------------
   10. Energy across the day
   ----------------------------------------- */

.sy-journal-energy {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-energy__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-energy__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-energy__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-energy__text + .sy-journal-energy__text {
  margin-top: 0.6rem;
}

.sy-journal-energy__text--hint {
  color: var(--sy-text-muted);
}

/* energy board */

.sy-journal-energy__board {
  border-radius: 2rem;
  padding: 1.1rem 1.2rem 1.3rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.22), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(249, 168, 212, 0.22), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 26px 52px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 1rem;
  align-items: center;
}

.sy-journal-energy__columns {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sy-journal-energy__column {
  border-radius: 1.3rem;
  padding: 0.55rem 0.7rem 0.7rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.95);
}

.sy-journal-energy__label {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  margin-bottom: 0.25rem;
}

.sy-journal-energy__bar {
  position: relative;
  height: 24px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.sy-journal-energy__bar--soft {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.5), rgba(94, 234, 212, 0.6));
}

.sy-journal-energy__bar--bright {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.4), rgba(250, 204, 107, 0.9));
}

.sy-journal-energy__bar--low {
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.8), rgba(30, 64, 175, 0.9));
}

.sy-journal-energy__note {
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* photos */

.sy-journal-energy__photos {
  position: relative;
  min-height: 210px;
}

.sy-journal-energy__photo {
  position: absolute;
  border-radius: 1.5rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.98);
  max-width: 210px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-energy__photo img {
  display: block;
  border-radius: 1.2rem;
  max-width: 350px;
}

.sy-journal-energy__photo--track {
  top: 0;
  left: 6%;
  transform: rotate(-4deg);
}

.sy-journal-energy__photo--bars {
  bottom: -4%;
  right: 4%;
  transform: rotate(4deg);
}

.sy-journal-energy__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   11. Body map pages
   ----------------------------------------- */

.sy-journal-bodymap {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-bodymap__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-bodymap__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-bodymap__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

/* visuals */

.sy-journal-bodymap__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-bodymap__photo {
  position: absolute;
  border-radius: 1.6rem;
  padding: 0.45rem 0.55rem 0.75rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-bodymap__photo img {
  display: block;
  border-radius: 1.25rem;
  max-width: 350px;
}

.sy-journal-bodymap__photo--outline {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-bodymap__photo--notes {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-bodymap__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* bodymap cards */

.sy-journal-bodymap__grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.sy-journal-bodymap__card {
  border-radius: 1.4rem;
  padding: 0.7rem 0.8rem;
  background: var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: var(--sy-shadow-soft);
}

.sy-journal-bodymap__label {
  font-size: 0.9rem;
  color: #e5e7eb;
}

.sy-journal-bodymap__note {
  margin-top: 0.25rem;
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* -----------------------------------------
   12. Letters to your future practising self
   ----------------------------------------- */

.sy-journal-future {
  position: relative;
  padding-block: 3.2rem 3.8rem;
}

.sy-journal-future__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr);
  gap: 1.6rem;
}

.sy-journal-future__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-future__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 36rem;
}

.sy-journal-future__card {
  border-radius: 2.1rem;
  padding: 1.1rem 1.3rem 1.4rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.24), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(249, 168, 212, 0.24), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.75);
  box-shadow: 0 28px 58px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 1.2rem;
  align-items: center;
}

.sy-journal-future__columns {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sy-journal-future__column {
  border-radius: 1.4rem;
  padding: 0.7rem 0.85rem;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.95);
}

.sy-journal-future__label {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  margin-bottom: 0.25rem;
}

.sy-journal-future__snippet {
  font-size: 0.88rem;
  color: var(--sy-text-soft);
}

/* photos */

.sy-journal-future__photos {
  display: grid;
  gap: 0.7rem;
}

.sy-journal-future__photo {
  border-radius: 1.6rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.75);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
}

.sy-journal-future__photo img {
  display: block;
  border-radius: 1.3rem;
  max-width: 350px;
}

.sy-journal-future__photo--stamps {
  transform: translateY(4px);
}
/* ---------- Responsive: sections 10–12 ---------- */

@media (max-width: 1024px) {
  .sy-journal-energy__inner,
  .sy-journal-bodymap__inner,
  .sy-journal-future__inner {
    gap: 2.4rem;
  }

  .sy-journal-energy__title,
  .sy-journal-bodymap__title,
  .sy-journal-future__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 900px) {
  .sy-journal-energy__inner,
  .sy-journal-bodymap__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-energy__board {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-energy__photos,
  .sy-journal-bodymap__visual {
    margin-top: 1.3rem;
    min-height: 280px;
  }

  .sy-journal-energy__photo,
  .sy-journal-bodymap__photo {
    max-width: 220px;
  }

  .sy-journal-bodymap__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-future__card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sy-journal-energy,
  .sy-journal-bodymap,
  .sy-journal-future {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-journal-energy__text,
  .sy-journal-bodymap__text,
  .sy-journal-future__text {
    font-size: 0.9rem;
  }

  .sy-journal-energy__photos,
  .sy-journal-bodymap__visual {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .sy-journal-energy__photo,
  .sy-journal-bodymap__photo {
    position: relative;
    transform: none;
    max-width: 100%;
  }

  .sy-journal-energy__photos,
  .sy-journal-bodymap__visual {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .sy-journal-future__card {
    padding-inline: 1.1rem;
  }
}
/* -----------------------------------------
   13. Monthly overview spreads
   ----------------------------------------- */

.sy-journal-monthly {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-monthly__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-monthly__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-monthly__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-monthly__text + .sy-journal-monthly__text {
  margin-top: 0.6rem;
}

.sy-journal-monthly__text--hint {
  color: var(--sy-text-muted);
}

.sy-journal-monthly__list {
  margin-top: 0.9rem;
  padding-left: 1.1rem;
}

.sy-journal-monthly__item {
  font-size: 0.86rem;
  color: var(--sy-text-soft);
  margin-bottom: 0.3rem;
}

/* visuals */

.sy-journal-monthly__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-monthly__photo {
  position: absolute;
  border-radius: 1.6rem;
  padding: 0.45rem 0.55rem 0.8rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.75);
  box-shadow: 0 24px 52px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-monthly__photo img {
  display: block;
  border-radius: 1.3rem;
  max-width: 350px;
}

.sy-journal-monthly__photo--spread {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-monthly__photo--grid {
  bottom: -4%;
  right: 4%;
  transform: rotate(3deg);
}

.sy-journal-monthly__photo--pinboard {
  top: 26%;
  left: 46%;
  max-width: 180px;
  transform: rotate(5deg);
}

.sy-journal-monthly__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   14. Senses that anchor your journaling
   ----------------------------------------- */

.sy-journal-senses {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-senses__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-senses__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-senses__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-senses__chips {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sy-journal-senses__chip {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.9);
}

.sy-journal-senses__hint {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  color: var(--sy-text-muted);
}

/* visuals */

.sy-journal-senses__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-senses__photo {
  position: absolute;
  border-radius: 1.6rem;
  padding: 0.45rem 0.55rem 0.8rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-senses__photo img {
  display: block;
  border-radius: 1.25rem;
  max-width: 350px;
}

.sy-journal-senses__photo--candle {
  top: 0;
  left: 6%;
  transform: rotate(-4deg);
}

.sy-journal-senses__photo--headphones {
  bottom: -4%;
  right: 4%;
  transform: rotate(4deg);
}

.sy-journal-senses__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   15. Returning to older pages
   ----------------------------------------- */

.sy-journal-reread {
  position: relative;
  padding-block: 3rem 3.8rem;
}

.sy-journal-reread__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-reread__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-reread__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

/* bookmarks */

.sy-journal-reread__bookmarks {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.sy-journal-reread__bookmark {
  border-radius: 1.4rem;
  padding: 0.7rem 0.8rem;
  background: var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: var(--sy-shadow-soft);
}

.sy-journal-reread__bookmark-label {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
}

.sy-journal-reread__bookmark-note {
  margin-top: 0.25rem;
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

.sy-journal-reread__hint {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--sy-text-muted);
}

/* visuals */

.sy-journal-reread__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-reread__photo {
  position: absolute;
  border-radius: 1.6rem;
  padding: 0.45rem 0.55rem 0.8rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-reread__photo img {
  display: block;
  border-radius: 1.25rem;
  max-width: 350px;
}

.sy-journal-reread__photo--pages {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-reread__photo--ribbon {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-reread__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}
/* ---------- Responsive: sections 13–15 ---------- */

@media (max-width: 1024px) {
  .sy-journal-monthly__inner,
  .sy-journal-senses__inner,
  .sy-journal-reread__inner {
    gap: 2.4rem;
  }

  .sy-journal-monthly__title,
  .sy-journal-senses__title,
  .sy-journal-reread__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 900px) {
  .sy-journal-monthly__inner,
  .sy-journal-senses__inner,
  .sy-journal-reread__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-monthly__visual,
  .sy-journal-senses__visual,
  .sy-journal-reread__visual {
    margin-top: 1.3rem;
    min-height: 280px;
  }

  .sy-journal-monthly__photo,
  .sy-journal-senses__photo,
  .sy-journal-reread__photo {
    max-width: 220px;
  }

  .sy-journal-reread__bookmarks {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sy-journal-monthly,
  .sy-journal-senses,
  .sy-journal-reread {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-journal-monthly__text,
  .sy-journal-senses__text,
  .sy-journal-reread__text {
    font-size: 0.9rem;
  }

  .sy-journal-monthly__visual,
  .sy-journal-senses__visual,
  .sy-journal-reread__visual {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .sy-journal-monthly__photo,
  .sy-journal-senses__photo,
  .sy-journal-reread__photo {
    position: relative;
    transform: none;
    max-width: 100%;
  }

  .sy-journal-monthly__visual,
  .sy-journal-senses__visual,
  .sy-journal-reread__visual {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .sy-journal-monthly__photo--pinboard {
    max-width: 180px;
    align-self: center;
  }
}
/* -----------------------------------------
   16. Notes that travel beyond the mat
   ----------------------------------------- */

.sy-journal-beyond {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-beyond__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-beyond__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-beyond__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

.sy-journal-beyond__text + .sy-journal-beyond__text {
  margin-top: 0.6rem;
}

.sy-journal-beyond__text--hint {
  color: var(--sy-text-muted);
}

/* strips */

.sy-journal-beyond__strips {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sy-journal-beyond__strip {
  border-radius: 1.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: var(--sy-shadow-soft);
}

.sy-journal-beyond__label {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
  margin-bottom: 0.2rem;
}

.sy-journal-beyond__note {
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

/* photos */

.sy-journal-beyond__photos {
  display: grid;
  gap: 0.8rem;
}

.sy-journal-beyond__photo {
  border-radius: 1.5rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.98);
}

.sy-journal-beyond__photo img {
  display: block;
  border-radius: 1.25rem;
  max-width: 350px;
}

.sy-journal-beyond__photo--cafe {
  transform: translateY(4px);
}

/* -----------------------------------------
   17. Sharing or keeping pages private
   ----------------------------------------- */

.sy-journal-sharing {
  position: relative;
  padding-block: 3rem 3.6rem;
}

.sy-journal-sharing__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: center;
}

.sy-journal-sharing__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-sharing__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 34rem;
}

/* cards */

.sy-journal-sharing__grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.sy-journal-sharing__card {
  border-radius: 1.4rem;
  padding: 0.7rem 0.85rem;
  background: var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: var(--sy-shadow-soft);
}

.sy-journal-sharing__label {
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sy-text-muted);
}

.sy-journal-sharing__note {
  margin-top: 0.25rem;
  font-size: 0.86rem;
  color: var(--sy-text-soft);
}

.sy-journal-sharing__hint {
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--sy-text-muted);
}

/* visuals */

.sy-journal-sharing__visual {
  position: relative;
  min-height: 260px;
}

.sy-journal-sharing__photo {
  position: absolute;
  border-radius: 1.6rem;
  padding: 0.45rem 0.55rem 0.8rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
  max-width: 230px;
  transition:
    transform 210ms ease-out,
    box-shadow 210ms ease-out,
    border-color 210ms ease-out;
}

.sy-journal-sharing__photo img {
  display: block;
  border-radius: 1.25rem;
  max-width: 350px;
}

.sy-journal-sharing__photo--closed {
  top: 0;
  left: 4%;
  transform: rotate(-4deg);
}

.sy-journal-sharing__photo--friend {
  bottom: -4%;
  right: 2%;
  transform: rotate(4deg);
}

.sy-journal-sharing__photo:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(248, 250, 252, 0.9);
}

/* -----------------------------------------
   18. Gentle closing invitation
   ----------------------------------------- */

.sy-journal-closing {
  position: relative;
  padding-block: 3.2rem 4rem;
}

.sy-journal-closing__inner {
  display: flex;
  justify-content: center;
}

.sy-journal-closing__card {
  width: 100%;
  max-width: 900px;
  border-radius: 2.1rem;
  padding: 1.3rem 1.5rem 1.6rem;
  background: radial-gradient(circle at 0 0, rgba(94, 234, 212, 0.25), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(249, 168, 212, 0.25), transparent 60%),
              var(--sy-bg-elevated);
  border: 1px solid rgba(148, 163, 184, 0.8);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.98);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.4rem;
  align-items: center;
}

.sy-journal-closing__title {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 0.75rem;
  color: #e5e7eb;
}

.sy-journal-closing__text {
  font-size: 0.96rem;
  color: var(--sy-text-soft);
  max-width: 36rem;
}

.sy-journal-closing__text--hint {
  margin-top: 0.6rem;
  color: var(--sy-text-muted);
}

.sy-journal-closing__link {
  display: inline-flex;
  align-items: center;
  margin-top: 0.95rem;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(248, 250, 252, 0.9);
  background: rgba(15, 23, 42, 0.98);
  color: #e5e7eb;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.98);
  transition:
    background-color 200ms ease-out,
    transform 200ms ease-out,
    box-shadow 200ms ease-out,
    border-color 200ms ease-out;
}

.sy-journal-closing__link:hover {
  transform: translateY(-2px);
  background: rgba(15, 23, 42, 1);
  border-color: rgba(94, 234, 212, 0.9);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 1);
}

/* closing photos */

.sy-journal-closing__photos {
  display: grid;
  gap: 0.7rem;
}

.sy-journal-closing__photo {
  border-radius: 1.6rem;
  padding: 0.4rem 0.5rem 0.7rem;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.75);
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.98);
}

.sy-journal-closing__photo img {
  display: block;
  border-radius: 1.3rem;
  max-width: 350px;
}

.sy-journal-closing__photo--corner {
  transform: translateY(3px);
}

.sy-journal-closing__photo--logo {
  transform: translateY(6px);
}
/* ---------- Responsive: sections 16–18 ---------- */

@media (max-width: 1024px) {
  .sy-journal-beyond__inner,
  .sy-journal-sharing__inner,
  .sy-journal-closing__inner {
    gap: 2.4rem;
  }

  .sy-journal-beyond__title,
  .sy-journal-sharing__title,
  .sy-journal-closing__title {
    font-size: 1.8rem;
  }
}

@media (max-width: 900px) {
  .sy-journal-beyond__inner,
  .sy-journal-sharing__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .sy-journal-sharing__visual {
    margin-top: 1.3rem;
    min-height: 280px;
  }

  .sy-journal-sharing__photo {
    max-width: 220px;
  }

  .sy-journal-closing__card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .sy-journal-beyond,
  .sy-journal-sharing,
  .sy-journal-closing {
    padding-block: 2.6rem 2.9rem;
  }

  .sy-journal-beyond__text,
  .sy-journal-sharing__text,
  .sy-journal-closing__text {
    font-size: 0.9rem;
  }

  .sy-journal-sharing__visual {
    min-height: 260px;
  }
}

@media (max-width: 420px) {
  .sy-journal-sharing__photo {
    position: relative;
    transform: none;
    max-width: 100%;
  }

  .sy-journal-sharing__visual {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }

  .sy-journal-closing__card {
    padding-inline: 1.1rem;
  }
}