/* Layout */
main {
  width: 94vw;
  margin-left: 1.8vw;
}

/* Typography */
body {
  background: #fff;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
  padding: 24px 1vw 0 0;
  overflow-x: hidden; 
}

/* Entry Grid */
.entry {
  display: grid;
  grid-template-columns: 4rem 6.2ch minmax(0, 56ch) minmax(10ch, 1fr);
  column-gap: 4px;
  align-items: start; 
  padding: 3px 0;
  width: 100%;
}


/* Let each cell shrink and wrap instead of overflowing */
.num, .year, .title, .author {
  min-width: 0;
}

/* Number */
.num {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Arial Unicode MS", "Noto Sans Symbols 2", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: flex-start; 
  justify-content: flex-start;
  position: relative;
  top: 6px; 
  white-space: nowrap;
}

/* Text Columns */
.year,
.title,
.author {
  color: #000;
  font-weight: 400;
  text-decoration: none;
  margin: 0;
  line-height: 1.1;
  text-align: left;
  word-break: normal;
  overflow-wrap: anywhere;
  white-space: normal; /* allow wrapping */
}

.year {
  white-space: nowrap;
}

/* Title */
.title {
  display: inline;
  margin-left: 1px;
}

/* Author */
.author {
  margin-left: 6px;
}

/* Hover & Active */
.entry:hover .num,
.entry:hover .year,
.entry:hover .title,
.entry:hover .author,
.entry.open .num,
.entry.open .year,
.entry.open .title,
.entry.open .author {
  color: #ff0099;
}

/* Description */
.desc {
  grid-column: 3 / 5;
  margin-top: 6px;
  display: none;
  font-size: 24px;
  line-height: 1.25;
}

.entry.open .desc {
  display: block;
}

.desc {
  margin-top: 0.8em;   /* space above the description paragraph */
  margin-bottom: 1em;  /* space below the link */
}


.desc a {
  color: #ff0099;
  text-decoration: underline;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  line-break: anywhere;
}

/* Proportional scaling */

/* Small desktop (≤1300px) */
@media (max-width: 1300px) {
  body {
    font-size: 21px;
  }

  .entry {
    grid-template-columns: 38px 68px 2.7fr 1.1fr;
    column-gap: 8px;
  }

  .num, .year, .title, .author, .desc { font-size: 21px; }
}

/* Laptop (≤1100px) */
@media (max-width: 1100px) {
  body {
    font-size: 19px;
  }

  .entry {
    grid-template-columns: 36px 64px 2.45fr 1.1fr;
    column-gap: 6px;
  }

  .num, .year, .title, .author, .desc { font-size: 19px; }
}

/* Narrow laptop / tablet (≤900px) */
@media (max-width: 900px) {
  body {
    font-size: 17.5px;
  }

  .entry {
    grid-template-columns: 34px 60px 2.25fr 1.1fr;
    column-gap: 5px;
  }

  .num, .year, .title, .author, .desc { font-size: 17.5px; }
}

/* Tablet / large phone landscape (≤750px) */
@media (max-width: 750px) {
  body {
    font-size: 16px;
  }

  .entry {
    grid-template-columns: 32px 56px 2.1fr 1.05fr;
    column-gap: 4px;
  }

  .num, .year, .title, .author, .desc { font-size: 16px; }
}

/* Phones (≤600px) */
@media (max-width: 600px) {
  body {
    font-size: 15px;
    margin-left: 2vw;
    margin-right: 2vw;
  }

  .entry {
    grid-template-columns: 28px 50px 2fr 1fr;
    column-gap: 3px;
  }

  .num, .year, .title, .author, .desc { font-size: 15px; }
}


/* COLUMN LABEL ARROWS */
.column-labels {
  display: grid;
  grid-template-columns: 4rem 6.2ch minmax(0, 56ch) minmax(10ch, 1fr);
  align-items: start;
  margin-bottom: 6px;
  padding-left: 0;
  width: 100%;
}

.column-labels span:first-child {
  visibility: hidden; 
}

.column-labels .arrow {
  font-family: "Arial Unicode MS", "Noto Sans Symbols2", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #000;
  line-height: 1;
  display: inline-block;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}

.column-labels .arrow--year {
  transform: translateX(0.2ch) translateY(2px);
}

.column-labels .arrow--title {
  transform: translateX(0.7ch) translateY(2px);
}

.column-labels .arrow--author {
  transform: translateX(1.4ch) translateY(2px);
}

/* Hover + Active Pink */
.column-labels .arrow:hover,
.column-labels .arrow:focus {
  color: #ff0099;
}

@media (max-width: 1300px) {
  .column-labels {
    grid-template-columns: 38px 68px 2.7fr 1.1fr;
  }
}

@media (max-width: 1100px) {
  .column-labels {
    grid-template-columns: 36px 64px 2.45fr 1.1fr;
  }
}

@media (max-width: 900px) {
  .column-labels {
    grid-template-columns: 34px 60px 2.25fr 1.1fr;
  }
}

@media (max-width: 750px) {
  .column-labels {
    grid-template-columns: 32px 56px 2.1fr 1.05fr;
  }
}

@media (max-width: 600px) {
  .column-labels {
    grid-template-columns: 28px 50px 2fr 1fr;
  }
}