@layer components {
  .feed-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; column-gap: var(--pad); padding-block: var(--pad) var(--pad);
    box-shadow: inset 0 1px 0 var(--ink), 0 1px 0 var(--line);
  }
  .state {
    translate: 0 var(--c-s);
    font: var(--ui); color: var(--ink-3); a { margin-left: var(--pad); color: var(--accent); }
  }
  .lead { padding-top: var(--d-text); margin-block: var(--pad) calc(var(--d-text) * -1); color: var(--ink-2); }

  .timeline { list-style: none; }
  .js .timeline:not([data-ready]) .entry:nth-child(n + 9) { display: none; }
  .timeline[data-ready] .entry:not([hidden]) { animation: fade 0.4s both; }
  @keyframes fade { from { opacity: 0; } }

  .entry { box-shadow: 0 1px 0 var(--line); }
  .entry-link {
    display: grid; grid-template-columns: calc(var(--pad) * 4) minmax(0, 1fr); align-items: end;
    column-gap: 0; padding-block: var(--pad);
    > * { grid-column: 2; }
    time { grid-column: 1; grid-row: 1; translate: 0 var(--c-su); font: var(--ui); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .label {
      grid-row: 1; justify-self: start; display: inline-flex; align-items: center; gap: var(--half);
      font: var(--ui); color: var(--cat); text-transform: uppercase; translate: 0 var(--c-su);
      &::before { content: ""; align-self: center; translate: 0 calc(var(--c-su) * -1 + 0.5px); width: var(--mark); height: var(--mark); background: var(--cat); }
      @media (forced-colors: active) { &::before { forced-color-adjust: none; background: CanvasText; } }
    }
    h2 { transition: color 0.2s; }
    p { padding-top: var(--d-text); margin-bottom: calc(var(--d-text) * -1); color: var(--ink-2); text-wrap: pretty; -webkit-text-stroke: 0.3px currentColor; }
    .foot-line {
      display: flex; flex-wrap: wrap; column-gap: var(--pad);
      font: var(--ui); color: var(--ink-3); translate: 0 var(--c-s);
      &::after { content: "->"; margin-left: auto; color: var(--cat); opacity: 0; transition: opacity 0.2s, translate 0.2s; }
    }
    &:hover h2 { color: var(--cat); }
    &:hover .foot-line::after { opacity: 1; translate: calc(var(--hair) * -1) 0; }
  }

  .empty { padding-top: var(--d-ui); margin-bottom: calc(var(--d-ui) * -1); text-align: center; color: var(--ink-2); font: var(--ui); }

  .pager {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0 var(--half); margin-top: var(--pad);
    &:empty { display: none; }
    a, span {
      position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--pad) + 1px); height: calc(var(--pad) + 1px); margin-bottom: -1px; padding: 0 var(--half);
      border: 1px solid var(--line); color: var(--ink-2); font: var(--ui); line-height: 1; font-variant-numeric: tabular-nums;
      transition: color 0.2s, border-color 0.2s, background-color 0.2s;
    }
    a::after { content: ""; position: absolute; inset: -10px -4px; }
    a:hover { color: var(--ink); border-color: var(--ink); }
    a[aria-current="page"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
    span[aria-disabled] { opacity: 0.4; }
  }

  .bio {
    display: grid; justify-items: center; box-shadow: inset 0 1px 0 var(--ink); text-align: center;
    .portrait {
      position: relative; width: calc(var(--pad) * 6); height: calc(var(--pad) * 6); margin-block: var(--pad);
      img { width: 100%; height: 100%; object-fit: cover; }
    }
    h2 { translate: none; padding-top: var(--d-text); margin-bottom: calc(var(--d-text) * -1); font: var(--body); -webkit-text-stroke: 0.3px currentColor; }
    .role { padding-top: var(--d-ui); margin-bottom: calc(var(--d-ui) * -1); font: var(--ui); color: var(--ink-2); text-wrap: balance; }
    dl { display: grid; width: 100%; margin-top: var(--pad); box-shadow: inset 0 1px 0 var(--line); }
    dl > div { display: grid; justify-items: center; align-content: end; box-shadow: 0 1px 0 var(--line-soft); }
    dt, dd { font: var(--ui); }
    dt { color: var(--ink-3); text-transform: uppercase; translate: 0 var(--c-su); }
    dd { translate: 0 var(--c-s); max-width: 100%; white-space: nowrap; a { color: var(--ink); transition: color 0.2s; &:hover { color: var(--accent); } } }
  }

  @media (width <= 640px) {
    .entry-link {
      grid-template-columns: minmax(0, 1fr) auto; text-align: center;
      > * { grid-column: 1 / -1; }
      time { grid-column: 1; text-align: left; }
      .label { grid-column: 2; justify-self: end; }
      .foot-line { justify-content: center; &::after { display: none; } }
    }
  }
}