/* Notes (blog) page. Layers on top of index.css, which supplies the tokens, nav, grain, buttons, .eyebrow, .lede and .closing. */

  .blog-head {
    padding: clamp(120px, 18vh, 200px) 0 clamp(30px, 5vh, 56px);
  }
  .blog-head h1 {
    font-family: var(--font-display);
    font-size: clamp(44px, 8vw, 96px);
    font-weight: 900;
    line-height: 0.94;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #ffffff;
    margin: 18px 0 0;
  }

  .notes { padding: clamp(40px, 6vh, 70px) 0 clamp(90px, 12vh, 150px); }

  .note-list {
    display: grid;
    gap: 20px;
  }
  .note-card {
    border: 2px solid var(--line-soft);
    padding: 30px 26px;
    background: rgba(17, 17, 17, 0.6);
    transition: border-color 0.3s, transform 0.3s;
  }
  .note-card:hover {
    border-color: var(--line);
    transform: translateY(-2px);
  }
  .note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 14px;
  }
  .note-date {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .note-card h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.8vw, 30px);
    font-weight: 800;
    line-height: 1.12;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #ffffff;
    margin: 0 0 12px;
  }
  .note-card p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-dim);
    max-width: 58em;
    margin: 0;
  }

  /* The notes page has no hero orrery, so the closing block needs its own top rule rather than inheriting the home page's spacing. */
  .notes + .closing { padding-top: 0; }

  /* Notes page header lockup. The head becomes two columns so the marks sit beside the heading instead of leaving the right half empty. Both marks carry the same gold and the same treatment; their relative sizes are set below. */
  .blog-head .inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
  }
  .blog-art {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.2vw, 14px);
  }
  .blog-art svg {
    display: block;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0 34px rgba(255, 198, 126, 0.14));
  }
  /* Concourser leads and Rikoukei Labs is subordinate: this is a product page, and the company is the maker. The company mark is sized smaller than the ratio alone suggests because its viewBox is cropped tighter, so its artwork fills 105% of its box against the product mark's 100% and reads larger at equal widths. */
  .ba-product {
    width: clamp(124px, 20vw, 192px);
  }
  .ba-company {
    width: clamp(62px, 10vw, 100px);
  }
  .ba-sep {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 300;
    line-height: 1;
    color: var(--gold-dim);
  }
  @media (max-width: 860px) {
    .blog-head .inner {
      grid-template-columns: 1fr;
    }
    .blog-art {
      justify-content: flex-start;
      margin-top: 26px;
    }
  }