:root{
  --brand:#800000;
  --accent:#ffba08;
  --text:#1A1A1A;
  --muted:#616161;
  --surface:#ffffff;
  --line:rgba(0,0,0,.08);
  --row-hover:rgba(128,0,0,.06);
}

/* Table container */
.article-table{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  overflow: hidden;
  font-size: 15px;
}

/* Grid columns (desktop) */
.article-row{
  display: grid;
  /* Title | Authors | Category | Published | Action */
  grid-template-columns: 1.6fr 0.9fr 0.8fr minmax(11ch, 0.7fr) 0.5fr;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-top: 1px solid var(--line);
}

.article-row:first-child{ border-top: none; }

/* Header */
.article-row.header{
  background: linear-gradient(#fafafa, #f3f3f3);
  color: #333;
  font-weight: 700;
  letter-spacing: .2px;
  border-bottom: 1px solid var(--line);
}

/* Zebra + hover */
.article-row:not(.header):nth-child(odd){ background: rgba(0,0,0,.015); }
.article-row:not(.header):hover{
  background: var(--row-hover);
}

/* Cells */
.cell{ min-width: 0; }

/* Title & excerpt */
.title .title-text{
  margin: 0 0 4px 0;
  font-size: 1rem;
  line-height: 1.3;
}
.title .excerpt{
  margin: 0;
  color: var(--muted);
  font-size: .93rem;
}

/* Link styling */
.row-link{ color: inherit; text-decoration: none; }
.row-link:hover .title-text{ text-decoration: underline; }

/* Truncation helpers */
.truncate-1{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.truncate-2{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Authors / Category / Date */
.authors{ color: #2d2d2d; }
.category .badge{
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: .24rem .6rem;
  font-size: .78rem;
  line-height: 1;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date{ justify-self: end; }           /* right-align the date column */
.date time{
  white-space: nowrap;               /* never wrap dates like "Sep 30, 2025" */
  font-variant-numeric: tabular-nums;/* cleaner alignment for digits */
}


/* Action button */
.btn-read{
  display: inline-block;
  padding: .5rem .7rem;
  border: 1px solid var(--brand);
  color: var(--brand);
  background: #fff;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn-read:hover{
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(128,0,0,.2);
}
.btn-read:focus{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Subtle left accent on hover (title col) */
.article-row:not(.header):hover .title{
  box-shadow: inset 3px 0 0 var(--brand);
  border-radius: 3px;
}

/* Authors should wrap (override any truncate styles) */
.article-row .authors,
.article-row .authors *{
  white-space: normal;          /* allow wrapping */
  overflow-wrap: anywhere;      /* break very long strings if needed */
  word-break: break-word;       /* safety for long names/emails */
  text-overflow: clip;          /* no ellipsis */
  line-height: 1.35;
}


/* Responsive tweaks */
@media (max-width: 980px){
  .article-row{
    grid-template-columns: 1.5fr 0.9fr 0.7fr 0.6fr auto;
    gap: 10px;
  }
  .title .excerpt{ display: none; } /* keep rows compact on tablets */
}

@media (max-width: 680px){
  .article-row.header{ display: none; }
  .article-row{
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }

  /* Mobile labels via CSS (keeps markup unchanged) */
  .authors::before,
  .category::before,
  .date::before{
    content: attr(data-label);
    display: inline-block;
    font-weight: 600;
    color: var(--muted);
    margin-right: 6px;
  }

  .btn-read{ width: 100%; }
}