@charset "utf-8";

/* ==========================================================================
   Role Pakistan — front end.

   Two palettes in one sheet. body.rpk-dark is the site: deep petrol, used
   for the home page and static pages. body.rpk-light is everything that is
   reading — the blog index, single posts, archives, search — on warm paper
   with the site's petrol as its heading colour, so the two read as one brand.

   Every colour here comes from a custom property the plugin writes from
   settings, so the Colours tab controls the whole design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens. Values are injected by the plugin; these are the fallbacks.
   -------------------------------------------------------------------------- */
:root {
  --c-base: #0c2626;
  --c-lift: #11312f;
  --c-rule: #27514c;
  --c-control: #537d78;
  --c-text: #ede4d3;
  --c-dim: #9fb0a9;
  --c-signal: #f2a541;
  --c-mint: #7fd1b9;

  --b-bg: #f7f5f0;
  --b-surface: #ffffff;
  --b-border: #e2ded3;
  --b-ink: #1b2b29;
  --b-muted: #5d706c;
  --b-heading: #0c2626;
  --b-accent: #0f6b5c;

  --page: 1180px;
  --post-columns: 5;
  --logo-width: 132px;

  --f-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-prose: "Newsreader", Georgia, "Times New Roman", serif;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --header-h: 64px;
  /* So the skip link does not land its target under the sticky header. */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.rpk *,
.rpk *::before,
.rpk *::after {
  box-sizing: border-box;
}

body.rpk {
  margin: 0;
  font-family: var(--f-prose);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

body.rpk-dark {
  background: var(--c-base);
  color: var(--c-text);
  color-scheme: dark;
}

body.rpk-light {
  background: var(--b-bg);
  color: var(--b-ink);
  color-scheme: light;
}

.rpk h1,
.rpk h2,
.rpk h3,
.rpk h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* The margin reset sits inside :where() so it carries no specificity at all.
   Written as ".rpk h1" it scored one class plus one element, which quietly
   outranked every single-class component rule: .rpk-hero__lede asked for a
   2rem gap under the headline and got 0, and .rpk-section__title lost its
   margin the same way. Resets should never be hard to override, and this is
   the reason a reset gets wrapped. Typography above keeps its weight, so a
   theme's own heading styles still cannot reach in. */
:where(.rpk h1, .rpk h2, .rpk h3, .rpk h4, .rpk p) {
  margin: 0;
}

.rpk img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links inherit by default. This is (0,1,1), which beats a bare single-class
   selector, so every link component below is written element-qualified
   (a.rpk-brand, not .rpk-brand) to match that weight and win on source
   order. Writing :not([class]) here instead would raise the weight again and
   break the plain links a menu or page content produces. */
.rpk a {
  color: inherit;
}

.rpk :focus-visible {
  outline: 2px solid var(--c-signal);
  outline-offset: 3px;
}

body.rpk-light :focus-visible {
  outline-color: var(--b-accent);
}

.rpk-wrap {
  max-width: var(--page);
  margin-inline: auto;
  /* Scales the gutter with the viewport so narrow screens are not left with
     a desktop-sized margin eating the content. */
  padding-inline: clamp(1rem, 4vw, 1.75rem);
}

a.rpk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--c-signal);
  color: #1a1205;
  font-family: var(--f-display);
  font-weight: 600;
  padding: 0.75rem 1rem;
  text-decoration: none;
}

a.rpk-skip:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   3. Header. Always the dark palette, so the brand is constant.
   -------------------------------------------------------------------------- */
.rpk-header {
  background: var(--c-base);
  border-bottom: 1px solid var(--c-rule);
}

body.rpk-sticky .rpk-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* The admin bar is fixed over the top of the page, and it outranks everything
   on z-index, so a header stuck to top:0 slides underneath it and loses its
   first 32px the moment the page scrolls. Offset by its height instead.
   Below 783px WordPress makes the admin bar position:absolute, so it scrolls
   away with the page and no offset is wanted. */
@media screen and (min-width: 783px) {
  body.rpk-sticky.admin-bar .rpk-header {
    top: 32px;
  }
}

.rpk-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--header-h);
}

a.rpk-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-text);
  text-decoration: none;
  flex: none;
}

.rpk-brand__logo {
  width: var(--logo-width);
  height: auto;
}

.rpk-brand__suffix {
  color: var(--c-dim);
  font-weight: 500;
}

.rpk-nav {
  flex: 1;
  margin-left: 1.25rem;
}

.rpk-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpk-nav__list li {
  position: relative;
}

.rpk-nav__list a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--c-dim);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.14s ease;
}

.rpk-nav__list a:hover,
.rpk-nav__list .current-menu-item > a {
  color: var(--c-text);
}

.rpk-nav__list a[aria-current="page"],
.rpk-nav__list .current-menu-item > a {
  box-shadow: inset 0 -2px 0 var(--c-signal);
  border-radius: 0;
  color: var(--c-text);
}

/* The Blog item is appended last and reads as the way into the light side. */
.rpk-nav__item--blog a {
  color: var(--c-mint);
}

.rpk-burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--c-control);
  border-radius: var(--radius);
  color: var(--c-text);
  padding: 0.4375rem 0.625rem;
  cursor: pointer;
}

/* Element-qualified so the heading/link resets cannot outrank it. The form
   controls are listed too: the comment form's submit is an <input>, which
   "a.rpk-btn" alone never matched, leaving it as a grey system button. */
a.rpk-btn,
button.rpk-btn,
input[type="submit"].rpk-btn {
  display: inline-block;
  background: var(--c-signal);
  color: #1a1205;
  border: 0;
  border-radius: var(--radius);
  padding: 0.625rem 1.0625rem;
  font-family: var(--f-display);
  font-size: 0.90625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}

a.rpk-btn:hover,
button.rpk-btn:hover,
input[type="submit"].rpk-btn:hover {
  filter: brightness(1.08);
}

a.rpk-btn--ghost {
  background: none;
  border: 1px solid var(--c-control);
  color: var(--c-text);
}

body.rpk-light a.rpk-btn--ghost {
  border-color: var(--b-border);
  color: var(--b-heading);
  background: var(--b-surface);
}

body.rpk-light a.rpk-btn--ghost:hover {
  border-color: var(--b-accent);
  color: var(--b-accent);
  filter: none;
}

.rpk-header__cta {
  margin-left: auto;
  flex: none;
}

/* --------------------------------------------------------------------------
   4. Dark sections
   -------------------------------------------------------------------------- */
.rpk-hero {
  padding-block: var(--s-8) var(--s-4);
}

/* No measure on the headline either. At 20em it set 38 characters to the line
   over three lines, which is below the 45-85 that reads comfortably, so the
   cap was making the headline cramped rather than easier to read. It also left
   it at 55% of the column while the explorer, the figure and the plot directly
   beneath it all ran the full width, which is the step that made the text look
   pinned to the left. Uncapped it sets two lines of about 57 characters and
   lines up with everything below it. */
.rpk-hero__lede {
  font-family: var(--f-prose);
  font-size: clamp(1.3125rem, 3.1vw, 1.9375rem);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: 0;
  margin-bottom: var(--s-4);
}

.rpk-section {
  padding-block: var(--s-8);
}

body.rpk-dark .rpk-section + .rpk-section,
body.rpk-dark .rpk-section--posts {
  border-top: 1px solid var(--c-rule);
}

.rpk-section__head {
  margin-bottom: var(--s-4);
}

.rpk-section__title {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  letter-spacing: -0.03em;
  margin-bottom: 0.625rem;
}

/* The intro line had no bottom margin, so a section's content started 10px
   under it and read as part of the same block. The heading and its intro
   belong together; what follows needs air. :not(:last-child) keeps a section
   that ends on its intro from carrying a trailing gap. */
.rpk-section__intro:not(:last-child) {
  margin-bottom: var(--s-3);
}

/* Same gap when a section has a heading and no intro. */
.rpk-section__title:not(:last-child) + :not(.rpk-section__intro) {
  margin-top: var(--s-3);
}

body.rpk-light .rpk-section__title {
  color: var(--b-heading);
}

/* No reading-measure cap. The headings on these pages already run the full
   content width, so a text block that stopped at 38em sat against the left
   edge with a wide empty band beside it and read as misaligned rather than as
   a measure. Line length is now set by the page width itself, which the
   Content width setting controls in one place. */

.rpk-section__intro {
  color: var(--c-dim);
  font-size: 1.125rem;
}

body.rpk-light .rpk-section__intro {
  color: var(--b-muted);
}

.rpk-more {
  margin-top: var(--s-4);
}

.rpk-empty {
  color: var(--c-dim);
  font-size: 1.125rem;
}

body.rpk-light .rpk-empty {
  color: var(--b-muted);
}

/* --------------------------------------------------------------------------
   5. Post grid. One shared card, tuned per palette.
   -------------------------------------------------------------------------- */
.rpk-grid {
  display: grid;
  grid-template-columns: repeat(var(--post-columns), minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The home preview runs on its own column count, not the blog's. auto-fit was
   wrong here: it packs as many columns as fit, so six posts landed as a row of
   four and an orphan row of two. A fixed count keeps every row full, and the
   cards come out wide enough to sit beside the rest of the page. */
.rpk-section--posts .rpk-grid {
  grid-template-columns: repeat(var(--home-post-columns, 5), minmax(0, 1fr));
  gap: 1rem;
}

/* Five across leaves each card near 210px, so the home row runs a size down
   from the blog page's cards: tighter padding, smaller title, and an excerpt
   clamped to three lines so one long summary cannot stretch the whole row.
   Scoped to the home section, so the blog grid keeps its roomier card. */
.rpk-section--posts .rpk-card__body {
  padding: 0.875rem 0.875rem 1rem;
  gap: 0.375rem;
}

.rpk-section--posts .rpk-card__link > .rpk-card__body:first-child {
  padding-top: 1rem;
}

.rpk-section--posts .rpk-card__title {
  font-size: 0.9375rem;
  line-height: 1.32;
}

.rpk-section--posts .rpk-card__excerpt {
  font-size: 0.8125rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.rpk-section--posts .rpk-card__meta {
  font-size: 0.75rem;
}

.rpk-card {
  display: flex;
}

a.rpk-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.rpk-dark .rpk-card__link {
  background: var(--c-lift);
  border: 1px solid var(--c-rule);
}

body.rpk-dark .rpk-card__link:hover {
  border-color: var(--c-control);
}

body.rpk-light .rpk-card__link {
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  box-shadow: 0 1px 2px rgb(27 43 41 / 4%);
}

body.rpk-light .rpk-card__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgb(27 43 41 / 10%);
  border-color: color-mix(in srgb, var(--b-accent) 35%, var(--b-border));
}

.rpk-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: color-mix(in srgb, var(--b-border) 55%, transparent);
}

body.rpk-dark .rpk-card__media {
  background: var(--c-base);
}

.rpk-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No featured image: a quiet tinted block at the same ratio as a real one,
   so titles stay on one line across the row instead of stepping. */
.rpk-card__media--empty {
  aspect-ratio: 16 / 10;
}

body.rpk-light .rpk-card__media--empty {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--b-accent) 10%, var(--b-surface)),
    var(--b-surface));
}

body.rpk-dark .rpk-card__media--empty {
  background: linear-gradient(135deg, var(--c-rule), var(--c-lift));
}

.rpk-card__body {
  padding: 0.9375rem 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  flex: 1;
}

/* A card with no image strip above it: the title is now the first thing in
   the box, so it needs the same breathing room at the top as at the sides. */
.rpk-card__link > .rpk-card__body:first-child {
  padding-top: 1.25rem;
}

.rpk-card__title {
  font-size: 1.0625rem;
  line-height: 1.3;
}

body.rpk-dark .rpk-card__title {
  color: var(--c-text);
}

body.rpk-light .rpk-card__title {
  color: var(--b-heading);
}

a.rpk-card__link:hover .rpk-card__title {
  color: var(--b-accent);
}

body.rpk-dark a.rpk-card__link:hover .rpk-card__title {
  color: var(--c-mint);
}

.rpk-card__excerpt {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--b-muted);
}

body.rpk-dark .rpk-card__excerpt {
  color: var(--c-dim);
}

.rpk-card__meta {
  margin-top: auto;
  padding-top: 0.3125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--b-muted);
}

body.rpk-dark .rpk-card__meta {
  color: var(--c-dim);
}

.rpk-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentcolor;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   6. Blog index
   -------------------------------------------------------------------------- */
.rpk-blog-head {
  padding-block: var(--s-8) var(--s-4);
  border-bottom: 1px solid var(--b-border);
}

.rpk-blog-head__title {
  font-size: clamp(2rem, 5vw, 3.125rem);
  letter-spacing: -0.035em;
  color: var(--b-heading);
}

.rpk-blog-head__intro {
  margin-top: 0.75rem;
  font-size: 1.1875rem;
  color: var(--b-muted);
}

/* The blog page and its category blocks are the light palette by design, and
   they took their colours straight from the --b-* tokens with no counterpart
   for the dark one. --b-heading happens to be the same value as the dark
   background, so a page that rendered dark by mistake did not come out low
   contrast, it came out blank. These keep the text legible either way, so a
   palette bug can never hide content again. */
body.rpk-dark .rpk-blog-head,
body.rpk-dark .rpk-cat {
  border-color: var(--c-rule);
}

body.rpk-dark .rpk-blog-head__title,
body.rpk-dark .rpk-cat__title a {
  color: var(--c-text);
}

body.rpk-dark .rpk-blog-head__intro,
body.rpk-dark .rpk-cat__desc {
  color: var(--c-dim);
}

body.rpk-dark a.rpk-cat__all {
  color: var(--c-signal);
}

.rpk-cat {
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--b-border);
}

.rpk-cat:last-of-type {
  border-bottom: 0;
}

.rpk-cat__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: 0.375rem;
}

.rpk-cat__title {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}

.rpk-cat__title a {
  color: var(--b-heading);
  text-decoration: none;
}

.rpk-cat__title a:hover {
  color: var(--b-accent);
}

a.rpk-cat__all {
  font-family: var(--f-display);
  font-size: 0.90625rem;
  font-weight: 600;
  color: var(--b-accent);
  text-decoration: none;
  white-space: nowrap;
}

a.rpk-cat__all:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rpk-cat__desc {
  margin-bottom: 1.125rem;
  color: var(--b-muted);
  font-size: 1rem;
}

.rpk-cat .rpk-grid {
  margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   7. Single post
   -------------------------------------------------------------------------- */
.rpk-article {
  padding-block: var(--s-6) var(--s-8);
}

/* The article uses the same content column as every other page: it inherits
   max-width from .rpk-wrap rather than carrying its own 48rem cap, which was
   what left wide screens with a narrow strip of text and empty sides. The
   Advanced tab can put the cap back for long-form reading. */
body.rpk-measure-narrow .rpk-article__inner {
  max-width: 48rem;
}

/* Two shapes exist: a <nav class="rpk-crumbs"> wrapping an <ol> (single.php)
   and an <ol class="rpk-crumbs"> directly (category.php, role-single.php).
   Only the first was styled, so role and category pages showed the raw list:
   "1. Home", "2. / Roles", numbers and indent included. */
.rpk-crumbs ol,
ol.rpk-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-family: var(--f-display);
  font-size: 0.875rem;
  color: var(--b-muted);
}

.rpk-crumbs a {
  color: var(--b-muted);
  text-decoration: none;
}

.rpk-crumbs a:hover {
  color: var(--b-accent);
}

.rpk-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  opacity: 0.5;
}

.rpk-article__title {
  font-size: clamp(1.875rem, 4.6vw, 2.875rem);
  letter-spacing: -0.035em;
  color: var(--b-heading);
}

.rpk-article__meta {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-size: 0.875rem;
  color: var(--b-muted);
}

.rpk-article__media {
  margin: var(--s-3) 0 0;
}

.rpk-article__media img {
  border-radius: var(--radius-lg);
  width: 100%;
  /* A tall portrait featured image would otherwise fill the screen before a
     word of the post is visible. */
  max-height: 32rem;
  object-fit: cover;
}

.rpk-article__body {
  margin-top: var(--s-3);
}

/* --------------------------------------------------------------------------
   8. Prose
   -------------------------------------------------------------------------- */
.rpk-prose {
  font-size: 1.1875rem;
  line-height: 1.72;
}

.rpk-prose > * + * {
  margin-top: 1.1em;
}

.rpk-prose h2,
.rpk-prose h3 {
  margin-top: 1.9em;
  margin-bottom: 0.55em;
}

.rpk-prose h2 {
  font-size: 1.625rem;
}

.rpk-prose h3 {
  font-size: 1.3125rem;
}

body.rpk-light .rpk-prose h2,
body.rpk-light .rpk-prose h3 {
  color: var(--b-heading);
}

.rpk-prose a {
  color: var(--b-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body.rpk-dark .rpk-prose a {
  color: var(--c-mint);
}

.rpk-prose img {
  border-radius: var(--radius-lg);
}

.rpk-prose blockquote {
  margin: 1.6em 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--b-accent);
  font-style: italic;
  color: var(--b-muted);
}

.rpk-prose code {
  font-size: 0.9em;
  background: color-mix(in srgb, var(--b-border) 45%, transparent);
  padding: 0.12em 0.36em;
  border-radius: var(--radius-xs);
}

.rpk-prose pre {
  background: var(--c-base);
  color: var(--c-text);
  padding: 1.125rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.rpk-prose pre code {
  background: none;
  padding: 0;
}

.rpk-prose ul,
.rpk-prose ol {
  padding-left: 1.3em;
}

.rpk-prose li + li {
  margin-top: 0.4em;
}

/* --------------------------------------------------------------------------
   9. Pagination, comments, footer
   -------------------------------------------------------------------------- */
.rpk-pagination {
  margin-top: var(--s-4);
}

.rpk-pagination .page-numbers {
  display: inline-block;
  padding: 0.4375rem 0.75rem;
  margin-right: 0.25rem;
  border: 1px solid var(--b-border);
  border-radius: var(--radius);
  background: var(--b-surface);
  font-family: var(--f-display);
  font-size: 0.90625rem;
  color: var(--b-ink);
  text-decoration: none;
}

.rpk-pagination .page-numbers.current {
  background: var(--b-heading);
  border-color: var(--b-heading);
  color: #fff;
}

.rpk-comments {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--b-border);
}

.rpk-comments__title,
.rpk-comments .comment-reply-title {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
  color: var(--b-heading);
}

body.rpk-dark .rpk-comments__title,
body.rpk-dark .rpk-comments .comment-reply-title {
  color: var(--c-text);
}

.rpk-comments__list,
.rpk-comments__list .children {
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
}

.rpk-comments__list .children {
  margin: var(--s-3) 0 0;
  padding-left: var(--s-3);
  border-left: 2px solid var(--b-border);
}

.rpk-comments__list li.comment {
  margin-bottom: var(--s-3);
}

.rpk-comments__list .comment-body {
  padding: var(--s-3);
  border: 1px solid var(--b-border);
  border-radius: var(--radius-lg);
  background: var(--b-surface);
}

body.rpk-dark .rpk-comments__list .comment-body {
  background: var(--c-lift);
  border-color: var(--c-rule);
}

.rpk-comments__list .comment-author {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--f-display);
  font-weight: 600;
}

.rpk-comments__list .comment-author img {
  border-radius: 50%;
  flex: none;
}

.rpk-comments__list .comment-metadata {
  font-size: 0.8125rem;
  color: var(--b-muted);
  margin-top: 0.25rem;
}

.rpk-comments__list .comment-content {
  margin-top: 0.75rem;
}

.rpk-comments__list .comment-content p {
  margin-bottom: 0.75rem;
}

.rpk-comments__list .reply {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.rpk-comments__closed,
.rpk-comments .logged-in-as,
.rpk-comments .comment-notes {
  font-size: 0.875rem;
  color: var(--b-muted);
  margin-bottom: var(--s-3);
}

/* The form. Without these the browser's own control styling showed through:
   a monospace textarea with 2px of padding and a grey system button. */
.rpk-commentform__row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--s-3);
}

.rpk-commentform__row label {
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--b-heading);
}

body.rpk-dark .rpk-commentform__row label {
  color: var(--c-text);
}

.rpk-comments input[type="text"],
.rpk-comments input[type="email"],
.rpk-comments input[type="url"],
.rpk-comments textarea {
  width: 100%;
  max-width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--b-heading);
  background: var(--b-surface);
  border: 1px solid var(--b-border);
  border-radius: var(--radius-lg);
  padding: 0.6875rem 0.875rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.rpk-comments textarea {
  min-height: 9rem;
  resize: vertical;
}

body.rpk-dark .rpk-comments input[type="text"],
body.rpk-dark .rpk-comments input[type="email"],
body.rpk-dark .rpk-comments input[type="url"],
body.rpk-dark .rpk-comments textarea {
  color: var(--c-text);
  background: var(--c-base);
  border-color: var(--c-rule);
}

.rpk-comments input[type="text"]:focus,
.rpk-comments input[type="email"]:focus,
.rpk-comments input[type="url"]:focus,
.rpk-comments textarea:focus {
  outline: none;
  border-color: var(--b-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-accent) 22%, transparent);
}

.rpk-comments input::placeholder,
.rpk-comments textarea::placeholder {
  color: var(--b-muted);
}

/* Name and email sit side by side; the comment box keeps the full width. */
@media (min-width: 40rem) {
  .rpk-commentform .comment-form-author,
  .rpk-commentform .comment-form-email {
    display: inline-flex;
    width: calc(50% - 0.5rem);
    vertical-align: top;
  }

  .rpk-commentform .comment-form-author {
    margin-right: 0.875rem;
  }
}

.rpk-comments .form-submit {
  margin: 0;
}

.rpk-comments .rpk-commentform__submit {
  cursor: pointer;
  font: inherit;
  font-family: var(--f-display);
  font-weight: 600;
}

.rpk-comments .comment-reply-title small {
  font-size: 0.875rem;
  font-weight: 400;
  margin-left: 0.5rem;
}

.rpk-footer {
  background: var(--c-base);
  border-top: 1px solid var(--c-rule);
  color: var(--c-dim);
  font-size: 0.90625rem;
  padding-block: 2rem 2.75rem;
}

.rpk-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* The copyright sits on its own line under a hairline, so it reads as the
   legal note it is rather than competing with the footer's own text. The
   footer keeps the dark base on every page, so these need no light variant. */
.rpk-footer__legal {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--c-rule);
}

.rpk-footer__legal small {
  font-size: 0.8125rem;
  color: var(--c-dim);
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   10. Responsive. Columns step down so a 5-wide grid never crushes.
   -------------------------------------------------------------------------- */
@media (max-width: 75rem) {
  .rpk-grid {
    grid-template-columns: repeat(min(var(--post-columns), 4), minmax(0, 1fr));
  }
}

@media (max-width: 60rem) {
  .rpk-grid {
    grid-template-columns: repeat(min(var(--post-columns), 3), minmax(0, 1fr));
  }

  .rpk-section--posts .rpk-grid {
    grid-template-columns: repeat(min(var(--home-post-columns, 3), 3), minmax(0, 1fr));
  }

  .rpk-burger {
    display: block;
  }

  .rpk-header__inner {
    flex-wrap: wrap;
    padding-block: 0.625rem;
  }

  .rpk-nav {
    flex: 1 0 100%;
    margin-left: 0;
    order: 3;
  }

  .rpk-nav[hidden] {
    display: none;
  }

  .rpk-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--c-rule);
  }

  .rpk-nav__list a {
    padding: 0.6875rem 0;
    font-size: 1rem;
  }

  .rpk-nav__list a[aria-current="page"],
  .rpk-nav__list .current-menu-item > a {
    box-shadow: inset 2px 0 0 var(--c-signal);
    padding-left: 0.625rem;
  }

  .rpk-header__cta {
    order: 2;
  }
}

@media (max-width: 45rem) {
  .rpk-grid {
    grid-template-columns: repeat(min(var(--post-columns), 2), minmax(0, 1fr));
    gap: 1rem;
  }

  .rpk-section--posts .rpk-grid {
    grid-template-columns: repeat(min(var(--home-post-columns, 3), 2), minmax(0, 1fr));
  }
}

@media (max-width: 30rem) {
  .rpk-grid,
  .rpk-section--posts .rpk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rpk-section,
  .rpk-cat {
    padding-block: var(--s-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rpk *,
  .rpk *::before,
  .rpk *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

@media print {
  .rpk-header,
  .rpk-footer,
  .rpk-skip,
  .rpk-pagination {
    display: none;
  }

  body.rpk {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   11. Salary pages
   The home page, role pages, category pages and the role directory. These
   carry the dark palette; only reading pages switch to light.
   ========================================================================== */

.rpk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 11.1 Explorer */
.rpk-explorer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: flex-start;
  margin-bottom: 2.125rem;
}

.rpk-field {
  position: relative;
}

.rpk-field select,
.rpk-field input {
  background: var(--c-lift);
  color: var(--c-text);
  border: 1px solid var(--c-control);
  border-radius: var(--radius);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.6875rem 2.25rem 0.6875rem 0.875rem;
  max-width: 100%;
}

.rpk-field select {
  appearance: none;
  cursor: pointer;
}

.rpk-field::after {
  content: "";
  position: absolute;
  right: 0.875rem;
  top: 1.1875rem;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--c-dim);
  border-bottom: 1.5px solid var(--c-dim);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Wide enough for a long role name, not so wide it swallows the row. */
.rpk-field--role {
  flex: 0 1 21rem;
  min-width: min(100%, 15rem);
}

.rpk-field--role input {
  width: 100%;
}

.rpk-listbox {
  position: absolute;
  z-index: 70;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: 20.625rem;
  overflow-y: auto;
  background: var(--c-lift-2, #163a36);
  border: 1px solid var(--c-control);
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgb(0 0 0 / 42%);
}

.rpk-listbox[hidden] {
  display: none;
}

.rpk-listbox__group {
  position: sticky;
  top: 0;
  background: var(--c-lift-2, #163a36);
  color: var(--c-dim);
  font-family: var(--f-display);
  font-size: 0.78125rem;
  font-weight: 600;
  padding: 0.6875rem 0.875rem 0.3125rem;
  margin: 0;
}

.rpk-listbox__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--f-display);
  font-size: 0.90625rem;
  cursor: pointer;
}

.rpk-listbox__option:hover,
.rpk-listbox__option[data-active] {
  background: var(--c-rule-soft, #1c403c);
}

.rpk-listbox__option[aria-selected="true"] {
  color: var(--c-signal);
}

.rpk-listbox__empty {
  padding: 1rem 0.875rem;
  color: var(--c-dim);
  margin: 0;
}

.rpk-badge {
  flex: none;
  background: var(--c-mint);
  color: var(--c-base);
  border-radius: var(--radius-xs);
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 6px;
}

/* 11.2 Readout */
.rpk-readout {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--s-3);
}

.rpk-readout__head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.625rem;
}

.rpk-readout__figure {
  display: flex;
  align-items: baseline;
  gap: 0.14em;
  font-family: var(--f-display);
  font-size: clamp(3rem, 11vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.rpk-readout__currency {
  color: var(--c-dim);
  font-size: 0.34em;
  font-weight: 600;
}

.rpk-readout__meta {
  padding-bottom: 0.625rem;
}

.rpk-readout__label {
  color: var(--c-mint);
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 600;
}

.rpk-readout__scope {
  color: var(--c-dim);
  font-size: 0.96875rem;
}

.rpk-plot {
  margin-top: var(--s-3);
}

.rpk-plot svg {
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--f-display);
}

.rpk-readout__foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
  border-top: 1px solid var(--c-rule-soft, #1c403c);
  margin-top: 1.625rem;
  padding-top: 0.875rem;
  color: var(--c-dim);
  font-size: 0.90625rem;
}

.rpk-readout__foot strong {
  color: var(--c-text);
  font-weight: 400;
}

/* 11.3 Steps */
.rpk-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpk-steps > li {
  padding: 1.875rem 1.625rem;
  border-right: 1px solid var(--c-rule);
}

.rpk-steps > li:last-child {
  border-right: 0;
}

.rpk-steps__ord {
  color: var(--c-signal);
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.875rem;
}

.rpk-steps h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.5625rem;
}

.rpk-steps p {
  color: var(--c-dim);
  font-size: 1rem;
  line-height: 1.55;
}

/* 11.4 Emerging role tiles */
.rpk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.25rem, 1fr));
  gap: 1px;
  background: var(--c-rule-soft, #1c403c);
  border: 1px solid var(--c-rule-soft, #1c403c);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpk-tile {
  background: var(--c-base);
}

a.rpk-tile__link {
  display: block;
  padding: 1.0625rem 1.125rem;
  height: 100%;
  text-decoration: none;
  color: var(--c-text);
}

a.rpk-tile__link:hover {
  background: var(--c-lift);
}

.rpk-tile__title {
  display: block;
  font-family: var(--f-display);
  font-size: 0.96875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.3125rem;
}

.rpk-tile__title--more {
  color: var(--c-signal);
}

.rpk-tile__body {
  display: block;
  color: var(--c-dim);
  font-size: 0.90625rem;
  line-height: 1.5;
}

/* 11.5 Rates */
.rpk-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3.25rem;
  align-items: center;
}

.rpk-rates {
  border-top: 1px solid var(--c-rule-soft, #1c403c);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpk-rates > li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.125rem;
  padding-block: 0.9375rem;
  border-bottom: 1px solid var(--c-rule-soft, #1c403c);
}

.rpk-rates__role {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
}

.rpk-rates__amount {
  font-family: var(--f-display);
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.rpk-rates__amount small {
  color: var(--c-dim);
  font-size: 0.58em;
  font-weight: 500;
}

.rpk-rates__bar {
  grid-column: 1 / -1;
  height: 3px;
  background: var(--c-rule-soft, #1c403c);
  margin-top: 0.5625rem;
}

.rpk-rates__bar > span {
  display: block;
  height: 100%;
  background: var(--c-mint);
}

/* 11.6 Transparency bars */
.rpk-bars {
  max-width: 45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpk-bars > li {
  display: grid;
  grid-template-columns: minmax(5rem, 7.5rem) 1fr 3.5rem;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.4375rem;
}

.rpk-bars__name {
  color: var(--c-dim);
  font-size: 1rem;
}

.rpk-bars__track {
  height: 22px;
  background: var(--c-rule-soft, #1c403c);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.rpk-bars__track > span {
  display: block;
  height: 100%;
  background: var(--c-rule);
}

.rpk-bars__value {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rpk-bars > li[data-highlight] .rpk-bars__name {
  color: var(--c-text);
}

.rpk-bars > li[data-highlight] .rpk-bars__track > span {
  background: var(--c-signal);
}

.rpk-note {
  color: var(--c-dim);
  font-size: 1rem;
  margin-top: 1.625rem;
}

/* 11.7 Role directory */
.rpk-directory__group {
  border-top: 1px solid var(--c-rule-soft, #1c403c);
  padding-block: 1.25rem;
}

.rpk-directory__heading {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.rpk-directory__heading a {
  color: var(--c-mint);
  text-decoration: none;
}

.rpk-directory__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
}

.rpk-directory__list a {
  color: var(--c-dim);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.rpk-directory__list a:hover {
  color: var(--c-text);
  border-bottom-color: var(--c-rule);
}

.rpk-directory__list a[data-new]::after {
  content: "New";
  display: inline-block;
  background: var(--c-mint);
  color: var(--c-base);
  border-radius: var(--radius-xs);
  font-size: 0.625rem;
  font-weight: 600;
  padding: 1px 4px;
  margin-left: 5px;
  vertical-align: 1px;
}

/* 11.8 Role and category pages */
.rpk-page {
  padding-block: var(--s-4) var(--s-8);
}

.rpk-page-head {
  padding-block: var(--s-8) var(--s-3);
  border-bottom: 1px solid var(--c-rule);
}

.rpk-page__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 4.4vw, 2.75rem);
  letter-spacing: -0.035em;
  margin-bottom: 0.75rem;
}

.rpk-block {
  padding-block: var(--s-6) 0;
}

.rpk-sub {
  font-size: 1.375rem;
  margin-top: var(--s-4);
  margin-bottom: 0.5rem;
}

/* The methodology body is on the same column as every other page. It used to
   cap at 46rem: centred, that left it indented from its own h1; left aligned,
   it left a wide empty band down the right. Neither read as deliberate, so the
   cap is gone and the Content width setting governs the line length. */
.rpk-wrap.rpk-measure {
  max-width: var(--page);
}

/* Sample-data disclosure. Deliberately not a muted aside: it contradicts the
   figure printed directly above it, so it has to carry the same weight as the
   claim it qualifies. */
.rpk-notice {
  margin: var(--s-3) 0;
  padding: 0.9375rem 1.125rem;
  border: 1px solid var(--c-signal);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-signal) 10%, transparent);
}

body.rpk-light .rpk-notice {
  background: color-mix(in srgb, var(--c-signal) 14%, var(--b-surface));
}

.rpk-notice__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--c-text);
  margin-bottom: 0.25rem;
}

body.rpk-light .rpk-notice__title {
  color: var(--b-heading);
}

.rpk-notice__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-dim);
}

body.rpk-light .rpk-notice__body {
  color: var(--b-muted);
}

.rpk-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rpk-notice a:hover {
  color: var(--c-signal);
}

/* --------------------------------------------------------------------------
   Submission form
   -------------------------------------------------------------------------- */
.rpk-form {
  margin-top: var(--s-4);
  max-width: 34rem;
}

.rpk-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: var(--s-3);
}

.rpk-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

@media (max-width: 30rem) {
  .rpk-form__grid { grid-template-columns: 1fr; }
}

.rpk-form__row label {
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text);
}

body.rpk-light .rpk-form__row label { color: var(--b-heading); }

.rpk-form__optional {
  font-weight: 400;
  color: var(--c-dim);
}

.rpk-form__hint {
  font-size: 0.8125rem;
  color: var(--c-dim);
}

body.rpk-light .rpk-form__hint,
body.rpk-light .rpk-form__optional { color: var(--b-muted); }

.rpk-form input[type="text"],
.rpk-form select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-base);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 0.6875rem 0.875rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

body.rpk-light .rpk-form input[type="text"],
body.rpk-light .rpk-form select {
  color: var(--b-heading);
  background: var(--b-surface);
  border-color: var(--b-border);
}

.rpk-form input[type="text"]:focus,
.rpk-form select:focus {
  outline: none;
  border-color: var(--c-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-signal) 25%, transparent);
}

.rpk-form__actions { margin-top: var(--s-4); }

.rpk-form button.rpk-btn {
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 600;
}

/* The honeypot has to be reachable by a bot parsing the markup and invisible
   to everyone else, so it is moved off-screen rather than display:none, which
   some bots check for. */
.rpk-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rpk-notice--good { border-color: #3fae7f; background: color-mix(in srgb, #3fae7f 12%, transparent); }
.rpk-notice--bad  { border-color: #e2663f; background: color-mix(in srgb, #e2663f 12%, transparent); }

.rpk-facts {
  border-top: 1px solid var(--c-rule);
  margin: var(--s-3) 0 0;
}

.rpk-facts > div {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: var(--s-2);
  padding-block: 0.8125rem;
  border-bottom: 1px solid var(--c-rule-soft, #1c403c);
}

.rpk-facts dt {
  color: var(--c-dim);
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 500;
}

.rpk-facts dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rpk-facts dd a {
  color: var(--c-mint);
  text-decoration: none;
}

/* Tables scroll rather than overflow the page on a phone. */
.rpk-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rpk-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin-top: var(--s-2);
}

.rpk-table th,
.rpk-table td {
  text-align: left;
  padding: 0.6875rem 1rem 0.6875rem 0;
  border-bottom: 1px solid var(--c-rule-soft, #1c403c);
}

.rpk-table th {
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-dim);
}

.rpk-table td {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
}

.rpk-table td a {
  color: var(--c-text);
  text-decoration: none;
}

.rpk-table td a:hover {
  color: var(--c-mint);
}

body.rpk-light .rpk-table th,
body.rpk-light .rpk-table td {
  border-bottom-color: var(--b-border);
}

/* 11.9 Header dropdown */
.rpk-nav__item {
  position: relative;
}

.rpk-nav__toggle {
  position: absolute;
  top: 50%;
  right: -0.125rem;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--c-dim);
  cursor: pointer;
}

.rpk-nav__toggle svg {
  transition: rotate 0.16s ease;
}

.rpk-nav__toggle[aria-expanded="true"] {
  color: var(--c-text);
}

.rpk-nav__toggle[aria-expanded="true"] svg {
  rotate: 180deg;
}

.rpk-js .rpk-nav__item[data-dropdown] > a {
  padding-right: 1.625rem;
}

.rpk-nav__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: -0.5rem;
  z-index: 70;
  width: max-content;
  max-width: min(48rem, calc(100vw - 2rem));
  padding: 1.25rem;
  background: var(--c-lift-2, #163a36);
  border: 1px solid var(--c-control);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px rgb(0 0 0 / 46%);
}

.rpk-nav__panel[hidden] {
  display: none;
}

.rpk-nav__panel-title {
  color: var(--c-dim);
  font-family: var(--f-display);
  font-size: 0.78125rem;
  font-weight: 600;
  margin-bottom: 0.625rem;
}

.rpk-nav__panel-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(13rem, 1fr));
  gap: 0.125rem 1.5rem;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rpk-nav__panel-list > li {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.rpk-nav__panel-list a {
  padding: 0.3125rem 0;
  color: var(--c-text);
  font-family: var(--f-display);
  font-size: 0.90625rem;
  text-decoration: none;
}

.rpk-nav__panel-list a:hover {
  color: var(--c-mint);
}

.rpk-nav__count {
  flex: none;
  margin-left: auto;
  color: var(--c-text-faint, #839b95);
  font-family: var(--f-display);
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
}

a.rpk-nav__panel-all {
  display: block;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-rule);
  color: var(--c-mint);
  font-family: var(--f-display);
  font-size: 0.90625rem;
  font-weight: 600;
  text-decoration: none;
}

/* 11.10 Responsive */
@media (max-width: 62rem) {
  .rpk-nav__panel {
    position: static;
    width: auto;
    max-width: none;
    margin-bottom: 0.5rem;
    padding: 0.875rem;
    box-shadow: none;
  }

  .rpk-nav__panel-list {
    grid-template-columns: 1fr;
  }

  .rpk-nav__toggle {
    top: 0.5rem;
    right: 0;
    translate: none;
  }
}

@media (max-width: 56.25rem) {
  .rpk-split {
    grid-template-columns: 1fr;
    gap: 2.125rem;
  }
}

@media (max-width: 47.5rem) {
  .rpk-steps > li {
    border-right: 0;
    border-bottom: 1px solid var(--c-rule);
  }

  .rpk-steps > li:last-child {
    border-bottom: 0;
  }

  .rpk-facts > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

@media (max-width: 30rem) {
  .rpk-bars > li {
    grid-template-columns: 5rem 1fr 3rem;
    gap: 0.625rem;
  }

  .rpk-bars__name {
    font-size: 0.875rem;
  }
}