/*
 * The masthead (shared/_masthead; tasks/redesign, D3): the bar, the double
 * rule under it, and the section row. Not sticky — it scrolls away with the
 * page, as a printed page's would, and gives the 56–64px the old sticky bar
 * took back to the content. It sits on the page's own column, so its edges
 * line up with everything below it.
 *
 *   .masthead--home     the nameplate: dateline | wordmark | actions
 *   .masthead           inner pages: logo | search | actions
 *
 * Below 768px the bar is two rows — the wordmark and the actions, then the
 * search (or the dateline) — and the section row is one line that scrolls
 * sideways inside itself, never the page.
 *
 * A component rather than layout: its links sit beside `.link`s, and `.link`
 * lives in this layer — in `layout` these rules would lose to it whatever
 * their specificity, because a later layer always wins.
 */
@layer components {
  /* `--masthead-bleed` is how far the double rule and the following strip's
     band hang past the masthead's text edge, on both ends; the text itself
     stays on the page's column. */
  .masthead {
    --masthead-bleed: var(--space-sm);

    padding-inline: var(--gutter);
  }

  .masthead__bar {
    display: grid;
    margin-inline: calc(-1 * var(--masthead-bleed));
    padding-inline: var(--masthead-bleed);
    grid-template-areas:
      "brand actions"
      "search search";
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    padding-block: var(--space-sm) calc(var(--space-sm) + var(--rule-double-height));
    background: var(--rule-double) bottom / 100% var(--rule-double-height) no-repeat;

    @media (width >= 768px) {
      grid-template-areas: "brand search actions";
      grid-template-columns: 1fr minmax(0, 36rem) 1fr;
      gap: var(--space-xl);
      padding-block: var(--space-md) calc(var(--space-md) + var(--rule-double-height));
    }
  }

  .masthead--home .masthead__bar {
    grid-template-areas:
      "brand actions"
      "dateline dateline";

    @media (width >= 768px) {
      grid-template-areas: "dateline brand actions";
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
  }

  .masthead--home .masthead__brand {
    @media (width >= 768px) {
      justify-self: center;
    }
  }

  /* Every inner bar, and a signed-in reader's homepage, has the dateline
     under the wordmark (owner, 2026-10-04): the wordmark on the left, the
     search in the centre. The search and the actions span both rows, so they
     sit level with the middle of the two, not with the wordmark. On a phone
     the dateline takes a row of its own, between the wordmark and the
     search. */
  .masthead__bar:has(.masthead__dateline):has(.masthead__search) {
    grid-template-areas:
      "brand actions"
      "dateline dateline"
      "search search";
    row-gap: var(--space-2xs);

    @media (width >= 768px) {
      grid-template-areas:
        "brand search actions"
        "dateline search actions";
      grid-template-columns: 1fr minmax(0, 36rem) 1fr;
      column-gap: var(--space-xl);
    }

    & .masthead__brand {
      justify-self: start;
    }

    & .masthead__nameplate {
      font-size: var(--text-wordmark);
    }
  }

  .masthead__brand {
    display: flex;
    grid-area: brand;
    align-items: center;
    gap: var(--space-xs);
  }

  .masthead__search {
    grid-area: search;
    inline-size: 100%;

    @media (width >= 768px) {
      justify-self: center;
    }
  }

  .masthead__dateline {
    display: block;
    grid-area: dateline;
    min-block-size: var(--leading-caps);
    color: var(--color-ink-muted);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .masthead__dateline-skeleton {
    display: block;
    inline-size: 18rem;
    max-inline-size: 100%;
    --height: calc(var(--text-caps) * var(--leading-caps));
  }

  /* Wraps on a phone, where a signed-in reader's Account, Log out and call
     to action do not fit beside the wordmark on one line. Only there: from
     768px the grid sizes this column to its content, and a column that may
     wrap is one the grid squeezes until it does. */
  .masthead__actions {
    display: flex;
    grid-area: actions;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: var(--space-sm) var(--space-lg);

    @media (width < 768px) {
      flex-wrap: wrap;
    }
  }

  /* Signed in: "Account" and, close beside it, "Log out". */
  .masthead__account {
    display: flex;
    align-items: center;
    gap: var(--space-xs);

    & .button {
      white-space: nowrap;
    }
  }

  /* Pricing and Log in: quiet caps links beside the call to action. */
  .masthead__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-min);
    color: var(--color-link);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      color: var(--color-link-hover);
    }
  }

  /* Pricing gives way on a phone, where the row holds the wordmark and the
     call to action; the footer still links it. */
  .masthead__link--wide {
    @media (width < 768px) {
      display: none;
    }
  }

  /* The homepage's nameplate: the word alone, centred, larger. */
  .masthead__nameplate {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-wordmark);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;

    @media (width >= 768px) {
      font-size: var(--text-wordmark-masthead);
    }
  }

  /* Positioned, so the dot's screen-reader text — absolutely positioned —
     is clipped by the row's own scroll box rather than widening the page. */
  .masthead__sections {
    position: relative;
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-block-end: var(--rule-hairline);

    @media (width >= 1024px) {
      gap: var(--space-xl);
    }
  }

  .masthead__section {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-block-size: var(--target-min);
    border-block-end: 2px solid transparent;
    color: var(--color-link);
    font-size: var(--text-caps);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      color: var(--color-link-hover);
    }

    &[aria-current="page"] {
      border-block-end-color: var(--color-ink);
      color: var(--color-ink);
      font-weight: var(--weight-semibold);
    }
  }

  /* The wordmark on inner pages: the word alone, in the serif. */
  .logo {
    display: inline-flex;
    align-items: center;
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-size: var(--text-wordmark);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
  }
}