/* ==========================================
   VERMILLION DEN
   COMPLETE JOURNAL CSS
   2D PAGE-TURN TEST
   ========================================== */


/* GENERAL */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  background:
    #cf8d92
    url("images/journalbackground.png")
    center center / cover fixed;

  font-family: Georgia, "Times New Roman", serif;
  color: #553b3b;
}


/* ==========================================
   MAIN JOURNAL STAGE
   ========================================== */

.journal-stage {
  position: relative;

  width: min(1100px, 96vw);
  aspect-ratio: 2100 / 1300;

  margin: 30px auto;

  overflow: visible;
}


/* ==========================================
   DESKTOP ART
   ========================================== */

#desktop-journal-art {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.book-layer {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
  user-select: none;
}

.book-back {
  z-index: 1;
}

.page-left-art {
  z-index: 3;
}

.page-right-art {
  z-index: 4;
}


/* ==========================================
   DESKTOP BOOKMARKS
   ORIGINAL POSITIONS
   ========================================== */

#desktop-month-bookmarks {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 2;
  pointer-events: none;
}

.desktop-tab {
  position: absolute;
  display: block;

  pointer-events: auto;
  text-decoration: none;

  transition: transform 0.2s ease-out;
}

.desktop-tab img {
  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;
}


/* TOP BOOKMARKS */

.tab-jan {
  width: 40px;
  top: 10%;
  left: 58%;
}

.tab-feb {
  width: 40px;
  top: 10%;
  left: 65%;
}

.tab-mar {
  width: 40px;
  top: 12%;
  left: 71%;
}

.tab-apr {
  width: 40px;
  top: 10%;
  left: 78%;
}

.tab-may {
  width: 40px;
  top: 11%;
  left: 84%;
}


/* SIDE BOOKMARKS */

.tab-jun {
  width: 70px;
  top: 17%;
  right: 6%;
}

.tab-jul {
  width: 60px;
  top: 24%;
  right: 6.5%;
}

.tab-aug {
  width: 75px;
  top: 32.5%;
  right: 6%;
}

.tab-sep {
  width: 75px;
  top: 41%;
  right: 7%;
}

.tab-oct {
  width: 75px;
  top: 52%;
  right: 6%;
}

.tab-nov {
  width: 75px;
  top: 63%;
  right: 6%;
}

.tab-dec {
  width: 75px;
  top: 72%;
  right: 6.5%;
}


/* STRETCHY BOOKMARKS */

.desktop-tab:nth-child(-n+5) {
  transform-origin: center bottom;
}

.desktop-tab:nth-child(n+6) {
  transform-origin: left center;
}

.desktop-tab:nth-child(-n+5):hover,
.desktop-tab:nth-child(-n+5):focus-visible {
  transform: scaleY(1.08);
  z-index: 5;
}

.desktop-tab:nth-child(n+6):hover,
.desktop-tab:nth-child(n+6):focus-visible {
  transform: scaleX(1.08);
  z-index: 5;
}


/* HIDE MOBILE ART ON DESKTOP */

#mobile-journal-art {
  display: none;
}


/* ==========================================
   TABLE OF CONTENTS
   ========================================== */

.toc-content {
  position: absolute;
  z-index: 10;

  top: 20%;
  left: 18%;
  width: 62%;
  height: 55%;

  column-count: 2;
  column-gap: 13%;

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 4px;

  font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1.45;

  text-shadow: none;
  scrollbar-width: none;
}

.toc-content::-webkit-scrollbar {
  display: none;
}

.toc-heading {
  break-inside: avoid;
  margin-bottom: 18px;
  text-align: center;
}

.toc-heading h1 {
  margin: 0 0 3px;

  color: #6c2e33;

  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 1px;
}

.toc-heading p {
  margin: 0;

  color: #9b6a6d;

  font-size: 0.8em;
  font-style: italic;
}

.toc-month {
  break-inside: avoid;
  margin-bottom: 20px;
  scroll-margin-top: 10px;
}

.toc-month h2 {
  margin: 0 0 7px;
  padding-bottom: 3px;

  border-bottom: 1px solid #c89fa2;

  color: #6c2e33;

  font-size: 1em;
  font-weight: normal;

  text-transform: uppercase;
  letter-spacing: 1px;
}

.empty-month {
  margin: 0 0 5px;

  color: #ad898b;

  font-size: 0.82em;
  font-style: italic;
}

.toc-month a {
  display: flex;
  gap: 8px;

  margin-bottom: 5px;

  color: #654c4c;
  text-decoration: none;

  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.toc-month a:hover {
  color: #9b5159;
  transform: translateX(2px);
}

.toc-date {
  flex: 0 0 20px;

  color: #a46c70;

  font-size: 0.85em;
  text-align: right;
}

.toc-title {
  flex: 1;
}


/* ==========================================
   JOURNAL ENTRY
   ========================================== */

.post-content {
  position: absolute;
  z-index: 10;

  top: 20%;
  left: 18%;
  width: 62%;
  height: 55%;

  column-count: 2;
  column-gap: 13%;
  column-fill: auto;

  overflow: hidden;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 1.05vw, 15px);
  line-height: 1.5;

  color: #553b3b;
  text-shadow: none;
}

.post-heading {
  break-inside: avoid;
  margin-bottom: 16px;
}

.post-heading h1 {
  margin: 0 0 4px;

  color: #6c2e33;

  font-size: 1.45em;
  font-weight: normal;
  line-height: 1.2;
}

.post-date {
  margin: 0 0 16px;

  color: #9b6a6d;

  font-size: 0.85em;
  font-style: italic;
}

.post-content p {
  margin: 0 0 1em;
}

.post-image {
  display: block;

  max-width: 90%;
  max-height: 60%;

  width: auto;
  height: auto;

  margin: 14px auto;

  object-fit: contain;
  break-inside: avoid;
}


/* ==========================================
   AUTOMATIC PAGINATION
   ORIGINAL WRITING VIEWPORT
   ========================================== */

.post-viewport {
  position: absolute;
  z-index: 10;

  top: 20%;
  left: 18%;
  width: 62%;
  height: 55%;

  overflow: hidden;
}

.journal-post .post-viewport > .post-content {
  position: relative;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  column-count: 2;
  column-gap: 13%;
  column-fill: auto;

  overflow: visible;
  transform: none;
}


/* ==========================================
   DOG-EAR NAVIGATION
   ORIGINAL COORDINATES
   ========================================== */

.entry-navigation {
  position: absolute;
  inset: 0;

  z-index: 20;
  pointer-events: none;
}

.entry-corner {
  position: absolute;

  bottom: 18.7%;

  display: block;

  width: 90px;
  height: 80px;

  pointer-events: auto;
  text-decoration: none;
  cursor: pointer;
}

.entry-corner.previous {
  left: 9.7%;
}

.entry-corner.next {
  right: 9.7%;
}

.entry-corner img {
  position: absolute;
  bottom: 0;

  display: block;

  width: 80px;
  height: auto;

  opacity: 0;

  pointer-events: none;
  user-select: none;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.entry-corner.previous img {
  left: 0;
  transform-origin: left bottom;
}

.entry-corner.next img {
  right: 0;
  transform-origin: right bottom;
}

.entry-corner:hover img,
.entry-corner:focus-visible img {
  opacity: 1;
  transform: scale(1.1);
}


/* DOG-EAR LABELS */

.corner-label {
  position: absolute;
  bottom: 20px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 13px;
  font-style: italic;

  color: #77474c;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(4px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.previous .corner-label {
  left: 65px;
}

.next .corner-label {
  right: 65px;
}

.entry-corner.unavailable {
  opacity: 1;
  pointer-events: auto;
  cursor: default;
}


/* ==========================================
   NEW: ARTWORK-ALIGNED 2D PAGE TURN
   ========================================== */

/*
   Source PNG dimensions: 2048 x 1267

   Left page:
   x = 198 to 1024
   y = 174 to 1034

   Right page:
   x = 1024 to 1850
   y = 174 to 1034

   The temporary turning element is
   a DIV containing one IMG.

   This version uses 2D scaling,
   not 3D perspective.
*/


/* ACTUAL VISIBLE PAPER */

.page-flip-sheet {
  position: absolute;

  top: 13.733%;

  width: 40.332%;
  height: 67.877%;

  overflow: hidden;

  z-index: 15;

  pointer-events: none;
  user-select: none;

  will-change: transform;
}


/* LEFT PAGE: HINGE ON THE RIGHT */

.page-flip-sheet.page-flip-left {
  left: 9.668%;
  transform-origin: right center;
}


/* RIGHT PAGE: HINGE ON THE LEFT */

.page-flip-sheet.page-flip-right {
  left: 50%;
  transform-origin: left center;
}


/* DISPLAY THE FULL ARTWORK
   INSIDE THE CROPPED CONTAINER */

.page-flip-sheet > img {
  position: absolute;

  top: -20.233%;

  display: block;

  width: 247.942%;
  height: 147.326%;

  max-width: none;

  object-fit: fill;

  pointer-events: none;
  user-select: none;
}


/* POSITION LEFT-PAGE ART */

.page-flip-sheet.page-flip-left > img {
  left: -23.971%;
}


/* POSITION RIGHT-PAGE ART */

.page-flip-sheet.page-flip-right > img {
  left: -123.971%;
}


/* PREVENT ADDITIONAL TURNS
   UNTIL THE ANIMATION FINISHES */

.journal-stage.is-turning .entry-corner {
  pointer-events: none;
}


/* ==========================================
   TEXT SELECTION
   ========================================== */

::selection {
  background: #6c2e33;
  color: #f3dddd;
}

::-moz-selection {
  background: #6c2e33;
  color: #f3dddd;
}


/* ==========================================
   MOBILE JOURNAL
   ========================================== */

@media (max-width: 700px) {

  body {
    min-height: 100vh;

    background:
      #cf8d92
      url("images/mobilepage/background-tab.png")
      center top / 100% auto repeat-y;

    overflow-x: hidden;
  }


  /* MOBILE BOOK */

  .journal-stage {
    position: relative;

    width: min(88vw, 460px);
    aspect-ratio: 829 / 1207;

    margin: 60px auto 30px;

    padding: 0;
    overflow: visible;
  }

  #desktop-journal-art {
    display: none;
  }

  #mobile-journal-art {
    display: block;

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
  }

  .mobile-art-layer {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;
  }

  .mobile-background {
    z-index: 0;
  }

  .mobile-book-back {
    z-index: 1;
  }

  .mobile-page {
    z-index: 3;
  }


  /* MOBILE BOOKMARKS */

  #mobile-month-bookmarks {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 2;
    pointer-events: none;
  }

  .mobile-tab {
    position: absolute;
    display: block;

    pointer-events: auto;
    text-decoration: none;
  }

  .mobile-tab img {
    display: block;

    width: 100%;
    height: auto;

    pointer-events: none;
    user-select: none;
  }


  /* ORIGINAL MOBILE TOP POSITIONS */

  .mobile-tab-jan {
    width: 11%;
    top: -5%;
    left: 8%;
  }

  .mobile-tab-feb {
    width: 13%;
    top: -5%;
    left: 22%;
  }

  .mobile-tab-mar {
    width: 11%;
    top: -5%;
    left: 38%;
  }

  .mobile-tab-apr {
    width: 12%;
    top: -5%;
    left: 52%;
  }

  .mobile-tab-may {
    width: 12%;
    top: -5%;
    left: 68%;
  }


  /* ORIGINAL MOBILE SIDE POSITIONS */

  .mobile-tab-jun {
    width: 11%;
    top: 9.5%;
    right: 0;
  }

  .mobile-tab-jul {
    width: 11%;
    top: 19%;
    right: 0;
  }

  .mobile-tab-aug {
    width: 11%;
    top: 30%;
    right: 0;
  }

  .mobile-tab-sep {
    width: 11%;
    top: 41.5%;
    right: 0;
  }

  .mobile-tab-oct {
    width: 11%;
    top: 54.5%;
    right: 0;
  }

  .mobile-tab-nov {
    width: 11%;
    top: 66%;
    right: 0;
  }

  .mobile-tab-dec {
    width: 11%;
    top: 78%;
    right: 0;
  }

  .mobile-tab-jun,
  .mobile-tab-jul,
  .mobile-tab-aug,
  .mobile-tab-sep,
  .mobile-tab-oct,
  .mobile-tab-nov,
  .mobile-tab-dec {
    transform: translateX(45%);
  }


  /* MOBILE TABLE OF CONTENTS */

  .toc-content {
    position: absolute;
    z-index: 10;

    top: 10%;
    left: 20%;

    width: 60%;
    height: 82%;

    column-count: 1;
    column-gap: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 0;

    background: transparent;
    border: none;

    font-size: clamp(10px, 3vw, 14px);
    line-height: 1.4;

    scrollbar-width: none;
  }

  .toc-content::-webkit-scrollbar {
    display: none;
  }

  .toc-heading {
    margin-bottom: 18px;
  }

  .toc-heading h1 {
    font-size: 1.35em;
  }

  .toc-month {
    margin-bottom: 18px;
  }

  .toc-month a {
    gap: 5px;
    margin-bottom: 5px;
  }

  .toc-date {
    flex: 0 0 18px;
  }


  /* MOBILE WRITING */

  .post-content {
    position: absolute;
    z-index: 10;

    top: 10%;
    left: 20%;

    width: 60%;
    height: 82%;

    column-count: 1;
    column-gap: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 0;

    font-size: clamp(10px, 3vw, 14px);
    line-height: 1.4;

    scrollbar-width: none;
  }

  .post-content::-webkit-scrollbar {
    display: none;
  }

  .post-heading {
    margin-bottom: 14px;
  }

  .post-heading h1 {
    font-size: 1.35em;
  }

  .post-image {
    max-width: 100%;
    max-height: none;
  }


  /* MOBILE CONTINUOUS SCROLLING */

  .post-viewport {
    top: 10%;
    left: 20%;

    width: 60%;
    height: 82%;

    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: none;
  }

  .post-viewport::-webkit-scrollbar {
    display: none;
  }

  .journal-post .post-viewport > .post-content {
    position: relative;

    top: 0;
    left: 0;

    width: 100%;
    height: auto;

    column-count: 1;
    column-gap: 0;

    overflow: visible;

    transform: none !important;

    padding-bottom: 48px;
  }


  /* MOBILE INVISIBLE ARROW BUTTONS */

  .entry-corner {
    bottom: 5%;

    width: 55px;
    height: 55px;
  }

  .entry-corner.previous {
    left: 5%;
  }

  .entry-corner.next {
    right: 5%;
  }

  .entry-corner img {
    display: none;
  }

  .corner-label {
    display: none;
  }

  .entry-corner.unavailable {
    pointer-events: none;
  }

  .entry-corner:focus-visible {
    outline: 2px solid #6c2e33;
    outline-offset: 2px;
    border-radius: 6px;
  }

  .journal-post .post-content {
    padding-bottom: 48px;
  }


  /* NO DESKTOP TURNING SHEETS ON MOBILE */

  .page-flip-sheet {
    display: none;
  }

}


/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  .entry-corner img,
  .corner-label,
  .desktop-tab {
    transition: none;
  }

}


/* MIGRATED ENTRY ADDITIONS: only display months present in that year.
   The hidden placeholders preserve the original nth-child hover directions. */
.journal-post .month-unpublished { display: none !important; }

/* Each old entry had a Commentbox. Keep it *outside* the book so it
   cannot overlap the writing, dog-ears or desktop page animation. */
.journal-comments {
  width: min(800px, 90vw);
  margin: 24px auto 60px;
  padding: 18px;
  background: rgba(255, 248, 244, .92);
  border: 1px solid #bd9295;
  border-radius: 8px;
}

/* ALWAYS-AVAILABLE YEAR SELECTOR */

.journal-home-link {
  position: absolute;
  z-index: 30;

  top: 5%;
  left: 10%;

  padding: 5px 10px;

  background: #fff1f0;
  border: 1px solid #c89fa2;
  border-radius: 5px;

  color: #6c2e33;
  font: italic 12px Georgia, serif;
  text-decoration: none;

  transition: background 0.2s ease;
}

.journal-home-link:hover,
.journal-home-link:focus-visible {
  background: #eac6ca;
  text-decoration: underline;
}

@media (max-width: 700px) {
  .journal-home-link {
    top: -5%;
    left: 3%;
    padding: 4px 8px;
  }
}

/* =====================================
   FIT THE ENTIRE JOURNAL TO THE WINDOW
   DESKTOP ONLY
   ===================================== */

@media (min-width: 701px) {

  .journal-stage {
    width: min(
      96vw,
      calc((100dvh - 120px) * 1.6153846)
    );

    max-width: none;
  }

}

/* =====================================
   RESPONSIVE DESKTOP BOOKMARKS
   Scale with the book itself
   ===================================== */

@media (min-width: 701px) {

  /* TOP BOOKMARKS */

  #desktop-month-bookmarks .tab-jan,
  #desktop-month-bookmarks .tab-feb,
  #desktop-month-bookmarks .tab-mar,
  #desktop-month-bookmarks .tab-apr,
  #desktop-month-bookmarks .tab-may {
    width: 3.64%;
  }


  /* SIDE BOOKMARKS */

  #desktop-month-bookmarks .tab-jun {
    width: 6.36%;
  }

  #desktop-month-bookmarks .tab-jul {
    width: 5.45%;
  }

  #desktop-month-bookmarks .tab-aug,
  #desktop-month-bookmarks .tab-sep,
  #desktop-month-bookmarks .tab-oct,
  #desktop-month-bookmarks .tab-nov,
  #desktop-month-bookmarks .tab-dec {
    width: 6.82%;
  }

}

/* =====================================
   RESPONSIVE JOURNAL DOGEARS
   DESKTOP ONLY
   ===================================== */

@media (min-width: 701px) {

  /* Scale both clickable corners
     proportionally with the book */

  .journal-stage .entry-corner {
    width: 8.18%;
    height: auto;
    aspect-ratio: 90 / 80;
  }


  /* Scale the dogear illustrations */

  .journal-stage .entry-corner img {
    width: 88.89%;
    height: auto;
  }


  /* Keep labels attached to the corners */

  .journal-stage .corner-label {
    bottom: 25%;
    font-size: clamp(9px, 1vw, 13px);
  }


  .journal-stage .previous .corner-label {
    left: 72.22%;
  }


  .journal-stage .next .corner-label {
    right: 72.22%;
  }

}

/* CUSTOM JOURNAL QUILL CURSOR */

body, body * {
  cursor:
    url("/homeimages/quillcursor.png") 8 52,
    auto !important;
}

/* WRITING QUILL WHEN CLICKING */

body:active,
body:active * {
  cursor:
    url("/homeimages/quillcursorwrite.png") 8 52,
    auto !important;
}