/* =========================
   MOBILE LAYOUT
   ========================= */

@media (max-width: 768px) {

  /* ---- NAVIGATION ---- */

  /* GLOBAL RESET */

    
  .side-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 220px;
    padding: 60px 20px;
    background: #f3f5f6;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }

  .mobile-nav-toggle {
    position: fixed;
    top: 5px;
    left: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #241010;
    z-index: 1100;
    cursor: pointer;
      display: block;
  }

  .side-nav.open {
    transform: translateX(0);
  }

.content {
    width: auto;
    margin: 0 auto;
    padding-top: 80px;
    margin-left: 10px;
    margin-right:10px; 
}

  /* MAIN TEXT — mobile reading standard */
  .textcopy, .subcopy,
  .textcopy-local {
    font-size: 16px;        /* 👈 standard readable size */
    line-height: 1.4;      /* 👈 comfortable reading */
    letter-spacing: -0.5px;
    padding-left: 18px;    /* 👈 standard mobile gutter */
    padding-right: 18px;
    width: 100%;
    box-sizing: border-box;
  }

  /* headings scale naturally */
  .headline {
    font-size: 36px;
    line-height: 1.;
    padding-left: 18px;
    padding-right: 18px;
    letter-spacing: -4px;
  }

  /* ---- TAG LEGEND ---- */

   .note-dot,
  .tag-dot {
    width: 12x;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
  }

  /* ---- GRID ---- */

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10px, 18px));
    gap: 3px;
    width: 90%;
    margin-left:20px;
  }

    /* ---- DOTS ---- */
  /* IMPORTANT: dot size stays EXACTLY the same */

/* TAGS + SORT */
.tag-row {
    flex-wrap: wrap;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px 10px;
    margin-bottom: 30px;
    margin-left:20px;
    width: 90%;
}

/* SINGLE GRID ITEM */
.grid-item {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* TAG BAR AT TOP */
.tag-bar {
  display: flex;
  gap: 16px;
  margin: -15px 0 60px 0px;
  font-size: 14px;
   margin-left:20px;
  width:auto;
}

.tag-bar span {
  cursor: pointer;
  user-select: none;
}

.toggle-btn {
    margin-left:20px;
}

/* ARTICLE LIST */
.notes-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: left;
  margin-left:30px;
  margin-right:10px;
}

.note-row {
  display: grid;
  grid-template-columns: 10% auto auto 20%;
  align-items: left;
  gap: 12px;
}

/* DOT */
.note-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

/* TITLE */
.note-title {
  font-size: 14px;
  text-decoration: underline;
  background:transparent;
  color: #241010;
}


/* DATE */
.note-date {
  font-size: 14px;
  opacity: 1;
  text-align: right;
}

/* WORD TAGS (RIGHT) */
.note-tags {
  display: flex;
  gap: 10px;
}

/* PLAIN WORD TAGS */
.word-tag {
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

}