/* ==========================================================================
   Flurto — tokens.css
   SINGLE SOURCE OF TRUTH for every design value.
   base.css / components.css / pages.css must only consume var(--…).
   Light theme only. All values are RTL-agnostic.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. BRAND PALETTE (raw)
     ---------------------------------------------------------------------- */
  --color-coral:          #F5A31C;   /* primary brand — surfaces, blobs, accents */
  --color-coral-300:      #FBC66E;
  --color-coral-400:      #F7B440;   /* primary hover (lighter, keeps dark text AA) */
  --color-coral-600:      #D88A0A;
  --color-coral-700:      #8F5B00;   /* AA-safe behind WHITE text (5.18:1) */
  --color-coral-tint:     #FDEED3;   /* pale wash for badges / icon chips */

  --color-peach:          #FFD08A;
  --color-peach-300:      #FFE3B3;
  --color-peach-tint:     #FFF4E0;

  --color-cream:          #FFFFFF;   /* page background */
  --color-cream-deep:     #FDF4EC;   /* .section--alt background */
  --color-cream-glass:    rgba(255, 255, 255, 0.88); /* blurred sticky navbar */

  --color-plum:           #16224A;   /* ink + footer */
  --color-plum-800:       #0C1533;   /* footer bottom / deepest */
  --color-plum-600:       #3A4568;
  --color-plum-400:       #5B6788;   /* muted body text — 6.3:1 on cream */

  --color-lavender:       #0F9AA3;
  --color-lavender-300:   #DDF1F2;
  --color-lavender-700:   #07666E;   /* AA text/icon tone — 5.2:1 on cream */
  --color-lavender-tint:  #EFF9FA;

  --color-sage:           #0F9AA3;
  --color-sage-300:       #DDF1F2;
  --color-sage-700:       #07666E;   /* AA text/icon tone — 4.8:1 on cream */
  --color-sage-tint:      #EFF9FA;

  --color-berry:          #0C1533;   /* deep gradient stop for the CTA band */
  --color-white:          #FFFFFF;
  --color-black:          #0C1533;

  /* ----------------------------------------------------------------------
     2. SEMANTIC ROLES
     ---------------------------------------------------------------------- */
  --color-bg:             var(--color-cream);
  --color-bg-alt:         #FDF4EC;
  --color-surface:        var(--color-white);
  --color-surface-2:      #FDF6F0;
  --color-surface-sunk:   #F7EFE7;

  --color-ink:            var(--color-plum);        /* 15.9:1 on cream */
  --color-ink-strong:     var(--color-plum-800);
  --color-ink-muted:      var(--color-plum-400);    /*  6.3:1 on cream */
  --color-ink-invert:     var(--color-cream);

  --color-primary:        var(--color-coral);       /* pairs with INK text */
  --color-primary-hover:  var(--color-coral-400);
  --color-primary-deep:   var(--color-coral-700);   /* pairs with WHITE text */
  --color-accent:         var(--color-lavender);
  --color-success:        var(--color-sage);

  --color-border:         #F0E6DC;
  --color-border-strong:  #E4D6C8;
  --color-border-light:   rgba(255, 255, 255, 0.20);
  --color-overlay:        rgba(12, 21, 51, 0.55);

  --color-focus:          #0A7F88;        /* focus ring on light bg */
  --color-focus-invert:   #F7B440;       /* focus ring on dark bg */

  /* Translucent layers used on dark / coral surfaces (footer, CTA band).
     All text tones below clear 5.8:1 against --color-plum. */
  --surface-on-dark:        rgba(255, 255, 255, 0.08);
  --surface-on-dark-hover:  rgba(255, 255, 255, 0.14);
  --surface-on-dark-soft:   rgba(255, 255, 255, 0.10);
  --surface-on-dark-chip:   rgba(255, 255, 255, 0.16);
  --surface-frost:          rgba(255, 255, 255, 0.92);
  --hairline-on-dark:       rgba(255, 255, 255, 0.14);
  --hairline-on-dark-strong: rgba(255, 255, 255, 0.24);
  --border-on-dark:         rgba(255, 255, 255, 0.18);
  --border-on-dark-strong:  rgba(255, 255, 255, 0.55);
  --bezel-highlight:        rgba(255, 255, 255, 0.25);
  --ink-on-dark:            rgba(255, 255, 255, 0.88);
  --ink-on-dark-muted:      rgba(255, 255, 255, 0.72);
  --ink-on-dark-faint:      rgba(255, 255, 255, 0.62);
  --ink-on-coral:           rgba(255, 255, 255, 0.90);
  --sheen-1:                rgba(255, 255, 255, 0.72);
  --sheen-2:                rgba(255, 255, 255, 0.48);

  /* ----------------------------------------------------------------------
     3. GRADIENTS  (blog covers g1..g6, event covers, band, blobs)
     ---------------------------------------------------------------------- */
  --grad-1: #FDECE0;
  --grad-2: #FBE7DC;
  --grad-3: #F6EFE7;
  --grad-4: #FDF4EC;
  --grad-5: #F4F0FA;
  --grad-6: #FCE9DE;

  --grad-event-1: #FDECE0;
  --grad-event-2: #F4F0FA;
  --grad-event-3: #F6EFE7;
  --grad-event-4: #FCE9DE;

  --grad-primary:  #F5A31C;
  --grad-band:     #16224A;
  --grad-hero:     radial-gradient(120% 90% at 85% 0%, var(--color-peach-tint) 0%, rgba(255, 255, 255, 0) 60%),
                   radial-gradient(90% 70% at 0% 20%, var(--color-lavender-tint) 0%, rgba(255, 255, 255, 0) 55%);
  --grad-phone:    #F4F6FB;
  --grad-blob-a:   #FDEED3;
  --grad-blob-b:   #DDF1F2;
  --grad-blob-c:   #F4F6FB;
  --grad-rule:     linear-gradient(90deg, transparent, var(--color-border-strong), transparent);

  /* ----------------------------------------------------------------------
     4. TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --font-latin: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-arabic: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

  /* --font-body / --font-display are re-pointed for RTL/fa in base.css */
  --font-body:    "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;

  /* Fluid scale — fluid between 375px and ~1280px viewports */
  --text-xs:   clamp(0.75rem,  0.727rem + 0.10vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.784rem + 0.12vw, 0.875rem);
  --text-base: clamp(1rem,     0.972rem + 0.12vw, 1.0625rem);
  --text-md:   clamp(1.0625rem, 1.019rem + 0.19vw, 1.1875rem);
  --text-lg:   clamp(1.1875rem, 1.117rem + 0.30vw, 1.375rem);
  --text-xl:   clamp(1.375rem,  1.261rem + 0.49vw, 1.6875rem);
  --text-2xl:  clamp(1.75rem, 1.52rem + 0.98vw, 2.375rem);
  --text-3xl:  clamp(2.125rem, 1.72rem + 1.73vw, 3.25rem);
  --text-4xl:  clamp(2.5rem, 1.86rem + 2.73vw, 4.25rem);
  --text-hero: clamp(2.5rem, 1.5rem + 4.3vw, 4.5rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 500;
  --weight-bold:     700;
  --weight-extra:    700;

  --leading-tight:   1.06;
  --leading-snug:    1.22;
  --leading-normal:  1.45;
  --leading-relaxed: 1.72;

  --tracking-tight:  -0.015em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.10em;

  /* ~65ch of proportional text; the rem cap keeps the line from drifting past
     a comfortable ~70-character measure as the fluid font-size grows. */
  --measure:       min(65ch, 40rem);
  --measure-short: min(46ch, 30rem);

  /* ----------------------------------------------------------------------
     5. SPACING (4px base) + fluid rhythm
     ---------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  2rem;
  --space-8:  2.5rem;
  --space-9:  3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-13: 8rem;

  --space-section:      clamp(3.5rem, 2.2rem + 5.2vw, 6.5rem);
  --space-section-tight: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --gap-grid:           clamp(0.75rem, 0.5rem + 1.1vw, 1.25rem);
  --gap-grid-lg:        clamp(1rem, 0.7rem + 1.4vw, 1.75rem);

  /* ----------------------------------------------------------------------
     6. LAYOUT
     ---------------------------------------------------------------------- */
  --container-max:   1140px;
  --container-narrow: 780px;
  --container-pad:   clamp(1.125rem, 0.85rem + 1.2vw, 2rem);
  --navbar-h:        72px;
  --navbar-h-mobile: 64px;
  --bp-burger:       860px; /* documented breakpoint — media queries repeat it literally */

  /* ----------------------------------------------------------------------
     7. RADII
     ---------------------------------------------------------------------- */
  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-3xl: 40px;
  --radius-pill: 999px;
  --radius-blob-a: 58% 42% 38% 62% / 46% 55% 45% 54%;
  --radius-blob-b: 40% 60% 63% 37% / 62% 38% 62% 38%;
  --radius-blob-c: 66% 34% 45% 55% / 38% 63% 37% 62%;

  /* ----------------------------------------------------------------------
     8. SHADOWS (soft, layered, warm-tinted)
     ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(22, 34, 74, 0.04);
  --shadow-sm: 0 2px 8px rgba(22, 34, 74, 0.05);
  --shadow-md: 0 6px 20px rgba(22, 34, 74, 0.07);
  --shadow-lg: 0 18px 44px rgba(22, 34, 74, 0.10);
  --shadow-xl: 0 34px 80px rgba(22, 34, 74, 0.13);
  --shadow-coral: 0 8px 22px rgba(245, 163, 28, 0.30);
  --shadow-coral-strong: 0 12px 30px rgba(245, 163, 28, 0.38);
  --shadow-inset-soft: inset 0 0 0 1px rgba(255,255,255,0.6);
  --shadow-ring: 0 0 0 1px var(--color-border);

  /* ----------------------------------------------------------------------
     9. MOTION
     ---------------------------------------------------------------------- */
  --ease-soft:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-reveal: 520ms;

  --transition-base:  all var(--dur-base) var(--ease-soft);
  --transition-color: color var(--dur-base) var(--ease-soft),
                      background-color var(--dur-base) var(--ease-soft),
                      border-color var(--dur-base) var(--ease-soft);
  --transition-lift:  transform var(--dur-slow) var(--ease-out),
                      box-shadow var(--dur-slow) var(--ease-out);

  --lift-sm: -3px;
  --lift-md: -6px;
  --lift-lg: -10px;

  /* ----------------------------------------------------------------------
     10. FOCUS / Z-INDEX / MISC
     ---------------------------------------------------------------------- */
  --focus-width:  3px;
  --focus-offset: 3px;

  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  /* Height of the sticky navbar. main.js measures the real element and
     overwrites this, so sticky offsets stay correct on every breakpoint. */
  --header-h: 72px;
  --z-nav:     200;
  --z-overlay: 500;
  --z-skip:    900;

  --blur-glass: 14px;
  /* --- kāshi additions --- */
  --font-display-fa: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-nastaliq: "Shabnam", "Segoe UI", Tahoma, system-ui, sans-serif;
  --color-ink-soft: #3A4568;
  --grout-width: 1px;
  --grout: #F0E6DC;
  --grout-strong: #E4D6C8;
  --firouzeh: #0F9AA3;
  --firouzeh-deep: #07666E;
  --firouzeh-tint: #EFF9FA;
  --amber-deep: #8F5B00;
  --admin-bar-h: 36px;
  /* --- aura: the page is a card floating on warm ground --- */
  --blush: #FDECE0;
  --eyebrow: #C2410C;
}

/* ==========================================================================
   Flurto — fonts.css
   Shabnam (Saber Rastikerdar), self-hosted. One family for the whole site,
   Persian and Latin alike. Served locally rather than from Google Fonts so
   it loads reliably for visitors inside Iran.
   ========================================================================== */

@font-face {
  font-family: "Shabnam";
  src: url("/assets/fonts/Shabnam-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shabnam";
  src: url("/assets/fonts/Shabnam.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shabnam";
  src: url("/assets/fonts/Shabnam-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shabnam";
  src: url("/assets/fonts/Shabnam-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Flurto — base.css
   Reset, document defaults, typography, layout primitives, buttons, badges,
   a11y helpers. Every value comes from tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--navbar-h) + var(--space-6));
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-block-size: 100vh;
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;

  /* Contain the decorative blobs that bleed past the viewport edge.
     `hidden` here would make <body> a scroll container, and every
     `position: sticky` descendant — the navbar, the meetups filter bar, both
     browser columns — would silently stop sticking, because they would be
     resolving against a scrollport that never scrolls. `clip` does the same
     visual job WITHOUT creating one. The `hidden` line stays first as the
     fallback for browsers without `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* The navbar is `position: sticky`, but its mount point wraps it in a div that
   is exactly its own height — a sticky box can only travel inside its
   containing block, so it had none and scrolled away like static content.
   `display: contents` removes the wrapper's box, making .page-shell the
   containing block and giving the navbar the whole page to stick over. */
#app-header {
  display: contents;
}

img,
svg,
video,
canvas,
picture {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

svg {
  fill: currentColor;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  inline-size: 100%;
}

hr {
  block-size: 1px;
  border: 0;
  background: var(--grad-rule);
  margin-block: var(--space-8);
}

::selection {
  background: var(--color-coral-300);
  color: var(--color-ink-strong);
}

/* --------------------------------------------------------------------------
   2. FONT FAMILY SWITCH  (fonts arrive via Google Fonts <link> in the HTML)
   -------------------------------------------------------------------------- */
html[lang="fa"],
html[dir="rtl"],
[dir="rtl"],
:lang(fa) {
  --font-body: var(--font-arabic);
  /* One family site-wide: Shabnam. Weight carries the hierarchy. */
  --font-display: var(--font-display-fa);
}

/* Persian copy sits a touch lower and needs a slightly looser leading. */
html[lang="fa"] body,
html[dir="rtl"] body {
  line-height: var(--leading-relaxed);
  font-synthesis-weight: none; /* real Shabnam weights only — never synthesise */
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: var(--weight-extra);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
h5 { font-size: var(--text-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }
h6 { font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); }

/* Persian display type reads better slightly less tight */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3 {
  letter-spacing: var(--tracking-normal);
  line-height: 1.35;
}

p {
  text-wrap: pretty;
}

strong, b { font-weight: var(--weight-bold); }
em, i { font-style: italic; }

small { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  position: relative;
  padding-block: var(--space-section);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section__head {
  max-inline-size: 44rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  text-align: center;
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extra);
  color: var(--color-ink);
}

.section__subtitle {
  margin-block-start: var(--space-4);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-inline-size: var(--measure-short);
  margin-inline: auto;
}

/* Grids — collapse 4→2→1, 3→1, 2→1 */
.grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 760px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 620px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: 0.78rem;
  padding-inline: 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  letter-spacing: var(--tracking-snug);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: var(--transition-color), var(--transition-lift);
}

.btn:hover {
  transform: translateY(var(--lift-sm));
}

.btn:active {
  transform: translateY(0);
}

/* Primary — brand coral with deep plum ink (4.8:1, WCAG AA at any size) */
.btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-ink);
  box-shadow: var(--shadow-coral);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-coral-strong);
}

/* Ghost — outlined, sits on cream or white */
.btn--ghost {
  background-color: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-ink);
}

.btn--ghost:hover {
  background-color: var(--color-surface);
  border-color: var(--color-plum);
  box-shadow: var(--shadow-md);
}

/* Light — white pill for dark/coral backgrounds (5.2:1) */
.btn--light {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary-deep);
  box-shadow: var(--shadow-md);
}

.btn--light:hover {
  background-color: var(--color-cream);
  border-color: var(--color-cream);
  box-shadow: var(--shadow-lg);
}

.btn--lg {
  padding-block: 1rem;
  padding-inline: 2.1rem;
  font-size: var(--text-md);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. BADGE
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.4rem;
  padding-inline: 0.9rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-coral-tint);
  color: var(--color-primary-deep);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   7. ACCESSIBILITY
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: var(--z-skip);
  padding-block: 0.7rem;
  padding-inline: 1.2rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-plum);
  color: var(--color-cream);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-lg);
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

/* Visible, consistent focus ring everywhere */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

/* Never leave a mouse click ringed, but never remove keyboard focus either */
:focus:not(:focus-visible) {
  outline: none;
}

/* Screen-reader-only utility */
.visually-hidden,
.sr-only {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .card:hover,
  .feature-card:hover,
  .event-card:hover,
  .post-card:hover,
  .value-card:hover,
  .pillar:hover,
  .testimonial:hover {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. FORCED COLORS / HIGH CONTRAST
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .badge,
  .card,
  .feature-card,
  .event-card,
  .post-card {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* --------------------------------------------------------------------------
   SERVER-RENDERED FALLBACK
   -------------------------------------------------------------------------- */
/* serve.py writes plain semantic HTML into <main> so crawlers and no-JS
   readers get the real content. With JS it would flash unstyled for the
   moment before the app mounts over it — every filter click, now that
   filters navigate — so hide it as soon as we know JS is running.
   `no-hydrate` is set by the shell's watchdog when the app never arrived. */
html.js .prerender,
html.js .prerender-facets {
  display: none;
}

html.no-hydrate .prerender,
html.no-hydrate .prerender-facets {
  display: block;
}

/* ==========================================================================
   Flurto — components.css
   Every class in the ARCHITECTURE.md inventory.
   Logical properties throughout so dir="rtl" mirrors perfectly.
   ========================================================================== */

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-nav);
  inline-size: 100%;
  background-color: var(--color-cream-glass);
  border-block-end: 1px solid var(--color-border);
  backdrop-filter: saturate(160%) blur(var(--blur-glass));
  -webkit-backdrop-filter: saturate(160%) blur(var(--blur-glass));
  transition: box-shadow var(--dur-base) var(--ease-soft),
              background-color var(--dur-base) var(--ease-soft);
}

.navbar--scrolled {
  box-shadow: var(--shadow-sm);
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-block-size: var(--navbar-h);
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1;
}

.navbar__logo::before {
  content: "";
  inline-size: 1.35rem;
  block-size: 1.35rem;
  flex: 0 0 auto;
  border-radius: var(--radius-blob-a);
  background: var(--grad-blob-a);
  box-shadow: var(--shadow-coral);
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.6vw, var(--space-6));
  margin-inline-start: auto;
  list-style: none;
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
  white-space: nowrap;
  transition: var(--transition-color);
}

.navbar__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}

.navbar__link:hover {
  color: var(--color-ink);
}

.navbar__link:hover::after {
  transform: scaleX(1);
}

.navbar__link--active {
  color: var(--color-ink);
  font-weight: var(--weight-bold);
}

.navbar__link--active::after {
  transform: scaleX(1);
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: var(--space-2);
  flex: 0 0 auto;
}

/* When the links list is *not* pushed by auto-margin (no links), keep spacing */
.navbar__links + .navbar__actions {
  margin-inline-start: var(--space-4);
}

/* Burger --------------------------------------------------------------- */
.navbar__burger {
  display: none;
  position: relative;
  z-index: var(--z-raised);
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--color-ink);
  transition: background-color var(--dur-base) var(--ease-soft);
}

.navbar__burger:hover {
  background-color: var(--color-surface-sunk);
}

.navbar__burger span,
.navbar__burger:empty::before,
.navbar__burger:empty::after {
  display: block;
  inline-size: 100%;
  block-size: 2.5px;
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-soft);
}

.navbar__burger:empty::before,
.navbar__burger:empty::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  inline-size: auto;
}

.navbar__burger:empty::before { inset-block-start: 14px; }
.navbar__burger:empty::after  { inset-block-end: 14px; }

.navbar--open .navbar__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.navbar--open .navbar__burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.navbar--open .navbar__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.navbar--open .navbar__burger:empty::before { transform: translateY(7.5px) rotate(45deg); }
.navbar--open .navbar__burger:empty::after  { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile / burger layout ------------------------------------------------ */
@media (max-width: 859.98px) {
  .navbar__inner {
    min-block-size: var(--navbar-h-mobile);
    gap: var(--space-3);
  }

  .navbar__burger {
    display: flex;
    order: 99;
  }

  .navbar__actions {
    margin-inline-start: auto;
    gap: var(--space-2);
  }

  .navbar__actions .btn {
    padding-block: 0.55rem;
    padding-inline: 0.95rem;
    font-size: var(--text-sm);
  }

  /* The dropdown panel */
  .navbar__links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: var(--z-nav);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-inline-start: 0;
    padding-block: var(--space-3) var(--space-6);
    padding-inline: var(--container-pad);
    background-color: var(--color-cream);
    border-block-start: 1px solid var(--color-border);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-block-size: calc(100vh - var(--navbar-h-mobile));
    max-block-size: calc(100dvh - var(--navbar-h-mobile));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--dur-base) var(--ease-soft),
                transform var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
  }

  .navbar--open .navbar__links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .navbar__link {
    padding-block: var(--space-4);
    font-size: var(--text-md);
    border-block-end: 1px solid var(--color-border);
  }

  .navbar__link::after {
    inset-block-end: -1px;
    inset-inline-end: auto;
    inline-size: 42px;
  }

  .navbar__links .btn {
    margin-block-start: var(--space-5);
    inline-size: 100%;
  }
}

@media (max-width: 399.98px) {
  .navbar__actions .btn { display: none; }
}

/* ==========================================================================
   LANG TOGGLE
   ========================================================================== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  transition: var(--transition-color), box-shadow var(--dur-base) var(--ease-soft);
}

.lang-toggle:hover {
  border-color: var(--color-plum);
  box-shadow: var(--shadow-sm);
}

/* Single-button form: "EN / فا" */
button.lang-toggle,
a.lang-toggle {
  padding-block: 0.5rem;
  padding-inline: 0.9rem;
  gap: var(--space-2);
}

/* Two-option switch form */
.lang-toggle > button,
.lang-toggle > a,
.lang-toggle > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.4rem;
  padding-block: 0.42rem;
  padding-inline: 0.7rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1;
  transition: var(--transition-color);
}

.lang-toggle > [aria-pressed="true"],
.lang-toggle > [aria-current="true"],
.lang-toggle > .is-active {
  background-color: var(--color-primary);
  color: var(--color-ink);
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5.5rem) var(--space-section);
  background-image: var(--grad-hero);
  background-repeat: no-repeat;
}

.hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem);
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.45rem;
  padding-inline: 0.95rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  margin-block-end: var(--space-5);
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--weight-extra);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  max-inline-size: 16ch;
  text-wrap: balance;
}

.hero__title em {
  position: relative;
  font-style: normal;
  color: var(--color-primary-deep);
  white-space: nowrap;
}

.hero__title em::after {
  content: "";
  position: absolute;
  inset-block-end: 0.02em;
  inset-inline: -0.06em;
  block-size: 0.22em;
  z-index: -1;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-peach), var(--color-coral-300));
  opacity: 0.75;
}

.hero__subtitle {
  margin-block-start: var(--space-5);
  max-inline-size: 46ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(var(--space-6), 3vw, var(--space-9));
  margin-block-start: var(--space-9);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 6.5rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
  line-height: 1.05;
}

.stat__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-muted);
}

/* Hero art: layered blobs + CSS phone ----------------------------------- */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: clamp(320px, 46vw, 520px);
  isolation: isolate;
}

.blob {
  position: absolute;
  z-index: -1;
  display: block;
  inline-size: clamp(140px, 22vw, 260px);
  aspect-ratio: 1;
  border-radius: var(--radius-blob-a);
  background: var(--grad-blob-a);
  opacity: 0.55;
  filter: blur(0.5px);
  pointer-events: none;
  animation: blob-drift 16s var(--ease-soft) infinite alternate;
}

.blob:nth-of-type(1),
.blob--1 {
  inset-block-start: 4%;
  inset-inline-start: 2%;
  background: var(--grad-blob-a);
  border-radius: var(--radius-blob-a);
  animation-delay: 0s;
}

.blob:nth-of-type(2),
.blob--2 {
  inset-block-end: 6%;
  inset-inline-end: 0%;
  inline-size: clamp(170px, 26vw, 300px);
  background: var(--grad-blob-b);
  border-radius: var(--radius-blob-b);
  opacity: 0.5;
  animation-delay: -5s;
}

.blob:nth-of-type(3),
.blob--3 {
  inset-block-start: 42%;
  inset-inline-end: 12%;
  inline-size: clamp(90px, 13vw, 150px);
  background: var(--grad-blob-c);
  border-radius: var(--radius-blob-c);
  opacity: 0.45;
  animation-delay: -10s;
}

@keyframes blob-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -18px, 0) scale(1.06); }
}

/* CSS phone mockup ------------------------------------------------------ */
.phone-mock {
  position: relative;
  inline-size: clamp(200px, 46vw, 268px);
  aspect-ratio: 9 / 18.4;
  padding: 11px;
  border-radius: 44px;
  background:
    var(--grad-phone) content-box,
    var(--color-plum-800) border-box;
  box-shadow: var(--shadow-xl),
              0 0 0 2px var(--bezel-highlight) inset;
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease-out);
}

.hero__art:hover .phone-mock {
  transform: rotate(-1deg) translateY(var(--lift-md));
}

/* notch */
.phone-mock::before {
  content: "";
  position: absolute;
  inset-block-start: 19px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 84px;
  block-size: 19px;
  border-radius: var(--radius-pill);
  background-color: var(--color-plum-800);
}

/* fake "profile card" stack on the screen — suppressed if real markup exists */
.phone-mock::after {
  content: "💜";
  position: absolute;
  inset-inline: 26px;
  inset-block-end: 44px;
  block-size: 44%;
  display: grid;
  place-items: center;
  font-family: var(--font-emoji);
  font-size: clamp(2rem, 6vw, 2.75rem);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow:
    0 -12px 0 -5px var(--sheen-1),
    0 -23px 0 -10px var(--sheen-2),
    var(--shadow-md);
}

.phone-mock:has(> *)::after {
  content: none;
}

.phone-mock > * {
  position: relative;
  z-index: var(--z-base);
}

/* Compact hero for inner pages ------------------------------------------ */
.hero--page {
  padding-block: clamp(2.25rem, 1.4rem + 3.2vw, 4rem) clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  text-align: center;
}

.hero--page .hero__inner {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: var(--space-4);
}

.hero--page .hero__title {
  font-size: var(--text-4xl);
  max-inline-size: 20ch;
  margin-inline: auto;
}

.hero--page .hero__subtitle {
  margin-inline: auto;
  max-inline-size: 54ch;
}

.hero--page .hero__art {
  display: none;
}

/* ==========================================================================
   CARDS — shared shell
   ========================================================================== */
.card,
.feature-card,
.step,
.pillar,
.testimonial,
.value-card,
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-lift), border-color var(--dur-base) var(--ease-soft);
}

.card,
.feature-card,
.step,
.pillar,
.testimonial,
.value-card {
  padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
}

.card:hover,
.feature-card:hover,
.pillar:hover,
.testimonial:hover,
.value-card:hover,
.post-card:hover {
  transform: translateY(var(--lift-md));
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
}

/* Feature card ---------------------------------------------------------- */
.feature-card__icon {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-coral-tint);
  font-family: var(--font-emoji);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: var(--shadow-inset-soft);
}

.feature-card:nth-child(6n + 2) .feature-card__icon { background: var(--color-lavender-tint); }
.feature-card:nth-child(6n + 3) .feature-card__icon { background: var(--color-sage-tint); }
.feature-card:nth-child(6n + 4) .feature-card__icon { background: var(--color-peach-tint); }
.feature-card:nth-child(6n + 5) .feature-card__icon { background: var(--color-lavender-tint); }
.feature-card:nth-child(6n)     .feature-card__icon { background: var(--color-sage-tint); }

.feature-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-block-end: var(--space-3);
}

.feature-card__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* Step ------------------------------------------------------------------ */
.step {
  align-items: flex-start;
  text-align: start;
  background-color: var(--color-surface);
}

.step__num {
  display: grid;
  place-items: center;
  inline-size: 3.5rem;
  block-size: 3.5rem;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-blob-a);
  background: var(--grad-primary);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  line-height: 1;
  box-shadow: var(--shadow-coral);
}

.step__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  margin-block-end: var(--space-3);
}

.step__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* Pillar (safety) ------------------------------------------------------- */
.pillar {
  gap: var(--space-3);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  border-start-start-radius: var(--radius-2xl);
  border-end-end-radius: var(--radius-2xl);
}

.pillar > :first-child:not(h2):not(h3):not(h4):not(p) {
  font-family: var(--font-emoji);
  font-size: 1.9rem;
  line-height: 1;
}

.pillar h3,
.pillar .pillar__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.pillar p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* Testimonial ----------------------------------------------------------- */
.testimonial {
  gap: var(--space-5);
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
}

.testimonial::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.18em;
  inset-inline-end: 0.35em;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: var(--weight-extra);
  line-height: 1;
  color: var(--color-coral-300);
  opacity: 0.5;
  pointer-events: none;
}

.testimonial__quote {
  position: relative;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.testimonial__name {
  margin-block-start: auto;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}

.testimonial__detail {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Value card (about) ---------------------------------------------------- */
.value-card {
  gap: var(--space-3);
  background-color: var(--color-surface);
  border-start-end-radius: var(--radius-2xl);
  border-end-start-radius: var(--radius-2xl);
}

.value-card > :first-child:not(h2):not(h3):not(h4):not(p) {
  font-family: var(--font-emoji);
  font-size: 1.9rem;
  line-height: 1;
}

.value-card h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.value-card p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-grid {
  display: grid;
  gap: var(--gap-grid-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.post-card {
  overflow: hidden;
  padding: 0;
  text-decoration: none;
  color: inherit;
}

.post-card__cover {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: clamp(140px, 20vw, 190px);
  background: var(--grad-1);
  font-family: var(--font-emoji);
  font-size: clamp(2.6rem, 5.5vw, 3.5rem);
  line-height: 1;
}

.post-card__cover--g1 { background: var(--grad-1); }
.post-card__cover--g2 { background: var(--grad-2); }
.post-card__cover--g3 { background: var(--grad-3); }
.post-card__cover--g4 { background: var(--grad-4); }
.post-card__cover--g5 { background: var(--grad-5); }
.post-card__cover--g6 { background: var(--grad-6); }

.post-card__category {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  margin-block-start: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  padding-block: 0.3rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-coral-tint);
  color: var(--color-primary-deep);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.post-card__title {
  margin-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  margin-block: var(--space-3) var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.post-card:hover .post-card__title {
  color: var(--color-primary-deep);
}

.post-card__excerpt {
  margin-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-inline: clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  padding-block: var(--space-5) clamp(1.1rem, 0.8rem + 1vw, 1.5rem);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.post-card__meta > * + *::before {
  content: "·";
  margin-inline-end: var(--space-2);
  color: var(--color-border-strong);
}

/* Single post ----------------------------------------------------------- */
.post {
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem) var(--space-section);
}

.post__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-7);
  padding-block: 0.5rem;
  padding-inline: 0.9rem 1.1rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  transition: var(--transition-color), var(--transition-lift);
}

.post__back::before {
  content: "←";
  font-size: 1.05em;
  line-height: 1;
}

[dir="rtl"] .post__back::before {
  content: "→";
}

.post__back:hover {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
  transform: translateY(var(--lift-sm));
  box-shadow: var(--shadow-sm);
}

.post__header {
  max-inline-size: var(--measure);
  margin-inline: auto;
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

.post__header h1,
.post__header .post__title {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  margin-block: var(--space-4);
}

.post__header .post-card__meta,
.post__header .post__meta {
  padding: 0;
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.post__body {
  max-inline-size: var(--measure);
  margin-inline: auto;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.post__body > * + * {
  margin-block-start: var(--space-5);
}

.post__body h2 {
  margin-block-start: var(--space-9);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extra);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.post__body h3 {
  margin-block-start: var(--space-7);
  font-size: var(--text-xl);
}

.post__body p {
  color: var(--color-plum-600);
}

.post__body ul,
.post__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-inline-start: var(--space-2);
  color: var(--color-plum-600);
}

.post__body li {
  position: relative;
  padding-inline-start: var(--space-7);
}

.post__body li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: var(--radius-blob-a);
  background: var(--grad-primary);
}

.post__body blockquote {
  margin-block: var(--space-7);
  padding-block: var(--space-6);
  padding-inline: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  border-inline-start: 4px solid var(--color-primary);
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background-color: var(--color-cream-deep);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

.post__body a {
  color: var(--color-primary-deep);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

.post__body a:hover {
  color: var(--color-plum);
}

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  padding-block: var(--space-section-tight);
  background: var(--grad-band);
  color: var(--color-white);
  --color-focus: var(--color-focus-invert);
}

.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  z-index: 0;
  inline-size: clamp(220px, 32vw, 420px);
  aspect-ratio: 1;
  border-radius: var(--radius-blob-b);
  background: var(--surface-on-dark-soft);
  pointer-events: none;
}

.cta-band::before {
  inset-block-start: -30%;
  inset-inline-start: -8%;
}

.cta-band::after {
  inset-block-end: -35%;
  inset-inline-end: -6%;
  border-radius: var(--radius-blob-c);
}

.cta-band .container {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-inline-size: calc(var(--container-max) - 2rem);
  padding-block: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  padding-inline: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-2xl);
  background-color: var(--surface-on-dark);
  text-align: center;
}

.cta-band__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extra);
  line-height: var(--leading-snug);
  color: var(--color-white);
  max-inline-size: 20ch;
}

.cta-band p {
  max-inline-size: 52ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-on-coral);
}

.cta-band .btn--ghost {
  border-color: var(--border-on-dark-strong);
  color: var(--color-white);
}

.cta-band .btn--ghost:hover {
  background-color: var(--surface-on-dark-hover);
  border-color: var(--color-white);
}

.cta-band .badge {
  background-color: var(--surface-on-dark-chip);
  color: var(--color-white);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background-color: var(--color-plum);
  color: var(--color-cream);
  padding-block: var(--space-10) var(--space-6);
  --color-focus: var(--color-focus-invert);
}

/* Flex, not a fixed grid: the link columns come from the dictionary, so their
   number changes when one is added or dropped. A `repeat(3, …)` grid left a
   column-wide hole at the end of the row the moment there were only two. */
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

.footer__inner > * {
  flex: 1 1 100%;     /* one under the other on a phone */
}

@media (min-width: 700px) {
  /* The brand takes its own row above the columns, which share the next one. */
  .footer__col {
    flex: 1 1 10rem;
  }
}

@media (min-width: 980px) {
  .footer__brand {
    flex: 1.4 1 20rem;
  }
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-inline-size: 34ch;
}

@media (min-width: 700px) and (max-width: 979.98px) {
  /* The brand owns this row and the columns share the next one. It has to
     span the row itself, not merely be wide: a capped max-inline-size leaves
     exactly enough space beside it for one column to ride up. The measure
     moves to the paragraph, which is what needed limiting anyway. */
  .footer__brand {
    flex-basis: 100%;
    max-inline-size: none;
  }

  .footer__brand p {
    max-inline-size: 46ch;
  }
}

.footer__brand > :first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  color: var(--color-white);
}

.footer__brand p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-on-dark-muted);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__col > :first-child,
.footer__col h3,
.footer__col h4 {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.footer__links a {
  display: inline-block;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--ink-on-dark);
  transition: var(--transition-color);
}

.footer__links a:hover {
  color: var(--color-primary);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-9);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--hairline-on-dark);
  font-size: var(--text-sm);
  color: var(--ink-on-dark-faint);
}

.footer .lang-toggle {
  background-color: var(--surface-on-dark);
  border-color: var(--hairline-on-dark-strong);
  color: var(--color-cream);
}

.footer .lang-toggle:hover {
  border-color: var(--color-cream);
}

.footer .lang-toggle > button,
.footer .lang-toggle > a,
.footer .lang-toggle > span {
  color: var(--ink-on-dark-muted);
}

.footer .lang-toggle > [aria-pressed="true"],
.footer .lang-toggle > [aria-current="true"],
.footer .lang-toggle > .is-active {
  background-color: var(--color-primary);
  color: var(--color-plum);
}

/* ==================================================================== */
/* Meetup browser (.mu-*) — /meetups, /meetups/<cat>, /meetups/<cat>/<id> */
/*                                                                       */
/* Mobile-first: one column, and the detail is a full-screen sheet over   */
/* the list. The split view only appears once there is room for it.      */
/* ==================================================================== */

/* .section sets a big vertical rhythm for marketing pages; this is an app
   view, so it needs the two-class selector to win and a much tighter top. */
.section.mu-browse {
  padding-block: var(--space-5) var(--space-8);
}

/* Height of the pane's back bar, which the frozen organiser header hangs
   below. Derived from the very tokens that build the bar, so it is right
   before any JS runs; meetupBrowser.js then overrides it with a measured
   value (inline style wins) to cover font-size and safe-area surprises. */
:root {
  --mu-pane-bar-h: calc(max(var(--space-2), env(safe-area-inset-top)) + 44px
                        + var(--space-2) + 1px);
}

/* The bar is display:none on desktop, so nothing sits above the header. */
@media (min-width: 900px) {
  :root { --mu-pane-bar-h: 0px; }
}

/* Where the detail pane comes to rest: under the navbar. The filter bar used
   to stay on screen too and the pane had to clear that as well; now that the
   bar scrolls away, only the navbar's height is in the offset. --header-h has
   a sane default, so this never depends on a measurement arriving in time —
   it did once, and the missing value dropped the pane behind the navbar. */
.mu-browse {
  --mu-filters-h: 62px;            /* 46px controls + 8px padding, top and bottom */
  --mu-stick: calc(var(--header-h, 72px) + var(--space-3));
}

.mu-browse__head {
  margin-bottom: var(--space-4);
}

.mu-browse__title {
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 1.9rem);
  margin-bottom: var(--space-3);
}






/* ---- filters: top of the list column ----
   They scroll away with the page. Pinned under the header they ate a band of
   a phone screen on every scroll, for controls a visitor touches once. */

.mu-browse__filters {
  background: var(--color-bg);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* Wider than a phone, the search and the selects share one row. */
/* One row, and deliberately a FIXED height: the detail pane sticks directly
   below this bar, so its offset has to be knowable in CSS. A bar that wrapped
   would change that offset and drop the pane behind it. */
@media (min-width: 560px) {
  .mu-browse__filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    block-size: var(--mu-filters-h);
  }

  .mu-browse__search { flex: 1 1 260px; margin-bottom: 0; min-width: 0; }
  .mu-browse__selects { flex: 0 1 auto; }
  .mu-count { margin: 0; margin-inline-start: auto; white-space: nowrap; flex: 0 0 auto; }
}

.mu-browse__search { margin-bottom: var(--space-2); }

/* Horizontal scroll rail. `overflow-x: auto` also computes overflow-y to
   `auto`, so the container clips on EVERY side — including a focused child's
   outline. Reserve the ring's width inside and pull it back out with a
   matching negative margin, so the ring shows and nothing shifts. */
/* No overflow container here any more: the facet panels open out of this row,
   and `overflow-x: auto` would clip them (it also forces overflow-y to auto).
   Three compact buttons fit without scrolling, even at 320px. */
.mu-browse__selects {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.mu-input {
  font: inherit;
  font-size: 16px;              /* 16px stops iOS zooming the page on focus */
  min-height: 44px;             /* comfortable touch target */
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  max-width: 100%;
}

.mu-browse__selects .mu-input {
  flex: 0 0 auto;
  font-size: 0.9rem;
  min-height: 44px;             /* touch target; trimmed on fine pointers below */
  padding-block: 0.35rem;
}

@media (hover: hover) and (pointer: fine) {
  .mu-browse__selects .mu-input { min-height: 38px; }
}

.mu-input--search { width: 100%; }

.mu-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Kept compact: on a phone this bar is pinned under the header, so every
   pixel it takes is a pixel of results the user cannot see. */
.mu-count {
  color: var(--color-ink-muted);
  font-size: 0.75rem;
  margin: 0.35rem 0 0;
}

/* ---- checkbox facets --------------------------------------------------- */

.mu-facet {
  position: relative;
  flex: 0 0 auto;
}

.mu-facet__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .mu-facet__button { min-height: 38px; }
  .mu-facet__button:hover { border-color: var(--color-primary); }
}

.mu-facet__button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* A facet with something chosen reads as active at a glance. */
.mu-facet.is-filtered .mu-facet__button {
  border-color: var(--color-primary);
  background: var(--color-primary-soft, var(--color-surface-2));
  font-weight: var(--weight-semibold);
}

.mu-facet__badge {
  display: none;
  min-inline-size: 20px;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: var(--weight-bold);
  text-align: center;
  line-height: 1.5;
}

.mu-facet__badge.is-on { display: inline-block; }

.mu-facet__caret { font-size: 0.7rem; opacity: 0.7; }
.mu-facet.is-open .mu-facet__caret { transform: rotate(180deg); }

/* The panel. Opens below the button; the bar does not clip it because nothing
   in the filter row establishes an overflow container. */
.mu-facet__panel {
  display: none;
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 20;
  min-inline-size: 220px;
  max-block-size: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
}

.mu-facet.is-open .mu-facet__panel { display: block; }

.mu-facet__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0.3rem var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  .mu-facet__option:hover { background: var(--color-surface-2); }
}

.mu-facet__check {
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.mu-facet__option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* On a phone the panel is a sheet pinned to the bottom: a 320px dropdown
   hanging off a button near the top of the screen is hard to reach. */
@media (max-width: 559.98px) {
  .mu-facet__panel {
    position: fixed;
    inset: auto 0 0 0;
    max-block-size: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-3) var(--space-4);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }

  .mu-facet__option { min-height: 46px; }
}

/* ---- the card list ---- */

/* Clear the filter bar's rule. The same --space-3 the pane keeps once it is
   stuck, so the gap does not change the moment the page starts scrolling. */
.mu-browse__split {
  margin-block-start: var(--space-3);
}

.mu-browse__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: 0 var(--space-3);
}

.mu-empty {
  text-align: center;
  color: var(--color-ink-muted);
  padding: var(--space-8) 0;
}

.mu-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mu-card:active { transform: scale(0.99); }

.mu-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.mu-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  background: var(--color-surface-2);
}

@media (hover: hover) and (pointer: fine) {
  .mu-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
}

.mu-card__thumb {
  flex: 0 0 auto;
  inline-size: 68px;
  block-size: 68px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}

.mu-card__thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.mu-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;                 /* lets long Persian titles wrap, not overflow */
  flex: 1;
}

.mu-card__title {
  font-weight: var(--weight-semibold);
  line-height: 1.55;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mu-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.mu-card__cat {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
}

.mu-chip {
  font-size: 0.72rem;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.mu-card.is-selected .mu-chip { background: var(--color-surface); }

.mu-chip--date {
  background: var(--color-primary-soft, var(--color-surface-2));
  border-color: transparent;
  color: var(--color-primary-deep, var(--color-ink));
  font-weight: var(--weight-semibold);
}

/* ---- organiser header on the event card ------------------------------- */

/* Who is running this, and the one action you can take — paired at the top so
   the CTA is on screen the moment the card opens. Wraps to two rows on a
   phone; the button then goes full width rather than squeezing beside a name. */
.mu-detail--pane .mu-detail__header {
  padding-top: var(--space-3);
}

.mu-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.mu-detail__org {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1 1 200px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-pill);
}

.mu-detail__org-photo {
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-2);
  display: grid;
  place-items: center;
}

.mu-detail__org-photo--empty {
  background: var(--color-primary);
  color: #fff;
  font-weight: var(--weight-extra);
  text-transform: uppercase;
}

.mu-detail__org-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.4;
}

.mu-detail__org-label {
  font-size: 0.72rem;
  color: var(--color-ink-muted);
}

.mu-detail__org-name {
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .mu-detail__org:hover .mu-detail__org-name { color: var(--color-primary); }
}

.mu-detail__org:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The one action you can take closes the page: by then the reader knows what
   the event is. On a phone it stays pinned to the bottom edge, so the decision
   is always one tap away however long the crawled description runs. */
.mu-detail__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  /* Pinned to the bottom of whatever scrolls the event — the page on a phone,
     the pane on a desktop — so the action never scrolls out of reach. */
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: var(--color-bg);
  margin-block-start: var(--space-4);
  padding-block: var(--space-3);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
}

.mu-detail__action { white-space: nowrap; }

.mu-detail__cta-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  text-align: center;
}

@media (max-width: 899.98px) {
  .mu-detail__action { display: block; width: 100%; text-align: center; }
}

/* ---- organiser label on a card ---------------------------------------- */

/* The card is a container, not a link. Its title anchor stretches an invisible
   overlay across the whole card so the card stays one tap target, and the
   organiser link is raised above that overlay so it stays independently
   clickable — legal HTML, unlike an anchor nested in an anchor. */
.mu-card { position: relative; }

.mu-card__title { margin: 0; font-size: 0.95rem; }

.mu-card__link {
  color: inherit;
  text-decoration: none;
}

.mu-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mu-card__link:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.mu-card__org {
  position: relative;      /* lifts it out of the stretched overlay */
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  align-self: flex-start;
  max-width: 100%;
  margin-top: 0.15rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  font-size: 0.72rem;
  color: var(--color-ink-muted);
  text-decoration: none;
  min-height: 30px;
}

.mu-card__org-label { flex: 0 0 auto; opacity: 0.8; }

.mu-card__org-name {
  font-weight: var(--weight-semibold);
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .mu-card__org:hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
  }
}

.mu-card__org:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.mu-card--past .mu-card__org-name { color: var(--color-ink-muted); }

/* ---- detail pane: a full-screen sheet on phones ---- */

.mu-browse__pane {
  position: fixed;
  /* Starts below the navbar, which is sticky at z-index 200 and therefore
     paints over this sheet however high its own stacking goes. Pinned to 0 the
     sheet's first 64px sat behind it, and what lives in those 64px is the back
     button — the only way out of a full-screen sheet. It was not merely hard
     to see: elementFromPoint returned the navbar, so the tap never reached it.
     Insetting the sheet also keeps site navigation available from the sheet. */
  inset: var(--navbar-h-mobile, 64px) 0 0 0;
  z-index: 60;
  background: var(--color-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  visibility: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* The slide-up belongs to the phone sheet only. Scoped here so that crossing
   the 900px breakpoint swaps layouts instantly instead of animating the pane
   into place on a window resize. */
@media (max-width: 899.98px) {
  .mu-browse__pane {
    transition: transform 0.26s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.26s;
  }
}

body.mu-sheet-open .mu-browse__pane {
  transform: translateY(0);
  visibility: visible;
}

/* Freeze the list behind the sheet so it does not scroll under the finger. */
body.mu-sheet-open { overflow: hidden; }

.mu-pane__bar {
  position: sticky;
  /* Zero is right: the pane is the scroll container, and --mu-pane-bar-h — the
     offset the frozen organiser header hangs from — is measured from this
     bar's top edge. The navbar is kept clear by insetting the sheet itself. */
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  padding-top: max(var(--space-2), env(safe-area-inset-top));
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* Labelled, not just an arrow: this is the only way out of a full-screen
   sheet, so it should be unmistakable rather than a glyph to decode. */
.mu-pane__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-block-size: 44px;
  padding-inline: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-weight: var(--weight-semibold);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-ink);
  cursor: pointer;
  border-radius: var(--radius-pill);
}

.mu-pane__back-icon { font-size: 1.1rem; line-height: 1; }

.mu-pane__back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.mu-pane__back:active { background: var(--color-surface-2); }

/* The arrow points "back", which is the opposite way in each direction. */
[dir="ltr"] .mu-pane__back-icon { transform: scaleX(-1); }

.mu-pane__heading {
  font-weight: var(--weight-semibold);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mu-pane__body { padding: var(--space-4) var(--space-4) 0; }

.mu-pane__empty {
  display: none;                /* nothing to show on a phone until you tap */
}

/* ---- detail content ---- */

.mu-detail__title {
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.8rem);
  line-height: 1.4;
  margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
}

.mu-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mu-detail__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  background: var(--color-surface-2);
}

.mu-detail__cover img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 320px;
  object-fit: cover;
}

.mu-detail__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
}

.mu-detail__facts dt { color: var(--color-ink-muted); }
.mu-detail__facts dd { margin: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }

.mu-detail__about h3,
.mu-detail__join h3,
.mu-detail__related h3 {
  font-size: 1rem;
  margin-block: var(--space-4) var(--space-2);
}

/* Crawled post text: paragraphs keep the author's soft line breaks, so the
   leading is tighter than prose would want — a stanza of short lines otherwise
   reads as a column of gaps. */
.mu-detail__about p,
.mu-detail__join p {
  line-height: 1.85;
  margin-block: 0 var(--space-3);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.mu-detail__about ul,
.mu-detail__join ul {
  list-style: disc;               /* base.css strips list markers globally */
  padding-inline-start: 1.15em;   /* logical: stays on the right in RTL */
  margin-block: 0 var(--space-3);
}

.mu-detail__about li,
.mu-detail__join li {
  line-height: 1.7;
  margin-block: 0.1rem;
  overflow-wrap: anywhere;
}

.mu-detail__about li::marker,
.mu-detail__join li::marker { color: var(--color-ink-muted); }

.mu-detail__about > :last-child,
.mu-detail__join > :last-child { margin-bottom: 0; }

.mu-detail__join {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-block: var(--space-4);
}

.mu-detail__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-bottom: var(--space-4);
}

.mu-detail__gallery img {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.mu-detail__related-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mu-related {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-ink);
}

.mu-related__title { font-weight: var(--weight-semibold); line-height: 1.5; }
.mu-related__date { font-size: 0.78rem; color: var(--color-ink-muted); }

.btn--block { display: block; width: 100%; text-align: center; }

.mu-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-3);
}

.mu-crumbs a { color: var(--color-ink-muted); text-decoration: none; }
.mu-crumbs a:hover { color: var(--color-primary); text-decoration: underline; }
.mu-crumbs__sep { opacity: 0.5; }

/* ---- expired events ---------------------------------------------------- */

/* Neutral, not alarming: an event being over is information, not an error. */
.mu-chip--past {
  background: var(--color-ink-muted);
  border-color: transparent;
  color: #fff;
  font-weight: var(--weight-semibold);
}

/* Muted, but the text stays at full contrast so it is still readable. */
.mu-card--past .mu-card__thumb { opacity: 0.55; }
.mu-card--past .mu-card__title { color: var(--color-ink-muted); }

.mu-card--past.is-selected .mu-card__thumb { opacity: 1; }

/* A disabled join button. Kept at the same size so the layout does not shift
   between an open and a finished event. */
.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-ink-muted);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  filter: none;
}

.btn:disabled:hover,
.btn[aria-disabled="true"]:hover {
  background: var(--color-surface-2);
  transform: none;
}

/* ---- /sources: the channel index -------------------------------------- */

.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
  align-content: start;
  /* One height for every row, not one per row: with rows sized to their own
     content, a two-line title made its row visibly taller than the one above
     it and the block read as a pile rather than a grid. */
  grid-auto-rows: 1fr;
}

/* Every card is the same shape: icon at the start, title on two lines at
   most, chips on the last line. Centring the content vertically instead
   let a one-line title and a two-line title put their chips at different
   heights, and a row of those reads as scattered however neat the grid is. */
.org-card {
  display: flex;
  gap: var(--space-3);
  align-items: stretch;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.org-card:active { transform: scale(0.99); }

.org-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .org-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-xs); }
}

.org-card__avatar {
  flex: 0 0 auto;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-2);
  display: grid;
  place-items: center;
}

/* Fallback initial, for a channel whose avatar was never downloaded. */
.org-card__avatar--empty {
  background: var(--grad-primary, var(--color-primary));
  color: #fff;
  font-size: 1.2rem;
  font-weight: var(--weight-extra);
  text-transform: uppercase;
}

.org-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.org-card__name {
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  overflow-wrap: anywhere;
  /* Two lines, then an ellipsis: crawled titles run to a paragraph, and one
     long one used to set the height of its whole row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.org-card__handle {
  font-size: 0.8rem;
  color: var(--color-ink-muted);
  overflow-wrap: anywhere;
}

.org-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  /* Pinned to the bottom of the card, so the chips line up across a row
     whether the title above them took one line or two. */
  margin-block-start: auto;
  padding-block-start: 0.35rem;
}

/* The icon keeps to the top rather than drifting to the middle of a tall
   card, which is what made two neighbours look misaligned. */
.org-card__avatar { align-self: flex-start; }

/* Event shelves come in sixes and twelves: three across divides both, so the
   last row is never a pair of cards trailing under an empty half-row. */
@media (min-width: 640px) {
  .org-grid--shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .org-grid--shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==================================================================== */
/* Desktop: the two-pane split.                                          */
/* ==================================================================== */

@media (min-width: 900px) {
  .mu-browse__split {
    display: grid;
    grid-template-columns: minmax(330px, 380px) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }

  /* The list column comes first in the DOM, so RTL puts it on the right and
     LTR on the left — the reading-order side, either way. */
  /* The list column runs its natural length and the PAGE scrolls it — which
     is what gives the detail pane room to stay pinned beside it. Capping both
     columns at viewport height made the grid row exactly as tall as each of
     them, so neither had anywhere to travel and `sticky` silently did nothing:
     the whole split slid away together, and it meant two nested scrollbars. */
  .mu-browse__side {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .mu-browse__list {
    min-height: 0;
    /* Focus rings need room on the inline edges; the negative margin keeps
       the column width unchanged. */
    padding-inline: 4px var(--space-2);
    margin-inline: -4px 0;
  }

  /* Back to an in-flow pane; no sheet, no transform, no scroll lock.
     The inset resets MUST come before `top` — `inset-block` is a shorthand
     that includes it, so listing it after would wipe the offset out. */
  .mu-browse__pane {
    position: sticky;
    inset-inline: auto;
    inset-block: auto;
    top: var(--mu-stick, 80px);
    z-index: 1;
    max-height: calc(100vh - var(--mu-stick, 80px) - var(--space-4));
    transform: none;
    visibility: visible;
    /* Framed as a card. `overflow-y: auto` above clips to the padding box, so
       the rounded corners hold even while the detail scrolls inside. */
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
  }

  body.mu-sheet-open { overflow: auto; }

  .mu-pane__bar { display: none; }

  /* The pane is its own card on desktop, so the header matches it. */
  .mu-detail--pane .mu-detail__header {
    background: var(--color-surface);
    padding-top: var(--space-4);
  }
  .mu-pane__body { padding: var(--space-5) var(--space-5) 0; }

  /* The pinned action spans the card rather than sitting inside its padding,
     and takes the card's own surface and bottom corners — otherwise it reads
     as a floating strip with the card's background showing around it. */
  .mu-detail--pane .mu-detail__cta {
    background: var(--color-surface);
    margin-inline: calc(-1 * var(--space-5));
    padding-inline: var(--space-5);
    border-end-start-radius: var(--radius-xl);
    border-end-end-radius: var(--radius-xl);
  }

  .mu-pane__empty {
    display: grid;
    place-items: center;
    gap: var(--space-3);
    min-height: 40vh;
    text-align: center;
    color: var(--color-ink-muted);
    padding: var(--space-6);
  }

  .mu-pane__empty-icon { font-size: 2.2rem; }

  .mu-detail__cover img { max-block-size: 380px; }

  .mu-detail__related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .btn--block { display: inline-block; width: auto; min-width: 220px; }

}

@media (prefers-reduced-motion: reduce) {
  .mu-browse__pane { transition: none; }
}


/* ==========================================================================
   Category marquee — the home page's route into the meetups section
   ========================================================================== */

.cat-marquee {
  /* Bleeds past the container so cards enter and leave at the window edge
     rather than at a margin, which is what makes it read as a moving strip
     instead of a clipped row. */
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--space-4), calc(50vw - 50% + var(--space-4)));

  /* A real scroll container. The drift is JS writing scrollLeft, so a swipe,
     a trackpad, a drag and the arrow keys all move the same value the
     animation does — the visitor never fights it. */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;          /* smooth would fight per-frame writes */
  overscroll-behavior-x: contain; /* no back-navigation on a horizontal swipe */
  -webkit-overflow-scrolling: touch;
  cursor: grab;

  /* LTR on the clipping box too, not just the track: an RTL parent anchors an
     overflowing child to its right edge, which puts the strip's origin
     thousands of pixels off-screen and makes the geometry hard to reason
     about. The cards restore rtl for their own text. */
  direction: ltr;

  /* Fades the two ends so cards dissolve instead of being cut off. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);

  scrollbar-width: none;          /* the strip is its own affordance */
}

.cat-marquee::-webkit-scrollbar { display: none; }
.cat-marquee.is-dragging { cursor: grabbing; }
.cat-marquee.is-dragging .cat-card { pointer-events: none; }

.cat-marquee:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

.cat-marquee__track {
  display: flex;
  inline-size: max-content;
  /* No gap between the lanes. The loop wraps by exactly one lane width, so
     half the track must be exactly one lane; a gap here would make it a lane
     plus half a gap and the seam would jump. The lane's own trailing padding
     provides the spacing instead. */
}

.cat-marquee__lane {
  display: flex;
  gap: var(--space-4);
  flex: 0 0 auto;
  padding-inline-end: var(--space-4);   /* keeps the seam evenly spaced */
}

.cat-card {
  flex: 0 0 auto;
  inline-size: 15rem;
  min-block-size: 9.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-block-end: 4px solid var(--cat-accent, var(--color-primary));
  text-decoration: none;
  color: var(--color-ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.cat-card__label {
  font-size: 1.05rem;
  font-weight: var(--weight-extra);
  line-height: 1.7;
}

.cat-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cat-card__go { font-size: 1.1rem; color: var(--color-ink-muted); }
.cat-card__emoji { font-size: 1.7rem; line-height: 1; }

.cat-marquee__cta {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-5);
}

/* Accent cycle, so neighbouring cards never share an edge colour. Shared by
   the category strip and the city grid — both index the same six. */
.cat-marquee,
.city-grid { --cat-accent-1: #f59e0b; --cat-accent-2: #6366f1;
             --cat-accent-3: #10b981; --cat-accent-4: #ef4444;
             --cat-accent-5: #0ea5e9; --cat-accent-6: #a855f7; }

/* Reduced motion is handled in JS, which simply stops advancing the scroll —
   the strip stays fully scrollable by hand, so no category becomes
   unreachable. Nothing to disable here. */

@media (max-width: 599.98px) {
  .cat-card { inline-size: 12.5rem; min-block-size: 8.5rem; }
}


/* ==========================================================================
   City grid — "popular cities", the second route into the meetups section
   ========================================================================== */

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-4);
}

.city-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-ink);
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.city-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.city-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.city-card__art {
  display: grid;
  place-items: center;
  block-size: 7.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.city-card__art img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* The stand-in until real photographs exist: a tinted panel carrying the
   city's initial. It has to hold its own on a white section, which is why the
   colour lives here rather than on the card. */
.city-card__art--plain {
  background:
    radial-gradient(120% 100% at 50% 0%,
                    color-mix(in srgb, var(--city-accent) 26%, transparent),
                    color-mix(in srgb, var(--city-accent) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--city-accent) 22%, transparent);
}

.city-card__initial {
  font-size: 2.6rem;
  font-weight: var(--weight-extra);
  line-height: 1;
  color: color-mix(in srgb, var(--city-accent) 72%, var(--color-ink));
}

.city-card__name {
  font-weight: var(--weight-bold);
  font-size: 1rem;
}

.city-card__count {
  font-size: var(--text-sm, 0.85rem);
  color: var(--color-ink-muted);
  padding-block-end: var(--space-2);
}

@media (max-width: 599.98px) {
  .city-grid { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
  .city-card__art { block-size: 5.5rem; }
  .city-card__initial { font-size: 2rem; }
}

/* ==========================================================================
   /events/ hubs — server-rendered blocks below the browser (#app-hub)
   ========================================================================== */

.mu-hub .section__title { margin-block-end: var(--space-4); }
.mu-hub__prose { max-inline-size: 70ch; line-height: 2; color: var(--color-ink); }
.mu-hub__prose p + p { margin-block-start: var(--space-3); }
.mu-hub__up {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-block-start: var(--space-4);
}

/* The heading above a facet directory's card grid. Smaller than the page
   title above it, which is the h1 on these pages. */
.mu-index__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-block: 0 var(--space-4);
}

/* A hub section the reader opens (see _hub_fold in serve.py). The heading is
   the control, so it carries the pointer and the focus ring. */
.mu-hub--fold { padding-block: var(--space-6); }

.mu-fold__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;          /* Firefox draws its own marker without this */
  border-radius: var(--radius-lg);
}

.mu-fold__head::-webkit-details-marker { display: none; }

.mu-fold__head:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.mu-fold__head .section__title { margin-block-end: 0; }

/* A chevron drawn from a border, so it needs no glyph and no icon font, and
   turns to point down once the section is open. */
.mu-fold__mark {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  flex: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out);
  opacity: 0.6;
}

.mu-fold[open] .mu-fold__mark { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .mu-fold__mark { transition: none; }
}

.mu-fold__body { margin-block-start: var(--space-4); }

/* The expired-event banner: the page stays live, and says it is over. */
.mu-ended {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, #f59e0b 14%, var(--color-surface));
  border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
  font-weight: var(--weight-semibold);
}

/* Crawlable pagination. Only ever seen without JavaScript: main.js replaces
   the list with the full, streamed one. */
.mu-pagination {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: center; margin-block: var(--space-4);
}
.mu-pagination a, .mu-pagination span {
  min-inline-size: 2.5rem; padding: 0.45rem 0.8rem; text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  text-decoration: none; color: var(--color-ink);
}
.mu-pagination .mu-pagination__current {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.mu-pagination .mu-pagination__gap { border: 0; }

/* ==========================================================================
   Flurto — pages.css
   Page-level composition tweaks, decorative touches, motion utilities, print.
   Pages are targeted through <body data-page="…"> (read by js/main.js).
   ========================================================================== */

/* ==========================================================================
   1. ENTRANCE ANIMATION UTILITY
   .reveal is only hidden when the shell has added class="js" to <html>.
   With JS disabled (or blocked) every .reveal renders normally.
   ========================================================================== */
.reveal {
  --reveal-delay: 0ms;
  --reveal-shift: 18px;
}

html.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay);
  will-change: opacity, transform;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Gentle stagger for children of a revealed grid/list */
html.js .grid > .reveal:nth-child(2),
html.js .blog-grid > .reveal:nth-child(2) { --reveal-delay: 70ms; }
html.js .grid > .reveal:nth-child(3),
html.js .blog-grid > .reveal:nth-child(3) { --reveal-delay: 140ms; }
html.js .grid > .reveal:nth-child(4),
html.js .blog-grid > .reveal:nth-child(4) { --reveal-delay: 210ms; }
html.js .grid > .reveal:nth-child(5),
html.js .blog-grid > .reveal:nth-child(5) { --reveal-delay: 280ms; }
html.js .grid > .reveal:nth-child(6),
html.js .blog-grid > .reveal:nth-child(6) { --reveal-delay: 350ms; }

.reveal--fade  { --reveal-shift: 0px; }
.reveal--rise  { --reveal-shift: 32px; }

/* Motion-safe fallback: never trap content behind an animation. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   2. DECORATIVE TOUCHES
   ========================================================================== */

/* Soft, blurred organic wash behind alternating sections. */
.section--alt {
  overflow: hidden;
}

.section--alt::before {
  content: "";
  position: absolute;
  inset-block-start: -6%;
  inset-inline-end: -4%;
  z-index: 0;
  inline-size: clamp(180px, 26vw, 380px);
  aspect-ratio: 1;
  border-radius: var(--radius-blob-b);
  background: var(--grad-blob-b);
  opacity: 0.18;
  filter: blur(24px);
  pointer-events: none;
}

.section--alt > * {
  position: relative;
  z-index: var(--z-base);
}

/* A tiny coral "smile" under section titles — pure decoration. */
.section__head .section__title::after {
  content: "";
  display: block;
  inline-size: 3.25rem;
  block-size: 4px;
  margin-block-start: var(--space-4);
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background: var(--grad-primary);
}

/* Optional utility: a full-width soft divider between two flat sections. */
.divider-soft {
  block-size: 1px;
  border: 0;
  background: var(--grad-rule);
  margin-block: 0;
}

/* ==========================================================================
   3. SHARED PAGE UTILITIES  (small, additive — beyond the inventory)
   ========================================================================== */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.center-x {
  display: flex;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
  max-inline-size: var(--measure-short);
}

.narrow {
  max-inline-size: var(--container-narrow);
  margin-inline: auto;
}

.section__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem);
}

/* ==========================================================================
   4. PAGE: HOME
   ========================================================================== */
body[data-page="home"] .hero {
  padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* Steps read as a numbered journey — connect them on wide screens. */
@media (min-width: 900px) {
  body[data-page="home"] .grid--3 > .step + .step::before {
    content: "";
    position: absolute;
    inset-block-start: calc(clamp(1.4rem, 1rem + 1.2vw, 2rem) + 1.75rem);
    inset-inline-start: calc(-1 * var(--gap-grid) - 1px);
    inline-size: var(--gap-grid);
    block-size: 2px;
    background: var(--grad-rule);
  }
}

body[data-page="home"] .hero__stats .stat__value {
  color: var(--color-primary-deep);
}

/* ==========================================================================
   5. PAGE: FEATURES
   ========================================================================== */
body[data-page="features"] .section:nth-of-type(even) .section__head {
  margin-inline: auto;
}

body[data-page="features"] .feature-card ul,
body[data-page="features"] .card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

body[data-page="features"] .feature-card li,
body[data-page="features"] .card li {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--text-base);
  color: var(--color-ink-muted);
}

body[data-page="features"] .feature-card li::before,
body[data-page="features"] .card li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  color: var(--color-sage-700);
  font-weight: var(--weight-bold);
  line-height: inherit;
}

/* ==========================================================================
   6. PAGE: MEETUPS
   ========================================================================== */
body[data-page="meetups"] .event-card__cover {
  min-block-size: clamp(140px, 20vw, 180px);
}

body[data-page="meetups"] .section--alt .step {
  background: var(--color-surface);
}

/* Host-a-meetup call-out block */
body[data-page="meetups"] .card--host,
body[data-page="meetups"] .host-callout {
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  background: linear-gradient(150deg, var(--color-peach-tint) 0%, var(--color-lavender-tint) 100%);
  border-color: transparent;
  border-radius: var(--radius-2xl);
  padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
}

/* ==========================================================================
   7. PAGE: SAFETY
   ========================================================================== */
body[data-page="safety"] .pillar {
  border-start-start-radius: var(--radius-2xl);
  border-end-end-radius: var(--radius-2xl);
  border-start-end-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

body[data-page="safety"] .pillar:nth-child(even) {
  border-start-start-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  border-start-end-radius: var(--radius-2xl);
  border-end-start-radius: var(--radius-2xl);
}

/* Commitment statement reads like a promise, not a legal notice. */
body[data-page="safety"] .commitment,
body[data-page="safety"] .section--alt .narrow p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
}

/* ==========================================================================
   8. PAGE: ABOUT
   ========================================================================== */
body[data-page="about"] .value-card:nth-child(4n + 1) { background: linear-gradient(170deg, var(--color-surface), var(--color-coral-tint)); }
body[data-page="about"] .value-card:nth-child(4n + 2) { background: linear-gradient(170deg, var(--color-surface), var(--color-peach-tint)); }
body[data-page="about"] .value-card:nth-child(4n + 3) { background: linear-gradient(170deg, var(--color-surface), var(--color-lavender-tint)); }
body[data-page="about"] .value-card:nth-child(4n)     { background: linear-gradient(170deg, var(--color-surface), var(--color-sage-tint)); }

body[data-page="about"] .mission,
body[data-page="about"] .narrow p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-plum-600);
}

/* ==========================================================================
   9. PAGE: BLOG INDEX
   ========================================================================== */
body[data-page="blog"] .hero--page {
  padding-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

body[data-page="blog"] .section {
  padding-block-start: var(--space-8);
}

/* First card gets a wider footprint on large screens — editorial feel. */
@media (min-width: 1000px) {
  body[data-page="blog"] .blog-grid > .post-card:first-child {
    grid-column: span 2;
  }

  body[data-page="blog"] .blog-grid > .post-card:first-child .post-card__cover {
    min-block-size: 230px;
    font-size: 4rem;
  }

  body[data-page="blog"] .blog-grid > .post-card:first-child .post-card__title {
    font-size: var(--text-2xl);
  }
}

/* ==========================================================================
   10. PAGE: SINGLE POST
   ========================================================================== */
body[data-page="post"] .post__header .badge,
body[data-page="post"] .post__header .post-card__category {
  margin-inline: 0;
  margin-block-start: 0;
}

body[data-page="post"] .post__body > :first-child {
  font-size: var(--text-lg);
  color: var(--color-ink);
}

/* Empty / not-found state */
.post--empty,
.post__notfound {
  max-inline-size: var(--measure);
  margin-inline: auto;
  padding-block: var(--space-11);
  text-align: center;
  color: var(--color-ink-muted);
}

/* ==========================================================================
   11. RESPONSIVE SAFETY NETS (375 / 768 / 1280 verified)
   ========================================================================== */
@media (max-width: 599.98px) {
  .hero__stats {
    gap: var(--space-6);
  }

  .stat {
    min-inline-size: 5.5rem;
  }

  .hero__ctas .btn {
    inline-size: 100%;
  }

  .footer__bottom {
    justify-content: flex-start;
  }

  .testimonial::before {
    font-size: 3.5rem;
  }
}

@media (max-width: 899.98px) {
  .hero__inner {
    justify-items: center;
    text-align: center;
  }

  .hero__title,
  .hero__subtitle {
    margin-inline: auto;
  }

  .hero__ctas,
  .hero__stats {
    justify-content: center;
  }

  .hero__art {
    order: -1;
    min-block-size: clamp(280px, 62vw, 420px);
  }
}

/* Very wide screens: keep the reading rhythm from stretching. */
@media (min-width: 1440px) {
  .hero__art {
    min-block-size: 540px;
  }
}

/* ==========================================================================
   12. PRINT
   ========================================================================== */
@media print {
  html.js .reveal,
  html.js .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .navbar,
  .navbar__burger,
  .lang-toggle,
  .cta-band,
  .footer,
  .skip-link,
  .hero__art,
  .blob,
  .phone-mock {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .section,
  .post {
    padding-block: 1rem;
  }

  .card,
  .feature-card,
  .event-card,
  .post-card,
  .step,
  .pillar,
  .testimonial,
  .value-card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}

/* Integration layer — pieces outside the design-system inventory.
   Loaded last; may rely on tokens.css variables. */

/* ---- feature card bullet points ---- */
.feature-card__points {
  margin-block-start: 0.9rem;
  padding-inline-start: 1.1rem;
  color: var(--color-ink-soft, #47548A);
  font-size: 0.95rem;
  line-height: 1.7;
}
.feature-card__points li::marker { color: var(--color-primary, #F5A31C); }

/* ---- prose block (about mission / commitments) ---- */
.prose { max-inline-size: 46rem; margin-inline: auto; text-align: center; }
.prose__text { margin-block-start: 1rem; }

/* ---- event-card gradient variants map onto the token gradient scale ---- */
.event-card__cover--g1 { background: var(--grad-1); }
.event-card__cover--g2 { background: var(--grad-2); }
.event-card__cover--g3 { background: var(--grad-3); }
.event-card__cover--g4 { background: var(--grad-4); }
.event-card__cover--g5 { background: var(--grad-5); }
.event-card__cover--g6 { background: var(--grad-6); }

/* ---- phone mockup internals (hero art) ---- */
.phone-mock__notch {
  inline-size: 38%;
  block-size: 14px;
  margin: 10px auto 4px;
  border-radius: 999px;
  background: rgba(31, 42, 86, 0.12);
}
.phone-mock__screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}
.pm-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 42, 86, 0.08);
}
.pm-profile__avatar {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  font-size: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD08A, #F7B440);
}
.pm-profile__lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pm-line { display: block; block-size: 8px; border-radius: 999px; background: #E8EBF4; }
.pm-line--w60 { inline-size: 60%; }
.pm-line--w40 { inline-size: 40%; }
.pm-verified {
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: #7fb685;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.pm-bubble {
  max-inline-size: 70%;
  padding: 8px 14px;
  border-radius: 16px;
  font-size: 15px;
  letter-spacing: 2px;
}
.pm-bubble--them {
  align-self: flex-start;
  background: #fff;
  border-end-start-radius: 4px;
  box-shadow: 0 3px 10px rgba(31, 42, 86, 0.07);
}
.pm-bubble--me {
  align-self: flex-end;
  background: #F5A31C;
  border-end-end-radius: 4px;
}
.pm-event {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 42, 86, 0.08);
}
.pm-event__emoji { font-size: 22px; }
.pm-event__lines { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.pm-event__lines strong {
  font-size: 12px;
  color: #1F2A56;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-event__lines small { font-size: 10px; color: #5A6489; }
.pm-event__tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: #FDEED3;
  color: #8F5B00;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- admin bar (WordPress-style, only when logged in as admin) ---- */
:root { --admin-bar-h: 36px; }
.admin-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  block-size: var(--admin-bar-h);
  background: #161F42;
  color: #E9EDF7;
  font-size: 13px;
  font-family: var(--font-body);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 10px rgba(0, 0, 0, 0.25);
}
.admin-bar__inner {
  display: flex;
  align-items: center;
  gap: 4px;
  block-size: 100%;
  padding-inline: 12px;
}
.admin-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 8px 12px;
  block-size: 100%;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
}
.admin-bar__brand:hover { background: rgba(255, 255, 255, 0.08); }
.admin-bar__dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--color-primary, #F5A31C);
  box-shadow: 0 0 0 3px rgba(245, 163, 28, 0.25);
}
.admin-bar__brand-sub {
  font-weight: 500;
  opacity: 0.7;
  font-size: 12px;
}
.admin-bar__links {
  display: flex;
  align-items: center;
  gap: 2px;
  block-size: 100%;
}
.admin-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: 100%;
  padding-inline: 12px;
  color: #E9EDF7;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.admin-bar__link:hover,
.admin-bar__link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}
.admin-bar__link--primary { color: #FFD08A; font-weight: 700; }
.admin-bar__right {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  block-size: 100%;
}
.admin-bar__hint { opacity: 0.55; font-size: 12px; }
.admin-bar__logout { color: #FFC46A; }

/* push the page (and sticky navbar) down by the bar height */
html.has-admin-bar body { padding-block-start: var(--admin-bar-h); }
html.has-admin-bar .navbar { inset-block-start: var(--admin-bar-h); }

/* per-section edit pill */
.is-editable { position: relative; }
.edit-pill {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #161F42;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0.35;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.is-editable:hover .edit-pill,
.edit-pill:focus-visible { opacity: 1; transform: translateY(-1px); }
.edit-pill:hover { background: var(--color-primary, #F5A31C); }
.hero .edit-pill { inset-block-start: 16px; }

@media (max-width: 720px) {
  .admin-bar__hint, .admin-bar__brand-sub { display: none; }
  .admin-bar__link { padding-inline: 8px; }
  .edit-pill__label { display: none; }
}
@media print { .admin-bar, .edit-pill { display: none !important; } }

/* ---- testimonial byline: gap + separator between name and city ---- */
.testimonial figcaption {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin-block-start: auto;
}
.testimonial figcaption .testimonial__detail::before {
  content: "·";
  margin-inline-end: 0.5em;
  color: var(--color-ink-muted, #5A6489);
}

/* ---- uploaded cover images ---- */
/* Event cards show the ENTIRE admin-cropped image at its own ratio — no
   second crop by the card box. Crop cards at the same ratio for an even grid. */
.event-card__cover--img {
  display: block;
  min-block-size: 0;
  background: none;
}
.event-card__cover--img img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.post-card__cover--img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* article header cover keeps the cropped image's own aspect ratio */
.post__cover-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 24px;
  margin-block-end: 1.5rem;
}

/* ---- post page extras ---- */
.post__cover {
  inline-size: 100%;
  block-size: 220px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 64px;
  margin-block-end: 1.5rem;
}

/* ---- html-mode blog posts (quick publish) ---- */
.post__body--html img, .post__body--html video { max-inline-size: 100%; block-size: auto; border-radius: 12px; }
.post__body--html table { display: block; inline-size: 100%; overflow-x: auto; border-collapse: collapse; }
.post__body--html td, .post__body--html th { border: 1px solid rgba(31, 42, 86, 0.15); padding: 8px 12px; }
.post__body--html pre { overflow-x: auto; background: rgba(31, 42, 86, 0.06); padding: 14px; border-radius: 12px; }

/* ---- brand logo image (navbar / footer) ---- */
.navbar__logo::before, .navbar__logo::after { display: none !important; content: none !important; }
.navbar__logomark { inline-size: 34px; block-size: auto; display: block; }
.footer__logo { display: inline-flex; align-items: center; gap: 10px; }
.footer__logo img { inline-size: 28px; block-size: auto; }

/* ---- hero phone: real app screenshot ---- */
/* inner radius = bezel radius (44px) minus bezel padding (11px) */
.phone-mock--shot .phone-mock__screen {
  padding: 0;
  display: block;
  overflow: hidden;
  border-radius: 33px;
  block-size: 100%;
}
.phone-mock__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ==========================================================================
   Flurto — aura.css
   Design layer. Loads last; consumes tokens.css only.

   THE IDEA (from the reference recording)
   The page is a single soft white card floating on warm ground. Photography
   carries the emotion; type stays dark, tight and quiet around it. Corners are
   pillowed, shadows are soft and low, cards tilt and overlap like objects on a
   table. Nothing is sharp, nothing is flat.

   MOTION follows Emil Kowalski's rules: strong custom ease-out (the built-in
   curves are too weak), everything under 300ms, transitions rather than
   keyframes so they can be interrupted, scale(0.97) press feedback, 40-60ms
   stagger, hover gated to real pointers, reduced-motion honoured.
   ========================================================================== */

/* ------------------------------------------------------- 0. the page card */
html { background: var(--color-white); }

/* The page runs edge to edge — no inset, no card, no tinted ground. */
body {
  background: var(--color-white);
  padding: 0;
}

.page-shell {
  background: var(--color-white);
  border-radius: 0;
  box-shadow: none;
}

/* ------------------------------------------------------------- 1. the nav */
/* Frosted by DEFAULT. The bar goes see-through only where there is a hero to
   float over — see the rule below. Defaulting the other way is how the page
   ended up scrolling visibly through it. */
.navbar {
  background: var(--surface-frost);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0;
  box-shadow: none;
  position: sticky;
}

/* Float over the hero — but only at the top of a page that HAS one, and only
   until the reader scrolls.
   The old selector was `.navbar:has(~ #app-main .hero)`, which never matched
   anything: #app-main is a sibling of #app-header, not of the .navbar inside
   it, so the sibling combinator had nothing to walk. Anchoring on the shared
   ancestor is what makes it actually match. */
.page-shell:has(#app-main .hero) .navbar:not(.navbar--scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar__link {
  position: relative;
  color: var(--color-ink-soft);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-pill);
  padding-inline: 0.85rem;
  transition: color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.navbar__link::after { content: none; }
@media (hover: hover) and (pointer: fine) {
  .navbar__link:hover { color: var(--color-ink); background: var(--blush); }
}
.navbar__link--active { color: var(--color-ink); font-weight: var(--weight-bold); background: var(--blush); }

/* ------------------------------------------------------------ 2. buttons */
.btn {
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  min-block-size: 46px;
  border: 0;
  /* Emil: name the properties, never `all` */
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
/* press feedback — the interface confirming it heard you */
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-ink-strong);
  box-shadow: var(--shadow-coral);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-coral-strong); transform: translateY(-1px); }
  .btn--primary:active { transform: scale(0.97); }
}

.btn--ghost {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-sm);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { box-shadow: 0 0 0 1px var(--color-ink), var(--shadow-md); transform: translateY(-1px); }
  .btn--ghost:active { transform: scale(0.97); }
}
.btn--light { box-shadow: var(--shadow-md); }

/* -------------------------------------------------------- 3. section head */
/* Centred, with a small letterspaced eyebrow above — the reference's
   "MATCH YOUR LIFESTYLE" device. The eyebrow is the section's own subject. */
.section { padding-block: clamp(3rem, 2rem + 4.4vw, 6rem); }
.section--alt { background: var(--color-bg-alt); border: 0; }

.section__head {
  text-align: center;
  max-inline-size: 42rem;
  margin-inline: auto;
}
.section__head .section__title::before { content: none; }
.section__title { font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.section__subtitle { margin-inline: auto; text-align: center; color: var(--color-ink-muted); }
.section__cta { text-align: center; }

/* ------------------------------------------------------- 4. floating cards */
.feature-card,
.event-card,
.post-card,
.step,
.pillar,
.testimonial,
.value-card {
  background: var(--color-white);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover,
  .event-card:hover,
  .post-card:hover,
  .pillar:hover,
  .value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

.section--alt .feature-card,
.section--alt .step,
.section--alt .testimonial,
.section--alt .pillar { box-shadow: var(--shadow-xs); }

.feature-card__icon,
.pillar__icon {
  border-radius: var(--radius-md);
  background: var(--blush);
  border: 0;
}
.step__num {
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-ink-strong);
  box-shadow: var(--shadow-coral);
}

/* ------------------------------------------------------------- 5. the hero */
.hero {
  background: transparent;
  border: 0;
  padding-block: clamp(2rem, 1.4rem + 3vw, 4rem) clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}
.hero__badge {
  border-radius: var(--radius-pill);
  background: var(--blush);
  border: 0;
  color: var(--eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}
.hero__title { letter-spacing: -0.03em; font-weight: var(--weight-bold); }
.hero__title em { font-style: normal; font-weight: 700; color: var(--color-primary-deep); }

/* stats float as one soft tile, not a bordered strip */
.hero__stats {
  gap: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  overflow: clip;
}
.hero__stats .stat { flex: 1 1 0; padding: 1rem 1.1rem; border: 0; }
.hero__stats .stat + .stat { box-shadow: inset 1px 0 0 var(--color-border); }
.stat__value { color: var(--color-ink); font-weight: var(--weight-bold); }

/* the phone tilts like an object resting on the page */
.hero__art .blob { display: none; }
.phone-mock {
  box-shadow: var(--shadow-xl);
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero__art:hover .phone-mock { transform: rotate(-1deg) translateY(-6px); }
}

/* --------------------------------------------------------- 6. photo tiles */
/* Photography is the emotion in this design, so covers get real height,
   pillowed corners and a gentle scale on hover. */
.event-card { overflow: clip; }
.event-card__cover,
.post-card__cover {
  border-radius: 0;
  border: 0;
  overflow: clip;
}
.event-card__cover--img img,
.post-card__cover { transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .event-card:hover .event-card__cover--img img { transform: scale(1.04); }
}
.post-card { overflow: clip; }
.post-card__category {
  border-radius: var(--radius-pill);
  background: var(--blush);
  color: var(--eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
}

/* ------------------------------------------------------------ 7. cta band */
.cta-band {
  background: var(--color-ink);
  border-radius: var(--radius-2xl);
  overflow: clip;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(245, 163, 28, 0.30), transparent 62%),
    radial-gradient(60% 100% at 100% 100%, rgba(245, 163, 28, 0.16), transparent 60%);
  background-size: auto;
}
.cta-band > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------- 8. article */
.post__cover-img, .post__cover { border-radius: var(--radius-xl); }
.post__back {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--blush);
  color: var(--eyebrow);
  font-weight: var(--weight-bold);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.post__back:active { transform: scale(0.97); }

/* -------------------------------------------------------------- 9. footer */
.footer {
  background: var(--color-ink);
  border: 0;
}
.footer__col h3 {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-on-dark-faint);
}

/* ------------------------------------------------------------- 10. motion */
/* One orchestrated entrance. Transition-based so a fast scroll can interrupt
   and retarget it instead of restarting from zero. */
html.reveal-on .reveal:not(.is-visible) .grid > *,
html.reveal-on .reveal:not(.is-visible) .blog-grid > * {
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.reveal .grid > *,
.reveal .blog-grid > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.reveal .grid > *:nth-child(2),  .reveal .blog-grid > *:nth-child(2)  { --i: 1; }
.reveal .grid > *:nth-child(3),  .reveal .blog-grid > *:nth-child(3)  { --i: 2; }
.reveal .grid > *:nth-child(4),  .reveal .blog-grid > *:nth-child(4)  { --i: 3; }
.reveal .grid > *:nth-child(5),  .reveal .blog-grid > *:nth-child(5)  { --i: 4; }
.reveal .grid > *:nth-child(6),  .reveal .blog-grid > *:nth-child(6)  { --i: 5; }

/* Reduced motion: keep the fade (it aids comprehension), drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .reveal .grid > *,
  .reveal .blog-grid > * { transform: none; transition-duration: 200ms; transition-delay: 0ms; }
  .phone-mock, .btn, .feature-card, .event-card, .post-card { transition: none; }
}

/* -------------------------------------------------------------- 11. a11y */
:focus-visible {
  outline: var(--focus-width) solid var(--color-ink);
  outline-offset: var(--focus-offset);
}

@media (max-width: 860px) {
  .hero__stats .stat { padding: 0.8rem 0.55rem; }
}

/* admin bar coexists with the page inset (it sets padding-block-start alone) */
html.has-admin-bar body { padding-block-start: var(--admin-bar-h); }

@media (prefers-reduced-motion: reduce) {
  .phone-mock { transition: none; }
}