/* ─────────────────────────────────────────────
   Really Good Ads — site header & menu.

   The signature move: the header pill relaxes
   open into a rounded card. Driven by clip-path
   + radius interpolation so nothing in the page
   layout is touched.

   Everything here is namespaced `rgm-` because
   each page carries its own inline stylesheet
   using generic names (.nav, .bar, .logo …).
   Nothing in this file may collide with those.
   ───────────────────────────────────────────── */

:root {
  --rgm-ink:        #0c0c0c;
  --rgm-ink-soft:   #6f7671;
  --rgm-ink-faint:  #a3aaa4;
  --rgm-teal:       #7ad9bf;
  --rgm-teal-dk:    #3fae90;
  --rgm-white:      #fbfcfb;

  --rgm-bar:        66px;   /* collapsed pill height */
  --rgm-gut:        14px;   /* page inset from the viewport edge */
  --rgm-nav-pad:    11px;   /* pill sits inset within the page */
  --rgm-r-pill:     999px;
  --rgm-r-card:     30px;

  /* total vertical footprint, for pages that need to reserve it */
  --rgm-top:        calc(var(--rgm-gut) + var(--rgm-nav-pad) + var(--rgm-bar));

  --rgm-ease:       cubic-bezier(.22, 1, .28, 1);
  --rgm-ease-soft:  cubic-bezier(.4, 0, .2, 1);
  --rgm-open:       620ms;
  --rgm-shut:       380ms;
}

html.rgm-locked { overflow: hidden; }

/* Pages whose old header sat in the document flow (the article
   template) need that height back, now that the pill floats. */
body.rgm-offset { padding-top: var(--rgm-top); }

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

/* ═══════════  HEADER  ═══════════ */

/* element+class so it beats each page's bare `header { … }` rule.
   Those rules differ per template (fixed white bar, sticky blurred
   bar, …) so every property that could leak through is reset here —
   notably backdrop-filter: left in place, the page's own blur would
   apply to this element's full un-clipped box and fog the content
   sitting behind the collapsed sheet. */
header.rgm {
  position: fixed;
  inset: calc(var(--rgm-gut) + var(--rgm-nav-pad)) calc(var(--rgm-gut) + var(--rgm-nav-pad)) auto;
  z-index: 200;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
  /* The sheet is always its full open height; the clipped-away
     region must never swallow taps meant for the page. */
  pointer-events: none;
}

.rgm-sheet {
  position: relative;
  border-radius: var(--rgm-r-card);
  background:
    linear-gradient(180deg,
      rgba(190, 231, 217, .88)   0%,
      rgba(207, 237, 227, .92)  18%,
      rgba(234, 245, 241, .96)  48%,
      rgba(250, 252, 251, .99)  78%,
      rgba(251, 252, 251, 1)   100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 10px 34px -14px rgba(12, 12, 12, .3);

  /* closed: clipped down to the pill, fully rounded */
  clip-path: inset(0 0 calc(100% - var(--rgm-bar)) 0 round var(--rgm-r-pill));
  transition: clip-path var(--rgm-shut) var(--rgm-ease-soft);
}

header.rgm.is-open .rgm-sheet {
  clip-path: inset(0 round var(--rgm-r-card));
  transition-duration: var(--rgm-open);
  transition-timing-function: var(--rgm-ease);
}

/* Search feedback sits right under the bar, so the sheet opens
   just far enough to show it — the menu stays shut. */
header.rgm.is-noted:not(.is-open) .rgm-sheet {
  clip-path: inset(0 0 calc(100% - var(--rgm-bar) - var(--rgm-note-h, 0px)) 0 round var(--rgm-r-card));
}

header.rgm.is-open .rgm-menu { pointer-events: auto; }

/* ── bar row ── */

.rgm-bar {
  position: relative;
  height: var(--rgm-bar);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.15rem 0 1.35rem;
  pointer-events: auto;              /* the one always-live region */
}

.rgm-mark {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 240ms var(--rgm-ease-soft), transform 240ms var(--rgm-ease-soft);
}
/* beats the pages' `img { width:100%; height:100%; object-fit:cover }` */
.rgm-mark img {
  display: block;
  height: clamp(19px, 1.8vw, 24px);
  width: auto;
  max-width: 46vw;
  object-fit: contain;
}

.rgm-tools {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: auto;
}

.rgm-icon {
  -webkit-appearance: none; appearance: none;
  width: 42px; height: 42px;
  display: grid; place-content: center;
  gap: 4.5px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--rgm-ink);
  font: inherit;
  cursor: pointer;
  transition: background 200ms var(--rgm-ease-soft), transform 180ms var(--rgm-ease-soft);
}
.rgm-icon:hover { background: rgba(12, 12, 12, .07); }
.rgm-icon:active { transform: scale(.92); }

.rgm-icon--burger span {
  display: block;
  width: 19px; height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 380ms var(--rgm-ease), opacity 200ms linear;
}
/* stays a ≡ when open, but the bars draw together so the tap
   still registers as a state change */
header.rgm.is-open .rgm-icon--burger span:first-child { transform: translateY(2.4px); }
header.rgm.is-open .rgm-icon--burger span:last-child  { transform: translateY(-2.4px); }

.rgm-icon--find svg { width: 20px; height: 20px; }

/* ── desktop inline nav ── */

.rgm-rail { display: none; }

/* ── search, sliding over the bar ── */

/* Right inset clears the whole tool cluster: 2 buttons + gap + padding. */
.rgm-find {
  position: absolute;
  inset: 0 calc(84px + 1.45rem + 10px) 0 1.3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity 220ms var(--rgm-ease-soft), transform 300ms var(--rgm-ease);
}
header.rgm.is-finding .rgm-find {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
header.rgm.is-finding .rgm-mark {
  opacity: 0;
  transform: translateX(-6px);
  pointer-events: none;
}

.rgm-find input {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1.5px solid rgba(12, 12, 12, .24);
  background: transparent;
  padding: .45rem .1rem;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--rgm-ink);
  border-radius: 0;
}
.rgm-find input::placeholder { color: var(--rgm-ink-faint); font-weight: 400; }
.rgm-find input:focus { outline: 0; border-bottom-color: var(--rgm-ink); }
.rgm-find input::-webkit-search-cancel-button { -webkit-appearance: none; }

.rgm-find__go {
  border: 0; background: var(--rgm-ink); color: var(--rgm-white);
  border-radius: 999px; padding: .42rem .9rem;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
}
.rgm-find__go:hover { background: var(--rgm-teal-dk); }

.rgm-note {
  margin: 0;
  padding: 0 1.35rem;
  color: var(--rgm-ink-soft);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .86rem;
  line-height: 1.35;
  opacity: 0;
  transition: opacity 220ms var(--rgm-ease-soft);
}
.rgm-note.is-shown {
  opacity: 1;
  padding-bottom: 1.15rem;
}
.rgm-note[data-tone="warn"] { color: #a2472f; }

/* ── the menu itself ── */

.rgm-menu {
  display: block;
  padding: .35rem 1.35rem 1.9rem;
}
.rgm-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rgm-menu li { list-style: none; }
.rgm-menu li + li { margin-top: .12rem; }

.rgm-menu ul a {
  display: block;
  padding: .46rem 0;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 11vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--rgm-ink);
  text-decoration: none;
  transition: color 260ms var(--rgm-ease-soft), transform 380ms var(--rgm-ease);
}
.rgm-menu ul a:hover,
.rgm-menu ul a:focus-visible { color: var(--rgm-teal-dk); }
.rgm-menu ul a:active { color: var(--rgm-teal-dk); }
.rgm-menu ul a[aria-current="page"] { color: var(--rgm-teal-dk); }

.rgm-menu__foot {
  margin: 1.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  color: var(--rgm-ink-faint);
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .88rem;
}
.rgm-menu__foot a {
  color: var(--rgm-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 118, 113, .35);
}
.rgm-menu__foot a:hover { color: var(--rgm-ink); }

/* staggered reveal of the links */
.rgm-menu li,
.rgm-menu__foot {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 260ms linear,
    transform 420ms var(--rgm-ease);
}
header.rgm.is-open .rgm-menu li,
header.rgm.is-open .rgm-menu__foot {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 52ms + 110ms);
}

/* ── scrim ── */

/* The veil has to be strong enough that a dark hero washes out to a
   neutral behind the card, rather than haloing around it. */
.rgm-scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(244, 245, 243, .62);
  -webkit-backdrop-filter: blur(10px) saturate(.5);
  backdrop-filter: blur(10px) saturate(.5);
  opacity: 0;
  transition: opacity var(--rgm-shut) var(--rgm-ease-soft);
}
.rgm-scrim.is-shown { opacity: 1; }

/* ═══════════  ≥ 900px: pill keeps its inline nav  ═══════════ */

@media (min-width: 900px) {
  :root { --rgm-bar: 74px; --rgm-gut: 20px; }

  header.rgm { inset: calc(var(--rgm-gut) + var(--rgm-nav-pad)) 0 auto; }
  .rgm-sheet {
    max-width: 1180px;
    margin: 0 auto;
  }

  .rgm-bar { padding: 0 1.1rem 0 1.7rem; }

  .rgm-icon--burger { display: none; }

  .rgm-rail {
    display: flex;
    gap: 2.1rem;
    margin-inline: auto;
  }
  .rgm-rail a {
    font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.01em;
    text-decoration: none;
    color: var(--rgm-ink-soft);
    transition: color 200ms var(--rgm-ease-soft);
  }
  .rgm-rail a:hover { color: var(--rgm-ink); }
  .rgm-rail a[aria-current="page"] { color: var(--rgm-ink); }

  header.rgm.is-finding .rgm-rail { opacity: 0; pointer-events: none; }
  .rgm-find { inset: 0 4.2rem 0 1.7rem; }
}

/* ═══════════  reduced motion  ═══════════ */

@media (prefers-reduced-motion: reduce) {
  header.rgm,
  header.rgm *,
  .rgm-scrim {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}