@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200;
  font-stretch: normal;
  font-display: swap;
  src: url(font-01.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  font-display: swap;
  src: url(font-02.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(font-03.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(font-04.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(font-05.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(font-06.ttf) format('truetype');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  font-display: swap;
  src: url(font-07.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(font-08.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(font-09.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(font-10.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(font-11.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(font-12.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(font-13.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(font-14.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(font-15.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(font-16.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(font-17.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(font-18.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(font-19.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-20.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(font-21.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(font-22.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(font-23.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(font-24.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(font-25.ttf) format('truetype');
}
@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-26.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(font-27.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(font-28.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(font-29.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(font-30.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(font-31.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(font-32.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(font-33.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(font-34.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(font-35.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(font-36.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-37.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(font-38.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(font-39.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(font-40.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url(font-41.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(font-42.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(font-43.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(font-44.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(font-45.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(font-46.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(font-47.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(font-48.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(font-49.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(font-50.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(font-51.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(font-52.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(font-53.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(font-54.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(font-55.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(font-56.ttf) format('truetype');
}
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url(google-sans-flex-latin.woff2) format('woff2');
}
/* lead/intro body paragraphs opt into Google Sans Flex (deliberate divergence from saybriefly.com) */
.font-gsflex {
  font-family: 'Google Sans Flex', sans-serif;
  font-optical-sizing: auto;
}
/* Tighten line-height to match saybriefly.com (headings 1.05, leads ~1.35).
   element+class specificity (0,0,1,1) beats Tailwind's leading-* utilities
   (0,0,1,0) at every breakpoint — no !important needed. */
h1.font-heading, h2.font-heading, h3.font-heading, p.font-heading {
  line-height: 1.05;
}
p.font-gsflex {
  line-height: 1.2;
  /* constrain the reading column to match saybriefly.com's 768px lead width
     (was ~90-96% viewport → too wide); centered, so it reads as side margin */
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}
/* Sticky-header two-tone backdrop — behaves like saybriefly.com: transparent while
   over the hero (blends into the cream page), then fades in a two-tone band once you
   scroll, so content is masked cleanly behind the floating pill. Crystal: purple over
   cream — deep #322f80 top strip, cream #faf6ec below. The band is a ::before overlay
   (opacity transitions smoothly; a gradient background can't). It lives inside the
   wrapper's z-999 sticky stacking context, so it masks page content underneath.
   .is-scrolled is toggled by the IntersectionObserver in index.html. */
/* Pin the header. On this Astro build `position: sticky` does NOT hold (the header
   scrolls away — reproduced on the live site; an identical structure sticks fine in
   isolation, so a page-specific quirk defeats sticky and couldn't be isolated). Fixed
   anchors to the viewport and stays put regardless — safe here because NO ancestor has
   transform/filter/will-change (verified), so fixed can't be re-anchored. index.html
   inserts an in-flow spacer sized to the header so content isn't hidden underneath. */
#navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 0;
  padding-bottom: 1rem;
}
#navbar-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #322f80 0 50%, #faf6ec 50% 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}
#navbar-wrapper.is-scrolled::before {
  opacity: 1;
}
/* The template's scroll JS adds `-translate-y-full` (translateY(-100%)) to hide the
   header when scrolling DOWN (hide-on-scroll-down / show-on-scroll-up). Crystal wants
   it always visible, so cancel that translate. id+class specificity (1,1,0) beats the
   Tailwind utility (0,1,0) — no !important. Both `transform` and `translate` covered
   since the build may compile the utility to either property. */
#navbar-wrapper.-translate-y-full {
  transform: none;
  translate: none;
}