/* Skip link: hidden until keyboard focus. This lived in theme.css, which
   only reaches the page through the Vite bundle in assets/dist; an unbuilt
   checkout showed the link as a bare line of text above the utility bar
   (2026-09-09). The chrome sheet always loads, so the rule lives here. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--deep-blue, #1c3664);
	color: #fff;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	border-radius: 0 0 0.375rem 0;
}
.skip-link:focus,
.skip-link:focus-visible {
	left: 0;
	outline: 2px solid var(--wp--preset--color--tangelo, #f94d00);
	outline-offset: 2px;
}

/**
 * Navigation Styles
 * Refined link treatments with hover and active states
 * Using high specificity to override WordPress core styles
 */

/* ==========================================================================
   Base - Remove default underlines, set transitions
   ========================================================================== */

.wp-block-navigation a.wp-block-navigation-item__content,
.wp-block-navigation a.wp-block-navigation-item__content:hover,
.wp-block-navigation a.wp-block-navigation-item__content:focus,
.wp-block-navigation a.wp-block-navigation-item__content:active {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content {
	position: relative;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Default Style - Subtle color shift on hover, accent for active
   ========================================================================== */

.wp-block-navigation:not([class*="is-style-"]) .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--muted-foreground);
}

.wp-block-navigation:not([class*="is-style-"]) .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation:not([class*="is-style-"]) .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Underline Style - Animated line slides in from left
   ========================================================================== */

.wp-block-navigation.is-style-underline .wp-block-navigation-item a.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--foreground);
	transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-navigation.is-style-underline .wp-block-navigation-item a.wp-block-navigation-item__content:hover::after {
	width: 100%;
}

/* Active state - always visible, uses primary color */
.wp-block-navigation.is-style-underline .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content::after,
.wp-block-navigation.is-style-underline .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content::after {
	width: 100%;
	background-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Underline Centered Style - Line fades in from center
   ========================================================================== */

.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item a.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 2px;
	background-color: var(--wp--preset--color--foreground);
	opacity: 0;
	transition: width 200ms ease, opacity 200ms ease;
}

.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item a.wp-block-navigation-item__content:hover::after {
	width: 100%;
	opacity: 1;
}

/* Active state - shorter accent line, always visible */
.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content::after,
.wp-block-navigation.is-style-underline-fade .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content::after {
	width: 24px;
	opacity: 1;
	background-color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Pill Style - Rounded background appears on hover
   ========================================================================== */

.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--border-radius--md, 6px);
	transition: background-color 200ms ease, color 200ms ease;
}

.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--muted);
}

/* Active state - subtle persistent background */
.wp-block-navigation.is-style-pill .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation.is-style-pill .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
}

/* ==========================================================================
   Pill Filled Style - Always has background, darkens on hover
   ========================================================================== */

.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--border-radius--md, 6px);
	background-color: var(--wp--preset--color--secondary);
	transition: background-color 200ms ease, color 200ms ease;
}

.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--muted);
}

/* Active state - primary color treatment */
.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-foreground);
}

/* ==========================================================================
   Mobile Overlay Menu Refinements
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	animation: navFadeIn 200ms ease forwards;
}

@keyframes navFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--8, 2rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--lg, 1.125rem);
	padding: var(--wp--preset--spacing--3, 0.75rem) 0;
}

/* Mobile active state indicator */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content::before {
	content: '';
	position: absolute;
	left: -1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1.25em;
	background-color: var(--wp--preset--color--primary);
	border-radius: 2px;
}

/* ==========================================================================
   Submenu Styles
   ========================================================================== */

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--border-radius--md, 6px);
	box-shadow: var(--wp--custom--shadow--md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
	padding: var(--wp--preset--spacing--2, 0.5rem) 0;
	min-width: 180px;
}

.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--2, 0.5rem) var(--wp--preset--spacing--4, 1rem);
}

.wp-block-navigation .wp-block-navigation__submenu-container a.wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--muted);
}

/* ==========================================================================
   Dark Mode Adjustments
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content:hover,
	.wp-block-navigation.is-style-pill .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
	.wp-block-navigation.is-style-pill .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--muted);
	}

	.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--muted);
	}

	.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--accent);
	}

	.wp-block-navigation .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--background);
		border-color: var(--wp--preset--color--border);
	}
}

/* ==========================================================================
   Focus States - Accessibility
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--ring);
	outline-offset: 2px;
	border-radius: 2px;
}

.wp-block-navigation.is-style-pill .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible,
.wp-block-navigation.is-style-pill-filled .wp-block-navigation-item a.wp-block-navigation-item__content:focus-visible {
	outline-offset: 0;
}

/* ==========================================================================
   RP header: utility bar, masthead, the eight lines, the sheet.
   Markup: patterns/header-solid.php. Script: assets/js/rpnav.js.

   Phone first. Everything below the first media query is the phone: one
   row (wordmark, burger) and a full-height sheet of <details> lines. From
   980px the utility bar and the masthead actions appear; from 1280px the
   sheet becomes a second row of triggers with floating panels. One copy of
   every link in the DOM; only the presentation changes.

   Type follows the ruling at the end of rp-ds.css (2026-08-19):
   LABEL sans 600 .9375rem -.01em, META sans 400 .875rem, IDENT sans 400
   .9375rem, all sentence case. Colour: ink on paper; --rp-blue-bright is the
   signal for the current section; Tangelo carries the one CTA, the same
   value .rp-btn-primary uses, so the header's button and the page's read as
   one button. White on Tangelo is ~3.3:1, under AA for this size: a known
   deviation the library already carries, Abe's call 2026-09-07.
   No bars for state: the current link marks itself with a dot on the list's
   hairline, the docs-rail idiom.
   ========================================================================== */

.rpnav,
.rph-utilbar .rph-wrap {
  width: 100%;
  max-width: var(--rp-c-wide);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 1.5rem);
  box-sizing: border-box;
}

/* The masthead group follows the utility bar inside the header, and the flow
   layout's sibling gap would push it down 24px on the widths that hide the
   bar. The header owns its own spacing. */
.wp-block-template-part > .rph-sticky-paper,
.rph-sticky-paper > .wp-block-group { margin-block-start: 0; }

.rph-sticky-paper {
  background: color-mix(in srgb, var(--rp-paper) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  z-index: 30;
}

/* ---- utility bar (wide screens only; the sheet carries it below 980) --- */
.rph-utilbar { display: none; background: var(--rp-night); color: var(--rp-d-fg-2); }
.rph-utilbar .rph-wrap {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-block: .45rem;
  font-family: var(--rp-sans); font-weight: 400; font-size: .875rem; line-height: 1.5;
  letter-spacing: 0; text-transform: none;
}
.rph-utilbar__links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.rph-utilbar__links li { position: relative; }
.rph-utilbar a { color: inherit; text-decoration: none; display: inline-block; padding-block: .15rem; }
.rph-utilbar a:hover, .rph-utilbar a:focus-visible { color: var(--rp-d-fg); }
.rph-utilbar__sub {
  display: none; position: absolute; top: 100%; left: -.75rem; z-index: 50;
  min-width: 15rem; margin: 0; padding: .5rem .75rem .6rem; list-style: none;
  background: var(--rp-night); border-radius: 0 0 var(--rp-r-btn) var(--rp-r-btn);
  flex-direction: column; gap: .15rem;
}
.rph-utilbar__has-sub:hover .rph-utilbar__sub,
.rph-utilbar__has-sub:focus-within .rph-utilbar__sub { display: flex; }

/* ---- masthead row ------------------------------------------------------ */
.rpnav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-block: .5rem; position: static; }
.rpnav__logo { display: inline-flex; flex: 0 0 auto; order: 1; margin-inline-end: auto; }
.rpnav__logo svg { height: 22px; width: auto; display: block; }

/* ---- checkout masthead (patterns/header-checkout.php) -------------------- */
/* Checkout keeps its own minimal header: the wordmark home and the phone, no
   navigation to pull a buyer away mid-purchase. */
.rpco-header { background: var(--rp-paper); border-bottom: 1px solid var(--rp-line); }
.rpco-header__wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.rpco-header__brand { display: inline-flex; flex-direction: column; gap: .3rem; text-decoration: none; }
.rpco-header__logo { display: inline-flex; color: var(--rp-tangelo); }
.rpco-header__logo svg { height: 22px; width: auto; display: block; }
.rpco-header__tag { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-ink-3); }
.rpco-header__phone { color: var(--rp-ink-3); font-size: .9rem; text-decoration: none; white-space: nowrap; }
.rpco-header__phone:hover, .rpco-header__phone:focus-visible { color: var(--rp-ink); text-decoration: underline; }
@media (max-width: 479px) { .rpco-header__ask { display: none; } }

.rpnav__actions { display: none; order: 2; align-items: center; gap: .5rem; }
.rpnav__root { order: 3; }

/* Every summary drops the UA marker; the control is what is inside it. */
.rpnav summary { list-style: none; cursor: pointer; }
.rpnav summary::-webkit-details-marker { display: none; }

/* Focus: the signal blue, never the tangelo --ring. */
.rpnav a:focus-visible, .rpnav summary:focus-visible, .rpnav button:focus-visible, .rpnav input:focus-visible,
.rph-utilbar a:focus-visible {
  outline: 2px solid var(--rp-blue-bright); outline-offset: 2px; border-radius: var(--rp-r-btn);
}

/* Icon buttons and the burger: 44px targets. */
.rpnav__iconbtn, .rpnav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--rp-line); border-radius: var(--rp-r-btn);
  background: var(--rp-surface); color: var(--rp-ink);
}
.rpnav__burger-close { display: none; }
.rpnav__root[open] > .rpnav__burger .rpnav__burger-open { display: none; }
.rpnav__root[open] > .rpnav__burger .rpnav__burger-close { display: block; }

/* ---- the sheet (phone and tablet) -------------------------------------- */
.rpnav__sheet {
  /* Absolute, not fixed: the header's backdrop-filter is the containing
     block either way, so the sheet hangs off the masthead row and runs to
     the bottom of the viewport. --rpnav-head is the header's measured
     height (rpnav.js); the fallback is the phone masthead. */
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  height: calc(100dvh - var(--rpnav-head, 4.25rem));
  background: var(--rp-paper);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
html.rpnav-open, html:has(.rpnav__root[open]) { overflow: hidden; }
@media (min-width: 1280px) { html.rpnav-open, html:has(.rpnav__root[open]) { overflow: auto; } }

.rpnav__sheethead, .rpnav__primary, .rpnav__more, .rpnav__sheetfoot {
  padding-inline: clamp(1.1rem, 4vw, 1.5rem);
}
.rpnav__sheethead { display: flex; flex-direction: column; gap: .6rem; padding-block: .9rem .5rem; border-block-end: 1px solid var(--rp-line); }

.rpnav__searchform { display: flex; gap: .5rem; }
.rpnav__searchform input {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  font-family: var(--rp-sans); font-size: .9375rem; color: var(--rp-ink);
  background: var(--rp-surface); border: 1px solid var(--rp-line-2); border-radius: var(--rp-r-btn);
  padding: .4rem .8rem;
}
.rpnav__searchform input::placeholder { color: var(--rp-ink-3); }
.rpnav__searchbtn, .rpnav__signin, .rpnav__account, .rpnav__call {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .4rem .95rem;
  font-family: var(--rp-sans); font-weight: 600; font-size: .9375rem; letter-spacing: -.01em;
  color: var(--rp-ink); background: var(--rp-surface); border: 1px solid var(--rp-line-2);
  border-radius: var(--rp-r-btn); text-decoration: none; cursor: pointer;
}
.rpnav__searchbtn:hover, .rpnav__signin:hover, .rpnav__account:hover, .rpnav__call:hover { border-color: var(--rp-ink-3); }
.rpnav__signin { justify-content: flex-start; }

/* The lines. */
.rpnav__lines, .rpnav__list { list-style: none; margin: 0; padding: 0; }
.rpnav__line, .rpnav__more { border-block-end: 1px solid var(--rp-line); }
.rpnav__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 48px; padding: .3rem 0;
  font-family: var(--rp-sans); font-weight: 600; font-size: .9375rem; letter-spacing: -.01em;
  color: var(--rp-ink);
}
.rpnav__trigger.is-active { color: var(--rp-blue-bright); }
.rpnav__caret { flex: 0 0 auto; color: var(--rp-ink-3); transition: transform var(--rp-t-fast) var(--rp-e); }
.rpnav__line[open] > .rpnav__trigger .rpnav__caret,
.rpnav__more[open] > .rpnav__trigger .rpnav__caret { transform: rotate(180deg); }

.rpnav__panel { display: flex; flex-direction: column; gap: .6rem; padding: .1rem 0 1rem; }
.rpnav__col:has(.rpnav__card) { order: -1; }
.rpnav__colhead {
  font-family: var(--rp-sans); font-weight: 600; font-size: .9375rem; letter-spacing: -.01em;
  text-transform: none; color: var(--rp-ink-3); padding: .35rem 0 .2rem;
}
.rpnav__list { border-inline-start: 1px solid var(--rp-line); padding-inline-start: .9rem; }
.rpnav__link {
  position: relative; display: block; min-height: 44px; padding: .55rem 0;
  font-family: var(--rp-sans); font-weight: 400; font-size: .9375rem; letter-spacing: 0;
  color: var(--rp-ink-2); text-decoration: none; box-sizing: border-box;
}
.rpnav__link:hover { color: var(--rp-ink); }
.rpnav__link-label { display: block; }
.rpnav__note { display: block; margin-top: .15rem; font-weight: 400; font-size: .875rem; line-height: 1.45; color: var(--rp-ink-3); }
.rpnav__link--hub .rpnav__link-label, .rpnav__link--card .rpnav__link-label, .rpnav__link--line .rpnav__link-label { font-weight: 600; color: var(--rp-ink); }
.rpnav__link--line { min-height: 40px; padding-block: .4rem; }
.rpnav__list .rpnav__link::before {
  content: ""; position: absolute; inset-inline-start: calc(-.9rem - 3px); top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--rp-line-2); opacity: 0; transition: opacity var(--rp-t-fast) var(--rp-e);
}
.rpnav__list .rpnav__link:hover::before { opacity: 1; }
.rpnav__link[aria-current="page"] { color: var(--rp-blue-bright); font-weight: 600; }
.rpnav__list .rpnav__link[aria-current="page"]::before { background: var(--rp-blue-bright); opacity: 1; }
.rpnav__sub .rpnav__link { padding-inline-start: .9rem; }

/* The pinned action row. */
.rpnav__sheetfoot {
  position: sticky; bottom: 0; margin-top: auto;
  display: flex; gap: .6rem; align-items: center;
  padding-block: .75rem; background: var(--rp-paper); border-block-start: 1px solid var(--rp-line);
}
.rpnav__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .5rem 1.1rem;
  font-family: var(--rp-sans); font-weight: 600; font-size: .9375rem; letter-spacing: -.01em;
  color: var(--rp-tangelo-700, #C04000); background: var(--rp-white, #FFFFFF); border: 2px solid var(--rp-tangelo); border-radius: var(--rp-r-btn);
  text-decoration: none; white-space: nowrap; transition: filter var(--rp-t-fast) var(--rp-e);
}
.rpnav__cta:hover { background: var(--rp-tangelo-50, #FFF3ED); }
.rpnav__cta--sheet { flex: 1 1 auto; }
.rpnav__call { flex: 0 0 auto; }

/* Search popover lives on wide screens only. */
.rpnav__search { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rpnav__caret, .rpnav__cta, .rpnav__list .rpnav__link::before { transition: none; }
}

/* ---- 980px: utility bar and masthead actions appear ---------------------- */
@media (min-width: 980px) {
  .rph-utilbar { display: block; }
  .rpnav__actions { display: flex; }
  .rpnav__search { display: block; position: relative; }
  .rpnav__searchform--pop {
    position: absolute; top: calc(100% + .5rem); right: 0; z-index: 45; width: 22rem;
    padding: .6rem; background: var(--rp-surface); border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card); box-shadow: var(--rp-sh-md);
  }
  .rpnav__sheethead .rpnav__searchform, .rpnav__signin { display: none; }
  .rpnav__sheethead { display: none; }
}

/* ---- 1280px: the lines become a second row with floating panels --------- */
@media (min-width: 1280px) {
  html.rpnav-js .rpnav__burger { display: none; }
  /* One row: wordmark, the eight lines, then the actions. The lines used to
     wrap to a second row because the descriptive labels needed one; the short
     words fit beside the wordmark, so the header is a single band again. */
  html.rpnav-js .rpnav__root { flex: 1 1 auto; order: 2; min-width: 0; }
  html.rpnav-js .rpnav__logo { margin-inline-end: 0; }
  html.rpnav-js .rpnav__actions { order: 3; margin-inline-start: auto; }
  html.rpnav-js .rpnav__sheet {
    position: static; inset: auto; height: auto; padding: 0; background: none;
    display: block; overflow: visible;
  }
  html.rpnav-js .rpnav__primary { padding: 0; }
  html.rpnav-js .rpnav__more, html.rpnav-js .rpnav__sheetfoot { display: none; }
  html.rpnav-js .rpnav__lines { display: flex; justify-content: center; gap: 2px; flex-wrap: nowrap; }
  html.rpnav-js .rpnav__line-item { position: relative; }
  html.rpnav-js .rpnav__line { border: 0; }
  html.rpnav-js .rpnav__trigger {
    min-height: 40px; padding: .3rem .4rem; border-radius: var(--rp-r-btn);
    font-size: .875rem; white-space: nowrap;
    transition: background var(--rp-t-fast) var(--rp-e), color var(--rp-t-fast) var(--rp-e);
  }
  html.rpnav-js .rpnav__trigger:hover, html.rpnav-js .rpnav__line[open] > .rpnav__trigger { background: var(--rp-blue-50); color: var(--rp-ink); }
  html.rpnav-js .rpnav__trigger.is-active { color: var(--rp-blue-bright); }
  html.rpnav-js .rpnav__caret { display: none; }
  html.rpnav-js .rpnav__panel {
    position: absolute; top: 100%; left: 0; z-index: 40; margin-top: .5rem;
    display: grid; grid-template-columns: repeat(var(--rpnav-cols, 1), minmax(13.5rem, 16.5rem)); gap: .9rem;
    padding: .6rem .75rem .75rem; background: var(--rp-surface); border: 1px solid var(--rp-line);
    border-radius: var(--rp-r-card); box-shadow: var(--rp-sh-md);
    max-height: calc(100vh - 10rem); overflow-y: auto;
  }
  /* Every panel hangs from its own trigger. A panel near the right edge would
     run off the screen, so rpnav.js measures it on open and slides it back
     inside; the rule that right-aligned the last three items was a guess that
     stopped holding when the row stopped spanning the header. */
  html.rpnav-js .rpnav__panel { left: 0; right: auto; margin-inline-start: var(--rpnav-shift, 0px); max-width: calc(100vw - 2rem); }
  html.rpnav-js .rpnav__col:has(.rpnav__card) { order: 0; }
  html.rpnav-js .rpnav__link--line { grid-column: 1 / -1; border-block-end: 1px solid var(--rp-line); padding-inline: .25rem; }
  html.rpnav-js .rpnav__list { border: 0; padding: 0; }
  html.rpnav-js .rpnav__list .rpnav__link::before { display: none; }
  html.rpnav-js .rpnav__link { min-height: 0; padding: .45rem .6rem; border-radius: var(--rp-r-btn); font-size: .875rem; transition: background var(--rp-t-fast) var(--rp-e); }
  html.rpnav-js .rpnav__link:hover { background: var(--rp-blue-50); }
  html.rpnav-js .rpnav__link[aria-current="page"] { background: var(--rp-blue-50); }
  html.rpnav-js .rpnav__colhead { padding: .3rem .6rem .25rem; font-size: .875rem; }
  html.rpnav-js .rpnav__hub { margin-block-end: .35rem; border-block-end: 1px solid var(--rp-line); }
  html.rpnav-js .rpnav__card { margin-block-start: .35rem; }
  html.rpnav-js .rpnav__card .rpnav__link {
    border: 1px solid color-mix(in srgb, var(--rp-tangelo) 26%, var(--rp-line));
    background: color-mix(in srgb, var(--rp-tangelo) 4%, var(--rp-surface));
    border-radius: var(--rp-r-btn); padding: .6rem .7rem;
  }
  html.rpnav-js .rpnav__card .rpnav__link:hover { background: color-mix(in srgb, var(--rp-tangelo) 8%, var(--rp-surface)); }
}

/* The one-row header, measured. "The Resume Place" wordmark is 244px (the
   old "Resume Place" was 187), the eight words 594 at this spacing, the
   actions 369 with a worded Log in, inside a 1200 to 1232 band: 31px over at
   1280 and wrapping at every width from 1400. So from 1280 up the words keep
   this close spacing and Log in is its person icon, its label kept for screen
   readers. The row is then 1177: 23px spare at 1280, 55 from 1366. The band
   stays the content width, so the wordmark lines up with the page below. */
@media (min-width: 1280px) {
  html.rpnav-js .rpnav__trigger { padding-inline: .25rem; }
  html.rpnav-js .rpnav__lines { gap: 0; }
  html.rpnav-js .rpnav__account { padding-inline: 0; width: 44px; }
  html.rpnav-js .rpnav__account span {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}