/* Stable midnight-paper masthead. Section backgrounds and transitions begin below its rule. */
@media (min-width: 921px) {
  :root {
    --header-h: 72px;
    --masthead-edge: clamp(42px, 4.3vw, 75px);
    --masthead-ink: #242f46;
    --masthead-type: #e7e5df;
    --masthead-secondary: #bcc5d3;
    --masthead-brass: #ccd6e6;
    --masthead-cat: var(--masthead-brass);
    --masthead-cat-hover: #958691;
  }
  .site-shell { padding-top: var(--header-h); }
  .site-shell::after { display: none; }
  .site-background, .site-shell::before { top: var(--header-h); }
  .site-header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--header-h);
    /* Center the menu in the real interval between the cat and contact text. */
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 28px;
    padding: 0 var(--masthead-edge);
    overflow: visible;
    color: var(--masthead-type);
    background-color: var(--masthead-ink);
    background-image: url('/static/9fe62d3be2d73019/assets/images/rjg-header-cool-paper-v2.webp');
    isolation: isolate;
    background-size: cover;
    background-position: center;
    border-bottom: 0;
    padding-bottom: 1px; /* Retain the original inner geometry without a border. */
    box-shadow: none;
  }
  .site-header::before { content: none; }
  .site-header .identity {
    height: 100%;
    min-height: 0;
    width: 58px;
    padding-left: 0;
    justify-self: start;
    color: var(--masthead-type);
  }
  .identity-mark {
    --cat-width: 74px;
    --cat-seat: 66.6px;
    position: absolute;
    /* The selected full canvas leaves 331px before the drawing; offset it so the visible left edge meets the identity rail. */
    left: -24px;
    /* Source baseline y=922 scales to 66.6px, meeting the content edge at the masthead rule. */
    top: calc(100% - var(--cat-seat) + 1px);
    width: var(--cat-width);
    height: calc(var(--cat-width) * 1.5);
    pointer-events: none;
  }
  .site-header .identity-cat {
    width: 100%; height: 100%; left: 0; top: 0;
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(360%) hue-rotate(177deg) brightness(94%) contrast(88%);
  }
  /* Keep the selected rear-view artwork visible if CSS masks are unavailable. */
  .identity-mark::before, .identity-mark::after {
    content: none;
  }
  /* Keep the full selected drawing continuous across the masthead rule when both clipping tools work. */
  @supports ((mask-image: url('/static/9fe62d3be2d73019/assets/images/rj-cat-rear-v2-mask.webp')) or (-webkit-mask-image: url('/static/9fe62d3be2d73019/assets/images/rj-cat-rear-v2-mask.webp'))) and (clip-path: inset(0)) {
    .site-header .identity-cat { opacity: 0; filter: none; }
    .identity-mark::before, .identity-mark::after {
      content: '';
      position: absolute;
      inset: 0;
      -webkit-mask: url('/static/9fe62d3be2d73019/assets/images/rj-cat-rear-v2-mask.webp') center / 100% 100% no-repeat;
      mask: url('/static/9fe62d3be2d73019/assets/images/rj-cat-rear-v2-mask.webp') center / 100% 100% no-repeat;
    }
  }
  .identity-mark::before {
    background-color: var(--masthead-cat);
    clip-path: inset(0 0 calc(100% - var(--cat-seat) - 1px) 0);
    transition: background-color 450ms ease-in-out;
  }
  .identity-mark::after {
    background-color: var(--masthead-ink);
    clip-path: inset(calc(var(--cat-seat) + 1px) 0 0 0);
    transition: background-color 450ms ease-in-out;
  }
  /* Consulting places the masthead tail over a dark field; carry the existing
     pale cat color below the rule only while that section is selected. */
  .site-header:has(.primary-nav a[data-nav="consulting"][aria-current="page"]) .identity-mark::after {
    background-color: var(--masthead-cat);
  }
  .site-header .identity:hover .identity-mark::before,
  .site-header .identity:focus-visible .identity-mark::before {
    background-color: var(--masthead-cat-hover);
  }
  .site-header .primary-nav { grid-column: 2; padding: 0; gap: 40px; }
  .site-header .primary-nav a {
    padding: 6px 8px;
    min-height: 40px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .025em;
    color: var(--masthead-type);
    background: none;
    transition: color 450ms ease-in-out;
  }
  .site-header .primary-nav a::before {
    content: '';
    inset: 2px 0;
    border-radius: 3px;
    background: rgba(200,196,174,.17);
    opacity: 0;
    transition: opacity 450ms ease-in-out;
  }
  .site-header .primary-nav a:hover::before,
  .site-header .primary-nav a:focus-visible::before,
  .site-header .primary-nav a[aria-current="page"]::before { opacity: 1; }
  .site-header .primary-nav a:focus-visible::before { background: rgba(200,196,174,.34); }
  /* Commit selection immediately; ordinary hover and deselection still ease. */
  .site-header .primary-nav a[aria-current="page"]::before { transition: none; }
  .site-header .primary-nav a::after { content: none; }
  .site-header .primary-nav a:hover,
  .site-header .primary-nav a:focus-visible,
  .site-header .primary-nav a[aria-current="page"] { color: var(--masthead-brass); }
  .site-header .header-contact {
    grid-column: 3;
    margin: 0;
    gap: 4px;
    align-items: flex-end;
    text-align: right;
  }
  .site-header .header-phone, .site-header .header-email {
    color: var(--masthead-cat);
    text-shadow: none;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
  }
  .site-header .header-email {
    position: relative;
    isolation: isolate;
    text-decoration: none;
    transition: color 450ms ease-in-out;
  }
  .site-header .header-email::before {
    content: '';
    position: absolute;
    inset: -3px -8px;
    transform: translateY(1px);
    z-index: -1;
    border-radius: 3px;
    background: rgba(200,196,174,.20);
    opacity: 0;
    pointer-events: none;
    transition: opacity 450ms ease-in-out;
  }
  .site-header .header-email::after { content: none; }
  .site-header .header-email:hover, .site-header .header-email:focus-visible {
    color: var(--masthead-type);
    text-decoration: none;
  }
  .site-header .header-email:hover::before,
  .site-header .header-email:focus-visible::before { opacity: 1; }
  .site-header .header-email:focus-visible::before { background: rgba(200,196,174,.36); }
}
@media (min-width: 921px) and (max-width: 1250px) {
  .site-header { grid-template-columns: max-content minmax(0,1fr) max-content; --masthead-edge: 32px; padding-inline: var(--masthead-edge); column-gap: 20px; }
  .site-header .primary-nav { gap: 18px; }
  .site-header .primary-nav a { font-size: 14px; padding-inline: 6px; }
  .site-header .primary-nav a::after { left: 6px; right: 6px; }
  .site-header .header-phone, .site-header .header-email { font-size: 14px; }
}