/* ============================================================================================================
   Med&X Biomedical Forum page (EN /biomedical-forum and HR /hr/biomedical-forum), 20 Oct 2026.
   Linked after r3.css on those two pages only (published as /assets/forum/forum-page.css). The wing's own
   assets/forum.css and the page's inline <style> stay as they are; this file overrides by order.
   Colour (Alen 20 Oct 2026: bottle green with brass accents, option C + F of the colour sheets): bottle green #0b3226,
   brass #c9a962 for icons and rules on green, light brass #dcc898 for accent text on green (8.3 to 1). White on
   #0b3226 is 13 to 1. The Med&X logo on green is the white file.
   Type: Fraunces for titles of 22 px and up, Inter for text and every figure (tabular).
   Motion: none on entry and none on scroll. Expanders open with a short height change (forum-page.js), and Reduce
   Motion jumps. The site has no dark theme, so the page stays light, like every other medx.hr page.
   ============================================================================================================ */

.fm-page, .fnav, .fmob, .foot {
  --fm-green: #0b3226;          /* bottle green */
  --fm-green-deep: #07231a;     /* the same hue, darker: masthead text on white, hovers, the footer */
  --fm-green-lt: #c9a962;       /* brass: icons and rules on green, never small text (6.0 to 1) */
  --fm-on-green: #dcc898;       /* light brass: accent text on green, 8.3 to 1 */
  --fm-tint: rgba(11, 50, 38, .08);
  --fm-tint-2: rgba(11, 50, 38, .14);
  --fm-paper: #fbf9f6;
  --fm-paper-2: #f3efe9;
  --fm-ink: #15110f;
  --fm-ink-soft: #3a352f;
  --fm-mute: #6a625a;
  --fm-line: #e2dbd0;
  --fm-line-strong: #cbc1b2;
  --fm-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------- masthead, menu and footer on the Forum green */
.fnav { background: rgba(11, 50, 38, .97); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.brand .medx-logo { height: 30px; width: auto; }
.brand .brand-rule { height: 30px; background: rgba(255, 255, 255, .34); }
.brand .mk { color: #fff; }
.brand .mk em { color: var(--fm-on-green); }
.fnav-links a { color: rgba(255, 255, 255, .86); }
.fnav-links a::after { background: var(--fm-green-lt); }
@media (hover: hover) { .fnav-links a:hover { color: #fff; } }
.fnav-cta { color: #fff; border-color: rgba(255, 255, 255, .5); border-radius: var(--r-md, 14px) !important; }
@media (hover: hover) { .fnav-cta:hover { background: #fff; color: var(--fm-green-deep); border-color: #fff; } }
.fnav-enter { background: #fff; color: var(--fm-green-deep); border-color: #fff; border-radius: var(--r-md, 14px) !important; }
@media (hover: hover) { .fnav-enter:hover { background: #f4eedf; border-color: #f4eedf; } }
.fnav :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.fnav-home { color: rgba(255, 255, 255, .86); }
.fnav-burger span { background: #fff; }
.fmob a.cta { color: var(--fm-green-deep); border-radius: var(--r-md, 14px); }
.fmob a.enter { background: var(--fm-green); border-radius: var(--r-md, 14px); }
.fmob .fmob-lang a.is-active { color: var(--fm-green); }
.fmob a.enter { margin-top: 24px; }
.fmob a.enter + a.cta, .fmob a.cta + a.cta { margin-top: 12px; }
/* one row everywhere: the live masthead wraps (the burger drops under the logo on a phone, the buttons under the logo at 1440) */
.fnav-in { flex-wrap: nowrap; }
/* fix round 1: the row is brand, links, then language and the two buttons. The inner width stops at 1240 px (.fnav-in is
   1320 px at most), so the row must fit there: links 24 px apart, 36 px from the last link to HR | EN (the row gap 28 plus 8),
   12 px between the actions. Measured at 1920: EN needs 1179 px, HR 1233 px. The links show from 1320 px, where the inner
   width reaches 1240 px. Below that the links hide and the buttons stay (the menu and the footer keep every link). */
.fnav-links { gap: 24px; margin-right: 8px; }
.fnav-actions { gap: 12px; }
@media (min-width: 1041px) and (max-width: 1319px) { .fnav-links { display: none; } .fnav-actions { margin-left: auto; } }
@media (max-width: 520px) {
  .fnav-in { padding-right: 14px; gap: 12px; }
  .brand { gap: 10px; min-width: 0; }
  .brand .medx-logo, .brand .brand-rule { height: min(24px, 5.4vw); }
  .brand .mk { font-size: min(20px, 4.6vw); white-space: nowrap; }
}

.foot { background: var(--fm-green-deep); }
.foot-logo { height: 30px; width: auto; }
.foot-brand .mk em { color: var(--fm-on-green); }
.foot-attr a { color: var(--fm-on-green); border-bottom-color: rgba(220, 200, 152, .45); }
.foot-col .tlink { color: var(--fm-on-green) !important; border-bottom-color: rgba(220, 200, 152, .45); }   /* the inline style is brass */

/* ---------------------------------------------------------------- the page */
.fm-page { color: var(--fm-ink); }
.fm-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 860px) { .fm-wrap { padding: 0 26px; } }
@media (max-width: 400px) { .fm-wrap { padding: 0 20px; } }
.fm-sec { padding: 96px 0; scroll-margin-top: 12px; }   /* the page's html already pads 80 px for the masthead */
@media (max-width: 860px) { .fm-sec { padding: 64px 0; } }
.fm-tinted { background: var(--fm-paper-2); }
.fm-page [id] { scroll-margin-top: 12px; }

.fm-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fm-nw { white-space: nowrap; }
.fm-fig { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.fm-page .fm-h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.06;
  letter-spacing: -.02em; margin: 0; color: var(--fm-ink); max-width: 20ch; }
.fm-sub { margin: 14px 0 0; font-size: 1.1rem; line-height: 1.55; color: var(--fm-ink-soft); max-width: 46ch; }
.fm-h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; margin: 56px 0 18px; color: var(--fm-ink); }
.fm-h4 { font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.4; margin: 22px 0 6px; color: var(--fm-ink); }
.fm-small { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--fm-mute); }

/* links and buttons */
.fm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; box-sizing: border-box;
  padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-md, 14px); font-family: var(--sans); font-size: 13px;
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--fm-ease), border-color .18s var(--fm-ease), color .18s var(--fm-ease), transform .12s var(--fm-ease); }
.fm-btn .fm-ico { width: 18px; height: 18px; }
.fm-btn .fm-arr { transition: transform .22s var(--fm-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .fm-btn:hover .fm-arr { transform: translateX(4px); } }
@media (prefers-reduced-motion: no-preference) { .fm-btn:active { transform: scale(.985); } }
.fm-btn-white { background: #fff; color: var(--fm-green-deep); border-color: #fff; }
@media (hover: hover) { .fm-btn-white:hover { background: #f4eedf; border-color: #f4eedf; } }
.fm-btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .62); }
@media (hover: hover) { .fm-btn-line:hover { background: rgba(255, 255, 255, .1); border-color: #fff; } }
.fm-btn-green { background: var(--fm-green); color: #fff; border-color: var(--fm-green); }
@media (hover: hover) { .fm-btn-green:hover { background: var(--fm-green-deep); border-color: var(--fm-green-deep); } }
.fm-tlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: var(--fm-green-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(11, 50, 38, .45); }
@media (hover: hover) { .fm-tlink:hover { text-decoration-color: var(--fm-green-deep); } }
.fm-page a:focus-visible, .fm-page summary:focus-visible { outline: 2px solid var(--fm-green); outline-offset: 3px; border-radius: 6px; }
.fm-hero a:focus-visible, .fm-enter a:focus-visible, .fm-enter summary:focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- 1. hero, on the Forum green */
.fm-hero { background: var(--fm-green); color: #fff; padding: 64px 0 0; }
.fm-hero-in { display: grid; gap: 36px; }
@media (min-width: 1024px) { .fm-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; } }
.fm-kicker { margin: 0; font-family: var(--sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.fm-hero h1 { margin: 18px 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 5vw, 4.3rem); line-height: 1.03;
  letter-spacing: -.025em; color: #fff; max-width: 15ch; }
.fm-hero h1 em { font-style: italic; color: var(--fm-on-green); }
.fm-lead { margin: 20px 0 0; font-size: 1.18rem; line-height: 1.55; color: rgba(255, 255, 255, .9); max-width: 36ch; }
.fm-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fm-hero-note { margin: 18px 0 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .84); max-width: 46ch; }
.fm-hero-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .6); white-space: nowrap; }
.fm-hero-photo { position: relative; margin: 0; border-radius: var(--r-lg, 20px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--fm-green-deep); }
.fm-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.fm-hero-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 14px; font-family: var(--sans); font-size: 12px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgba(7, 26, 20, .78), rgba(7, 26, 20, 0)); }
.fm-facts { list-style: none; margin: 48px 0 0; padding: 28px 0 40px; border-top: 1px solid rgba(255, 255, 255, .2);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.fm-facts li { display: flex; flex-direction: column; gap: 10px; }
.fm-fact-v { display: flex; align-items: center; min-height: 40px; color: var(--fm-on-green); }
.fm-fact-v .fm-ico { width: 34px; height: 34px; stroke-width: 1.4; }
.fm-fact-v.fm-fig { font-size: 34px; line-height: 1; color: #fff; }
.fm-fact-v.fm-fig-date { font-size: 26px; flex-wrap: wrap; column-gap: .26em; row-gap: 4px; }   /* day and month are two spans (the phone stacks them) */
.fm-fig-date .fm-d1, .fm-fig-date .fm-d2 { white-space: nowrap; }
@media (min-width: 761px) and (max-width: 1023px) { .fm-fact-v.fm-fig-date { font-size: 22px; } }   /* HR stays on one line in the 217 px column at 768 */
.fm-fact-t b { display: block; font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.35; color: #fff; }
.fm-fact-t span { display: block; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .8); }
@media (max-width: 760px) {
  .fm-hero { padding-top: 40px; }
  .fm-cta { flex-direction: column; }
  .fm-cta .fm-btn { width: 100%; }
  .fm-facts { grid-template-columns: 1fr; gap: 0; margin-top: 36px; padding: 4px 0 28px; }
  .fm-facts li { flex-direction: row; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  .fm-facts li:first-child { border-top: 0; }
  .fm-fact-v { flex: none; width: var(--fm-fact-col, 112px); min-height: 0; justify-content: center; }
  .fm-fact-v.fm-fig { font-size: 28px; }
  /* the date in two lines: the days as the figure, the month and year under it (fix round 1: it wrapped to 3 lines in HR) */
  .fm-fact-v.fm-fig-date { flex-direction: column; justify-content: center; gap: 4px; text-align: center; }
  .fm-fig-date .fm-d1 { display: block; font-size: 24px; line-height: 1; white-space: nowrap; }
  .fm-fig-date .fm-d2 { display: block; font-size: 13px; line-height: 1.2; font-weight: 600; letter-spacing: 0; white-space: nowrap; color: var(--fm-on-green); }
}

/* ---------------------------------------------------------------- 2. how to join: three stops */
@media (min-width: 1024px) {
  .fm-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
  .fm-split-head { grid-column: 1 / span 4; }
  .fm-split-body { grid-column: 5 / span 8; }
}
.fm-split-body { margin-top: 36px; }
@media (min-width: 1024px) { .fm-split-body { margin-top: 0; } }
.fm-route { list-style: none; margin: 0; padding: 0 0 0 58px; }
.fm-stop { position: relative; padding-bottom: 30px; }
.fm-stop:last-child { padding-bottom: 0; }
.fm-ring { position: absolute; left: -58px; top: -4px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box;
  background: var(--fm-green); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--sans);
  font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.fm-stop:not(:last-child)::after { content: ""; position: absolute; left: -39px; top: 36px; bottom: 0; width: 2px; background: var(--fm-tint-2); }
.fm-stop-t { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: -.01em; color: var(--fm-ink); }
.fm-stop p { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--fm-ink-soft); max-width: 34ch; }
@media (min-width: 760px) {
  .fm-route { padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .fm-stop { padding: 60px 0 0; }
  .fm-ring { left: 0; top: 0; }
  .fm-stop:not(:last-child)::after { left: 48px; right: -20px; top: 19px; bottom: auto; width: auto; height: 2px; }
}
.fm-row-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 36px; }
@media (max-width: 520px) { .fm-row-cta .fm-btn { width: 100%; } }

/* ---------------------------------------------------------------- expanders (details), one look everywhere */
.fm-fold { margin-top: 32px; border-top: 1px solid var(--fm-line); border-bottom: 1px solid var(--fm-line); }
.fm-fold + .fm-fold { margin-top: 0; border-top: 0; }
.fm-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px;
  box-sizing: border-box; padding: 14px 0; cursor: pointer; font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--fm-ink); -webkit-tap-highlight-color: transparent; }
.fm-fold > summary::-webkit-details-marker { display: none; }
.fm-plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--fm-line-strong); box-sizing: border-box;
  transition: border-color .18s var(--fm-ease), transform .32s var(--fm-ease); }
.fm-plus::before, .fm-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px;
  background: var(--fm-green); border-radius: 1px; transition: transform .32s var(--fm-ease), opacity .2s var(--fm-ease); }
.fm-plus::after { transform: rotate(90deg); }
.fm-fold[open] > summary .fm-plus::after { transform: rotate(0deg); opacity: 0; }
@media (hover: hover) { .fm-fold > summary:hover .fm-plus { border-color: var(--fm-green); } }
.fm-fold-body { padding: 0 0 24px; }
.fm-fold-body > p, .fm-fold-body > ul + p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--fm-ink-soft); max-width: 68ch; }
.fm-fold-body > p:last-child { margin-bottom: 0; }
.fm-fold-body .fm-btn { margin-top: 8px; }
.fm-list { list-style: none; margin: 0 0 14px; padding: 0; }
.fm-list li { position: relative; padding: 0 0 10px 20px; font-size: 16px; line-height: 1.6; color: var(--fm-ink-soft); max-width: 68ch; }
.fm-list li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--fm-green); }
.fm-list b { color: var(--fm-ink); font-weight: 600; }
.fm-list a, .fm-fold-body > p a { color: var(--fm-green-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fm-plus, .fm-plus::before, .fm-plus::after { transition: none; } }

/* ---------------------------------------------------------------- 3. who the Forum is for */
.fm-tiles { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .fm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .fm-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.fm-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
@media (min-width: 760px) { .fm-tiles li:last-child:nth-child(odd) { grid-column: auto; flex-direction: column; align-items: stretch; } }
.fm-tiles li { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 22px; background: #fff; border: 1px solid var(--fm-line);
  border-radius: var(--r-lg, 20px); font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--fm-ink); }
.fm-tile-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--fm-tint); color: var(--fm-green); flex: none; }
.fm-origin { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; font-size: 16px; line-height: 1.5; color: var(--fm-ink-soft); }
.fm-origin .fm-ico { color: var(--fm-green); width: 22px; height: 22px; }
.fm-asks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 900px) { .fm-asks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.fm-asks li { display: flex; gap: 14px; align-items: flex-start; }
.fm-ask-i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff;
  border: 1px solid var(--fm-line); color: var(--fm-green); flex: none; }
.fm-asks b { display: block; font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--fm-ink); }
.fm-asks li > span > span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--fm-ink-soft); }

/* ---------------------------------------------------------------- 4. what members get: today, soon */
.fm-now-soon { display: grid; gap: 18px; margin-top: 36px; align-items: start; }
@media (min-width: 900px) { .fm-now-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.fm-col { border-radius: var(--r-lg, 20px); padding: 26px 26px 22px; box-sizing: border-box; }
.fm-now { background: #fff; border: 1px solid var(--fm-line); box-shadow: 0 1px 2px rgba(20, 15, 12, .04), 0 10px 30px rgba(20, 15, 12, .05); }
.fm-soon { border: 1.5px dashed var(--fm-line-strong); }
.fm-col-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; font-family: var(--sans); font-size: 15px;
  font-weight: 600; line-height: 1.4; color: var(--fm-ink); }
.fm-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border-radius: 999px; background: var(--fm-green); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.fm-badge-soon { background: transparent; color: var(--fm-green-deep); border: 1px solid var(--fm-green); }
.fm-checks { list-style: none; margin: 0; padding: 0; }
.fm-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--fm-line); font-size: 16px; line-height: 1.45; color: var(--fm-ink); }
.fm-checks li:first-child { border-top: 0; }
.fm-checks .fm-ico { width: 20px; height: 20px; margin-top: 1px; color: var(--fm-green); stroke-width: 2; }
.fm-checks-soon li { color: var(--fm-ink-soft); border-top-style: dashed; }
.fm-checks-soon .fm-ico { color: var(--fm-mute); stroke-width: 1.6; }
.fm-now .fm-tlink { margin-top: 6px; }

/* ---------------------------------------------------------------- 5. the Forum's year: a timeline, the May card */
.fm-time { list-style: none; margin: 40px 0 0; padding: 0; }
.fm-tstop { position: relative; padding: 0 0 30px 32px; }
.fm-tstop::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--fm-green); background: var(--fm-paper-2); }
.fm-tstop:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 21px; bottom: 4px; width: 2px; background: var(--fm-tint-2); }
.fm-tstop-key::before { background: var(--fm-green); width: 14px; height: 14px; left: -1px; top: 26px; }
.fm-tstop-key { padding-bottom: 0; }
.fm-when { display: block; font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; color: var(--fm-green-deep); }
.fm-tstop > b { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: var(--fm-ink); }
.fm-tdesc { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--fm-ink-soft); max-width: 32ch; }
@media (min-width: 900px) {
  .fm-time { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); gap: 32px; align-items: start; }
  .fm-tstop { padding: 32px 0 0; }
  .fm-tstop::before { top: 0; left: 0; }
  .fm-tstop:not(:last-child)::after { left: 20px; right: -24px; top: 5px; bottom: auto; width: auto; height: 2px; }
  .fm-tstop-key::before { top: -1px; left: -1px; }   /* 14 px, centred on the 2 px line at 6 px */
}
.fm-card { background: #fff; border: 1px solid var(--fm-line); border-radius: var(--r-lg, 20px); padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(20, 15, 12, .04), 0 10px 30px rgba(20, 15, 12, .05); }
.fm-card .fm-when { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: var(--fm-ink); }
.fm-dow { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fm-mute); }
.fm-tag { margin: 14px 0 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fm-green-deep); }
.fm-card-t { margin: 4px 0 0; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: var(--fm-ink); }
.fm-kv { margin: 16px 0 14px; }
.fm-kv > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--fm-line); }
.fm-kv dt { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fm-mute); line-height: 22px; }
.fm-kv dd { margin: 0; font-size: 15px; line-height: 22px; color: var(--fm-ink); }
.fm-page .medx-cal .medx-cal-ico { stroke: var(--fm-green); }
.fm-page .medx-cal a { color: var(--fm-green-deep); }
.fm-fig-photo { margin: 18px 0 0; max-width: 640px; }
.fm-fig-photo img { width: 100%; height: auto; border-radius: var(--r-md, 14px); display: block; }
.fm-fig-photo figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--fm-mute); }

/* ---------------------------------------------------------------- 6. about the Forum */
.fm-pillars { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; }
.fm-pillars li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--fm-line); }
.fm-pillars li:first-child { border-top: 0; }
.fm-pillars b { font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--fm-ink); }
@media (min-width: 760px) {
  .fm-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .fm-pillars li { border-top: 0; padding: 0; }
}
.fm-folds { margin-top: 36px; max-width: 860px; }
.fm-folds .fm-fold:first-child { margin-top: 0; }
.fm-person { display: flex; align-items: center; gap: 16px; margin: 6px 0 8px; }
.fm-person img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex: none; }
.fm-person b { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--fm-ink); }
.fm-person span span { display: block; font-size: 15px; line-height: 1.45; color: var(--fm-ink-soft); }
.fm-oam { list-style: none; margin: 18px 0 0; padding: 0; }
.fm-oam li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--fm-line); }
.fm-oam b { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--fm-green-deep); }
.fm-oam span { font-size: 16px; line-height: 1.55; color: var(--fm-ink-soft); }
.fm-doc { display: flex; align-items: center; gap: 16px; margin-top: 36px; max-width: 640px; box-sizing: border-box; padding: 18px 20px;
  border-radius: var(--r-lg, 20px); border: 1px solid var(--fm-line); background: #fff; color: var(--fm-ink); text-decoration: none;
  transition: border-color .18s var(--fm-ease); }
@media (hover: hover) { .fm-doc:hover { border-color: var(--fm-green); } }
.fm-doc-i { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 12px;
  background: var(--fm-tint); color: var(--fm-green); }
.fm-doc-t b { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.fm-doc-t > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--fm-ink-soft); }
.fm-doc-t > .fm-doc-dl { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--fm-green-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(11, 50, 38, .45); }
.fm-doc-dl .fm-arr { display: inline-block; margin-left: 4px; transition: transform .22s var(--fm-ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .fm-doc:hover .fm-doc-dl .fm-arr { transform: translateY(2px); } }
.fm-doc-alt { margin: 12px 0 0; font-size: 15px; color: var(--fm-ink-soft); }
.fm-doc-alt a { color: var(--fm-green-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- 7. ask to be considered (the live form) */
.fm-page .consider { background: var(--fm-paper-2); }
.fm-page .consider .rc-grid.fm-rc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 0; }
.fm-rc-head .fm-sub { max-width: 34ch; }
.fm-page .consider .rc-aside { margin-top: -8px; }
@media (min-width: 1024px) {
  /* the same 12 columns as How to join: 4 for the heading and the mail line, 8 for the form */
  .fm-page .consider .rc-grid.fm-rc { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 40px; row-gap: 0; align-items: start; }
  .fm-rc-head { grid-column: 1 / span 4; grid-row: 1; }
  .fm-page .consider .rc-form-wrap { grid-column: 5 / span 8; grid-row: 1 / span 2; }
  .fm-page .consider .rc-aside { grid-column: 1 / span 4; grid-row: 2; margin-top: 28px; }
}
.fm-page .rc-form { border-radius: var(--r-lg, 20px) !important; border-color: var(--fm-line); }
.fm-page .rc-form label { color: var(--fm-green-deep); }
.fm-page .rc-form input, .fm-page .rc-form textarea { border-radius: var(--r-sm, 10px) !important; }
.fm-page .rc-form input:focus, .fm-page .rc-form textarea:focus { border-color: var(--fm-green); box-shadow: 0 0 0 1px var(--fm-green); }
.fm-page .btn-solid { background: var(--fm-green); border-color: var(--fm-green); border-radius: var(--r-md, 14px) !important; }
@media (hover: hover) { .fm-page .btn-solid:hover { background: var(--fm-green-deep); border-color: var(--fm-green-deep); box-shadow: none; } }
.fm-page .rc-status { color: var(--fm-green-deep); }
.fm-page .rc-done .tick { border-color: var(--fm-green); }
.fm-page .rc-done .tick svg { stroke: var(--fm-green); }
.fm-page .rc-aside .altline { margin-top: 0; padding-top: 0; border-top: 0; max-width: 34ch; }
.fm-page .rc-aside .altline a { color: var(--fm-green-deep); }
@media (max-width: 520px) { .fm-page .rc-form { padding: 24px 20px 22px; } .fm-page .rc-form .row.two { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 8. already a member, on the Forum green */
.fm-enter { background: var(--fm-green); color: #fff; padding: 72px 0; }
.fm-enter-in { display: grid; gap: 28px; }
@media (min-width: 900px) { .fm-enter-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px 48px; align-items: center; } }
.fm-enter .fm-h2 { color: #fff; }
.fm-enter-in p { margin: 14px 0 0; font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 46ch; }
.fm-enter-act { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@media (max-width: 520px) { .fm-enter-act { align-items: stretch; } .fm-enter-act .fm-tlink { justify-content: center; } }
.fm-tlink-light { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }
@media (hover: hover) { .fm-tlink-light:hover { text-decoration-color: #fff; } }
.fm-fold-dark { grid-column: 1 / -1; margin-top: 8px; border-color: rgba(255, 255, 255, .22); }
.fm-fold-dark > summary { color: #fff; }
.fm-fold-dark .fm-plus { border-color: rgba(255, 255, 255, .5); }
.fm-fold-dark .fm-plus::before, .fm-fold-dark .fm-plus::after { background: #fff; }
@media (hover: hover) { .fm-fold-dark > summary:hover .fm-plus { border-color: #fff; } }
.fm-fold-dark .fm-fold-body > p { color: rgba(255, 255, 255, .88); }

/* ---------------------------------------------------------------- reduced motion: nothing moves */
@media (prefers-reduced-motion: reduce) {
  .fm-btn, .fm-btn .fm-arr, .fm-doc { transition: none; }
}

/* ---------------------------------------------------------------- hero photos: a slow cross-fade (Alen 20 Oct: rotating pictures)
   Four photos already on the site, stacked; forum-page.js moves .is-on every 6.5 s with a 1.6 s fade, only while the
   page is visible, never under Reduce Motion (the first photo stays). No movement on scroll, no zoom. */
.fm-rot img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1); }
.fm-rot img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fm-rot img { transition: none; } }