/* Writer identity styling (owner rounds 2026-10-02 and 2026-10-09): the
   registered decorative mascot anchors the UI-020 author head and the authors
   index as a mounted plate and rides the UI-019 byline as a small chip, and
   the writer name signs 「<Name> · Jolvex」 everywhere (PRD-034). The flat
   mascot art carries its own plain white ground, so the frame is the site's
   hairline plate language only — one border token adapts both themes (on the
   dark canvas the white art reads as an intentional chip, like the white
   tile under every .inst-logo). Kept here — not article.css — so that module stays under the
   500-line limit. Loads after article.css; tokens resolve via tokens.css.
   The authors index masthead and the Insights writers strip live in
   authors-index.css. */

/* ---------- The avatar plate (author head and authors index) ---------- */

/* Mounted plate: hairline frame on the site surface with the frozen
   hard-offset press shadow and two print crop marks, like a printer's proof.
   The mascot's own white margin is the mat, so the image fills the box — no
   double mat. --plate-mark is the crop tick; the far mark clears the shadow. */
.writer-plate {
  --plate-mark: var(--space-3);
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-press);
}
.writer-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.writer-plate::before,
.writer-plate::after {
  content: "";
  position: absolute;
  width: var(--plate-mark);
  height: var(--plate-mark);
  pointer-events: none;
}
.writer-plate::before {
  top: calc(var(--plate-mark) * -1);
  left: calc(var(--plate-mark) * -1);
  border-block-start: 2px solid var(--color-text);
  border-inline-start: 2px solid var(--color-text);
}
.writer-plate::after {
  right: calc(var(--plate-mark) * -2);
  bottom: calc(var(--plate-mark) * -2);
  border-inline-end: 2px solid var(--color-text);
  border-block-end: 2px solid var(--color-text);
}
[data-theme="dark"] .writer-plate { box-shadow: 0.3125rem 0.3125rem 0 var(--color-border-strong); }
.writer-plate--ghost {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-display);
  color: transparent;
  -webkit-text-stroke: 2px var(--color-border-strong);
}
/* One orchestrated moment: the plate presses onto the page (the index
   staggers its three). Transform and shadow only, so nothing shifts layout. */
@keyframes plate-stamp {
  from {
    opacity: 0;
    transform: translate(0.3125rem, 0.3125rem);
    box-shadow: 0 0 0 var(--color-border-strong);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .writer-plate {
    animation: plate-stamp var(--duration-signature) var(--ease-enter) backwards;
  }
}
/* Phones seat the plate beside the name, so the marks tighten with it. */
@media (max-width: 640px) {
  .writer-plate { --plate-mark: var(--space-2); }
  .writer-plate--ghost { font-size: var(--text-heading-lg); }
}

/* ---------- UI-020 author head ---------- */

/* The head-art deviation (2026-10-02): the avatar plate beside the name
   replaces the frozen AI ghost glyph. Plate and name share one top edge and
   the positioning runs under the name in the same column. The column gap
   holds the shadow and the far crop mark clear of the text. */
.author-head {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  column-gap: var(--space-8);
  align-items: start;
}
.author-head-text { min-width: 0; }
/* --space-16 (8rem): the frozen plate size of the UI-020 contract. The name
   rises by its own leading (0.25em from line top to cap line), so the cap
   line and the plate frame sit on one edge at every size of the fluid H1. */
.author-avatar { margin-block: var(--space-4) var(--space-2); }
.author-head h1 { margin-block-start: calc(var(--space-4) - 0.25em); }
/* The house signature after the name: set small in the display face on the
   name's own baseline, muted, so the name stays the hero and 「· Jolvex」
   reads as a signature, not a second title. */
.author-org {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* The AI badge after the signature sets in the body face at normal
   tracking: inheriting the H1's tight display setting closed the word
   space ("AIwriter"). It wraps whole, never mid-badge. Only the author H1
   carries this badge. */
.page-head h1 .ai-note {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  white-space: nowrap;
}
/* Phone: the index's lockup — a 6rem plate with the name at its foot, the
   positioning across the full measure below. */
@media (max-width: 640px) {
  .author-head {
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    column-gap: var(--space-5);
    row-gap: var(--space-5);
    align-items: end;
  }
  .author-head-text { display: contents; }
  .author-avatar { margin-block: var(--space-2) 0; }
  .author-head h1 { margin-block: 0; }
  .author-head .author-positioning {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* ---------- UI-020 profile columns and foot ---------- */

/* Three columns hold down to 768px, then stack: the two-column step left
   「透明度」 alone beside an empty half row. 「怎麼產製內容」 is three labelled
   rows (sources, cadence, quality control) on the index ledger's dashed
   rules. Overrides the article.css base; one text size for all three. */
.profile-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-cols p,
.produced-rows dd { font-size: var(--text-label); }
.produced-rows { margin: 0; }
.produced-rows > div {
  padding-block: var(--space-2);
  border-block-end: 1px dashed var(--color-border);
}
.produced-rows > div:first-child { padding-block-start: 0; }
.produced-rows > div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}
.produced-rows dt {
  color: var(--color-text);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
}
.produced-rows dd {
  margin: 0;
  color: var(--color-text-muted);
}
@media (max-width: 767px) {
  .profile-cols { grid-template-columns: minmax(0, 1fr); }
}
/* A pager link lands on the list heading with its mono tag still in view. */
#author-articles-heading { scroll-margin-top: var(--space-8); }

/* ---------- UI-019 byline chip ---------- */

/* The writer link with an avatar keeps name and chip on one optical line;
   the 24px chip slightly deepens the mono dates row without wrapping it. */
.byline-writer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
/* Owner round 2026-10-08: the byline item (always the dates strip's first
   span) is its own centered flex line, so the plain AI label shares the
   chip's centre line with the name instead of dropping to the image's bottom
   edge; the gap restores the space flex drops after the label. */
.dates > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.dates a { text-underline-offset: 0.2em; }
/* 「· Jolvex」 rides the writer link in the label tone; the chip gap
   supplies the one-cell space before the dot. The underline moves from the
   link onto the name in its own ink, so it marks the writer only and the
   signature stays an unruled whisper beside it. */
.byline-writer { text-decoration: none; }
.byline-writer b {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.byline-org {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.byline-avatar {
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  object-fit: cover;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

/* ---------- Article cards: stretched title link + byline link ---------- */

/* The card is an <article> whose title link stretches over the whole card
   (the .list-card pattern), so the card stays one click target while the
   writer name in the byline is its own link to the author page — no anchor
   nests inside another. */
.press-card { position: relative; }
.press-card-link { color: inherit; text-decoration: none; }
.press-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Drop the title's own ring only where :has() can draw the card ring instead. */
@supports selector(:has(a)) {
  .press-card-link:focus-visible { outline: none; }
  .press-card:has(.press-card-link:focus-visible) {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: var(--space-1);
  }
}
/* The byline link is the site's inline link: ink name on a coral rule, coral
   on hover. It rises above the stretch, and its 44px target is a centred
   pseudo-element, so neither the chip nor the meta row changes size. */
.press-card .byline-link {
  position: relative;
  z-index: 1;
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
}
.press-card .byline-link b { color: inherit; }
.press-card .byline-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: var(--chrome-min-target); /* contract minimumTargetPx: 44 */
  min-height: var(--chrome-min-target);
  transform: translate(-50%, -50%);
}
.press-card .byline-link:hover { color: var(--color-accent-text); }
/* Hovering or focusing the byline is not hovering the card: the title keeps
   its ink, and the focus ring frames the whole byline chip instead of
   cutting through it. */
@supports selector(:has(a)) {
  .press-card:has(.byline-link:hover) h2 { color: inherit; }
  .press-card .byline-link:focus-visible { outline: none; }
  .press-card .ai-note:has(.byline-link:focus-visible) {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 2px;
  }
}