/* ============================================================
   Flourishing Futures: AI for Human Possibility
   Redesign — GT Maru + Newsreader + Atkinson Hyperlegible Next
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Custom Properties --- */
:root {
  --red: #E42600;
  --yellow: #FFCC00;   /* was #E4B103 (read muddy behind "What we do"), 2026-10-06 */
  --green: #009D3C;
  --blue: #1934BE;
  --black: #1B1B1B;
  --white: #F3F3F3;
  --lime: #5FFF84;   /* button accent */

  /* Theme semantic tokens — default to today's values so the Default theme is
     visually unchanged. Overridden under html[data-theme="light|dark"] below.
     --field-ink  = text that sits ON a coloured field (not on a white card).
     --section-accent = the single dark-maroon accent band used in Dark mode. */
  --field-ink: var(--white);
  --section-accent: var(--black);

  /* Mobile menu key colour, resolved per page via body[data-key]. */
  --key: var(--blue);          /* default page key colour */

  --font-display: 'GT Maru', 'Nunito', 'Rounded Mplus 1c', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Atkinson Hyperlegible Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --container: 900px;
  --container-wide: 1200px;
}

/* --- Base --- */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
}

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

a {
  color: var(--blue);
  text-decoration: none;
}

/* --- Layout --- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container--wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ============================================================
   SHARED PATTERNS — Hero Title (Resource Hub)
   ============================================================ */
.res-hero__title {
  position: relative;
  z-index: 10;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.3;
  color: var(--field-ink);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  background: var(--white);
  border-top: 1.5px solid var(--black);
  border-bottom: 1.5px solid var(--black);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Wordmark pinned to the left; links stay centred. */
.site-nav__brand {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.site-nav__brand-img {
  height: 34px;   /* two-line wordmark */
  width: auto;
  filter: brightness(0);   /* white SVG → black on the white nav */
}

.site-nav__links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0;
}

.site-nav__links li {
  margin: 0;
}

/* Each nav item is themed to the key colour of the page it links to:
   Home=blue, About=red, Lab=green, Resource Hub=blue, Community=yellow.
   Drives the hover + active (selected) colour below. */
.site-nav__links li:nth-child(1) { --nav-accent: var(--blue); }
.site-nav__links li:nth-child(2) { --nav-accent: var(--red); }
.site-nav__links li:nth-child(3) { --nav-accent: var(--green); }
.site-nav__links li:nth-child(4) { --nav-accent: var(--blue); }
.site-nav__links li:nth-child(5) { --nav-accent: var(--yellow); }

.site-nav__links a {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--black);
  text-transform: none;
  padding: 1.1rem 2rem;
  display: block;
  transition: color 0.2s, transform 0.2s ease;
}

.site-nav__links a:hover,
.site-nav__links a.active {
  color: var(--nav-accent, var(--blue));
}

.site-nav__links a:hover {
  transform: scale(1.15);
}

/* Desktop: three columns (wordmark | links | spare, for the theme switch), so
   the links stay centred but can never run into the wordmark. In a narrower
   window the links tighten and the wordmark shrinks to fit its column. */
@media (min-width: 769px) {
  .site-nav__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 1rem;
  }
  .site-nav__brand {
    grid-column: 1;
    justify-self: start;
    position: static;
    transform: none;
    min-width: 0;
    max-width: 100%;
  }
  .site-nav__brand-img { display: block; width: 230px; max-width: 100%; height: auto; }
  .site-nav__links { grid-column: 2; }
  .site-nav__links a {
    font-size: clamp(0.9rem, 0.55rem + 0.75vw, 1.05rem);
    padding-left: clamp(0.55rem, 4.93vw - 1.82rem, 2rem);
    padding-right: clamp(0.55rem, 4.93vw - 1.82rem, 2rem);
  }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85rem 2.25rem;
  border: none;
  color: var(--blue);
  background: var(--lime);
  cursor: pointer;
  border-radius: 100px;
  transition: opacity 0.2s, transform 0.15s;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--white);
  background-image: linear-gradient(90deg, var(--red), var(--yellow), var(--green), var(--yellow), var(--red));
  background-size: 200% 100%;
  animation: btn-flow 2s linear infinite;
}

@keyframes btn-flow {
  to { background-position: -200% 50%; }
}

/* ============================================================
   LATELY SECTION
   ============================================================ */
.lately {
  background: var(--green);
  padding: 4rem 1.5rem 5rem;
  overflow: hidden;
  position: relative;
}

.lately__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.lately__shape {
  position: absolute;
  opacity: 0.5;
}

.lately__shape--1 {
  top: -20%;
  left: 5%;
  width: 80%;
  max-width: 700px;
}

.lately__shape--2 {
  top: -15%;
  left: 10%;
  width: 75%;
  max-width: 680px;
}

.lately__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--field-ink);
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 5;
}

.lately__cards {
  position: relative;
  z-index: 5;
  max-width: 880px;
  margin: 0 auto;
}

.lately-card {
  background: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 1.75rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 420px;
}

.lately-card__content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.lately-card__heading {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--black);
}

.lately-card__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--black);
}

.lately-card__image {
  overflow: hidden;
  border-radius: 0.75rem;
  margin: 1.25rem 1.25rem 1.25rem 0;
  min-height: 300px;
}

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

@media (max-width: 640px) {
  .lately-card {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .lately-card__image {
    margin: 0 1.25rem 1.25rem;
    min-height: 250px;
  }
}

/* ============================================================
   SITE FOOTER (brand lockup)
   Replaces both the old redundant footer nav bar and the older
   brand/links footer on Lab subpages. The "AI for Human
   Possibilities" lockup is a single-colour SVG (img/footer.svg?v=20261006)
   painted via mask, so its ink can be recoloured per page for
   contrast against the footer's background colour.
   ============================================================ */
.site-footer {
  /* Full-bleed colour bar: white wordmark logo left, initiative credit right,
     with a thin white rule on top. Bar colour set per page to contrast the
     section directly above it. */
  background: var(--footer-bg, var(--blue));
  position: relative;
  isolation: isolate;
  z-index: 600;   /* paints in front of Flofu (z-index 500) so he tucks behind it */
  border-top: 1.5px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 2.4vw;
}

/* White wordmark (the SVG ink is already white). */
.site-footer__lockup {
  display: block;
  height: 42px;
  width: auto;
  flex-shrink: 0;
}

/* Initiative credit, right side. Live text (Newsreader regular). */
.site-footer__credit {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--field-ink);
  text-align: right;
}

/* On mobile the wordmark lives in the sticky bottom bar, so drop it from the
   footer to avoid showing "Flourishing Futures…" twice; keep just the credit. */
@media (max-width: 768px) {
  .site-footer { justify-content: center; text-align: center; padding: 1rem 1.5rem; }
  .site-footer__lockup { display: none; }
  /* Keep the credit on one line, shrinking with the viewport so it never wraps. */
  .site-footer__credit { text-align: center; white-space: nowrap; font-size: clamp(0.6rem, 3.2vw, 1rem); }
}

/* Per-page footer bar colours (lockup stays white). */
.site-footer--red   { --footer-bg: var(--red); }
.site-footer--blue  { --footer-bg: var(--blue); }
.site-footer--green { --footer-bg: var(--green); }

/* ============================================================
   RESOURCE PAGE — HERO
   ============================================================ */
.res-hero {
  position: relative;
  overflow: hidden;
  padding: 4rem 1.5rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .site-nav__links a {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
  }

  .lately-card__heading {
    font-size: 1.5rem;
  }

  .site-nav__brand {
    display: none;
  }
}

/* ============================================================
   RESOURCE HUB — dynamic hero, flip-deck, searchable stream
   Markup for these is built at runtime by renderResources() in
   js/render-content.js from window.SITE_CONTENT.resources. The old
   .res-featured/.res-press/.res-browse/.res-community rules have
   been removed (superseded by this page).
   ============================================================ */

/* --- GT Maru (display font), ported from css/home.css so labels,
   eyebrows and tag buttons on this page render in the display face --- */
@font-face {
  font-family: 'GT Maru';
  src: url('../fonts/GTMaruRegular.woff2') format('woff2'), url('../fonts/GTMaruRegular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Maru';
  src: url('../fonts/GTMaruMedium.woff2') format('woff2'), url('../fonts/GTMaruMedium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Maru';
  src: url('../fonts/GTMaruBold.woff2') format('woff2'), url('../fonts/GTMaruBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Maru';
  src: url('../fonts/GTMaruBlack.woff2') format('woff2'), url('../fonts/GTMaruBlack.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* --- Hero: blue field + red illustration spanning behind the title AND
       the featured flip-deck (they share this one section) ------------ */
.res-hero {
  background: var(--blue);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3rem 1.5rem 5rem;
}

.res-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Three interleaved slices of the red art, parallaxed at different depths so
   the strokes drift against each other like ripples as the cursor moves. */
.res-hero__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}

.res-hero__inner {
  position: relative;
  z-index: 1;
}

/* The open book behind the deck (js/res-book.js draws and fans the pages).
   The viewBox is the hero's own pixel size, so pages are laid out in px. */
.res-book {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.res-book__page {
  stroke: #FF477B;
  stroke-width: 1;
  stroke-linejoin: round;
}
.res-book__edge  { stop-color: #8BC600; }   /* lockup gradient: green at the page's outer edge … */
.res-book__spine { stop-color: #0066FF; }   /* … to blue at the spine */

/* The headline sits over the top of the book; a soft halo in the field colour keeps it crisp. */
.res-hero__title {
  text-shadow: 0 0 16px var(--blue), 0 0 5px var(--blue);
}

.res-hero__title {
  margin-bottom: 2.5rem;
}

/* First line: the front half ("Care about" → …) types in on a caret while
   "humans?" stays constant. Timed to the deck flip (see initHeroRotator). */
.res-hero__rotate {
  display: inline-block;
  white-space: pre;
}
.res-hero__rotate::after {
  content: '';
  display: inline-block;
  width: 0.07em;
  height: 0.82em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.04em;
  animation: res-caret-blink 1s steps(1) infinite;
}

@keyframes res-caret-blink {
  0%, 50%  { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* --- Flip-deck: cycling stack of the 3 newest resources ------------ */
.res-deck__deck {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  z-index: 2;
}

.res-deck__stack {
  position: relative;
  z-index: 2;
  min-height: 440px;
}

.res-deck-card {
  position: absolute;
  inset: 0;
  background: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 1.75rem;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 440px;
  cursor: pointer;
  transform-origin: center bottom;
  transition: transform 0.55s cubic-bezier(.34, 1.1, .5, 1), opacity 0.4s ease;
  will-change: transform;
}

/* Stacked positions (0 = front); each card is absolute so none of them
   drive the stack height (JS pins the stack to the tallest card). */
.res-deck-card[data-pos="0"] { transform: translate(0, 0) rotate(0deg); z-index: 3; }
.res-deck-card[data-pos="1"] { transform: translate(16px, 20px) rotate(1.6deg); z-index: 2; }
.res-deck-card[data-pos="2"] { transform: translate(32px, 40px) rotate(3.2deg); z-index: 1; }

/* Front card lifts up before being sent to the back */
.res-deck-card.is-flipping {
  transform: translate(-12px, -46px) rotate(-3deg) scale(1.02);
  z-index: 5;
}

.res-deck-card__content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.res-deck-card__eyebrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.res-deck-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1.05;
  color: var(--black);
}

.res-deck-card__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--black);
}

.res-deck-card__body p {
  margin-bottom: 0.75rem;
}

.res-deck-card__content > div:last-child {
  margin-top: auto;
}

.res-deck-card__image {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  margin: 1.25rem 1.25rem 1.25rem 0;
  min-height: 0;
}

.res-deck-card__image--blue { background: var(--blue); }

.res-deck-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Stream: green backdrop + lime illustration, search + tags + grid --- */
.res-stream {
  background: #00A744;   /* calmer than the old --yellow field, 2026-10-07 */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 3rem 1.5rem 5rem;
}

.res-stream__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.res-stream__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.6;
}

.res-stream__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.res-stream__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 100px;
  padding: 0.75rem 1.5rem;
  max-width: 560px;
  margin: 0 auto;
}

.res-stream__search-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--black);
  flex-shrink: 0;
}

.res-stream__search-input {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--black);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
}

.res-stream__search-input::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

.res-stream__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 2.5rem;
}

/* Leading slot holds BOTH "Browse by:" and "✕ Clear all" stacked in one grid
   cell, so swapping between them never changes the slot width — the tag row
   to the right stays put. Only one is visible/interactive at a time. */
.res-stream__lead {
  display: inline-grid;
  justify-items: start;
  align-items: center;
  margin-right: 0.35rem;
}
.res-stream__lead > * {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease;
}

.res-stream__tags-label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--black);
  white-space: nowrap;
}

.res-stream__lead .res-stream__tags-label { opacity: 1; }
.res-stream__lead .res-stream__tag--clear { opacity: 0; pointer-events: none; }
.res-stream__lead.is-filtering .res-stream__tags-label { opacity: 0; pointer-events: none; }
.res-stream__lead.is-filtering .res-stream__tag--clear { opacity: 1; pointer-events: auto; }

.res-stream__tag {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--black);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 100px;
  padding: 0.4rem 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.28s cubic-bezier(0.34, 1.5, 0.5, 1);
}

.res-stream__tag:hover {
  border-color: var(--black);
}

.res-stream__tag:active {
  transform: scale(0.94);
}

.res-stream__tag--active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  transform: scale(1.06);
}

/* A category with no articles yet: shown for consistency but dimmed and
   inert, so it reads as "nothing here yet" rather than filtering to nothing. */
.res-stream__tag--empty {
  opacity: 0.35;
  cursor: not-allowed;
}
.res-stream__tag--empty:hover {
  border-color: transparent;   /* no interactive affordance */
}
.res-stream__tag--empty:active {
  transform: none;
}

/* Springy pop each time a tag toggles on */
.res-stream__tag--pop {
  animation: res-tag-pop 0.34s cubic-bezier(0.34, 1.5, 0.5, 1);
}

@keyframes res-tag-pop {
  0%   { transform: scale(0.9); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}

.res-stream__tag--clear {
  border-color: var(--black);
}

.res-stream__tag--clear:hover {
  background: var(--black);
  color: var(--white);
}

.res-stream__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.res-stream-card {
  background: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.3s ease;
}

.res-stream-card:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 9px 11px 0 var(--blue);
}

.res-stream-card__image {
  position: relative;
  height: 200px;
  margin: 0.5rem;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--blue), var(--yellow));
}

.res-stream-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.res-stream-card:hover .res-stream-card__image img {
  transform: scale(1.05);
}

.res-stream-card__content {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.res-stream-card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--black);
}

.res-stream-card__title a {
  color: inherit;
  text-decoration: none;
}

.res-stream-card__title a:hover {
  text-decoration: underline;
}

.res-stream-card__author {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--blue);
}

.res-stream-card__body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--black);
  flex: 1;
}

.res-stream-card__body p {
  margin-bottom: 0.6rem;
}

.res-stream-card__content > div:last-child {
  margin-top: auto;
}

.res-stream__empty {
  text-align: center;
  opacity: 0.6;
  font-family: var(--font-body);
  padding: 2rem;
}

@media (max-width: 768px) {
  .res-deck-card {
    grid-template-columns: 1fr;
  }

  /* Photo on top, text below (per Resource_Mobile.png). DOM order is
     content-then-image, so lift the image to the top with order. */
  .res-deck-card__image {
    order: -1;
    margin: 1.25rem 1.25rem 0;
    min-height: 220px;
  }

  .res-deck-card__content {
    padding: 1.75rem 1.75rem 2rem;
  }

  .res-deck-card__title {
    font-size: 1.75rem;
  }

  .res-stream__grid {
    grid-template-columns: 1fr;
  }
}

/* Respect reduced-motion: keep the content, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .res-hero__layer,
  .res-stream-card,
  .res-stream-card__image img,
  .res-stream__tag,
  .res-stream__lead > * {
    transition: none !important;
  }
  .res-hero__layer {
    transform: scale(1.04) !important;
  }
  .res-stream__tag--pop {
    animation: none !important;
  }
  .res-hero__rotate::after {
    animation: none !important;
  }
}

/* ============================================================
   COMMUNITY PAGE (community.html) — rebuilt hero/upcoming/gallery/
   experts. Uses explicit hex (NOT --red/--yellow, which are tuned
   for other pages) to match the wireframe's recolour scheme:
   golden hero, red upcoming + gallery, blue experts. The older
   .comm-* rules have been removed (superseded by this page).
   ============================================================ */

/* --- Hero --- */
.cmty-hero {
  position: relative;
  overflow: hidden;
  background: var(--yellow);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.5rem;
}

/* The campfire (js/cmty-campfire.js). The stage covers the whole hero so
   scattered shapes can run anywhere; the script places everything with
   transforms. .cmty-camp__spot is an empty flex child under the copy that
   reserves the fire's space, so the copy and the ring never overlap. */
.cmty-hero { cursor: default; }
.cmty-camp {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.cmty-camp.is-ready { opacity: 1; }
.cmty-camp__spot {
  flex: 0 0 auto;
  height: clamp(190px, 30vh, 330px);
}
.cmty-pal {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
/* Idle breathing on the inner art (the script owns the outer transform). */
.cmty-pal > .pal-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 90%;
  animation: pal-breathe 3.6s ease-in-out infinite;
}
.cmty-pal:nth-child(2n) > .pal-art { animation-duration: 4.3s; animation-delay: -1.2s; }
.cmty-pal:nth-child(3n) > .pal-art { animation-duration: 3.1s; animation-delay: -2.1s; }
@keyframes pal-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.03, 0.97); } }
.pal-eye__lid { transform-box: fill-box; transform-origin: center; }
.cmty-pal.is-blinking .pal-eye__lid { animation: lab-blink 0.24s ease-in-out; }
@keyframes lab-blink { 0%, 100% { transform: none; } 45%, 55% { transform: scaleY(0.08); } }

/* The fire: flat flames (outer, middle, core) under a hand-drawn outline,
   on two crossed logs. Each flame layer flickers on its own CSS beat; the
   script only sets the overall size (how many are gathered round). */
.cmty-fire {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}
.cmty-fire__logs,
.cmty-fire__flames,
.cmty-fire__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cmty-fire__flames {
  transform-origin: 50% 87%;
  transition: transform 0.12s linear;
}
.cmty-fire__layer { transform-origin: 50% 87%; animation: fire-flick 1.7s ease-in-out infinite; }
.cmty-fire__layer--mid  { animation-duration: 1.3s; animation-delay: -0.4s; }
.cmty-fire__layer--core { animation-duration: 0.9s; animation-delay: -0.2s; }
/* The drawn line drifts a beat behind the paint so they read as two layers. */
.cmty-fire__layer--line { animation-duration: 1.7s; animation-delay: -0.25s; }
@keyframes fire-flick {
  0%, 100% { transform: none; }
  30% { transform: scale(0.96, 1.05) skewX(-2deg); }
  60% { transform: scale(1.03, 0.95) skewX(2deg); }
}
.cmty-fire__flames.is-flaring { animation: fire-flare 0.7s cubic-bezier(0.34, 1.56, 0.5, 1); }
@keyframes fire-flare { 0%, 100% { translate: 0 0; scale: 1; } 40% { translate: 0 -4%; scale: 1.14; } }
.cmty-fire__outer { fill: #E42600; }
.cmty-fire__mid   { fill: #FF8A00; }
.cmty-fire__core  { fill: #FFF1B8; }
.cmty-fire__line  { fill: #1934BE; }
.cmty-fire__log   { fill: #1934BE; }
.cmty-fire__grain { fill: #6F86FF; }
/* Embers float up out of the fire; they fade as it dies down. */
.cmty-fire__embers {
  position: absolute;
  left: 50%;
  top: 70%;
  width: 0;
  height: 0;
}
.cmty-fire__embers > i {
  position: absolute;
  left: -3px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FF8A00;
  opacity: 0;
  animation: ember-rise 2.6s ease-out infinite;
}
.cmty-fire__embers > i:nth-child(1) { --x: -18px; animation-delay: 0s; }
.cmty-fire__embers > i:nth-child(2) { --x: 14px;  animation-delay: -0.6s; background: #E42600; }
.cmty-fire__embers > i:nth-child(3) { --x: -6px;  animation-delay: -1.2s; width: 4px; height: 4px; }
.cmty-fire__embers > i:nth-child(4) { --x: 22px;  animation-delay: -1.7s; }
.cmty-fire__embers > i:nth-child(5) { --x: -24px; animation-delay: -2.2s; width: 4px; height: 4px; background: #E42600; }
@keyframes ember-rise {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--x), var(--rise, -160px)) scale(0.4); opacity: 0; }
}
/* Sparks thrown up when the fire flares or everyone scatters. */
.cmty-spark {
  position: absolute;
  left: -4px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF8A00;
  animation: spark-fly 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.cmty-spark:nth-of-type(2n) { background: #E42600; width: 6px; height: 6px; }
@keyframes spark-fly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}
.cmty-camp.is-paused *,
.cmty-camp.is-paused .pal-art { animation-play-state: paused; }

.cmty-hero__inner {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

.cmty-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--blue);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Typewriter caret on the rotating half — reuses .res-hero__rotate's
   caret exactly (same keyframes) so both pages blink in sync. */
.cmty-hero__rotate {
  display: inline-block;
  white-space: pre;
}

.cmty-hero__rotate::after {
  content: '';
  display: inline-block;
  width: 0.07em;
  height: 0.82em;
  margin-left: 0.05em;
  background: currentColor;
  vertical-align: -0.04em;
  animation: res-caret-blink 1s steps(1) infinite;
}

/* Constant tail (", together!") sits inline right after the caret. */
.cmty-hero__const {
  display: inline;
}

.cmty-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--blue);
  text-align: center;
}

.cmty-hero__intro {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--blue);
  max-width: 620px;
  margin: 1.5rem auto 0;
  text-align: center;
}

/* --- Upcoming --- */
.cmty-upcoming {
  position: relative;
  overflow: hidden;
  background: var(--red);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1.5px solid var(--black);      /* dividers from the sections above + below */
  border-bottom: 1.5px solid var(--black);
  padding: 3.5rem 1.5rem 5rem;
}

/* Gold starburst radiating from behind the card. */
.cmty-starburst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 130%;
  max-width: 1400px;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

.cmty-upcoming__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
}

.cmty-upcoming__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--field-ink);
  text-align: center;
  margin-bottom: 2rem;
}

/* Whole card is clickable (JS handles navigation) — hover treatment
   matches .res-stream-card exactly. */
.cmty-card {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.3s ease;
}

.cmty-card:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 9px 11px 0 var(--blue);
}

/* Event meta line ("When: … / Where: …") inside the reused .lately-card. */
.cmty-card__meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--black);
}

.cmty-card__meta strong {
  font-weight: 700;
}

/* Solid blue placeholder panel, used in place of an <img> when no
   event photo exists yet. */
.lately-card__image--blue {
  background: var(--blue);
}

/* .lately-card__content is already a flex column (gap: 1.25rem);
   pin the RSVP button's wrapper to the bottom of the column. */
.cmty-card .lately-card__content > div:last-child {
  margin-top: auto;
}

/* --- Gallery --- */
.cmty-gallery {
  position: relative;
  overflow: hidden;
  background: var(--red);
  padding: 2rem 0 4rem;
}

.cmty-gallery__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--field-ink);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* --- Ticker (shared: gallery photo strip + experts strip) --- */
.cmty-ticker {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}

.cmty-ticker:active,
.cmty-ticker.is-dragging {
  cursor: grabbing;
}

.cmty-ticker__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
  padding: 3rem 1.5rem;
  /* Don't stretch cards to the tallest item — each bordered tile hugs its own
     image at its natural aspect ratio (otherwise the border encloses a gap). */
  align-items: flex-start;
}

.cmty-ticker__card {
  flex: 0 0 auto;
  margin: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), filter 0.3s ease, box-shadow 0.3s ease;
}

.cmty-ticker__card:hover {
  transform: scale(1.05);
}

/* Photo tiles (gallery) — sized by their image now (real photos of
   varying aspect ratios), not a fixed box. */
.cmty-ticker__card--photo {
  display: block;
  border-radius: 1rem;
  border: 1.5px solid var(--blue);
  overflow: hidden;
}

/* Hover emphasis: dim the other photo tiles while the ticker is
   hovered, then punch the hovered one back up with a green offset
   shadow (same green as the squiggle below, var(--green); same shadow
   shape as .res-stream-card:hover). The nested :hover rule wins over
   the dim rule via specificity; the plain fallback covers hover
   without JS/touch support for :hover on the ticker itself. */
.cmty-gallery .cmty-ticker:hover .cmty-ticker__card--photo {
  filter: brightness(0.85);
}

.cmty-gallery .cmty-ticker:hover .cmty-ticker__card--photo:hover {
  filter: brightness(1.05);
  box-shadow: 9px 11px 0 var(--green);
}

.cmty-ticker__card--photo:hover {
  filter: brightness(1.05);
  box-shadow: 9px 11px 0 var(--green);
}

/* Fallback color-placeholder box, used only when an item has no photo. */
.cmty-ticker__media {
  width: 300px;
  height: 230px;
  display: block;
  background-size: cover;
  background-position: center;
}

.cmty-ticker__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Real gallery photo: fixed height, natural (aspect-preserving) width. */
.cmty-ticker__img {
  display: block;
  height: 260px;
  width: auto;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

/* Alternate vertical offset via margin (not transform) so the tiles
   don't sit on a perfectly flat line, without fighting the hover scale. */
.cmty-ticker__card--photo:nth-child(2n) {
  margin-top: 1rem;
}

.cmty-ticker__card--photo:nth-child(3n) {
  margin-top: -0.75rem;
}

/* --- Experts --- */
.cmty-experts {
  position: relative;
  overflow: hidden;
  background: var(--blue);
  padding: 3rem 0 4rem;
}

/* Green squiggle stringing the portraits together — behind the
   track, in front of the blue background. */
.cmty-squiggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 200%;
  z-index: 0;
  pointer-events: none;
}

.cmty-experts__inner {
  position: relative;
  z-index: 1;
}

.cmty-experts__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  color: var(--field-ink);
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Experts strip is static/drag-only with only ~4 cards, so centre the
   track instead of the usual left-aligned ticker start. Auto margins
   only take effect once the track (width: max-content) is narrower
   than the ticker; on narrow screens where it overflows, drag still
   works as before. */
.cmty-ticker--experts .cmty-ticker__track {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.cmty-ticker__card--expert {
  width: 230px;
  text-align: center;
  background: transparent;
}

/* Vertical 4:5 portrait frame — height derives from aspect-ratio. */
.cmty-expert__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  background: var(--white);
  border-radius: 1.25rem;
  overflow: hidden;
}

.cmty-expert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cmty-expert__caption {
  margin-top: 1rem;
}

.cmty-expert__name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--field-ink);
}

.cmty-expert__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  color: var(--field-ink);
  margin-top: 0.5rem;
}

.cmty-expert__org {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--field-ink);
  opacity: 0.9;
}

.cmty-collab {
  text-align: center;
  margin: 3.5rem auto 0;
  color: var(--field-ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
}

.cmty-collab__link {
  color: var(--field-ink);
  text-decoration: underline;
  transition: opacity 0.2s;
}

.cmty-collab__link:hover {
  opacity: 0.75;
}

/* ============================================================
   COMMUNITY — Swag teaser (full-height photo + overlay copy)
   ============================================================ */
.cmty-swag {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--yellow);
}

/* Cross-fading photo stack: all photos share the frame; only .is-active is
   visible. Inactive photos fade out with a soft blur for a gentle transition. */
.cmty-swag__slides {
  position: absolute;
  inset: 0;
}

.cmty-swag__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the bottom edge: the tee graphics and captions live near the
     bottom of each photo, so cropping should eat into the top, never the foot,
     as the frame's aspect ratio changes across screen sizes. */
  object-position: center bottom;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1.1s ease, filter 1.1s ease;
}

.cmty-swag__photo.is-active {
  opacity: 1;
  filter: blur(0);
}

/* Centred copy sits over the seated figure; a soft radial scrim keeps
   the white text legible against the bright studio backdrop. */
.cmty-swag__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  /* Sit the copy in the lower third so it clears the figure in the middle
     of the photo. */
  align-items: flex-end;
  justify-content: center;
  padding: 2rem 1.5rem 15vh;
  text-align: center;
  background: radial-gradient(ellipse 55% 28% at 50% 80%, rgba(27, 27, 27, 0.4), transparent 75%);
}

.cmty-swag__copy {
  margin: 0;
  color: var(--field-ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(27, 27, 27, 0.45);
}

.cmty-swag__eyes {
  text-shadow: none;
}

/* ============================================================
   SHARED — scroll reveal primitive ([data-reveal])
   Not previously defined in this stylesheet; added here since
   the Community page is the first to use it.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- Community: responsive --- */
@media (max-width: 768px) {
  .cmty-hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .cmty-ticker__img {
    height: 190px;
  }

  .cmty-ticker__card--expert {
    width: 170px;
  }

  .cmty-starburst {
    width: 110%;
  }

  .cmty-squiggle {
    width: 260%;
  }
}

@media (max-width: 640px) {
  .cmty-hero {
    padding: 2rem 1.5rem;
  }

  .cmty-starburst {
    width: 100%;
  }

  .cmty-squiggle {
    width: 300%;
  }

  .cmty-swag__overlay {
    padding: 2rem 1rem 15vh;
  }

  .cmty-swag__copy {
    font-size: 1.05rem;
    line-height: 1.45;
  }
}

/* --- Community + reveals: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .cmty-camp *,
  .cmty-pal > .pal-art { animation: none !important; }
  .cmty-fire__embers { display: none; }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .cmty-ticker__card {
    transition: none;
  }

  .cmty-ticker__card:hover {
    transform: none;
  }

  .cmty-card {
    transition: none;
  }

  .cmty-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* No cross-fade: JS also skips the auto-cycle, so the first photo stays put. */
  .cmty-swag__photo {
    transition: none;
  }
}


/* ============================================================
   FLOATING "FINCH" ASSISTANT (Flofu) — ported from home.css so the
   community page can share the same character, bubble and cue styles.
   ============================================================ */

/* Playful "duck" — each character (a group INSIDE the lockup) bobs down and
   springs back on mouse-over, so only the shape you point at reacts. --duck is
   set per lockup in JS (in user units) so the drop reads ~consistent on screen. */
@keyframes char-bob {
  0%   { transform: translateY(0); }
  24%  { transform: translateY(var(--duck, 40px)); }
  56%  { transform: translateY(calc(var(--duck, 40px) * -0.22)); }
  100% { transform: translateY(0); }
}
.char-part.is-bobbing {
  animation: char-bob 0.6s cubic-bezier(0.34, 1.25, 0.5, 1);
}

/* The floating assistant: fixed to the viewport, hidden until JS adds
   .is-visible, then slides up and stays put. */
.site-assistant {
  position: fixed;
  right: 1.25rem;
  bottom: 0;                            /* flat feet flush with the window edge */
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;                 /* wrapper is inert; children opt back in */
  opacity: 0;
  transform: translateY(130%);
  /* Ease-out with NO overshoot: it must not bounce up past its resting spot,
     which would lift the flat feet off the window edge and reveal the crop. */
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.site-assistant.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-assistant__char {
  pointer-events: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: clamp(112px, 13vw, 164px);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease;
  /* Sink the eels a touch so the drawing's faded tail slips below the window
     edge — they read as heads poking up out of the ground rather than a
     picture that stops. The bottom "extra length" is what bobs into view. */
  --flofu-sink: 8%;
  transform: translateY(var(--flofu-sink, 0px));
}
.site-assistant__char:hover { transform: translateY(calc(var(--flofu-sink, 0px) - 3px)); }
.site-assistant__char:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: 12px;
}
.assistant-svg { display: block; width: 100%; height: auto; }

/* Its one eye reuses the hero pupil convention (JS transforms this group). */
.site-assistant .pupil { transition: transform 0.12s ease; }

/* Manifesto words Flofu can quip about — a very subtle dotted underline hints
   they're interactive; the ? cursor reinforces it. */
.flofu-cue {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 68%, transparent);
}

/* Speech bubble — real HTML text so future messages can change. Hidden until
   the character is tapped (.is-open on the wrapper). */
.site-assistant__bubble {
  pointer-events: none;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.55rem 1.1rem;
  max-width: 80vw;              /* safety cap only — quips stay on one line */
  background: var(--black);
  color: var(--white);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.25;
  border-radius: 999px;
  white-space: nowrap;          /* single line so the pill hugs the text, no side gaps */
  position: relative;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.18s ease, transform 0.18s ease;   /* used for the EXIT */
}
/* Little tail pointing down toward the character. */
.site-assistant__bubble::after {
  content: "";
  position: absolute;
  right: 2.25rem;
  bottom: -7px;
  width: 16px;
  height: 16px;
  background: var(--black);
  border-radius: 3px;
  transform: rotate(45deg);
}
.site-assistant.is-open .site-assistant__bubble {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0) scale(1);
  /* iMessage-style pop on entrance; replayed on every click via JS. */
  animation: bubble-pop 0.3s cubic-bezier(0.34, 1.5, 0.5, 1);
}
@keyframes bubble-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(0.4); }
  55%  { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  /* Tuck him just behind the fixed bottom bar's top edge so he reads as popping
     up from behind it; a touch smaller so he's unobtrusive. */
  .site-assistant { right: 0.75rem; bottom: 50px; }
  .site-assistant__char { width: clamp(76px, 22vw, 104px); }
  .site-assistant__bubble { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-assistant {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .site-assistant.is-visible { transform: none; }
  .site-assistant__bubble {
    transition: opacity 0.2s ease;
    transform: none;
  }
  .site-assistant.is-open .site-assistant__bubble { transform: none; animation: none; }
  .site-assistant .pupil { transition: none; }

}

/* ============================================================
   MOBILE NAV — bottom bar hamburger + liquid-glass menu
   -----------------------------------------------------------
   SHARED COMPONENT: this block is duplicated verbatim in
   css/home.css. Keep the two copies in sync.
   ============================================================ */

/* Page key colour → --key (drives the glass tint + inverted bar). */
body[data-key="blue"]   { --key: var(--blue); }
body[data-key="red"]    { --key: var(--red); }
body[data-key="green"]  { --key: var(--green); }
body[data-key="yellow"] { --key: var(--yellow); }

/* Hidden on desktop. */
.nav-burger { display: none; }
.mobile-menu { display: none; }

/* Brush hamburger / close button (two crossfading brush icons). */
.nav-burger {
  position: relative;
  width: 46px;
  height: 38px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.nav-burger__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.34, 1.1, .5, 1);
}
/* The hamburger's brush artwork is wider than the X's, so it reads larger in
   the same box — trim it ~15% so the two icons feel matched. */
.nav-burger__icon--menu  { opacity: 1; transform: rotate(0deg)  scale(0.85); }
.nav-burger__icon--close { opacity: 0; transform: rotate(-90deg) scale(0.7); }

/* Full-screen liquid-glass overlay. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem 96px;
  /* Solid key-colour fill. The frosted backdrop-blur + translucency were dropped
     — animating a clipped blur is too expensive on mobile (flickers) for what it
     added. Clip-path alone (no filter) balloons cheaply and smoothly. */
  background: var(--key);
  /* Balloon out from the hamburger (bottom-right); own GPU layer for a steady raster. */
  clip-path: circle(0% at calc(100% - 2.7rem) calc(100% - 1.9rem));
  opacity: 0;
  pointer-events: none;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: clip-path;
  transition: clip-path 0.55s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease;
}
.mobile-menu.is-open {
  clip-path: circle(150% at calc(100% - 2.7rem) calc(100% - 1.9rem));
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 5.2vh, 2.9rem);
  margin: 0;
}
.mobile-menu__links a {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2rem, 8.5vw, 3rem);
  line-height: 1;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--white);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.22, 1, .36, 1);
}
.mobile-menu.is-open .mobile-menu__links a {
  opacity: 1;
  transform: none;
}
.mobile-menu.is-open .mobile-menu__links a:nth-child(1) { transition-delay: 0.10s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(2) { transition-delay: 0.16s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(3) { transition-delay: 0.22s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(4) { transition-delay: 0.28s; }
.mobile-menu.is-open .mobile-menu__links a:nth-child(5) { transition-delay: 0.34s; }
.mobile-menu__links a.active { color: var(--lime); }

@media (max-width: 768px) {
  .nav-burger  { display: block; }
  .mobile-menu { display: flex; }
  .site-nav__links { display: none; }

  .site-nav {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    background: var(--white);
  }
  .site-nav__inner {
    justify-content: space-between;
    padding: 0.55rem 1.25rem;
    gap: 1rem;
  }
  .site-nav__brand {
    display: flex;
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav__brand-img { height: 30px; }

  body { padding-bottom: 52px; }   /* fallback; mobile-nav.js sets the exact bar height */
  body.menu-open-lock { overflow: hidden; }

  /* Colour layer cross-faded via OPACITY (GPU-composited) instead of a
     background-color transition, so the white->key change stays smooth even
     while the main thread composites the menu's blur. */
  .site-nav > .container--wide { position: relative; z-index: 1; }
  .site-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--key);
    opacity: 0;
    pointer-events: none;
    transform: translateZ(0);
    transition: opacity 0.4s ease;
  }
  .site-nav.menu-open::after { opacity: 1; }

  .site-nav.menu-open .site-nav__brand-img { filter: none; }
  .site-nav.menu-open .nav-burger__icon--menu  { opacity: 0; transform: rotate(90deg) scale(0.6); }
  .site-nav.menu-open .nav-burger__icon--close { opacity: 1; transform: rotate(0deg)  scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu__links a,
  .nav-burger__icon { transition: opacity 0.2s ease; }
  .mobile-menu { clip-path: none; }
  .mobile-menu.is-open { clip-path: none; }
  .mobile-menu.is-open .mobile-menu__links a { transition-delay: 0s; transform: none; }
}

/* ============================================================
   THEME MODE — DARK  (warm deep-brown)  — community / resource-centre
   Mirrors css/home.css. Only the full-bleed hue FIELDS darken to browns;
   white cards, the partners/joint-effort band, nav and footer stay light,
   so there is NO black↔white flip. See css/home.css for the full rationale
   and the sampled palette.
   ============================================================ */

html[data-theme="dark"] {
  --red:    #1F1414;   /* .cmty-upcoming / .cmty-gallery fields */
  --yellow: #231717;   /* .res-stream / .cmty-hero / .cmty-swag fields */
  --green:  #1A1111;   /* .lately field */
  --blue:   #171011;   /* .res-hero / .cmty-experts / blue card images */
  --black:  #1B1B1B;   /* unchanged — ink + borders on white cards */
  --white:  #F3F3F3;   /* unchanged — cards / partners / nav / footer stay light */
  --lime:   #5FFF84;   /* unchanged */
  --title-color:   #A96666;   /* dusty rose */
  --field-ink:     #F7F6F6;   /* warm off-white on the dark fields */
  --section-accent:#371919;
}

/* The cmty-hero headings were blue INK on a yellow field; on the browned field
   they read as off-white like the other field text. */
html[data-theme="dark"] .cmty-hero__eyebrow,
html[data-theme="dark"] .cmty-hero__title,
html[data-theme="dark"] .cmty-hero__intro { color: var(--field-ink); }

/* Community campfire: each paint its own brown so the fire, logs and the
   shapes stay distinct (no flattening tint), and the faces keep their eyes. */
html[data-theme="dark"] .cmty-fire__outer { fill: #A96666; }
html[data-theme="dark"] .cmty-fire__mid   { fill: #C98A6B; }
html[data-theme="dark"] .cmty-fire__core  { fill: #F2DDB8; }
html[data-theme="dark"] .cmty-fire__line  { fill: #E6C697; }
html[data-theme="dark"] .cmty-fire__log   { fill: #4A2826; }
html[data-theme="dark"] .cmty-fire__grain { fill: #6E3C37; }
html[data-theme="dark"] .cmty-fire__embers > i,
html[data-theme="dark"] .cmty-spark { background: #C98A6B; }
html[data-theme="dark"] .cmty-pal > .pal-art {
  filter: grayscale(1) sepia(1) saturate(1.5) hue-rotate(-28deg) brightness(var(--pal-dim, 0.6)) contrast(1.15);
}
.cmty-pal--star     { --pal-dim: 1.02; }
.cmty-pal--hoops    { --pal-dim: 0.76; }
.cmty-pal--triangle { --pal-dim: 0.6; }
.cmty-pal--pill     { --pal-dim: 0.59; }
.cmty-pal--circle   { --pal-dim: 0.56; }
.cmty-pal--blob     { --pal-dim: 0.6; }

/* Resource Hub filter chips sit on the browned .res-stream field with --black
   text (illegible). Light them to rose; the chosen chip keeps its light label. */
html[data-theme="dark"] .res-stream { background: var(--yellow); }   /* keep the browned field */
html[data-theme="dark"] .res-stream__tags-label,
html[data-theme="dark"] .res-stream__tag { color: #A96666; }
html[data-theme="dark"] .res-stream__tag:hover { border-color: #A96666; }
html[data-theme="dark"] .res-stream__tag--clear { border-color: #A96666; }
/* Active chip: a filled rose pill so the selection stands out on the dark field. */
html[data-theme="dark"] .res-stream__tag--active {
  background: #A96666;
  border-color: #A96666;
  color: #1A1111;
}
html[data-theme="dark"] .res-stream__tag--clear:hover { background: #A96666; color: #1A1111; }

/* Buttons stay a colourful lime pill in Dark (see css/home.css). */
html[data-theme="dark"] a.btn { color: #1934BE; background: #5FFF84; }
html[data-theme="dark"] a.btn:hover {
  color: #F3F3F3;
  background-image: linear-gradient(90deg, #E42600, #FFCC00, #009D3C, #FFCC00, #E42600);
}

/* Doodle recolour — faint warm brown (same filter chain as css/home.css). */
html[data-theme="dark"] .cmty-starburst,
html[data-theme="dark"] .cmty-squiggle,
html[data-theme="dark"] .res-hero__layer,
html[data-theme="dark"] .res-hero__art,
html[data-theme="dark"] .res-stream__layer,
html[data-theme="dark"] .res-stream__art {
  filter: brightness(0) invert(0.1) sepia(1) saturate(2) hue-rotate(-45deg);
}

/* Resource Hub book: each paint gets its own brown so the pages stay distinct. */
html[data-theme="dark"] .res-book__edge  { stop-color: #5C3634; }
html[data-theme="dark"] .res-book__spine { stop-color: #2E1B1A; }
html[data-theme="dark"] .res-book__page  { stroke: #8A514E; }

/* Flofu: remap its baked fills to the dark palette (see css/home.css). */
html[data-theme="dark"] .assistant-svg path[fill="#E4B103"] { fill: #B7592D; }
html[data-theme="dark"] .assistant-svg path[fill="#00A744"] { fill: #4AA670; }
html[data-theme="dark"] .assistant-svg path[fill="#CCCCCC"] { fill: #A96666; }
html[data-theme="dark"] .assistant-svg path[fill="#0066FF"] { fill: #270D0D; }
html[data-theme="dark"] .assistant-svg path[fill="#1934BE"] { fill: #5A2F2F; }
html[data-theme="dark"] .assistant-svg path[fill="#1D8949"] { fill: #E6C697; }

/* ---- Dark navbar on ALL pages (see css/home.css): deep-brown bar that
   BRIGHTENS TO OFF-WHITE on hover; links/wordmark/icon flip dark when it does. */
html[data-theme="dark"] .site-nav,
html[data-theme="dark"] .site-nav--solid {
  background: #150F0F !important;
  border-top-color: #3D2222;
  border-bottom-color: #3D2222;
}
html[data-theme="dark"] .site-nav:hover { background: var(--white) !important; }

/* Inverted emphasis (see css/home.css): current/active page = off-white, others
   recede to brown; hover lifts to off-white. On the brightened (hover) bar it all
   flips dark/rose for legibility. */
html[data-theme="dark"] .site-nav__links a { color: #A96666; }
html[data-theme="dark"] .site-nav__links a.active,
html[data-theme="dark"] .site-nav__links a:hover { color: #F7F6F6; }
html[data-theme="dark"] .site-nav:hover .site-nav__links a { color: #1B1B1B; }
html[data-theme="dark"] .site-nav:hover .site-nav__links a.active,
html[data-theme="dark"] .site-nav:hover .site-nav__links a:hover { color: #A96666; }

html[data-theme="dark"] .site-nav__brand-img { filter: none; }
html[data-theme="dark"] .site-nav:hover .site-nav__brand-img { filter: brightness(0); }

/* Theme icon docked in the nav: off-white on the dark bar, dark on the off-white. */
html[data-theme="dark"] .theme-switch--nav .theme-switch__btn {
  border-color: #F7F6F6;
  color: #F7F6F6;
}
html[data-theme="dark"] .site-nav:hover .theme-switch--nav .theme-switch__btn {
  border-color: #1B1B1B;
  color: #1B1B1B;
}

/* ---- Dark footer on ALL pages: one dark bar with light text. ---- */
html[data-theme="dark"] .site-footer {
  background: #150F0F;
  border-top-color: #3D2222;
}
html[data-theme="dark"] .site-footer__lockup { filter: none; color: #F7F6F6; }
html[data-theme="dark"] .site-footer__credit { color: #F7F6F6; }

/* ============================================================
   THEME SWITCHER CONTROL (top-right of nav)
   ============================================================ */
.theme-switch {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.theme-switch__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1.5px solid var(--nav-fg, var(--black));
  border-radius: 100px;
  background: transparent;
  color: var(--nav-fg, var(--black));
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
              transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}
/* Playful hover: flowing-rainbow fill + springy scale, matching the buttons. */
.theme-switch__btn:hover {
  transform: scale(1.1);
  border-color: transparent;
  color: #F3F3F3 !important;
  background-image: linear-gradient(90deg, #E42600, #FFCC00, #009D3C, #FFCC00, #E42600);
  background-size: 200% 100%;
  animation: btn-flow 2s linear infinite;
}
.theme-switch__btn svg { width: 24px; height: 24px; display: block; }
.theme-switch__btn svg path { stroke: currentColor; }

/* Popover menu — animated bubbly elastic pop (see css/home.css). */
.theme-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 190px;
  padding: 0.4rem;
  border: 1.5px solid var(--black);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.6) translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.theme-switch.is-open .theme-switch__menu {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.5, 1), opacity 0.16s ease;
}
/* "Pick a style!" heading at the top of the menu: small, muted and set apart
   by a rule, so it reads as a hint rather than another option. */
.theme-switch__label {
  margin: 0 0 0.2rem;
  padding: 0.35rem 0.85rem 0.55rem;
  border-bottom: 1px dashed rgba(27, 27, 27, 0.2);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(27, 27, 27, 0.55);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.theme-switch__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--black);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.8) translateY(6px);
  transition: background 0.15s ease, transform 0.2s ease, opacity 0.2s ease;
}
.theme-switch.is-open .theme-switch__opt {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: background 0.15s ease,
              transform 0.5s cubic-bezier(0.34, 1.7, 0.5, 1),
              opacity 0.2s ease;
}
.theme-switch.is-open .theme-switch__opt:nth-of-type(1) { transition-delay: 0.06s; }
.theme-switch.is-open .theme-switch__opt:nth-of-type(2) { transition-delay: 0.13s; }
.theme-switch.is-open .theme-switch__opt:nth-of-type(3) { transition-delay: 0.20s; }
/* Each option's hover fill previews its theme (see css/home.css). */
.theme-switch__opt:hover {
  transform: scale(1.04);
  background-size: 200% 100%;
  animation: btn-flow 2s linear infinite;
}
.theme-switch__opt[data-theme="default"]:hover {
  color: #F3F3F3;
  background-image: linear-gradient(90deg, #E42600, #FFCC00, #009D3C, #FFCC00, #E42600);
}
.theme-switch__opt[data-theme="dark"]:hover {
  color: #E6C697;   /* light beige text — reads like the actual dark theme */
  background-image: linear-gradient(90deg, #1A1111, #3D2222, #4A2A2A, #3D2222, #1A1111);
}
.theme-switch__opt[data-theme="default"]:hover::after { color: #F3F3F3 !important; }
.theme-switch__opt[data-theme="dark"]:hover::after { color: #E6C697 !important; }
.theme-switch__opt[aria-checked="true"] { font-weight: 700; }
.theme-switch__opt[aria-checked="true"]::after { content: "✓"; color: var(--blue); }
.theme-switch__opt[aria-checked="false"]::after { content: ""; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch__menu,
  .theme-switch.is-open .theme-switch__menu,
  .theme-switch__opt,
  .theme-switch.is-open .theme-switch__opt {
    transition: opacity 0.12s ease;
    transform: none;
  }
}
@media (max-width: 768px) {
  .theme-switch__menu { bottom: calc(100% + 10px); top: auto; }
  /* In the flex row (not absolute) so it can never sit on the wordmark:
     wordmark | switch (pushed right) | burger. See css/home.css. */
  .site-nav .theme-switch--nav {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    order: 1;
    margin-left: auto;
    flex-shrink: 0;
  }
  .site-nav .nav-burger { order: 2; }
  .site-nav__brand { min-width: 0; }
  .site-nav__brand-img { height: auto; width: min(203px, calc(100vw - 208px)); }
}
/* Thin phones: tighten the padding and icons so the wordmark keeps its size. */
@media (max-width: 420px) {
  .site-nav > .container--wide { padding: 0 1rem; }
  .site-nav__inner { padding: 0.55rem 0.25rem; gap: 0.625rem; }
  .site-nav .theme-switch--nav .theme-switch__btn { width: 36px; height: 36px; }
  .site-nav .theme-switch--nav .theme-switch__btn svg { width: 20px; height: 20px; }
  .site-nav .nav-burger { width: 40px; height: 33px; }
  .site-nav__brand-img { width: min(203px, calc(100vw - 136px)); }
}

/* Dark mode mobile: invert the black burger icon so it reads on the dark bar
   (flips back when the bar brightens on tap/hover). See css/home.css. */
@media (max-width: 768px) {
  html[data-theme="dark"] .nav-burger__icon { filter: invert(1) brightness(1.4); }
  html[data-theme="dark"] .site-nav:hover .nav-burger__icon { filter: none; }
}