/*! FZM* theme styles — compiled from the FZM* Design System.
   Tokens + base reset + site components (topbar + right-side menu panel).
   Generated: edit the design system sources, then re-export. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Roboto+Mono:wght@400;500&display=swap');

/* ===== tokens: colors ===== */
/* FZM* — Color tokens
   Dark-Academia feminist palette: warm parchment neutrals, deep aubergine
   surfaces, muted feminist purple as the brand, warm taupe + antique brass
   as accents. Derived from the team's Dark Academia moodboard. */

:root {
  /* ---- Raw neutral ramp: warm parchment → ink ------------------ */
  --paper-0:  #F6F3EE;   /* page background, warm parchment        */
  --paper-1:  #EFEAE1;   /* sunken / alternating sections          */
  --paper-2:  #E5DDD1;   /* deeper parchment, wells                */
  --paper-raised: #FCFAF6; /* cards / raised surfaces (warm white) */
  --sand-300: #D9D0C2;   /* hairline borders                       */
  --sand-400: #C4B8A8;   /* strong borders                         */

  /* ---- Brand purples (feminist heritage, dark-academia tone) --- */
  --plum-950: #181617;   /* near-black ink (warm-neutral)          */
  --plum-900: #20182A;   /* deepest aubergine                      */
  --plum-850: #271B33;   /* aubergine — primary dark surface       */
  --plum-800: #33244A;   /* raised dark surface                    */
  --plum-700: #3E2B52;   /* hover on dark                          */
  --plum-600: #49305A;   /* BRAND — muted purple                   */
  --plum-500: #5C4470;   /* brand hover-light / on-dark fill       */
  --mauve-400:#645568;   /* mauve-grey                             */
  --mauve-300:#897B92;   /* light mauve (muted accents)            */
  --mauve-200:#B6A9BE;   /* on-dark muted text                     */
  --plum-100: #E7DEEE;   /* lavender wash (soft brand surface)     */
  --plum-50:  #F1EBF3;   /* faintest lavender                      */

  /* ---- Warm accents ------------------------------------------- */
  --taupe-600:#5F564C;   /* deep taupe                             */
  --taupe-500:#72685F;   /* warm taupe (secondary accent)          */
  --taupe-300:#A99E90;   /* light taupe                            */
  --taupe-100:#E9E3D8;   /* taupe wash                             */
  --brass-700:#7C6133;   /* antique brass, deep (AA on light/brass) */
  --brass-600:#A8854C;   /* antique brass — highlight accent       */
  --brass-300:#D8BE8C;   /* light brass                            */
  --brass-100:#EFE4CE;   /* brass wash                             */

  /* ---- Status (muted, harmonized with the palette) ------------ */
  --olive-600:#5C6A48;   /* success                                */
  --olive-100:#E6E7D6;
  --oxblood-600:#8C3B45; /* danger (oxblood)                       */
  --oxblood-100:#F1DEDD;
  --amber-600:#A8854C;   /* warning = brass                        */
  --amber-100:#F2E6CE;

  /* ================= SEMANTIC ALIASES ========================== */
  /* Surfaces */
  --surface-page:        var(--paper-0);
  --surface-sunken:      var(--paper-1);
  --surface-well:        var(--paper-2);
  --surface-card:        var(--paper-raised);
  --surface-raised:      var(--paper-raised);
  --surface-brand-soft:  var(--plum-100);
  --surface-warm-soft:   var(--taupe-100);
  --surface-brass-soft:  var(--brass-100);
  --surface-invert:      var(--plum-850);   /* aubergine          */
  --surface-invert-deep: var(--plum-950);   /* near-black         */
  --surface-invert-raised: var(--plum-800);

  /* Text */
  --text-strong:   var(--plum-950);
  --text-body:     #2C2530;
  --text-muted:    #6A5E72;
  --text-faint:    #6E6672;
  --text-accent:   var(--plum-600);
  --text-on-brand: var(--paper-0);
  --text-on-invert:        var(--paper-0);
  --text-on-invert-muted:  var(--mauve-200);
  --text-on-invert-faint:  #908599;
  --text-link:     var(--plum-600);
  --text-link-hover: var(--plum-800);

  /* Brand actions */
  --brand:         var(--plum-600);
  --brand-hover:   var(--plum-700);
  --brand-active:  var(--plum-850);
  --brand-contrast:var(--paper-0);
  --accent-brass:  var(--brass-600);
  --accent-brass-hover: var(--brass-700);
  --accent-brass-text:  #84683C;   /* deep brass for text/links on light (AA) */
  --accent-taupe:  var(--taupe-500);

  /* Borders & lines */
  --border:        var(--sand-300);
  --border-strong: var(--sand-400);
  --border-input:  #91887C;
  --border-brand:  var(--plum-600);
  --border-on-invert: rgba(246,243,238,0.16);
  --divider:       var(--sand-300);

  /* Focus */
  --focus-ring:    var(--plum-600);
  --focus-ring-on-invert: var(--brass-300);
}

/* ===== tokens: typography ===== */
/* FZM* — Typography tokens
   Two roles, mirroring the brand:
     · PRIMARY / display (Jost) — the wordmark's geometric sans. Thin and
       wide; used for display, headings, the lockup and tracked eyebrows.
     · SECONDARY / text (Roboto) — the brand's confirmed secondary face;
       carries body copy, UI, forms and navigation.
   The asterisk (*) is a brand glyph: in display contexts it is set in the
   accent (brass) colour. */

:root {
  /* Families */
  --font-display: 'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --font-sans:    'Jost', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --font-text:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, monospace;

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Type scale (rem @16px root) */
  --text-2xs:  0.6875rem; /* 11px micro-labels        */
  --text-xs:   0.75rem;   /* 12px                     */
  --text-sm:   0.8125rem; /* 13px                     */
  --text-base: 0.9375rem; /* 15px UI default          */
  --text-md:   1.0625rem; /* 17px body                */
  --text-lg:   1.25rem;   /* 20px lead                */
  --text-xl:   1.5rem;    /* 24px                     */
  --text-2xl:  1.9375rem; /* 31px                     */
  --text-3xl:  2.5rem;    /* 40px                     */
  --text-4xl:  3.25rem;   /* 52px                     */
  --text-5xl:  4.25rem;   /* 68px                     */
  --text-6xl:  5.75rem;   /* 92px                     */
  --text-7xl:  7.5rem;    /* 120px hero display       */

  /* Line-heights */
  --leading-none:    1;
  --leading-tight:   1.06;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.66;

  /* Letter-spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.26em;  /* eyebrow / tagline lockup (logo style) */

  /* ---- Semantic role shortcuts -------------------------------- */
  --display-font:  var(--font-display);
  --eyebrow-font:  var(--font-sans);
  --heading-font:  var(--font-display);
  --label-font:    var(--font-sans);
  --body-font:     var(--font-text);
}

/* ---- Optional helper classes (used by cards & kits) ---------- */
.fzm-display {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.fzm-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-accent);
}
.fzm-body {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* ===== tokens: spacing ===== */
/* FZM* — Spacing, radii, shadow, layout, motion tokens */

:root {
  /* ---- Spacing scale (4px base) ------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4   */
  --space-2:   0.5rem;   /* 8   */
  --space-3:   0.75rem;  /* 12  */
  --space-4:   1rem;     /* 16  */
  --space-5:   1.5rem;   /* 24  */
  --space-6:   2rem;     /* 32  */
  --space-7:   2.5rem;   /* 40  */
  --space-8:   3rem;     /* 48  */
  --space-9:   4rem;     /* 64  */
  --space-10:  5rem;     /* 80  */
  --space-11:  6.5rem;   /* 104 */
  --space-12:  8rem;     /* 128 */

  /* ---- Radii — elegant, restrained (dark-academia) ------------ */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---- Borders ------------------------------------------------ */
  --border-width: 1px;
  --border-width-thick: 1.5px;

  /* ---- Shadows — soft, warm, candle-low ----------------------- */
  --shadow-xs: 0 1px 2px rgba(39,27,51,0.05);
  --shadow-sm: 0 1px 2px rgba(39,27,51,0.06), 0 1px 1px rgba(39,27,51,0.04);
  --shadow-md: 0 4px 16px -4px rgba(39,27,51,0.13), 0 2px 6px -2px rgba(39,27,51,0.08);
  --shadow-lg: 0 18px 44px -14px rgba(24,22,23,0.24), 0 8px 18px -10px rgba(39,27,51,0.16);
  --shadow-xl: 0 36px 80px -24px rgba(24,22,23,0.34), 0 14px 30px -16px rgba(39,27,51,0.20);
  --shadow-focus: 0 0 0 3px rgba(73,48,90,0.26);
  --shadow-focus-brass: 0 0 0 3px rgba(168,133,76,0.30);

  /* ---- Layout ------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 820px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --gutter:       clamp(1.25rem, 4vw, 3.5rem); /* @kind spacing */
  --header-height: 76px;

  /* ---- Motion — quiet, considered ----------------------------- */
  --ease-standard: cubic-bezier(0.4, 0.1, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 0.84, 0.34, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.5, 0, 0.9, 0.4); /* @kind other */
  --duration-fast:   140ms; /* @kind other */
  --duration-normal: 240ms; /* @kind other */
  --duration-slow:   420ms; /* @kind other */
}

/* ===== base reset & element defaults ===== */
/* FZM* — Base layer: light reset + default element typography.
   Applied wherever styles.css is linked. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--text-link-hover); }

strong, b { font-weight: var(--weight-semibold); }

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

::selection { background: var(--plum-100); color: var(--plum-900); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The brand asterisk glyph */
.fzm-star { color: var(--accent-brass); font-weight: var(--weight-regular); }

/* ===== site components + shell ===== */
/* FZM* website kit — page + chrome styles (self-contained, uses DS tokens). */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.site { background: var(--surface-page); color: var(--text-body); font-family: var(--font-text); }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons (mirrors DS Button) ---------- */
.btn { --_bg: var(--brand); --_fg: var(--brand-contrast); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-text); font-weight: 600; letter-spacing:.01em; line-height: 1;
  border-radius: var(--radius-pill); border: 1.5px solid var(--_bd); background: var(--_bg);
  color: var(--_fg); cursor: pointer; white-space: nowrap; text-decoration: none;
  padding: 12px 24px; font-size: 15px; transition: background .14s, border-color .14s, color .14s, transform .14s; }
.btn:active { transform: translateY(1px); }
.btn .ph { font-size: 1.2em; }
.btn.sm { padding: 9px 17px; font-size: 13px; }
.btn.lg { padding: 15px 30px; font-size: 17px; }
.btn--primary:hover { --_bg: var(--brand-hover); }
.btn--primary:active { --_bg: var(--brand-active); }
.btn--secondary { --_bg: transparent; --_fg: var(--brand); --_bd: var(--brand); }
.btn--secondary:hover { --_bg: var(--surface-brand-soft); }
.btn--ghost { --_bg: transparent; --_fg: var(--text-strong); }
.btn--ghost:hover { --_bg: var(--surface-sunken); }
.btn--brass { --_bg: var(--accent-brass); --_fg: var(--plum-950); }
.btn--brass:hover { --_bg: var(--accent-brass-hover); --_fg: var(--paper-0); }
.btn--invert { --_bg: var(--paper-0); --_fg: var(--plum-900); }
.btn--invert:hover { --_bg: #fff; }

/* ---------- Eyebrow ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-sans);
  font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: var(--text-accent); line-height: 1; }
.eyebrow .star { color: var(--accent-brass); letter-spacing: 0; }
.eyebrow .rule { width: 30px; height: 1.5px; background: currentColor; opacity: .5; }
.eyebrow.on-invert { color: var(--brass-300); }

/* ---------- Tags ---------- */
.tag { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-text);
  font-weight: 600; font-size: 12.5px; letter-spacing:.02em; line-height: 1; padding: 6px 12px;
  border-radius: var(--radius-pill); border: 1px solid transparent; cursor: default; }
.tag--brand { background: var(--surface-brand-soft); color: var(--plum-700); }
.tag--taupe { background: var(--taupe-100); color: var(--taupe-600); }
.tag--brass { background: var(--brass-100); color: var(--brass-700); }
.tag--outline { background: transparent; color: var(--text-body); border-color: var(--border-strong); }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.is-toggle { cursor: pointer; transition: background .14s, color .14s, border-color .14s; }
.tag.is-toggle[aria-pressed="true"] { background: var(--brand); color: var(--brand-contrast); border-color: var(--brand); }

/* ---------- App shell: full-width canvas + sticky topbar + slide-in panel ---------- */
:root { --panel-w: 380px; }
.shell { background: var(--surface-page); color: var(--text-body); font-family: var(--font-text); }

/* Sticky top bar — logo left, language + abbreviated menu trigger right */
.topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  height: 74px; padding: 0 max(var(--gutter), calc((100% - 1400px) / 2)); background: color-mix(in srgb, var(--paper-0) 84%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); box-sizing: border-box; }
.topbar__logo { display: inline-flex; cursor: pointer; }
.topbar__logo img { height: 30px; }
.topbar__right { display: flex; align-items: center; gap: 16px; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--surface-invert); color: var(--paper-0); border: 0; border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 18px; transition: background .14s, transform .14s; }
.menu-btn:hover { background: var(--brand); }
.menu-btn:active { transform: translateY(1px); }
.menu-btn .ph { font-size: 18px; }

/* Language switch (light topbar variant) */
.langswitch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; }
.langswitch button { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing:.08em;
  padding: 7px 11px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.langswitch button.active { background: var(--brand); color: var(--paper-0); }

/* Slide-in panel (from the right) */
.panel-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(24,22,23,.5); backdrop-filter: blur(2px);
  animation: fzmScrimIn .2s var(--ease-out); }
.panel { position: fixed; top: 0; right: 0; width: var(--panel-w); max-width: 100vw;
  height: 100vh; z-index: 61; display: none; flex-direction: column; padding: 26px 28px;
  background: var(--surface-invert); color: var(--text-on-invert); border-left: 1px solid var(--border-on-invert);
  box-shadow: var(--shadow-xl); }
.panel.is-open { display: flex; animation: fzmPanelIn .26s var(--ease-out); }
@keyframes fzmPanelIn { from { transform: translateX(28px); } to { transform: translateX(0); } }
@keyframes fzmScrimIn { from { opacity: 0; } to { opacity: 1; } }
.panel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.panel__logo { height: 34px; cursor: pointer; }
.panel__close { background: transparent; border: 0; color: var(--text-on-invert-muted); font-size: 26px; cursor: pointer; transition: color .14s; }
.panel__close:hover { color: var(--brass-300); }
.panel__nav { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; flex: 1; margin: 0 -8px; padding: 0 8px; }
.panel__foot { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; margin-top: 10px; border-top: 1px solid var(--border-on-invert); }
.panel__donate { justify-content: center; }
.panel__foot .btn--secondary { --_fg: var(--brass-300); --_bd: var(--border-on-invert); }
.panel__foot .btn--secondary:hover { --_bg: rgba(246,243,238,.06); }
.panel__social { display: flex; gap: 10px; margin-top: 6px; }
.panel__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-on-invert);
  display: flex; align-items: center; justify-content: center; color: var(--text-on-invert-muted); font-size: 18px; cursor: pointer; transition: .14s; }
.panel__social a:hover { color: var(--plum-900); background: var(--brass-300); border-color: var(--brass-300); }

/* Nav items (shared by panel) */
.side__group { display: flex; flex-direction: column; }
.side__item-row { display: flex; align-items: center; }
.side__item { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.005em;
  color: var(--text-on-invert); text-decoration: none; cursor: pointer; padding: 9px 8px; border-radius: var(--radius-sm);
  transition: color .14s; }
.side__item:hover, .side__item.active { color: var(--brass-300); }
.side__caret { background: transparent; border: 0; color: var(--text-on-invert-faint); cursor: pointer; font-size: 17px;
  padding: 6px; display: flex; transition: transform .2s, color .14s; }
.side__caret:hover, .side__caret.is-open { color: var(--brass-300); }
.side__caret.is-open { transform: rotate(180deg); }
.side__sub { display: flex; flex-direction: column; padding: 2px 0 8px 8px; margin-left: 6px; border-left: 1px solid var(--border-on-invert); }
.side__subitem { font-family: var(--font-text); font-weight: 400; font-size: 15px; color: var(--text-on-invert-muted);
  text-decoration: none; cursor: pointer; padding: 8px 10px; border-radius: var(--radius-sm); transition: color .14s, background .14s; }
.side__subitem:hover { color: var(--paper-0); background: rgba(246,243,238,.05); }

/* Canvas = full-width content flow (document scrolls normally; WP admin bar must not create a nested scrollbar). */
.canvas { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.canvas > main { flex: 1 0 auto; }
.admin-bar .canvas { min-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) { .admin-bar .canvas { min-height: calc(100vh - 46px); } }

/* ---------- Pillars divider band (replaces stats) ---------- */
.pillars-band { padding: var(--space-7) 0; }

/* ---------- Star separator ---------- */
.divider { display: flex; align-items: center; justify-content: center; gap: 24px; padding: var(--space-6) 0; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 0 1 200px; max-width: 22vw; background: var(--border-strong); }
.divider .star { font-family: var(--font-sans); font-weight: 300; font-size: 30px; line-height: 1; color: var(--accent-brass); }
.section.divider-band { padding: var(--space-7) 0; }
.divider-band .divider { padding: 0; }
.section--invert .divider::before, .section--invert .divider::after { background: rgba(216, 190, 140, .4); flex-basis: 120px; }
.section--invert .divider .star { color: var(--brass-300); font-size: 34px; }
.pillars { display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(14px, 3vw, 40px); }
.pillars .pillar { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: -.01em; color: var(--text-strong); }
.pillars .sep { color: var(--accent-brass); font-size: clamp(16px, 2vw, 24px); font-weight: 400; }

/* ---------- Sections ---------- */
.section { padding: var(--space-10) 0; }
.section--sunken { background: var(--surface-sunken); }
.section--invert { background: var(--surface-invert); color: var(--text-on-invert); }
.section--brass { background: var(--surface-brass-soft); }
/* Home warm-lavender scale — gentle deepening, never dark */
.section--brand-faint { background: var(--plum-50); }
.section--brand-soft { background: var(--surface-brand-soft); }
.section--warm-soft { background: var(--surface-warm-soft); }
.section__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: var(--space-7); }
.section__head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl);
  line-height: 1.06; letter-spacing: -.012em; color: var(--text-strong); margin: 0; }
.section--invert .section__title { color: var(--text-on-invert); }
.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--text-muted); margin: 0; }
.section--invert .lead { color: var(--text-on-invert-muted); }

/* ---------- Hero ---------- */
.hero { padding: var(--space-9) 0 var(--space-10); }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-9); align-items: center; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 5vw, var(--text-5xl));
  line-height: 1.0; letter-spacing: -.012em; color: var(--text-strong); margin: 20px 0 22px; }
.hero__title .star { color: var(--accent-brass); }
.hero__sub { font-size: var(--text-lg); line-height: 1.55; color: var(--text-muted); margin: 0 0 30px; max-width: 46ch; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Duotone image placeholders ---------- */
.ph-img { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--plum-850), var(--mauve-400) 60%, var(--taupe-500));
  display: flex; align-items: center; justify-content: center; }
.ph-img::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 75% 15%, rgba(216,190,140,.22), transparent 55%); }
.ph-img .ph { font-size: 40px; color: rgba(246,243,238,.5); position: relative; }
.ph-img .ph-note { position: absolute; bottom: 12px; left: 14px; font-family: var(--font-sans);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(246,243,238,.6); z-index: 1; }
.hero__media { aspect-ratio: 4/5; }
.hero__star { position: absolute; top: 18px; right: 22px; font-family: var(--font-sans); font-weight: 300;
  font-size: 64px; color: var(--brass-300); line-height: 1; z-index: 1; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.stat__n { font-family: var(--font-display); font-weight: 300; font-size: var(--text-4xl); line-height: 1; color: var(--text-strong); }
.stat__n .star { color: var(--accent-brass); }
.stat__l { font-size: 14.5px; color: var(--text-muted); }
.stat + .stat { border-left: 1px solid var(--border); padding-left: var(--space-6); }

/* ---------- Grids & cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: box-shadow .24s, transform .24s, border-color .24s; text-decoration: none; color: inherit; }
a.card { cursor: pointer; }
a.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--border-strong); }
.card__media { aspect-ratio: 3/2; }
.card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.14;
  letter-spacing: -.01em; color: var(--text-strong); margin: 0; }
.card__text { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.card__cta { margin-top: auto; padding-top: 4px; display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: 14px; color: var(--text-link); transition: gap .2s, color .2s; }
a.card:hover .card__cta { color: var(--accent-brass-text); gap: .75em; }
.card--icon .card__icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); background: var(--surface-brand-soft); color: var(--plum-600); font-size: 24px; margin-bottom: 4px; }

/* ---------- Manifesto / quote ---------- */
.manifesto { text-align: center; max-width: 900px; margin: 0 auto; }
.manifesto__q { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.4vw, var(--text-4xl));
  line-height: 1.16; letter-spacing: -.008em; color: var(--text-on-invert); margin: 18px 0 22px; }
.manifesto__q .star { color: var(--brass-300); }
.manifesto__by { font-family: var(--font-sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-invert-muted); }

/* ---------- Events ---------- */
.events { display: flex; flex-direction: column; }
.event { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--border); }
.event:last-child { border-bottom: 1px solid var(--border); }
.event__date { display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: var(--radius-md); background: var(--surface-brand-soft); }
.event__day { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--plum-700); }
.event__mon { font-family: var(--font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--plum-600); margin-top: 3px; }
.event__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--text-strong); margin: 0 0 4px; }
.event__meta { display: flex; gap: 16px; font-size: 13.5px; color: var(--text-muted); }
.event__meta span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.field label .req { color: var(--accent-brass-text); margin-left: 2px; }
.field input, .field textarea { font-family: var(--font-text); font-size: 15px; color: var(--text-body);
  background: var(--surface-card); border: 1.5px solid var(--border-input); border-radius: var(--radius-md);
  padding: 11px 14px; width: 100%; transition: border-color .14s, box-shadow .14s; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); }
.field textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.field .hint { font-size: 12.5px; color: var(--text-muted); }
.formcard { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.reassure { display: flex; flex-direction: column; gap: 18px; }
.reassure__item { display: flex; gap: 14px; align-items: flex-start; }
.reassure__ic { width: 42px; height: 42px; flex: none; border-radius: var(--radius-md); display: flex; align-items: center;
  justify-content: center; background: var(--surface-brass-soft); color: var(--brass-700); font-size: 22px; }
.reassure__t { font-family: var(--font-display); font-weight: 500; font-size: 18px; color: var(--text-strong); margin: 0 0 2px; }
.reassure__d { font-size: 14px; color: var(--text-muted); margin: 0; }
.success { text-align: center; padding: 26px 10px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.success .ph { font-size: 52px; color: var(--olive-600); }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6) var(--space-5); }
.member { display: flex; flex-direction: column; gap: 12px; }
.avatar { width: 100%; aspect-ratio: 1; border-radius: var(--radius-lg); }
.member__name { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--text-strong); margin: 4px 0 0; }
.member__role { font-size: 13.5px; color: var(--text-muted); }

/* Detailed profiles (founders / cooperation partners) */
.founders { display: flex; flex-direction: column; gap: var(--space-8); }
.founder { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-7); align-items: start; }
.founder__portrait { width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; }
.founder__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.1;
  letter-spacing: -.01em; color: var(--text-strong); margin: 0 0 4px; }
.founder__role { font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-brass); margin: 0 0 16px; }
.founder__bio { font-size: 16px; line-height: 1.72; color: var(--text-body); margin: 0; text-wrap: pretty; }
.founder__credit { display: block; margin-top: 14px; font-family: var(--font-sans); font-size: 12px;
  letter-spacing: .06em; color: var(--text-muted); }

/* ---------- Footer ---------- */
.ftr { background: var(--surface-invert-deep); color: var(--text-on-invert); padding: var(--space-10) 0 var(--space-7); margin: 0; width: 100%; position: relative; z-index: 1; left: 0; right: 0; }
.ftr > .wrap { margin-left: auto !important; margin-right: auto !important; float: none; }
.ftr__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--space-7) var(--space-8); padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--border-on-invert); align-items: start; }
.ftr__logo { height: 38px; margin: 0 0 26px; display: block; }
.ftr h4 { font-family: var(--font-sans); font-weight: 500; font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-300); margin: 0 0 26px; height: 38px; display: flex; align-items: center; }
.ftr__about { font-size: 18px; line-height: 1.7; color: var(--text-on-invert-muted); max-width: 34ch; }
.ftr__legal { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; font-size: 15px; line-height: 1.55;
  color: var(--text-on-invert-faint); max-width: 40ch; }
.ftr__legal strong { color: var(--text-on-invert-muted); font-weight: 500; }
.ftr h4 { /* merged into header-row rule above */ }
.ftr__col { display: flex; flex-direction: column; gap: 15px; }
.ftr__col a, .ftr__addr { color: var(--text-on-invert-muted); text-decoration: none; font-size: 18.5px; line-height: 1.6; }
.ftr__col a:hover { color: var(--paper-0); }
.ftr__social { display: flex; gap: 14px; margin-top: 10px; }
.ftr__social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-on-invert);
  display: flex; align-items: center; justify-content: center; color: var(--text-on-invert-muted); font-size: 20px; transition: .14s; }
.ftr__social a:hover { color: var(--plum-900); background: var(--brass-300); border-color: var(--brass-300); }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-top: 28px; font-size: 16px; color: var(--text-on-invert-faint); }
.ftr__bottom a { color: var(--text-on-invert-faint); text-decoration: none; white-space: nowrap; }
.ftr__bottom > span { display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* ---------- Page hero (interior pages) ---------- */
.pagehero { padding: var(--space-9) 0 var(--space-7); }
.pagehero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-5xl); line-height: 1.0;
  letter-spacing: -.012em; color: var(--text-strong); margin: 16px 0 18px; }
.pagehero__title .star { color: var(--accent-brass); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-6); }

.two-col { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-9); align-items: start; }

/* ---------- Journal ---------- */
.card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card__date { font-family: var(--font-sans); font-size: 12px; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; }

.post-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--text-muted); }
.post-meta span { display: inline-flex; align-items: center; gap: 7px; }
.post-meta .ph { font-size: 1.15em; color: var(--accent-brass); }
.post-meta.on-invert { color: var(--text-on-invert-muted); }

/* Featured post */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center;
  text-decoration: none; color: inherit; cursor: pointer; border-radius: var(--radius-xl);
  border: 1px solid var(--border); background: var(--surface-card); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .24s, transform .24s, border-color .24s; }
.feature:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.feature__media { aspect-ratio: 5/4; height: 100%; border-radius: 0; }
.feature__body { display: flex; flex-direction: column; gap: 14px; padding: var(--space-7) var(--space-7) var(--space-7) 4px; }
.feature__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1.08;
  letter-spacing: -.012em; color: var(--text-strong); margin: 2px 0 0; }
.feature__excerpt { font-size: var(--text-lg); line-height: 1.55; color: var(--text-muted); margin: 0; }
.feature:hover .card__cta { color: var(--accent-brass-text); gap: .75em; }

/* Article */
.article-hero { padding: var(--space-9) 0 var(--space-6); }
.article-hero__inner { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.backlink { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; white-space: nowrap; font-family: var(--font-sans); font-weight: 500;
  font-size: 13px; letter-spacing: .04em; color: var(--text-muted); text-decoration: none; cursor: pointer; transition: color .14s, gap .2s; }
.backlink:hover { color: var(--accent-brass-text); gap: 11px; }
.backlink .ph { transform: scaleX(-1); }
.article__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); line-height: 1.05;
  letter-spacing: -.014em; color: var(--text-strong); margin: 0; }
.article__lead { font-size: var(--text-xl); line-height: 1.5; color: var(--text-muted); margin: 0; max-width: 60ch; }
.article__cover { aspect-ratio: 16/7; margin: var(--space-4) 0 var(--space-8); }

.article__body { max-width: 720px; }
.article__body > p { font-size: 17.5px; line-height: 1.75; color: var(--text-body); margin: 0 0 1.3em; text-wrap: pretty; }
.article__h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--text-2xl); line-height: 1.15;
  letter-spacing: -.01em; color: var(--text-strong); margin: 1.8em 0 .6em; }
.article__fig { aspect-ratio: 3/2; margin: var(--space-6) 0 var(--space-7); }

/* WordPress the_content() blocks inside an article */
.article__body :where(h2, h3) { font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  letter-spacing: -.01em; color: var(--text-strong); margin: 1.8em 0 .6em; }
.article__body h2 { font-size: var(--text-2xl); }
.article__body h3 { font-size: var(--text-xl); }
.article__body a { color: var(--text-link); }
.article__body ul, .article__body ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.article__body li { margin: .4em 0; line-height: 1.7; color: var(--text-body); }
.article__body img { border-radius: var(--radius-xl); }
.article__body figure { margin: var(--space-6) 0 var(--space-7); }
.article__body figcaption { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .04em;
  color: var(--text-muted); text-align: center; margin-top: 10px; }
.article__body blockquote { position: relative; margin: var(--space-7) 0; padding: 4px 0 4px 34px;
  border-left: 3px solid var(--accent-brass); }
.article__body blockquote p { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl);
  line-height: 1.28; letter-spacing: -.008em; color: var(--text-strong); margin: 0 0 12px; text-wrap: pretty; }
.article__body blockquote cite { font-family: var(--font-sans); font-style: normal; font-size: 12.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

.pullquote { position: relative; margin: var(--space-7) 0; padding: 4px 0 4px 34px; border-left: 3px solid var(--accent-brass); }
.pullquote__mark { position: absolute; top: -10px; left: 22px; font-family: var(--font-sans); font-weight: 300;
  font-size: 44px; line-height: 1; color: var(--brass-300); }
.pullquote p { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.28;
  letter-spacing: -.008em; color: var(--text-strong); margin: 0 0 12px; text-wrap: pretty; }
.pullquote cite { font-family: var(--font-sans); font-style: normal; font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); }

.article__share { display: flex; align-items: center; gap: 12px; margin-top: var(--space-8); padding-top: var(--space-6);
  border-top: 1px solid var(--border); }
.article__share span { font-family: var(--font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); margin-right: 4px; }
.article__share a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 18px; cursor: pointer; transition: .14s; }
.article__share a:hover { color: var(--brand-contrast); background: var(--brand); border-color: var(--brand); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .ftr__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
@media (max-width: 760px) {
  :root { --panel-w: 100vw; }
  .topbar { height: 64px; }
  .menu-btn__label { display: none; }
  .menu-btn { padding: 10px 12px; }
  .hero__grid, .two-col { grid-template-columns: 1fr; gap: var(--space-7); }
  .feature { grid-template-columns: 1fr; }
  .feature__media { aspect-ratio: 3/2; }
  .feature__body { padding: var(--space-5) var(--space-5) var(--space-6); }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .founder { grid-template-columns: 150px 1fr; gap: var(--space-5); }
  .event { grid-template-columns: 64px 1fr; }
  .event .btn { grid-column: 2; justify-self: start; }
  .ftr__top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }