/* Component: ReferenceDoc --------------------------------------------------
   The quiet reference-document family: Note Bene and Terms of Sale & Use.

   Neither is an ecommerce screen or a narrative one. They are documents —
   long, policy-bearing, consulted rather than browsed — so they get a reading
   measure, a numbered spine and nothing else. No cards, no panels, no boxes:
   the parchment ground runs the full page and the type does the work.

   Terms uses the `tp-ref` names. Note Bene predates them and uses `tp-nb`
   with a few `tp-editorial__*` names of its own; both are served here so the
   two pages cannot drift apart. */
@layer components {

  .tp-editorial--reference,
  .tp-editorial--note-bene {
    background: var(--tp-color-paper-warm, var(--tp-color-paper));
  }

  .tp-ref,
  .tp-nb {
    position: relative;
    z-index: 1;
  }

  .tp-ref__inner,
  .tp-nb .tp-editorial__inner {
    max-width: var(--tp-container);
    margin: 0 auto;
    padding: clamp(44px, 6vw, 78px) var(--tp-gutter) clamp(50px, 6vw, 90px);
  }

  /* ---- Masthead --------------------------------------------------------- */
  .tp-ref__eyebrow,
  .tp-nb .tp-editorial__eyebrow {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label);
    letter-spacing: var(--tp-track-eyebrow);
    text-transform: uppercase;
    color: var(--tp-color-gold-text-deep);
  }

  .tp-ref__title,
  .tp-nb .tp-editorial__title {
    margin: var(--tp-space-4) 0 0;
    font-weight: var(--tp-weight-regular);
    font-size: var(--tp-size-h1-editorial);
    line-height: var(--tp-leading-none);
    letter-spacing: var(--tp-track-title);
    text-transform: uppercase;
    color: var(--tp-color-deep-blue);
  }

  .tp-ref__lede,
  .tp-nb .tp-editorial__lede {
    max-width: 44ch;
    margin: var(--tp-space-5) 0 0;
    font-size: var(--tp-size-body-l);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    line-height: var(--tp-leading-editorial);
    color: var(--tp-color-text-body);
    text-wrap: pretty;
  }

  /* Effective / last-updated: archival stamps, not a byline. */
  .tp-ref__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: var(--tp-space-6) 0 0;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-label);
    text-transform: uppercase;
    color: var(--tp-color-gold-text-deep);
  }

  /* ---- Two columns: a spine and the document ---------------------------- */
  .tp-ref__body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(28px, 4vw, 64px);
    margin-top: clamp(26px, 3vw, 40px);
  }

  .tp-ref__aside {
    flex: 1 1 210px;
    min-width: 0;
    max-width: 260px;
    position: sticky;
    /* Clears the sticky header, which is 116px at desktop. */
    top: 132px;
    padding-top: var(--tp-space-2);
    border-top: var(--tp-border-brass-soft);
  }

  .tp-ref__aside-label {
    margin: var(--tp-space-5) 0 var(--tp-space-4);
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-eyebrow);
    text-transform: uppercase;
    color: var(--tp-color-gold-text-deep);
  }

  .tp-ref__contents {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .tp-ref__contents-link {
    display: flex;
    gap: var(--tp-space-3);
    font-size: var(--tp-size-link-m);
    line-height: var(--tp-leading-snug);
    color: var(--tp-color-text);
  }

  .tp-ref__contents-link:hover,
  .tp-ref__contents-link:focus-visible {
    color: var(--tp-color-cobalt);
  }

  /* Twelve contents entries at 23px are a small target for a thumb. The gap
     between them absorbs the extra hit area, so the list looks unchanged. */
  @media (hover: none) {
    .tp-ref__contents-link {
      padding-block: 6px;
      margin-block: -6px;
    }
  }

  .tp-ref__contents-no {
    flex: none;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-label);
    color: var(--tp-color-gold-text-deep);
  }

  .tp-ref__article {
    flex: 3 1 460px;
    min-width: 0;
    max-width: 74ch;
    padding-top: var(--tp-space-2);
    border-top: var(--tp-border-brass-soft);
  }

  /* ---- Sections --------------------------------------------------------- */
  .tp-ref__section {
    padding-top: var(--tp-space-7);
  }

  /* A hairline between clauses, and none above the first. */
  .tp-ref__section + .tp-ref__section {
    margin-top: var(--tp-space-8);
    padding-top: var(--tp-space-8);
    border-top: var(--tp-border-soft);
  }

  /* An in-page jump must not land under the sticky header. */
  .tp-ref__section,
  .tp-nb__section {
    scroll-margin-top: 132px;
  }

  .tp-ref__no,
  .tp-nb .tp-editorial__numeral {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-eyebrow);
    text-transform: uppercase;
    color: var(--tp-color-gold-text-deep);
  }

  .tp-ref__heading,
  .tp-nb .tp-editorial__heading {
    margin: var(--tp-space-3) 0 0;
    font-weight: var(--tp-weight-regular);
    font-size: var(--tp-size-h2-editorial);
    letter-spacing: var(--tp-track-h);
    text-transform: uppercase;
    color: var(--tp-color-deep-blue);
  }

  .tp-nb .tp-editorial__sub {
    margin: var(--tp-space-3) 0 0;
    font-size: var(--tp-size-body-m);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    color: var(--tp-color-text-muted);
  }

  .tp-ref__prose,
  .tp-nb .tp-editorial__prose {
    max-width: 74ch;
  }

  .tp-ref__prose p,
  .tp-nb .tp-editorial__prose p {
    margin: var(--tp-space-4) 0 0;
    font-size: var(--tp-size-body);
    font-weight: var(--tp-weight-light);
    line-height: var(--tp-leading-editorial);
    color: var(--tp-color-text-body);
    text-wrap: pretty;
  }

  .tp-nb .tp-editorial__closer {
    margin: var(--tp-space-6) 0 0;
    font-size: var(--tp-size-body-m);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    color: var(--tp-color-deep-blue);
  }

  /* ---- Note Bene's own furniture ---------------------------------------- */
  .tp-nb__head {
    max-width: 74ch;
  }

  .tp-nb__index {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tp-space-6);
    margin-top: clamp(26px, 3vw, 40px);
    padding-top: var(--tp-space-5);
    border-top: var(--tp-border-brass-soft);
  }

  .tp-nb__index-item {
    display: block;
    color: var(--tp-color-text);
  }

  .tp-nb__index-no {
    display: block;
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-eyebrow);
    color: var(--tp-color-gold-text-deep);
  }

  .tp-nb__index-title {
    display: block;
    margin-top: var(--tp-space-2);
    font-size: var(--tp-size-card-title);
    letter-spacing: var(--tp-track-tight);
    color: var(--tp-color-deep-blue);
  }

  .tp-nb__index-sub {
    display: block;
    margin-top: var(--tp-space-1);
    font-size: var(--tp-size-body-s);
    font-style: italic;
    font-weight: var(--tp-weight-light);
    color: var(--tp-color-text-muted);
  }

  .tp-nb__index-item:hover .tp-nb__index-title,
  .tp-nb__index-item:focus-visible .tp-nb__index-title {
    color: var(--tp-color-cobalt);
  }

  .tp-nb__section {
    max-width: 74ch;
    margin-top: var(--tp-space-9);
    padding-top: var(--tp-space-8);
    border-top: var(--tp-border-soft);
  }

  .tp-nb__block,
  .tp-nb__group {
    margin-top: var(--tp-space-7);
  }

  .tp-nb__block-title {
    font-weight: var(--tp-weight-regular);
    font-size: var(--tp-size-card-title-l);
    letter-spacing: var(--tp-track-tight);
    color: var(--tp-color-deep-blue);
  }

  .tp-nb__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tp-space-5) var(--tp-space-7);
    margin-top: var(--tp-space-5);
  }

  .tp-nb__pair-title {
    font-family: var(--tp-font-mono);
    font-size: var(--tp-size-label-s);
    letter-spacing: var(--tp-track-label);
    text-transform: uppercase;
    color: var(--tp-color-gold-text-deep);
  }

  .tp-nb__pair-body {
    margin-top: var(--tp-space-2);
    font-size: var(--tp-size-body-s);
    font-weight: var(--tp-weight-light);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text-body);
  }

  .tp-nb__qa + .tp-nb__qa {
    margin-top: var(--tp-space-5);
  }

  .tp-nb__q {
    font-size: var(--tp-size-body-m);
    color: var(--tp-color-deep-blue);
  }

  .tp-nb__a {
    margin: var(--tp-space-2) 0 0;
    font-size: var(--tp-size-body-s);
    font-weight: var(--tp-weight-light);
    line-height: var(--tp-leading-body);
    color: var(--tp-color-text-body);
  }

  /* ---- Tablet ----------------------------------------------------------- */
  @media (max-width: 1099px) {
    .tp-ref__aside {
      /* The spine stops being a sidebar and becomes a masthead index. */
      position: static;
      flex: 1 1 100%;
      max-width: none;
    }

    .tp-ref__contents {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--tp-space-3) var(--tp-space-6);
    }

    .tp-nb__index {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ---- Mobile ----------------------------------------------------------- */
  @media (max-width: 699px) {
    .tp-ref__contents,
    .tp-nb__index,
    .tp-nb__pair {
      grid-template-columns: minmax(0, 1fr);
    }

    .tp-ref__aside,
    .tp-ref__section,
    .tp-nb__section {
      scroll-margin-top: 64px;
    }
  }
}