/* My Articles as an editorial index, homepage (owner 2026-10-11; reference design/prototypes/my-articles-index.html).
   Full-width rows between 1 px rules; titles on exactly two lines (desktop + tablet) in light weight with the highlighted
   words in yellow bold italic; details top right. Hover / focus: the other title dims, this one slides right, a yellow
   line draws along the row's bottom, the article photo follows the cursor with the "Read on Medium" pill.
   Phones (< 860): photo above the title with the pill on it, title wraps, details under it.
   js/articles-index.js: fit() (both titles stay on two lines), entry rise, hover state, cursor photo. Values: tokens.css */
.ax { position: relative; }
.ax-row { position: relative; z-index: 1; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--ax-col-gap); align-items: start; padding: var(--ax-pad-t) 0 var(--ax-pad-b);
  border-top: var(--bw-1) solid var(--ax-line); color: var(--c-white); text-decoration: none; }
.ax-row:last-of-type { border-bottom: var(--bw-1) solid var(--ax-line); }
/* the yellow line along the bottom; the hovered row comes to the front so the next row's rule never covers it */
.ax-row::after { content: ""; position: absolute; left: 0; bottom: calc(var(--bw-1) * -1); width: 100%; height: var(--bw-1); z-index: 2;
  background: var(--c-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--pg-ease); }
.ax-row.on { z-index: 2; }
.ax-row.on::after { transform: scaleX(1); }

.ax-ttl { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-light);
  font-size: var(--ax-fs-fit, var(--ax-fs)); line-height: 1.02; letter-spacing: -0.025em; color: var(--c-white);
  transition: color 0.45s var(--pg-ease), transform 0.6s var(--pg-ease); }
.ax-ttl em { font-style: italic; font-weight: var(--fw-bold); letter-spacing: -0.03em; color: var(--c-brand); transition: color 0.45s var(--pg-ease); }
.ax-ln { display: block; white-space: nowrap; }           /* two lines, never wrapped (fit() keeps them inside the row) */
.ax-ln > span { display: block; }
.ax.js .ax-ln > span { transform: translateY(60px); opacity: 0; transition: transform 1s var(--pg-ease), opacity 0.8s var(--pg-ease); }
.ax.js .ax-row.in .ax-ln > span { transform: none; opacity: 1; }
.ax.js .ax-row.in .ax-ln + .ax-ln > span { transition-delay: 90ms; }

.ax-meta { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 10px; padding-top: 0.5em;
  font-family: var(--font-glegoo); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ax-muted); white-space: nowrap; }
.ax-meta i { font-style: normal; display: inline-block; width: var(--sp-16); }   /* the gap between "Medium" and the read time (no separator character, owner 2026-10-13) */

.ax-thumb { display: none; }
.ax-pill { display: inline-flex; align-items: center; padding: 10px 14px; border-radius: 999px; background: var(--c-brand); color: var(--c-on-brand);
  font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: 13px; line-height: 1; white-space: nowrap; }

/* hover / focus highlight (focus: every device; hover: pointer devices) */
.ax.hov .ax-ttl, .ax.hov .ax-ttl em { color: var(--ax-dim); }
.ax.hov .ax-row.on .ax-ttl { color: var(--c-white); transform: translateX(var(--ax-slide)); }
.ax.hov .ax-row.on .ax-ttl em { color: var(--c-brand); }
.ax-row:focus-visible { outline: none; }
.ax-row:focus-visible .ax-ttl { outline: var(--bw-2) solid var(--c-brand); outline-offset: 6px; border-radius: var(--r-8); }

/* the cursor photo (pointer devices) */
.ax-cur { position: absolute; left: 0; top: 0; z-index: 5; width: var(--ax-cur-w); aspect-ratio: 4 / 3; pointer-events: none; opacity: 0; transition: opacity 0.3s; will-change: transform; }
.ax-cur.on { opacity: 1; }
.ax-cur__card { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-media); box-shadow: var(--ax-shadow);
  clip-path: inset(100% 0 0 0 round var(--r-media)); transition: clip-path 0.55s var(--pg-ease); }
.ax-cur.on .ax-cur__card { clip-path: inset(0 0 0 0 round var(--r-media)); }
.ax-cur__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.ax-cur__card img.on { opacity: 1; }
.ax-cur .ax-pill { position: absolute; left: 50%; bottom: -18px; transform: translate(-50%, 8px); opacity: 0; transition: opacity 0.3s 0.1s, transform 0.4s var(--pg-ease) 0.1s; }
.ax-cur.on .ax-pill { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) { .ax, .ax-row { cursor: none; } }
@media (hover: none), (pointer: coarse) { .ax-cur { display: none; } }

@media (max-width: 859.98px) {
  .ax-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: var(--ax-pad-phone) 0; }
  .ax-thumb { display: block; position: relative; grid-row: 1; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; }
  .ax-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .ax-thumb .ax-pill { position: absolute; left: 12px; bottom: 12px; }
  .ax-ttl { grid-row: 2; }
  .ax-ln, .ax-ln > span { display: inline; white-space: normal; }   /* the title wraps naturally */
  /* entry: the whole title rises (its lines flow together here) */
  .ax.js .ax-ln > span { transform: none; opacity: 1; transition: none; }
  .ax.js .ax-ttl { transform: translateY(60px); opacity: 0; transition: transform 1s var(--pg-ease), opacity 0.8s var(--pg-ease); }
  .ax.js .ax-row.in .ax-ttl { transform: none; opacity: 1; }
  .ax-meta { grid-column: 1; grid-row: 3; padding-top: 0; }
  .ax-cur { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ax.js .ax-ln > span, .ax.js .ax-ttl { transform: none; opacity: 1; transition: none; }
  .ax-ttl, .ax-row::after, .ax-cur__card, .ax-cur .ax-pill { transition: none; }
  .ax.hov .ax-row.on .ax-ttl { transform: none; }
}