/* ============================================================
   Animeakie — Author system tokens + byline component
   Reusable portfolio pattern: 6 contributor slots, each with a
   distinct accent derived from the brand palette (earthy / muted).
   Future rosters just reassign --aut-*-accent and --aut-*-initial.
   ============================================================ */

.system-root[data-preset="animeakie"] {
  /* 6 contributor accents — muted, earthy, all peers of the oxblood brand.
     Keep saturation ~35–45%, lightness ~38–48% so they feel adult/periodical. */
  --aut-akie-accent:      #b5533a;  /* warm terracotta — retro / Club Dorothée */
  --aut-mori-accent:      #c14a2e;  /* ember red — shōnen / action */
  --aut-valentine-accent: #a8516b;  /* aged rose — shōjo / romance */
  --aut-riku-accent:      #4e6b3c;  /* forest green — studios / direction */
  --aut-elsa-accent:      #2f4a6b;  /* ink blue — actualité / industrie */
  --aut-theo-accent:      #6b2b2b;  /* oxblood-deep — seinen / classiques */

  /* Each accent pairs with a light ink so it reads well on parchment */
  --aut-ink: #f6f3ec;
}

/* ---------- Byline component ---------- */
/* Core pattern: [avatar] Par [Name] · [Role / Territory] · [Date] · [Reading time]
   Used on article cards, article reading view, and author lists. */
.ak-byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1.2;
  text-decoration: none;
}
.ak-byline .ak-avatar {
  flex-shrink: 0;
}
.ak-byline .par {
  opacity: 0.6;
  font-weight: 400;
}
.ak-byline .name {
  color: var(--color-text-primary);
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ak-byline a.name {
  border-bottom: 1px solid transparent;
  transition: border-color 120ms;
}
.ak-byline a.name:hover { border-bottom-color: var(--color-text-primary); }
.ak-byline .sep { opacity: 0.4; }
.ak-byline .territory {
  color: var(--color-text-secondary);
  font-weight: 400;
}

/* Compact variant — smaller mono, tighter gap, used in dense lists */
.ak-byline.compact {
  font-size: 10px;
  gap: 8px;
  letter-spacing: 0.06em;
}
.ak-byline.compact .ak-avatar { width: 20px; height: 20px; }
.ak-byline.compact .ak-avatar .letter { font-size: 11px; }

/* Large variant — lead byline on article reading view */
.ak-byline.large {
  font-size: 12px;
  gap: 12px;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  row-gap: 6px;
}
.ak-byline.large .ak-avatar { width: 40px; height: 40px; }
.ak-byline.large .ak-avatar .letter { font-size: 17px; }

/* ---------- Typographic avatar ---------- */
/* Single initial in a circle, colored by author accent.
   Apply a modifier class like .for-riku to set the color.
   Default is oxblood (brand accent) for "La rédaction" / unknown. */
.ak-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--aut-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  line-height: 1;
}
.ak-avatar .letter {
  font-size: 14px;
  position: relative;
  top: -0.5px;
}
.ak-avatar.square { border-radius: 0; }

/* Author color modifiers — one per contributor.
   Used as: <span class="ak-avatar for-riku"><span class="letter">R</span></span> */
.ak-avatar.for-akie      { background: var(--aut-akie-accent); }
.ak-avatar.for-mori      { background: var(--aut-mori-accent); }
.ak-avatar.for-valentine { background: var(--aut-valentine-accent); }
.ak-avatar.for-riku      { background: var(--aut-riku-accent); }
.ak-avatar.for-elsa      { background: var(--aut-elsa-accent); }
.ak-avatar.for-theo      { background: var(--aut-theo-accent); }

/* Size variants */
.ak-avatar.sm { width: 20px; height: 20px; }
.ak-avatar.sm .letter { font-size: 11px; }
.ak-avatar.md { width: 28px; height: 28px; }
.ak-avatar.lg { width: 44px; height: 44px; }
.ak-avatar.lg .letter { font-size: 18px; }
.ak-avatar.xl { width: 80px; height: 80px; }
.ak-avatar.xl .letter { font-size: 32px; }
.ak-avatar.xxl { width: 160px; height: 160px; }
.ak-avatar.xxl .letter { font-size: 64px; }

/* ---------- Byline-with-territory pattern (article cards) ---------- */
/* Shows the author's territory label alongside their name, e.g.
   "R  Par Riku · Studios & direction" — useful when territory clarifies the angle. */
.ak-byline .role-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Color the byline name by author — subtle tint, only on hover or focus */
.ak-byline.for-akie      a.name:hover { color: var(--aut-akie-accent); }
.ak-byline.for-mori      a.name:hover { color: var(--aut-mori-accent); }
.ak-byline.for-valentine a.name:hover { color: var(--aut-valentine-accent); }
.ak-byline.for-riku      a.name:hover { color: var(--aut-riku-accent); }
.ak-byline.for-elsa      a.name:hover { color: var(--aut-elsa-accent); }
.ak-byline.for-theo      a.name:hover { color: var(--aut-theo-accent); }