/* Author hub (/authors/{slug}) — editorial identity header.

   Prod's author hub is the minimal canonical-author page: an eyebrow,
   the author name, optional bio + homepage, then the shared masonry
   (recipes-index.css). The design-system port (PORT-SPEC §8) wants a
   "SoundCloud-artist identity moment" — but prod has no cover image,
   favicon avatar, verified seal, socials, stat card, or Follow state
   (all new data/persisted state, DEFERRED per NO-TOUCH). So this lane
   delivers the part that fits the existing data: a confident editorial
   identity header. The author NAME is the one generous move (bible 11,
   "one generous move per page"); everything below stays calm and the
   masonry inherits the already-restyled recipes-index rhythm.

   Scoped under .author-hub so the shared .recipes-index* classes (used
   by /recipes + /saved) are untouched. */

@layer components {
  .author-hub__header {
    /* A calm identity band: generous breathing room above the name,
       a hairline rule that lets the masonry below read as a separate
       section. Content surface — border for structure, no resting
       shadow, no glass (bible 1.6 / 11.2). */
    padding-block-end: var(--space-6);
    margin-block-end: var(--space-7);
    border-block-end: 1px solid var(--md-border-muted);
  }

  /* "Author" eyebrow: mono small-caps in the shy accent text colour —
       the one bit of tomato, label-grade (bible 2.4). */
  .author-hub__eyebrow {
    color: var(--md-primary-text);
  }

  /* The generous move: the author name at display scale in Fraunces,
       tightened tracking, settled optical size. */
  .author-hub__name {
    font-family: var(--font-heading);
    font-weight: var(--weight-semibold);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-block: var(--space-2) 0;
  }

  .author-hub__bio {
    max-inline-size: var(--content-narrow);
    margin-block-start: var(--space-3);
    color: var(--md-on-surface-variant);
    line-height: var(--leading-relaxed);
  }

  /* Homepage link: accent-text, no underline until hover — an external
       link out to the author's own site (the template keeps rel=ugc). */
  .author-hub__home {
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
  }
  .author-hub__home a {
    color: var(--md-primary-text);
    text-decoration: none;
  }
  .author-hub__home a:hover {
    text-decoration: underline;
  }

  /* Desktop (>=1024px): the app-shell sidebar is provided by layout.css;
     the column already caps at --content-max via .page-shell. Give the
     name room to grow to display scale and open the header rhythm so the
     identity reads as the page's confident moment. Literal 1024px per the
     responsive-fork canon (CSS vars can't live in a media query). */
  @media (min-width: 1024px) {
    .author-hub__header {
      padding-block: var(--space-4) var(--space-8);
      margin-block-end: var(--space-9);
    }
    .author-hub__name {
      font-size: var(--text-5xl);
      letter-spacing: var(--tracking-display);
    }
  }
}