/* =========================================================
   JOURNAL PAGE
========================================================= */

.journal-page {
    background: var(--soft-ivory);
    color: var(--deep-green);
  }
  
  
  /* =========================================================
     INTRO
  ========================================================= */
  
  .journal-intro {
    padding: 55px 20px 38px;
    text-align: center;
  
    background: linear-gradient(
      180deg,
      #f8f6f3 0%,
      #f1efe9 100%
    );
  }
  
  .journal-eyebrow {
    margin: 0 0 8px;
  
    color: var(--moss);
  
    font-family: "Josefin Sans", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
  
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  
  .journal-intro h1 {
    margin: 0;
  
    color: var(--deep-green);
  
    font-family: "Playfair Display", serif;
  
    font-size: clamp(2.3rem, 5vw, 3.4rem);
  
    line-height: 1.1;
  }
  
  .journal-season {
    margin: 10px 0 0;
  
    color: var(--sage);
  
    font-family: "Josefin Sans", sans-serif;
  
    font-size: 0.88rem;
  
    letter-spacing: 0.12em;
  
    text-transform: uppercase;
  }
  
  .journal-rule {
    width: 110px;
    height: 1px;
  
    margin: 18px auto;
  
    background: var(--gold-line);
  }
  
  .journal-description {
    max-width: 500px;
  
    margin: 0 auto;
  
    color: var(--body-text);
  
    font-family: "Josefin Sans", sans-serif;
  
    font-size: 0.9rem;
  
    line-height: 1.7;
  }
  
  
  /* =========================================================
     READER
  ========================================================= */
  
  .journal-reader-section {
    padding: 38px 20px 45px;
  
    background: var(--deep-green);
  }
  
  .journal-viewer {
    width: 100%;
    max-width: 1100px;
  
    margin: 0 auto;
  }
  
  .journal-pages {
    display: flex;
  
    justify-content: center;
    align-items: flex-start;
  
    width: 100%;
  
    margin: 0 auto;
  }
  
  
  /* =========================================================
     PDF PAGES
  ========================================================= */
  
  .journal-page-canvas {
    display: block;
  
    width: auto;
  
    height: auto;
  
    background: white;
  
    box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.25);
  }
  
  
  /* Desktop: two pages */
  
  @media (min-width: 701px) {
  
    .journal-page-canvas {
      width: 50%;
      max-width: 550px;
    }
  
  }
  
  
  /* Mobile: one page */
  
  @media (max-width: 700px) {
  
    .journal-page-canvas {
      width: 100%;
      max-width: 500px;
    }
  
  }
  
  
  /* =========================================================
     LOADING
  ========================================================= */
  
  .loading-message {
    color: var(--soft-ivory);
  
    font-family: "Josefin Sans", sans-serif;
  
    font-size: 0.9rem;
  
    letter-spacing: 0.06em;
  }
  
  
  /* =========================================================
     CONTROLS
  ========================================================= */
  
  .journal-controls {
    display: flex;
  
    align-items: center;
    justify-content: center;
  
    gap: 25px;
  
    margin-top: 25px;
  }
  
  .journal-controls button {
    width: 42px;
    height: 42px;
  
    border: 1px solid rgba(251, 249, 246, 0.6);
  
    border-radius: 50%;
  
    color: var(--soft-ivory);
  
    background: transparent;
  
    font-size: 1.1rem;
  
    cursor: pointer;
  }
  
  .journal-controls button:hover:not(:disabled) {
    background: var(--teal-soft);
  
    color: var(--deep-green);
  }
  
  .journal-controls button:disabled {
    opacity: 0.3;
  
    cursor: default;
  }
  
  #pageNumber {
    min-width: 70px;
  
    color: var(--soft-ivory);
  
    font-family: "Josefin Sans", sans-serif;
  
    font-size: 0.82rem;
  
    text-align: center;
  }
  
  
  /* =========================================================
     OPEN LINK
  ========================================================= */
  
  .journal-open {
    margin-top: 20px;
  
    text-align: center;
  }
  
  .journal-open a {
    color: var(--soft-ivory);
  
    font-family: "Josefin Sans", sans-serif;
  
    font-size: 0.78rem;
  
    letter-spacing: 0.05em;
  
    text-decoration: underline;
  
    text-underline-offset: 4px;
  
    opacity: 0.8;
  }
  
  .journal-open a:hover {
    opacity: 1;
  }
  
  
  /* =========================================================
     CLOSING
  ========================================================= */
  
  .journal-closing {
    padding: 60px 20px;
  
    text-align: center;
  
    background: linear-gradient(
      180deg,
      #f8f6f3 0%,
      #f1efe9 100%
    );
  }
  
  .journal-closing p {
    margin: 0 0 15px;
  
    color: var(--body-text);
  
    font-family: "Playfair Display", serif;
  
    font-size: 1.25rem;
  }
  
  .journal-closing a {
    color: var(--deep-green);
  
    font-family: "Josefin Sans", sans-serif;
  
    font-size: 0.85rem;
  
    text-decoration: underline;
  
    text-underline-offset: 4px;
  }
  
  
  /* =========================================================
     FOOTER
  ========================================================= */
  
  .journal-footer {
    padding: 40px 20px;
  
    text-align: center;
  
    background: var(--deep-green);
  
    color: var(--cream);
  }
  
  .journal-footer p {
    max-width: 700px;
  
    margin: 0 auto;
  
    font-family: "Josefin Sans", sans-serif;
  
    font-size: 0.75rem;
  
    line-height: 1.7;
  
    letter-spacing: 0.04em;
  }
  
  .journal-footer .footer-seals {
    margin-top: 18px;
  }
  
  
  /* =========================================================
     MOBILE
  ========================================================= */
  
  @media (max-width: 700px) {
  
    .journal-intro {
      padding: 40px 18px 30px;
    }
  
    .journal-intro h1 {
      font-size: 2.25rem;
    }
  
    .journal-description {
      font-size: 0.85rem;
    }
  
    .journal-reader-section {
      padding: 25px 10px 35px;
    }
  
    .journal-pages {
      width: 100%;
    }
  
    .journal-controls {
      margin-top: 18px;
      gap: 20px;
    }
  
  }
  
  
  /* =========================================================
     SMALL PHONES
  ========================================================= */
  
  @media (max-width: 420px) {
  
    .journal-reader-section {
      padding-left: 6px;
      padding-right: 6px;
    }
  
  }