/* ============================================================
   memos.html — estilos propios. La lista reutiliza .index-list/.ix de la
   portada (hover con brillo) y añade la línea de meta y el resumen.
   ============================================================ */
.memo-list{max-width:1040px}
.memo.ix{grid-template-columns:1fr auto;gap:10px 24px;padding:36px 4px 32px;align-items:start}
.memo-k{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint)}
.memo.ix .nm{font-size:clamp(28px,4.4vw,54px);max-width:18ch;text-wrap:balance}
/* la fecha y el tiempo de lectura, como etiqueta: en tinta del tema y con
   marco, para que se lea sin competir con el título */
.memo.ix .fr{margin-top:clamp(6px,1vw,14px);white-space:nowrap;letter-spacing:.18em;text-transform:uppercase;
  font-size:12px;font-weight:500;color:var(--txt);border:1px solid var(--line);padding:10px 14px;line-height:1;
  background:var(--glass);transition:border-color .2s}
.memo.ix:hover .fr{border-color:var(--accent-deep)}
.memo-s{grid-column:1;margin:6px 0 0;max-width:62ch;color:var(--dim);font-size:14.5px;line-height:1.65;font-weight:300}
.memo-a{grid-column:1;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-top:6px}
.memo-a em{font-style:normal;color:var(--txt)}
.memo-l{grid-column:1;display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--txt);border-bottom:1px solid var(--line);
  padding-bottom:4px;width:max-content;transition:border-color .2s}
.memo.ix:hover .memo-l{border-color:currentColor}
@media(max-width:640px){
  .memo.ix{grid-template-columns:1fr}
  .memo.ix .fr{margin-top:0;order:-1;width:max-content}
}