/* ===========================================================================
   byh.life shell. Warm, dense, one accent. The user's work is the only
   saturated thing on the page; chrome stays in titanium.
   =========================================================================== */

@layer components {

  .lf-shell {
    min-block-size: 100dvb;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  .lf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border-block-end: 1px solid var(--bh-hairline);
  }

  .lf-head__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: inherit;
    text-decoration: none;
    font-weight: 650;
    letter-spacing: -0.03em;
  }

  .lf-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    font-size: var(--fs-body-s);
  }

  .lf-nav a[aria-current="page"] {
    color: var(--bh-ember);
  }

  .lf-main {
    width: min(44rem, calc(100% - 2 * var(--sp-5)));
    margin-inline: auto;
    padding-block: var(--sp-6);
  }

  .lf-foot {
    padding: var(--sp-4) var(--sp-5);
    color: var(--bh-titanium);
    font-size: var(--fs-caption);
  }

  .lf-title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-h1);
    letter-spacing: -0.03em;
  }

  .lf-h {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--fs-h2);
  }

  .lf-lede,
  .lf-note {
    color: var(--bh-titanium);
    font-size: var(--fs-body-s);
  }

  .lf-seeded,
  .lf-draft,
  .lf-ok,
  .lf-gap {
    padding: var(--sp-4);
    border: 1px solid var(--bh-hairline);
    border-radius: var(--r-md);
    background: var(--bh-surface-3);
  }

  .lf-seeded,
  .lf-draft {
    margin-block: var(--sp-4);
  }

  .lf-echo code,
  .lf-when,
  .lf-card__when,
  .lf-card__acct {
    font-family: var(--ff-evidence);
    font-size: var(--fs-caption);
  }
}