/* //////////////////////////////////////////////////////////////////////////

   Notes
   |
   ├─ General
   └─ Note page

   ////////////////////////////////////////////////////////////////////////// */

:root {

   /* Fonts
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */ 
   --font-post-title: clamp(5rem, 6.2vw, 10rem);
   --font-post-label: clamp(2.4rem, 4vw, 4rem);;

}

/* //////////////////////////////////////////////////////////////////////////

   Notes
   
   ////////////////////////////////////////////////////////////////////////// */

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   General
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.notes {
   max-width: 100%;
}

.notes-wrap {
   border-top: var(--border-thin);
}

.notes-wrap:last-of-type {
   border-bottom: var(--border-thin);
}

.notes-wrap a {
   display: grid;
   align-items: center;
   padding: max(10px, 1vw) 0;
   list-style: none;
   text-decoration: none;
   color: var(--color-font-one);
   gap: max(20px, 2vw);
   grid-template-columns: auto 1fr auto;
}

.notes-wrap a:hover {
   text-decoration: none;
   color: var(--color-font-one);
}

.notes-wrap a span.title {
   font-size: var(--font-post-label);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   color: var(--color-font-one);
}

.notes-wrap a span.date {
   color: var(--color-font-two);
   justify-self: end;
}

.notes-wrap a:hover span.title {
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
}

/* Arrow */
.notes-wrap a::after {
   display: inline-block;
   margin-right: max(10px, 1vw);
   content: '→';
   transition: transform .3s ease;
   transform: translateX(0);
   color: var(--color-font-two);
   justify-self: end;
}

.notes-wrap a:hover::after {
   transform: translateX(10px);
}

/* RWD — General
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:1024px) {
   .notes-wrap a {
      grid-template-columns: auto 1fr;
   }

   .notes-wrap a span.date {
      display: none;
   }

}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
   Note page
   –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.note-title {
   font-size: var(--font-post-title);
   line-height: 1.1;
   display: inline-block;
   margin: max(10px, 1vw) 0 0;
}

.note-subtitle {
   color: var(--color-font-two);
}

.note-date {
   padding-bottom: 1.5vh;
   border-bottom: var(--border-thin);
}