/* ============================================================================================================
   Med&X website · ROUND 3 LAYER (Wave D, 30 Sept 2026). The member app's look on medx.hr: its corners, its type
   families (self-hosted, no Google Fonts request), its calm hover and press. Same brand, same words, same links.
   Linked LAST in every page's <head>, after styles.css (or assets/forum.css) and the page's own <style>, so it
   overrides by order. Rules in force: Glass_Quiet_2026-09-25/round3/ROUND3-RULES.md §2 (corners), §3 (type), §4 (motion).
   - The token block below is a byte copy of the ROUND 3 TOKENS block of medx-portal-r3/shared/medx-tokens.css (86fc95f).
   - border-radius declarations here carry !important: this layer is the one source of corners for the site, and
     site.js injects its own <style> after this file at run time. No other property uses !important unless noted.
   - Section 5 (the 12 px type floor, 1 Oct 2026) is generated by wave-d/website/tools/floor_gen.py. Its font-size
     carries !important only where the site's own rule is !important or is an inline style attribute.
   - Colours stay the website's own (paper #fbf9f6, ink #15110f), as shared/medx-tokens.css defines them for the site.
   - Remove the <link> to this file and the site is exactly the 30 Sept live site again (fonts aside).
   ============================================================================================================ */
/* ---- ROUND 3 TOKENS (canonical copy) ---------------------------------------------------------------------------
   ROUND3-RULES §2 to §6 and §11 (A1, A10, A11, A12, A14). The same block, byte for byte, sits in shared/medx-tokens.css
   (the canonical file) and in user-portal/frontend-v2/css/tokens.css (the mirror, until the portal imports the shared
   file). Change both together: the Phase 1 verify diffs the two blocks. */
:root {
  /* type families (§3, D2). Option A is in force. No rule, inline style or script names a family, they read these two.
     A D2 pick is a swap of the lines below and nothing else:
       B: --font-display takes the --font-ui stack with "SF Pro Display" in place of "SF Pro Text". Steps: display and
          title1 700 at -.03em, title2 600 at -.015em, title3 -.01em (-.015em at 20 and 21 px).
       C: --font-ui "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif and --font-display
          "Instrument Serif", Georgia, serif. Steps: display, title1 and title2 400 at 0, title3 -.015em. The three
          display sizes grow by 1.08: --fs-display 37px, --fs-title1 32px, --fs-title2 24px.
     SF Pro is only ever reached through the system stack. Inter and Fraunces come from /assets/fonts/fonts.css. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  /* weight and tracking per title step (§3.2, option A). --font-display is for 22 px and up only */
  --fw-display: 400;  --ls-display: -.01em;    /* .t-display, .mx-hero-title (34) */
  --fw-title1: 400;   --ls-title1: -.005em;    /* .t-title1, .mx-lt (30) */
  --fw-title2: 400;   --ls-title2: 0em;        /* .t-title2, sheet titles (22) */
  --ls-title3: -.01em;                         /* display-classed text under 22 px: --font-ui 600, this tracking from 17 px up */
  --ls-caps: .12em;                            /* 12 px caps labels and 13 px caps buttons */
  /* figures (§3.1): every figure that changes or carries money (countdowns, prices, counts, badges) is --font-ui with
     font-variant-numeric: tabular-nums, and from 20 px up takes these two. --font-display never sets a figure */
  --fw-num: 600;
  --ls-num: -.02em;
  /* type scale (DESIGN-RULES §2, the member scale). 12 px floor, 16 px body and inputs. Nothing on screen is drawn
     below --fs-label, the 11 px tab labels excepted (GLASS §1.9.1) */
  --fs-display: 34px;   /* hero title */
  --fs-title1: 30px;    /* large screen title (root screens) */
  --fs-title2: 22px;    /* feature card title, sheet title */
  --fs-title3: 18px;    /* list-row and card titles, names */
  --fs-body: 16px;      /* running text, inputs */
  --fs-2nd: 14px;       /* secondary lines, roles, meta */
  --fs-label: 12px;     /* eyebrows, tags, section heads, field labels: the floor */
  --fs-btn: 13px;       /* button text */
  --fs-num: 40px;       /* countdown, stat tiles */

  /* corners (§2, A1, D3). Content rounds on this scale, people are 50%, full-bleed heroes and edge strips stay square
     where they touch the screen edge. Buttons 44 px tall and up take --r-md, shorter ones --r-sm.
     Nesting: an inner radius is the outer radius minus the padding between them, never below --r-xs, and media that
     touches its card edge takes the card corners through the clip. A hairline on a rounded shape is 1px at most
     rgba(25,21,18,.10), or a .5px inset shadow. Native layers take the same values with cornerCurve .continuous */
  --r-xs: 6px;          /* tags: a printed label on paper */
  --r-sm: 10px;         /* inputs, buttons under 44 px, thumbnails, institution tiles, boxes of 40 to 60 px */
  --r-md: 14px;         /* buttons 44 px and taller, grouped lists */
  --r-lg: 20px;         /* cards, photo cards, tiles on the page, the white QR plate */
  --r-xl: 28px;         /* sheets, a hero-sized card that does not touch a screen edge */
  --r-capsule: 999px;   /* glass controls, chips, the ui.seg track and lens, badges, the countdown capsule */

  /* springs (§4.2, A11): Countfocal springCurve, settle within .15 percent sampled at 240 Hz. Here each spring holds its
     own cubic-bezier fallback, and its linear() value arrives only through the @supports block below (§5.1).
     ui.js installSprings() re-publishes the same values at boot. Regenerate with springCurve, never hand-edit */
  --spring-enter: cubic-bezier(.22, 1, .36, 1);  --spring-enter-dur: 696ms;    /* response .62, damping .94: entrances, the count-up, the photo settle */
  --spring: cubic-bezier(.22, 1, .36, 1);        --spring-dur: 612ms;          /* .52, .90: anything that moves or resizes */
  --spring-snappy: cubic-bezier(.25, 1, .4, 1);  --spring-snappy-dur: 442ms;   /* .34, .78: press release, the seg lens, the tab lens, switches */
  --spring-ring: cubic-bezier(.3, 1.4, .5, 1);   --spring-ring-dur: 508ms;     /* .42, .72: a mark popping into place */

  /* motion classes (§4.1). Class T (transitions, gestures, control feedback): at most 700 ms, the opening excepted,
     transform and opacity only apart from the four named exceptions, one motion per moment, interruptible, a release
     hands its velocity to the spring. Class A (ambient loops): their own timings, paused off screen and while hidden,
     the first frame only under Reduce Motion, at most one per screen. Press language §4.3 */
  --t-press: 100ms;         /* a paper press goes down to --paper-press on --ease, and back up on --spring-snappy */
  --paper-press: .97;       /* paper buttons, rows and cards. Glass keeps --glass-press .96 and tab items .92 */
  --t-rm-fade: 160ms;       /* Reduce Motion: a Class T movement becomes this opacity crossfade */
  --t-rm-color: 120ms;      /* Reduce Motion: press and lens changes are instant with this colour change */

  /* scroll progress (§6). Written by script only, one requestAnimationFrame per frame, never a CSS transition.
     --bar-p on the top bar (Phase 2A): 0 at rest, 1 folded. --p and --py on a receding hero or card (ui.recede):
     0 at rest and 1 when its bottom edge reaches the bar, and half the distance scrolled past its top */
  --bar-p: 0;
  --p: 0;
  --py: 0px;

  /* the sticky action bar of the project pages (§11, the kit .mx-actionbar): one 48 px proxy button in 8 px of glass,
     floating at bottom: var(--mx-tabbar-h). Its own height, so the end of a page can scroll clear of it */
  --actionbar-h: 64px;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring-enter: linear(0, 0.0098, 0.036, 0.0739, 0.1201, 0.1718, 0.2265, 0.2826, 0.3387, 0.3937, 0.4468, 0.4976, 0.5455, 0.5904, 0.6322, 0.6709, 0.7064, 0.7388, 0.7684, 0.7951, 0.8193, 0.8411, 0.8605, 0.8779, 0.8934, 0.9072, 0.9194, 0.9302, 0.9397, 0.948, 0.9553, 0.9617, 0.9672, 0.9721, 0.9763, 0.9799, 0.983, 0.9857, 0.988, 0.99, 0.9917, 0.9931, 0.9944, 0.9954, 0.9963, 0.997, 0.9976, 0.9981, 1);
    --spring: linear(0, 0.0108, 0.0395, 0.0812, 0.1318, 0.1881, 0.2476, 0.3082, 0.3685, 0.4273, 0.4837, 0.5371, 0.5872, 0.6337, 0.6765, 0.7156, 0.7511, 0.7832, 0.812, 0.8377, 0.8606, 0.8808, 0.8986, 0.9141, 0.9277, 0.9395, 0.9497, 0.9584, 0.9659, 0.9723, 0.9777, 0.9823, 0.9861, 0.9893, 0.9919, 0.9941, 0.9958, 0.9973, 0.9984, 0.9993, 1, 1.0005, 1.0009, 1.0012, 1.0013, 1.0015, 1.0015, 1.0015, 1);
    --spring-snappy: linear(0, 0.0132, 0.0484, 0.0994, 0.1614, 0.2302, 0.3025, 0.3756, 0.4475, 0.5166, 0.5819, 0.6425, 0.6981, 0.7484, 0.7933, 0.833, 0.8677, 0.8977, 0.9233, 0.9448, 0.9627, 0.9774, 0.9893, 0.9986, 1.0058, 1.0112, 1.0151, 1.0176, 1.0192, 1.0198, 1.0199, 1.0194, 1.0185, 1.0174, 1.0161, 1.0147, 1.0132, 1.0118, 1.0103, 1.009, 1.0077, 1.0066, 1.0055, 1.0046, 1.0037, 1.003, 1.0023, 1.0018, 1);
    --spring-ring: linear(0, 0.0116, 0.043, 0.0894, 0.1468, 0.2115, 0.2807, 0.3519, 0.4231, 0.4927, 0.5595, 0.6225, 0.6811, 0.7349, 0.7836, 0.8273, 0.8659, 0.8996, 0.9288, 0.9535, 0.9743, 0.9914, 1.0052, 1.0161, 1.0243, 1.0304, 1.0345, 1.0371, 1.0382, 1.0383, 1.0375, 1.0361, 1.0341, 1.0317, 1.0292, 1.0265, 1.0237, 1.021, 1.0184, 1.0159, 1.0135, 1.0113, 1.0094, 1.0076, 1.006, 1.0046, 1.0034, 1.0023, 1);
  }
}
@media (prefers-reduced-motion: reduce) { :root { --paper-press: 1; } }
/* ---- end ROUND 3 TOKENS ---------------------------------------------------------------------------------------- */

/* ---- 1. TYPE (§3). The site's two family variables read the round-3 pair: SF Pro on Apple devices through the system
   stack, Inter elsewhere, Fraunces for display. Inter and Fraunces come from /assets/fonts/fonts.css (same files as the
   app, sha256 in assets/fonts/SHA256SUMS). Sizes, weights and tracking stay the website's own. ---- */
:root { --sans: var(--font-ui); --serif: var(--font-display); }
/* site.js writes a few components with the family named directly, so they would draw Inter on a Mac or an iPhone */
:root :is(.medx-notif-allread, .medx-notif-urg, .medx-nextevt, .medx-members-bar-cta, .medx-statusbar-in, .medx-spk-kicker,
  .medx-spk-badge, .mxdl-k, .mxdl-p, .mxdl-btn, .mxdl-msg, .mxdl-form input) { font-family: var(--font-ui) !important; }

/* ---- 2. CORNERS (§2). Content rounds on the scale, people stay circles, full-bleed heroes and bands stay square at the
   screen edge. Buttons 44 px and taller --r-md, shorter --r-sm. Inputs --r-sm. Printed tags --r-xs. Tappable filters and
   anything sitting on a photo are capsules. Cards and photos --r-lg, section-sized panels --r-xl, a box nested inside a
   rounded one takes the outer radius minus the padding between them, never below --r-xs. ---- */

/* 2.1 buttons, 44 px and taller */
.btn, .nav-portal-btn, .nav-cta, .mxdl-btn, .doc-dl, .acc-banner-btn, .ac-btn-gold, .ac-btn-line, .app-get, .gl-cta,
.fnav-cta, .fnav-enter, .nf-btn, .gr-cta, .fga-cta, .medx-auth-go, .app-help-card .app-dl, .inq-submit, .c-submit,
.rc-submit, .home-follow a
  { border-radius: var(--r-md) !important; }
.nav-cta { padding-top: 11.5px; padding-bottom: 11.5px; }   /* 43 -> 44 tall, so it pairs with Member portal (its display stays the site's) */
.acc-banner-btn { min-height: 44px; box-sizing: border-box; }   /* 43 -> 44: a full tap target, so the 44 px corner */
.mx-talk { min-height: 44px; box-sizing: border-box; border-radius: var(--r-capsule) !important; }   /* the floating Talk to us: a control over content, a capsule */

/* 2.2 buttons under 44 px, and boxed squares from 40 to 60 px (icon boxes, app glyphs, logo tiles) */
.foot-app, .socials a, .gn-btn, .medx-status-cta, .medx-members-bar-cta, .skip-link, .medx-bell, .medx-welcome,
.way-ic, .pf-ico, .doc-ic, .c-ic, .cl-ico, .app-glyph, .ph-tile, .mxroom-logo, .plx-portal-feat, .faq-nav-links a, .c-socials a
  { border-radius: var(--r-sm) !important; }

/* 2.3 inputs: every text field, select and text area, and the footer's joined field-and-button (it clips its button) */
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea), .medx-auth-in
  { border-radius: var(--r-sm) !important; }   /* :where() keeps this at zero weight, so a field drawn inside another shape can say 0 */
.news form { border-radius: var(--r-sm) !important; overflow: hidden; }
.news form input, .news form button { border-radius: 0 !important; }   /* the form's clip draws their outer corners */

/* 2.4 printed tags on paper */
.pr-tag, .way-tag, .dl-tag, .pb-tag, .ex, .ex-tag, .tier-flag, .mx-story-tag, .gx-prov, .gl-sep, .home-pgm-proof .chip,
.status-pill, .prereg-pill, .reg-soon, .seal, .dest-chips span, .search-hint kbd, .medx-notif-urg, .medx-nextevt, .ph-btn, .ph-line,
.opt-card.rec .ttl::after
  { border-radius: var(--r-xs) !important; }

/* 2.5 capsules: tappable filters and segmented switches, and labels sitting on a photo */
.filter-row .chip, .alum-filters .chip, button.chip, .nav-lang, .nav-lang a, .langtog, .langtog a, .toggle.pj-thumb-on, .pj-thumb,
.img-status, .mc-flag, .nobel, .role-tag, .city-flag, .home-next-status, .hc-label, .vgn-prompt, .vgn-live, .music-toggle,
.langtog button, .alloc-bar
  { border-radius: var(--r-capsule) !important; }
/* the Gala photos' expand mark sits on the photo: a round control */
.gx-gal-item::before, .gx-atmos::before, .gx-sp-figure::before { border-radius: 50% !important; }
.alloc-bar { overflow: hidden; }   /* the allocation bar: its segments take the capsule's ends through the clip */

/* 2.6 cards and tiles standing on the page */
.ev-tile, .alum-card, .gx-kn-card, .media-card, .cohort-card, .way-card, .home-news-card, .pf-card, .gi-spon, .city-card,
.bbw-city, .plx-kn-card, .spk-kn-card, .inq-card, .ab-proj-card, .bridge-step, .ac-card, .how-step, .doc-card, .aud-card,
.pb-card, .ne-card, .spk-nob, .lead-card, .apply-step, .who-aud-card, .news-card, .ac-block, .role-card, .c-next-card,
.where-card, .gi-way, .home-lead-card, .fs-card, .gt-item, .why-card, .proof-cell, .teaser-card, .involve-card, .ala-card,
.day-card, .gx-music-card, .fc-card, .gl-day, .boa-tile, .tier-card, .tcard, .who-panel, .org-president, .rc-form,
.bb-highlight, .how-gala, .c-form, .sponsor-list, .nf-card, .next-count, .gi-mem, .sg-highlight, .gx-sp-highlight, .ps-cell,
.boa-card, .home-next-card, .bbp-card, .bbg-item, .sup-tile, .ab-total, .ab-inst-cell, .plx-spx-chip, .legal-card,
.app-card, .gala-register, .egg-laurel-card, .egg-toast, .faq-group, .pw-frame, .build-shell, .gx-runsheet, .net-svg-wrap
  { border-radius: var(--r-lg) !important; }
.build-shell { overflow: hidden; isolation: isolate; }   /* the donate builder: its step strip runs into the top corners */
/* the About numbers and the institutions wall (EN and HR) drew table lines: a frame line on top and left, each tile
   closing its own right and bottom. With round tiles that frame stayed a square line, so the tiles stand apart on the
   app's 12 px card gap, each with its own hairline all round */
.ab-totals, .ab-inst-wall { border: 0; gap: 12px; }
.ab-total, .ab-inst-cell { border: 1px solid var(--line); }

/* 2.7 choice tiles, accordion rows and boxed notes inside a page: a grouped-list shape */
.bbp-choice, .sgw-choice, .psw-choice, .opt-card, .tier-opt, .next-opt, .build-amt button, .build-freq button, .build-summary,
.inkind-ico, .inq-program, .inq-check, .prereg-facts li, .apply-open, .dir-note, .acc-faq details,
.coord-quote, .why-tag, .diff-tag, .why-figure .tag, figcaption.tag, .home-whois-figure .tag, .medx-notif-item, .search-result
  { border-radius: var(--r-md) !important; }

/* 2.8 section-sized panels in the page column (hero-sized cards that do not touch a screen edge) and sheets */
.prereg-card, .coord-card, .bbp-wizard, .inkind-band, .bfor-spon-cta, .mx-give-band, .home-nl-card, .program-pre,
.glance-cta, .guide-promo, .bbw-next, .gi-floors, .dest-inst, .home-pgm-row, .search-box, .app-help-card, .medx-auth-card
  { border-radius: var(--r-xl) !important; }

/* 2.9 popovers and menus (paper, not glass) and their rows: inner = outer minus the 8 px padding */
.nav-dd-menu, .nav-portal-menu, .medx-acct-menu, .medx-notif-panel { border-radius: var(--r-lg) !important; }
.nav-dd-menu a, .nav-portal-menu a.nav-portal, .medx-acct-menu a, .medx-acct-menu button { border-radius: calc(var(--r-lg) - 8px) !important; }

/* (the figures that carry a caption card hanging over their edge, .why-figure, .mission-figure and .home-whois-figure,
   round their photo and never clip, so the card stays whole) */
/* 2.10 photographs. A standalone photo or figure rounds itself. A photo flush with its card's edge takes the card's
   corners through the card's clip and sets none of its own (the hover zoom stays inside). isolation keeps WebKit
   from flashing the corners square while the zoom runs */
.gal-item, .num-photo, .why-fig, .story-figure, .diff-fig, .hero-plate, .split-fig, .what-side-photo, .how-photo, .wg-figure,
.tr-figure, .wi-figure, .sg-why-figure, .gx-roll, .gx-sp-figure, .gx-gal-item, .rc-figure, .plx-rot, .spx-figure, .why-figure,
.bfor-fig, .conv-fig, .gx-atmos, .ne-photo, .spk-photo, .sp-photo, .plx-sp-item .pic, .cm-portrait, .home-whois-figure,
.home-whois-figure img, .why-figure img, .mission-figure, .mission-figure img, .gx-proceeds-photos img, .lb-overlay img, .pw-thumb, .pw-plate, .nv-plate,
.what-photos figure, .plx-oc-team
  { border-radius: var(--r-lg) !important; }
:root :is(.gal-item, .num-photo, .why-fig, .story-figure, .diff-fig, .hero-plate, .split-fig, .what-side-photo, .how-photo,
  .wg-figure, .tr-figure, .wi-figure, .sg-why-figure, .gx-roll, .gx-sp-figure, .gx-gal-item, .rc-figure, .plx-rot, .spx-figure,
  .bfor-fig, .conv-fig, .gx-atmos, .ne-photo, .spk-photo, .sp-photo, .plx-sp-item .pic, .cm-portrait,
  .pw-thumb, .pw-plate, .nv-plate, .what-photos figure, .plx-oc-team) { overflow: hidden; isolation: isolate; }
/* the Plexus team photo zooms on hover: the mask keeps its corners round in WebKit while the zoom runs. The mask also
   hides its outer shadow, as on the app's photo cards (kit .mx-photocard: no drop shadow) */
.plx-oc-team { -webkit-mask-image: -webkit-radial-gradient(white, black); }
/* cards whose photo touches their edge */
:root :is(.ev-tile, .bbp-card, .media-card, .home-news-card, .spk-nob, .bbw-city, .who-aud-card, .gi-way, .home-next-card,
  .nf-card, .prereg-card, .ac-card, .how-step, .home-pgm-row, .city-card, .bbg-item, .bbw-next) { overflow: hidden; isolation: isolate; }
/* photos inset inside a padded card: the card's 20 px minus its padding falls under the floor, so they take --r-sm */
.cc-shot, .home-portrait, .mx-proof-img, .wn-media { border-radius: var(--r-sm) !important; }
:root :is(.cc-shot, .home-portrait, .wn-media) { overflow: hidden; isolation: isolate; }
.mx-proof { border-radius: var(--r-lg) !important; }

/* 2.11 Heritage (the walk): a museum frame is a card, its plate sits inside the frame's 9 to 16 px mat, so it takes
   20 minus 12. The gold hairlines drawn by ::before and ::after follow the plate's corners. The two thin threshold
   frames inset from the hero and the finale are panels */
.frame, .con-plate { border-radius: var(--r-lg) !important; }
.frame .plate, .frame .con-plate { border-radius: calc(var(--r-lg) - 12px) !important; }
:root :is(.plate, .con-plate) { overflow: hidden; isolation: isolate; }
:root :is(.plate, .con-plate, .pw-plate, .pw-thumb, .nv-plate)::before, :root :is(.plate, .con-plate, .pw-plate, .pw-thumb, .nv-plate)::after { border-radius: inherit; }
.uv-frame, .f-threshold, .hero:has(.hero-cue)::after { border-radius: var(--r-xl) !important; }   /* the walk's hero frame only (decorative, so :has() is fine) */

/* ---- 3. MOTION (§4.1b, §4.3). Hover eases in 180 ms (colour only, plus the site's own 1 px lift). A press goes down to
   .97 in 100 ms and comes back on the snappy spring, through the `scale` property so the site's own transforms stay
   theirs. Reduce Motion: no scale, a short dim instead ---- */
:root :is(.btn, .nav-cta, .nav-portal-btn, .foot-app, .mxdl-btn, .doc-dl, .acc-banner-btn, .ac-btn-gold, .ac-btn-line, .app-get,
  .gl-cta, .fnav-cta, .fnav-enter, .nf-btn, .gr-cta, .gn-btn, .mx-talk, .medx-status-cta, .medx-members-bar-cta, button.chip, a.chip,
  .bbp-choice, .sgw-choice, .psw-choice, .opt-card, .tier-opt, .next-opt, .build-amt button, .build-freq button):not([disabled]) {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform, scale;
  transition-duration: var(--t-quick, 180ms), var(--t-quick, 180ms), var(--t-quick, 180ms), 220ms, var(--t-quick, 180ms), 220ms, var(--spring-snappy-dur);
  transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), var(--ease), var(--ease), var(--spring-snappy);
}
:root :is(.btn, .nav-cta, .nav-portal-btn, .foot-app, .mxdl-btn, .doc-dl, .acc-banner-btn, .ac-btn-gold, .ac-btn-line, .app-get,
  .gl-cta, .fnav-cta, .fnav-enter, .nf-btn, .gr-cta, .gn-btn, .mx-talk, .medx-status-cta, .medx-members-bar-cta, button.chip, a.chip,
  .bbp-choice, .sgw-choice, .psw-choice, .opt-card, .tier-opt, .next-opt, .build-amt button, .build-freq button):not([disabled]):active {
  scale: var(--paper-press);
  transition-duration: var(--t-quick, 180ms), var(--t-quick, 180ms), var(--t-quick, 180ms), 220ms, var(--t-rm-color), 220ms, var(--t-press);
  transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), var(--ease), var(--ease), var(--ease);
}
/* the site's own presses (.985 and .99 through transform) would stack on the scale above: the one press replaces them */
:root :is(.btn, .nav-cta, .nav-portal-btn, .opt-card, .tier-opt, .next-opt):active, :root .mobile-menu a.btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :root :is(.btn, .nav-cta, .nav-portal-btn, .foot-app, .mxdl-btn, .doc-dl, .acc-banner-btn, .ac-btn-gold, .ac-btn-line, .app-get,
    .gl-cta, .fnav-cta, .fnav-enter, .nf-btn, .gr-cta, .gn-btn, .mx-talk, .medx-status-cta, .medx-members-bar-cta, button.chip, a.chip,
    .bbp-choice, .sgw-choice, .psw-choice, .opt-card, .tier-opt, .next-opt, .build-amt button, .build-freq button):not([disabled]):active { opacity: .72; }
}

/* ---- 4. SPACING (§3 of DESIGN-RULES). The phone gutter is the app's 20 px (the site had 22) ---- */
@media (max-width: 620px) { .wrap { padding-left: 20px; padding-right: 20px; } }

/* ---- 5. TYPE FLOOR (ROUND3-RULES §3.2 and §13: no text under 12 px). GENERATED by tools/floor_gen.py from tools/floor_harvest.py
   output, do not edit by hand. Every rule here repeats a site rule that sets text under 12 px, with its selector, @media
   and importance, and lifts it with max(var(--fs-label), <its value>): under 12 becomes 12, 12 and over stays as it was.
   font-size is this layer's second !important exception, used only where the site's own rule is !important, where it
   is an inline style attribute, and nowhere else. Rules from sheets placed after this file take ':root :is()'. ---- */
.scroll-hint { font-size: max(var(--fs-label), 10.5px); }
.mx-story-tag { font-size: max(var(--fs-label), 10px); }
.sp-photo .nobel { font-size: max(var(--fs-label), 10px); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .foot-col h4 { font-size: max(var(--fs-label), 11px); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .cd-u { font-size: max(var(--fs-label), 0.72rem); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .search-hint { font-size: max(var(--fs-label), 0.74rem); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .search-hint kbd { font-size: max(var(--fs-label), 0.72rem); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .egg-laurel-text span { font-size: max(var(--fs-label), 0.72rem); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .egg-toast-k { font-size: max(var(--fs-label), 11px); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .medx-bell-badge { font-size: max(var(--fs-label), 10px); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .medx-notif-time { font-size: max(var(--fs-label), 11px); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .medx-notif-snooze { font-size: max(var(--fs-label), 11.5px); }
:where(:root:not(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) .kicker { font-size: max(var(--fs-label), 11px); }
.nav-cta { font-size: max(var(--fs-label), 11.5px); }
.ch-mark .lbl { font-size: max(var(--fs-label), 11px); }
.ps-label { font-size: max(var(--fs-label), 0.7rem); }
.gl-eyebrow { font-size: max(var(--fs-label), 11px); }
.mxf-tag { font-size: max(var(--fs-label), 10.5px); }
header.nav .nav-lang a { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]))) .brand .sub { font-size: max(var(--fs-label), 10px); }
.fnav-lang { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]))) .hero-plate .cap { font-size: max(var(--fs-label), 11.5px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]))) .plate .caption { font-size: max(var(--fs-label), 11.5px); }
.split-fig .fcap { font-size: max(var(--fs-label), 11.5px); }
.conv-side .seal { font-size: max(var(--fs-label), 11.5px); }
.conv-fig .fcap { font-size: max(var(--fs-label), 11px); }
.rc-form label { font-size: max(var(--fs-label), 11.5px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]))) .foot-col h3 { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]))) .medx-cal .medx-cal-lbl { font-size: max(var(--fs-label), 0.72rem); }
.council-slot .cs-label { font-size: max(var(--fs-label), 10.5px); }
.patronage .lbl { font-size: max(var(--fs-label), 11.5px); }
.ph-stat .l { font-size: max(var(--fs-label), 11px); }
.sup-cell .sup-lbl { font-size: max(var(--fs-label), 11px); }
.lc-photo-note { font-size: max(var(--fs-label), 11px); }
.mc-flag { font-size: max(var(--fs-label), 11px); }
.mc-outlet { font-size: max(var(--fs-label), 11px); }
.teaser-tag { font-size: max(var(--fs-label), 11px); }
.ab-proj-card .pk { font-size: max(var(--fs-label), 11px); }
.ab-total .l { font-size: max(var(--fs-label), 11px); }
:where(:root:not(:has(meta[name="description"][content^="The page you were looking for"]), :has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/book-of-abstract.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/network.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/speakers.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/speakers.html"]), :has(link[rel="icon"][href="data:,"]))) .nav-lang a { font-size: max(var(--fs-label), 11px); }
.hero-insts .ins-lbl { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/accelerator-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/accelerator-sponsor.html"]))) .hero-insts .ins-lbl .ex { font-size: max(var(--fs-label), 9.5px); }
.tier-flag { font-size: max(var(--fs-label), 10px); }
.inkind-tag { font-size: max(var(--fs-label), 11px); }
.funds-lead .fl-k { font-size: max(var(--fs-label), 10px); }
.proof-flag { font-size: max(var(--fs-label), 9.5px); }
.proof-cell .pc-lbl { font-size: max(var(--fs-label), 9.5px); }
.proof-quote .pq-badge { font-size: max(var(--fs-label), 9px); }
.proof-stat .ps-badge { font-size: max(var(--fs-label), 9px); }
.mxroom-k { font-size: max(var(--fs-label), 10.5px); }
.inq-program .ip-k { font-size: max(var(--fs-label), 10px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/accelerator-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/building-bridges-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/building-bridges-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/plexus-gala-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/plexus-sponsor.html"]))) .mx-crumb a { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/accelerator-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/building-bridges-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/building-bridges-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/plexus-gala-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/plexus-sponsor.html"]))) .mx-talk { font-size: max(var(--fs-label), 11px); }
.whofor-card .ex-tag { font-size: max(var(--fs-label), 0.72rem); }
.coord-body .coord-kick { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/accelerator.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/accelerator.html"]))) .ph .ph-lbl { font-size: max(var(--fs-label), 10.5px); }
.cc-logo .lg-txt { font-size: max(var(--fs-label), 0.7rem); }
.c-year { font-size: max(var(--fs-label), 0.74rem); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/accelerator.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/accelerator.html"]))) .c-field { font-size: max(var(--fs-label), 0.72rem); }
.news-card .pill { font-size: max(var(--fs-label), 11px); }
.coord-quote .cq-note { font-size: max(var(--fs-label), 0.72rem); }
.dest-inst .dest-lbl { font-size: max(var(--fs-label), 11px); }
.thank-photo .thank-badge { font-size: max(var(--fs-label), 9.5px); }
.alum-filters .chip { font-size: max(var(--fs-label), 11.5px); }
.ac-meta { font-size: max(var(--fs-label), 11px); }
.cc-photo-note { font-size: max(var(--fs-label), 8.5px); }
.cc-role { font-size: max(var(--fs-label), 10.5px); }
.bfor-fig .fcap { font-size: max(var(--fs-label), 11px); }
.fnav-home { font-size: max(var(--fs-label), 11px) !important; }
.boa-ed-year .ex { font-size: max(var(--fs-label), 10px); }
.bbg-num { font-size: max(var(--fs-label), 10.5px); }
.bbg-when { font-size: max(var(--fs-label), 11px); }
.bbg-go { font-size: max(var(--fs-label), 11px); }
.bbl-top { font-size: max(var(--fs-label), 11px); }
.bbl-btn { font-size: max(var(--fs-label), 11px); }
.bbp-list i { font-size: max(var(--fs-label), 9.5px); }
.why-figure .tag .t-l { font-size: max(var(--fs-label), 11px); }
.tcard .t-flag { font-size: max(var(--fs-label), 10px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/building-bridges-sponsor.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/building-bridges-sponsor.html"]))) .tcard .tn { font-size: max(var(--fs-label), 11px); }
.city-card .city-cap .cl { font-size: max(var(--fs-label), 11px); }
.city-card .city-flag { font-size: max(var(--fs-label), 10px); }
.city-card.ph .ph-l { font-size: max(var(--fs-label), 10.5px); }
.city-card.ph .ph-c .next { font-size: max(var(--fs-label), 10px); }
.city-card.ph .ph-note { font-size: max(var(--fs-label), 11px); }
.ph-cities .ph-cities-note { font-size: max(var(--fs-label), 11px); }
.ed-meta .pill { font-size: max(var(--fs-label), 11px); }
.how-gala .tag { font-size: max(var(--fs-label), 11px); }
.ph-photo .ph-lbl { font-size: max(var(--fs-label), 11px); }
.ph-photo .ph-tag { font-size: max(var(--fs-label), 9.5px); }
.where-next .wn-body .pill { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/building-bridges.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/building-bridges.html"]))) .tier .tn { font-size: max(var(--fs-label), 11px); }
.prereg-pill { font-size: max(var(--fs-label), 11px); }
.prereg-credit { font-size: max(var(--fs-label), 10px); }
.bbw-n { font-size: max(var(--fs-label), 10.5px); }
.bbw-next .wn-body .pill { font-size: max(var(--fs-label), 11px); }
.bbp-eyebrow { font-size: max(var(--fs-label), 11px); }
.bbp-level .lv-n { font-size: max(var(--fs-label), 10.5px); }
.bbp-summary .sm-k { font-size: max(var(--fs-label), 11px); }
.doc-tag { font-size: max(var(--fs-label), 10px); }
.way-tag { font-size: max(var(--fs-label), 10.5px); }
.amt-legend { font-size: max(var(--fs-label), 11px); }
.amt-custom-label { font-size: max(var(--fs-label), 11px); }
.build-step-tab { font-size: max(var(--fs-label), 11.5px); }
.build-step-tab .n { font-size: max(var(--fs-label), 11px); }
.opt-card.rec .ttl::after { font-size: max(var(--fs-label), 9.5px); }
.build-amt .ba-sub { font-size: max(var(--fs-label), 0.68rem); }
.build-legend { font-size: max(var(--fs-label), 11px); }
@media (max-width: 640px) { .build-step-tab { font-size: max(var(--fs-label), 10px); } }
.count-label { font-size: max(var(--fs-label), 11px); }
.status-pill { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/events.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/events.html"]))) .ex-tag { font-size: max(var(--fs-label), 9.5px); }
.ctrl-label { font-size: max(var(--fs-label), 11px); }
.hub-month .mo-count { font-size: max(var(--fs-label), 11px); }
.img-status { font-size: max(var(--fs-label), 10px); }
.tile-meta .pill { font-size: max(var(--fs-label), 10.5px); }
.tile-loc { font-size: max(var(--fs-label), 11.5px); }
.tile-date .ex { font-size: max(var(--fs-label), 9px); }
.nf-k { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/events.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/events.html"]))) .chip, :where(:root:is(:has(link[rel="canonical"][href="https://www.medx.hr/events.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/events.html"]))) .seg { font-size: max(var(--fs-label), 11.5px); }
.gi-who { font-size: max(var(--fs-label), 11.5px); }
.gi-way-tag { font-size: max(var(--fs-label), 11px); }
.gi-mem .gi-who { font-size: max(var(--fs-label), 11.5px); }
.gi-floors .gf-k { font-size: max(var(--fs-label), 11px); }
.home-scroll { font-size: max(var(--fs-label), 10.5px); }
.home-pgm-proof .chip { font-size: max(var(--fs-label), 11.5px); }
.home-next-status { font-size: max(var(--fs-label), 10px); }
.home-next-for { font-size: max(var(--fs-label), 11px); }
.home-support-logos .lead-in { font-size: max(var(--fs-label), 11px); }
.sup-group-label { font-size: max(var(--fs-label), 11px); }
.home-logo-mark .ds { font-size: max(var(--fs-label), 8.5px); }
.home-lead-photo .ph-label { font-size: max(var(--fs-label), 10px); }
.home-pgm-idx { font-size: max(var(--fs-label), 11px); }
.home-news-ex { font-size: max(var(--fs-label), 10px); }
.home-news-meta { font-size: max(var(--fs-label), 11px); }
.home-phone .ph-kick { font-size: max(var(--fs-label), 7px); }
.home-phone .ph-btn { font-size: max(var(--fs-label), 7.5px); }
.home-social .go { font-size: max(var(--fs-label), 11px); }
.hf-index { font-size: max(var(--fs-label), 11px); }
.hf-scroll { font-size: max(var(--fs-label), 10px); }
@media (max-width: 620px) { .hf-index { font-size: max(var(--fs-label), 9px); } }
.home-pgm-proof .chip { font-size: max(var(--fs-label), 12.5px); }
@media (max-width: 620px) { .home-follow a { font-size: max(var(--fs-label), 11.5px); } }
.filt-label { font-size: max(var(--fs-label), 11px); }
.mem-ex { font-size: max(var(--fs-label), 9.5px); }
.mem-field { font-size: max(var(--fs-label), 11px); }
.ph-countdown .cd-clock .cd-u { font-size: max(var(--fs-label), 0.68rem); }
.ph-countdown .cd-label { font-size: max(var(--fs-label), 11px); }
.day-card .day-tag { font-size: max(var(--fs-label), 11px); }
.day-list .dl-tag { font-size: max(var(--fs-label), 9.5px); }
.pb-card .pb-tag { font-size: max(var(--fs-label), 11px); }
.reg-soon { font-size: max(var(--fs-label), 11px); }
.ph .ph-eyebrow { font-size: max(var(--fs-label), 10px); }
.btn .pend-tag { font-size: max(var(--fs-label), 9px); }
.gt-l { font-size: max(var(--fs-label), 11px); }
.sg-reach-l { font-size: max(var(--fs-label), 11px); }
.sg-hl-eyebrow { font-size: max(var(--fs-label), 11px); }
.sg-fc-eyebrow { font-size: max(var(--fs-label), 11px); }
.sg-tier-flag { font-size: max(var(--fs-label), 9.5px); }
.sg-term-k { font-size: max(var(--fs-label), 10px); }
.gx-kn-note { font-size: max(var(--fs-label), 10.5px); }
.gx-bio-toggle { font-size: max(var(--fs-label), 11px); }
.sg-logo-mark { font-size: max(var(--fs-label), 9.5px); }
.sgw-stepn { font-size: max(var(--fs-label), 11px); }
.sgw-ch-k { font-size: max(var(--fs-label), 10px); }
.sgw-sum-k { font-size: max(var(--fs-label), 10px); }
.gx-cd-sub { font-size: max(var(--fs-label), 11px); }
.gx-countdown .cd-clock .cd-u { font-size: max(var(--fs-label), 0.66rem); }
.gx-cd-label { font-size: max(var(--fs-label), 11px); }
.gx-fact-k { font-size: max(var(--fs-label), 11px); }
.gx-music-tag { font-size: max(var(--fs-label), 11px); }
.gx-prov { font-size: max(var(--fs-label), 10px); }
.gx-ess-venue-fig .vc-eyebrow { font-size: max(var(--fs-label), 10.5px); }
.gx-ess-mk { font-size: max(var(--fs-label), 11px); }
.gx-kn-inst-eyebrow { font-size: max(var(--fs-label), 11px); }
.gx-sp-hl-eyebrow { font-size: max(var(--fs-label), 11px); }
.gx-sp-fc-eyebrow { font-size: max(var(--fs-label), 11px); }
.gx-proceeds-eyebrow { font-size: max(var(--fs-label), 11px); }
.tier-ribbon { font-size: max(var(--fs-label), 9.5px); }
.tier-price .tp-pre { font-size: max(var(--fs-label), 0.74rem); }
.ac-price .ac-unit { font-size: max(var(--fs-label), 0.74rem); }
.rc-fc-eyebrow { font-size: max(var(--fs-label), 11px); }
.ps-flag { font-size: max(var(--fs-label), 9.5px); }
.ps-cell .ps-lbl { font-size: max(var(--fs-label), 9.5px); }
.psw-stepn { font-size: max(var(--fs-label), 11px); }
.psw-ch-k { font-size: max(var(--fs-label), 10px); }
.psw-sum-k { font-size: max(var(--fs-label), 10px); }
.program-pre .pp-soon { font-size: max(var(--fs-label), 11px); }
.gl-day-date { font-size: max(var(--fs-label), 11px); }
.gl-when { font-size: max(var(--fs-label), 11px); }
.gl-what .gl-sep { font-size: max(var(--fs-label), 9px); }
.ne-day { font-size: max(var(--fs-label), 11px); }
.sp-photo .role-tag { font-size: max(var(--fs-label), 9.5px); }
.sp-card .sp-ex { font-size: max(var(--fs-label), 8.5px); }
.spx-fc-eyebrow { font-size: max(var(--fs-label), 11px); }
.cm-meta .nm .cm-ex { font-size: max(var(--fs-label), 8.5px); }
.cm-meta .role { font-size: max(var(--fs-label), 11px); }
.plx-strip-head .k { font-size: max(var(--fs-label), 11px); }
.pf-show-copy .k { font-size: max(var(--fs-label), 11px); }
.app-plat { font-size: max(var(--fs-label), 11px); }
.pr-tag { font-size: max(var(--fs-label), 10.5px); }
.mc-eyebrow { font-size: max(var(--fs-label), 11px); }
.spk-nob-badge { font-size: max(var(--fs-label), 10px); }
.spk-kn-tag { font-size: max(var(--fs-label), 10px); }
.spk-inst { font-size: max(var(--fs-label), 0.72rem); }
:where(:root:is(:has(link[rel="icon"][href="data:,"]))) .eyebrow { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="icon"][href="data:,"]))) .centuries { font-size: max(var(--fs-label), 11px); }
.pro-head { font-size: max(var(--fs-label), 11px); }
.pe-lb { font-size: max(var(--fs-label), 8.5px); }
.langtog button { font-size: max(var(--fs-label), 11px); }
.geo-mini .gm-lb { font-size: max(var(--fs-label), 9px); }
.placard-cap .pc-t { font-size: max(var(--fs-label), 10.5px); }
.rot-eyebrow { font-size: max(var(--fs-label), 9.5px); }
.purpose .p-eyebrow { font-size: max(var(--fs-label), 10.5px); }
.scroll-cue { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="icon"][href="data:,"]))) .place { font-size: max(var(--fs-label), 11px); }
.wm-k { font-size: max(var(--fs-label), 9.5px); }
.pe-lb { font-size: max(var(--fs-label), 9px); }
.oh-kicker { font-size: max(var(--fs-label), 10.5px); }
.nv-cap { font-size: max(var(--fs-label), 10px); }
.music-toggle { font-size: max(var(--fs-label), 10.5px); }
.nt-k { font-size: max(var(--fs-label), 11px); }
.pw-k { font-size: max(var(--fs-label), 10.5px); }
.pride-k { font-size: max(var(--fs-label), 11px); }
.pride-people { font-size: max(var(--fs-label), 10.5px); }
.veloci .vc-lb { font-size: max(var(--fs-label), 8.5px); }
.placard-specimen .pc-t, .placard-specimen .pc-d { font-size: max(var(--fs-label), 9.5px); }
.vw-motif .m-sub { font-size: max(var(--fs-label), 10px); }
.vw-source { font-size: max(var(--fs-label), 10px); }
.interlude .il-cap { font-size: max(var(--fs-label), 10.5px); }
.f-eyebrow { font-size: max(var(--fs-label), 11px); }
.f-invite .fi-k { font-size: max(var(--fs-label), 10px); }
.f-invite .fi-cta { font-size: max(var(--fs-label), 11px); }
.f-cue-t { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="icon"][href="data:,"]))) .city { font-size: max(var(--fs-label), 10px); }
:where(:root:is(:has(link[rel="icon"][href="data:,"]))) .credits { font-size: max(var(--fs-label), 11px); }
.credits .cr-h { font-size: max(var(--fs-label), 10px); }
@media (max-width: 860px) { .pe-lb { font-size: max(var(--fs-label), 8px); } }
.hero-brand { font-size: max(var(--fs-label), 11px); }
.hero-eyebrow { font-size: max(var(--fs-label), clamp(10px, 1.4vw, 12px)); }
.hero-cue { font-size: max(var(--fs-label), 11px); }
.hero-cap { font-size: max(var(--fs-label), 11.5px); }
.wm-k { font-size: max(var(--fs-label), 10px); }
.sect-intro .si-eyebrow { font-size: max(var(--fs-label), 10.5px); }
.ex-lith .lith-sub { font-size: max(var(--fs-label), 9.5px); }
.conv-t { font-size: max(var(--fs-label), 9.5px); }
.f-place { font-size: max(var(--fs-label), 11px); }
.f-meta .wm-k { font-size: max(var(--fs-label), 9px); }
.fga-eyebrow { font-size: max(var(--fs-label), 10.5px); }
.fr-city { font-size: max(var(--fs-label), 9px); }
.fga-k { font-size: max(var(--fs-label), 11px); }
.fga-qr-lb { font-size: max(var(--fs-label), 10px); }
.fga-cta { font-size: max(var(--fs-label), 11px); }
.kn-inst { font-size: max(var(--fs-label), 10.5px); }
.wm-k { font-size: max(var(--fs-label), 9px); }
.con-city { font-size: max(var(--fs-label), 9.5px); }
.uv-eyebrow { font-size: max(var(--fs-label), clamp(10px, 1.3vw, 12px)); }
.proj-k { font-size: max(var(--fs-label), 9.5px); }
.proj-meta .wm-k { font-size: max(var(--fs-label), 8.5px); }
.br-k { font-size: max(var(--fs-label), 9.5px); }
.br-meta .wm-k { font-size: max(var(--fs-label), 8.5px); }
.threshold .th-k { font-size: max(var(--fs-label), 10.5px); }
.hero-mark .hm-tag { font-size: max(var(--fs-label), 10px); }
.vgn-prompt { font-size: max(var(--fs-label), 8.5px); }
.vgn-live { font-size: max(var(--fs-label), 8.5px); }
.ll-cap .ll-k { font-size: max(var(--fs-label), 10.5px); }
.threshold.tdoor .th-k { font-size: max(var(--fs-label), 11px); }
.gt-qr-lb { font-size: max(var(--fs-label), 10px); }
.fin-who .kn-inst { font-size: max(var(--fs-label), 9.5px); }
.sf-qr-lb { font-size: max(var(--fs-label), 11px); }
.sf-links a { font-size: max(var(--fs-label), 11px); }
.era-step .es-k { font-size: max(var(--fs-label), 10.5px); }
.present-sect .now-threshold .nt-k { font-size: max(var(--fs-label), 11px); }
.pride-people { font-size: max(var(--fs-label), clamp(1.35rem, 3vw, 2.05rem)); }
.ml-city { font-size: max(var(--fs-label), 9.5px); }
.ml-tag { font-size: max(var(--fs-label), 9px); }
.fin-who .kn-viewbio { font-size: max(var(--fs-label), 9px); }
@media (min-width: 761px) { .fin-who .kn-role { font-size: max(var(--fs-label), clamp(0.74rem, 0.86vw, 0.88rem)); } }
@media (min-width: 761px) { .fin-who .kn-inst { font-size: max(var(--fs-label), 9px); } }
.knp-city { font-size: max(var(--fs-label), 9px); }
.knp-inst { font-size: max(var(--fs-label), 10px); }
.gr-k { font-size: max(var(--fs-label), 11px); }
.gr-cta { font-size: max(var(--fs-label), 11px); }
.gr-qr-lb { font-size: max(var(--fs-label), 10px); }
.em-k { font-size: max(var(--fs-label), 11px); }
.geomotif .gx-lb { font-size: max(var(--fs-label), 3px); }
.con-card--mono .con-tag { font-size: max(var(--fs-label), 8px); }
.pride-people { font-size: max(var(--fs-label), clamp(1.3rem, 3vw, 2rem)); }
.threshold.tdoor .th-k { font-size: max(var(--fs-label), 12px); }
.en-sub { font-size: max(var(--fs-label), 11px); }
.en-vi-lb { font-size: max(var(--fs-label), 10px); }
.en-cue-t { font-size: max(var(--fs-label), 11px); }
:where(:root:is(:has(link[rel="icon"][href="data:,"]))) .credits { font-size: max(var(--fs-label), 9.5px); }
.credits .cr-h { font-size: max(var(--fs-label), 8.5px); }
.bbp-card em { font-size: max(var(--fs-label), 10.5px); }
:root:where(:not(:has(meta[name="description"][content^="The page you were looking for"]), :has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) :is(.medx-notif-urg) { font-size: max(var(--fs-label), 10px); }
:root:where(:not(:has(meta[name="description"][content^="The page you were looking for"]), :has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) :is(.medx-members-bar-cta) { font-size: max(var(--fs-label), 11.5px); }
:root:where(:not(:has(meta[name="description"][content^="The page you were looking for"]), :has(link[rel="canonical"][href="https://www.medx.hr/biomedical-forum.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/biomedical-forum.html"]), :has(link[rel="icon"][href="data:,"]))) :is(.medx-spk-badge) { font-size: max(var(--fs-label), 10.5px); }
:root:where(:is(:has(link[rel="canonical"][href="https://www.medx.hr/book-of-abstract.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/building-bridges.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/events.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/faq.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/get-involved.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/building-bridges.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/events.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/faq.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/get-involved.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/index.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/plexus.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/hr/plexus-attend.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/"]), :has(link[rel="canonical"][href="https://www.medx.hr/plexus.html"]), :has(link[rel="canonical"][href="https://www.medx.hr/plexus-attend.html"]))) :is(.mxdl-k) { font-size: max(var(--fs-label), 11px); }
:root :is(.alloc-head .al-y) { font-size: max(var(--fs-label), 11px); }
:root :is(.up-strip .up-head .up-k) { font-size: max(var(--fs-label), 11px); }
:root :is(.up-strip .up-when) { font-size: max(var(--fs-label), 11px); }
:root :is(.up-strip a.gn-btn) { font-size: max(var(--fs-label), 11px); }
[style*="font-size:11px"] { font-size: max(var(--fs-label), 11px) !important; }
/* ---- end TYPE FLOOR ---------------------------------------------------------------------------------------- */

/* ---- 6. DRAWINGS WITH TEXT. The network map (network.html) is a 1000 unit drawing that fills a phone screen less 66 px,
   so its 22 unit city names drew at 7 px on an iPhone 390 and under 6 px on a 320. On phones each name now takes
   12000 / (100vw - 66px) units or a little more (the line below stays above that curve from 320 to 620 px, so a name
   draws at 12 to 14 px). The names under a dot move down by their growth, and the Croatia disc grows in steps so its
   name keeps its place inside the disc at 12 px or more. Same words, same positions, same drawing above 620 px ---- */
@media (max-width: 620px) {
  .net-nodes text { font-size: calc(75px - 8.5vw); }
  .net-nodes text[y="26"] { translate: 0 calc((53px - 8.5vw) * .7); }
  .net-hub { transform-box: view-box; transform-origin: 500px 310px; }
}
@media (min-width: 621px) and (max-width: 980px) {   /* here the drawing fills the screen less 126 px and the site sets 18 units */
  .net-nodes text { font-size: max(18px, calc(46.8px - 3.63vw)); }
  .net-hub { transform-box: view-box; transform-origin: 500px 310px; }
}
@media (min-width: 621px) and (max-width: 660px) { .net-hub { scale: 1.05; } }
@media (max-width: 479px) { .net-hub { scale: 1.14; } }
@media (max-width: 416px) { .net-hub { scale: 1.27; } }
@media (max-width: 380px) { .net-hub { scale: 1.43; } }
@media (max-width: 345px) { .net-hub { scale: 1.58; } }
/* the phone drawings on the home page (EN and HR) draw their labels at 12 px like all other text. Their caps labels
   take the app's caps tracking for 12 px labels (--ls-caps, the site had .2em), so a label keeps one line where the
   drawn screen has room and never runs past it */
.home-phone .ph-kick { letter-spacing: var(--ls-caps); }

/* ---- 7. ROOM FOR TEXT AT 12 PX (1 Oct 2026). Rows that no longer held their labels at 12 px on a small phone reflow,
   with the same words. The Gala callout (plexus, speakers, EN and HR): its column may shrink to the screen, so the
   strip of five keynote faces puts its line under the faces below 380 px (on the live site this strip pushed the
   callout's text past the right edge at 320). The Heritage walk: the six-era rail takes two columns below 375 px, the
   wall labels may wrap below 390 px, and the hero's med&X mark stacks its Heritage tag under the logo below 381 px, so
   the EN and HR toggle stays on screen ---- */
@media (max-width: 620px) { .gala-callout .gc-inner { min-width: 0; grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 379px) {
  .gala-callout .plx-gala-kn { flex-wrap: wrap; row-gap: 12px; }
  .gala-callout .plx-gala-kn .kn-label { flex-basis: 100%; margin-left: 0; }
  .gala-callout .gc-act .btn { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 374px) { .pro-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the About numbers (EN and HR): in two columns on a small phone a 12 px label such as "Represented" or "Zastupljenih"
   is wider than its cell, so in Safari the column grew and the page scrolled sideways at 320. Under 380 px the cells
   keep half the row each and take 8 px side padding, so every label fits */
@media (max-width: 379px) {
  .ab-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-total { padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 389px) { .wall-meta .wm-k { white-space: normal; flex: 0 1 auto; min-width: 0; } }
@media (max-width: 380px) {
  .hero-top .hero-mark { flex-direction: column; align-items: flex-start; gap: 7px; }
  .hero-top .hm-sep { display: none; }
}
/* the heroes that carry the Scroll cue (about, portal, get involved, EN and HR): their text ends 104 px above the hero's
   foot from 621 px up, where the cue shows, so the taller labels never run into it (it starts 98 px up) */
@media (min-width: 621px) { .page-hero:has(> .scroll-hint) .ph-inner { padding-bottom: 104px; } }
/* the Heritage pharmacy card's "See the first pharmacy" hint: a glass capsule on the photo's lower corner (the app's
   chip on a photo), laid over the photo through a one-cell grid. It sat at the bottom of the whole card before, over
   the card's date line, and at 12 px it would also cover the card's title */
.placard-specimen.vgn .frame { display: grid; grid-template-columns: minmax(0, 1fr); }
.placard-specimen.vgn .frame > .plate { grid-area: 1 / 1; }
.placard-specimen.vgn .frame > .placard-cap { grid-area: 2 / 1; }
.placard-specimen.vgn .vgn-prompt { grid-area: 1 / 1; align-self: end; justify-self: start; position: relative; left: auto; bottom: auto;
  margin: 0 8px 8px; max-width: calc(100% - 16px); box-sizing: border-box; text-align: left; letter-spacing: .08em; line-height: 1.3; padding: 6px 11px; }

/* ============================================================================================================
   8. POLISH (3 Oct 2026). The live site, refined, not redesigned. Same pages, words, photos and links.
   Content is simply there: no scroll reveals, no count-ups, no parallax. One type and button language, one spacing
   rhythm, sharper photos on phones, calm hover and press, a quiet page change (styles.css and forum.css), a cleaner
   iPhone layout. Every rule sits under <main> or names a component only the main site draws, so heritage/ (which
   also links this file, has no <main> and no site.js) is untouched.
   ============================================================================================================ */

/* 8.1 Content is simply there. Each scroll reveal's hidden start state is cancelled, so the first paint already
   shows everything, before site.js runs (site.js also marks every .reveal shown at once). That covers the generic
   rise, the photo curtains and settles, the drawn rules, the donate allocation bar and the network map. */
:root.js .reveal:not(.in) { opacity: 1; transform: none; }
:root .reveal:is(.d1, .d2, .d3, .d4) { transition-delay: 0s; }
:root.js :is(.home-pgm-row, .home-next-card, .home-news-card, .home-lead-card).reveal:not(.in) img,
:root.js .reveal:not(.in) :is(.nf-figure, .spx-figure) img,
:root.js :is(.nf-figure, .spx-figure).reveal:not(.in) img { transform: none; }
:root.js .home-pgm-row.reveal:not(.in) .home-pgm-media::before,
:root.js .reveal:not(.in) :is(.nf-figure, .spx-figure)::before,
:root.js :is(.nf-figure, .spx-figure).reveal:not(.in)::before { transform: scaleX(0); }
:root.js .up-strip .up-head.reveal:not(.in) .up-rule,
:root.js .chap.reveal:not(.in)::after,
:root.js .bridge-step:not(.in)::before,
:root.js .alloc-wrap:not(.in) .alloc-bar span { transform: none; }
:root.js .net-figure:not(.in) .spoke { transform: none; }
:root.js .net-figure:not(.in) .net-nodes .node { opacity: 1; }
/* the home hero no longer rises in line by line: the page change is the one motion of that moment */
:root main .home-hero-content > *, :root main .home-hero-foot { animation: none; }
/* the About hero photo (EN and HR) stands still from the first paint: no slow zoom and no drift with the scroll. Its
   script writes an inline transform on scroll, which the important rule outweighs, and with no zoom running there is
   nothing for that to cut short, so the photo never jumps */
:root main .page-hero .ph-bg img[src$="cdn_9fcdac7d16_375A4748.jpg"] { animation: none; transform: none !important; }
/* the gold Croatia outline of the home Golden Line band (EN and HR) is simply drawn, with its finished fill and glow,
   and no longer draws itself as the band scrolls in. Its script still sets the dash offset and the done class, both
   now without effect. heritage/ has no <main>, so its own walk is untouched */
:root main .gl-croatia .gl-fill { stroke-dashoffset: 0 !important; transition: none !important;
  filter: drop-shadow(0 0 7px rgba(201,169,98,.6)) drop-shadow(0 0 2px rgba(228,207,156,.8)); }
:root main .gl-croatia .gl-land { fill: rgba(201,169,98,.13); transition: none; }
/* the Scroll cues stand still: a line, not a loop */
:root main .scroll-hint .dot, :root main .hf-bar::after { animation: none; }
:root main .hf-bar::after { transform: none; }

/* 8.2 Type. Headings keep their balanced lines and paragraphs avoid a lone last word. The hero eyebrow is a touch
   tighter, so it reads as one line where it can, and its rule sits on the first line when it wraps. */
:root main :is(p, li, figcaption, .lead) { text-wrap: pretty; }
/* hero eyebrows flow as text, so a live date inside one (the Gala's) is spaced like the words around it, not by the
   flex gap, and a second line starts at the page edge with the rule leading the first */
:root main :is(.home-hero, .page-hero, .gx-hero) .kicker { display: block; letter-spacing: .24em; line-height: 1.7; }
/* the home and Gala eyebrows (EN and HR) wrap on a phone: their two lines are balanced, so the second line is never one
   or two words alone, and the Gala's live date keeps day, month and year together. The page-hero eyebrows keep their
   breaks, as balancing them would start a line on a middle dot or part a name from its year */
:root main :is(.home-hero, .gx-hero) .kicker { text-wrap: balance; }
:root main .gx-hero .kicker [data-medx-slot] { white-space: nowrap; }
:root main :is(.home-hero, .page-hero, .gx-hero) .kicker::before { display: inline-block; vertical-align: middle; margin-right: 14px;
  transform: translateY(-.12em); }
:root main .kicker { align-items: baseline; }
:root main .kicker::before { flex: none; transform: translateY(-.32em); }

/* the hero date lines of Plexus and the Gala hold a live date slot inside a flex row, so the flex gap opened a double
   space beside the date ("2026  · Novinarski dom"). They now flow as text, the dot leading the line */
:root main .ph-when-date, :root main .gx-cd-date { display: block; }
:root main .ph-when-date::before, :root main .gx-cd-date .gx-cd-dot { display: inline-block; vertical-align: middle; margin-right: 12px;
  transform: translateY(-.08em); }

/* the same double space inside the Gala's price button and the home Plexus date chip, whose live slot sat between
   flex items: the slot now keeps one word space before it */
/* (the label flows as one line of text, so on a narrow phone it wraps as words, not as separate boxes) */
:root main .btn.btn:has(> [data-medx-slot]) { display: inline-block; padding-top: 17px; padding-bottom: 17px; text-wrap: balance; }
:root main .btn.btn:has(> [data-medx-slot]) .arr { display: inline-block; margin-left: 10px; }
/* the price never breaks inside itself and a two-line label is balanced, so the Croatian label reads
   "Rezervirajte svoje mjesto" over "· 175 € →", never an arrow alone on a line */
:root main .btn > [data-medx-slot] { white-space: nowrap; }
:root main .chip.metric { display: inline-block; }

/* 8.3 Buttons. One shape and one label: 12 px caps at .14em on every button, 48 px tall at least, the label centred,
   the arrow moves 3 px on hover over 220 ms. */
:root main .btn { min-height: 48px; justify-content: center; text-align: center; letter-spacing: .14em; line-height: 1.25; }
:root main .btn .arr { transition: transform 220ms var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root main .btn:hover .arr { transform: translateX(3px); }
}
/* the Plexus registration band's button now speaks the site's button language */
:root .medx-statusbar.plx-prereg .medx-status-cta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  min-height: 48px; padding: 0 28px; justify-content: center; }
@media (hover: hover) { :root .medx-statusbar.plx-prereg .medx-status-cta:hover { background: var(--crimson-deep); } }

/* 8.4 Hover and press: cards lift 2 px with a soft shadow, never 4 to 6 px */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root main :is(.mx-cardlink, .home-news-card, .teaser-card, .media-card, .way-card, .where-card):hover { transform: translateY(-2px); }
  :root main :is(.bbp-choice, .bbp-level):hover { transform: translateY(-2px); }
  :root main .home-app-stage:hover .home-phone--main { transform: translateY(-3px); }
}

/* 8.5 One spacing rhythm. Sections keep the site's two steps (164 and 110 px on a Mac, 92 and 66 on a phone). Where
   two sections in a row share a background, the gap between them is one step, not two: a section that opens on its
   chapter rule starts on that rule (the rule is the divider), and the Building Bridges partner band sits one small
   step either side of its hairline. The home programmes end on the same step as the rest. */
:root main :is(.ab-proj + .lead-sec, .lead-sec + .gallery, .gx-invite + .gx-keynotes) { padding-top: 0; border-top: 0; }
:root main .stats + .bb-partner { padding-top: 110px; }
@media (max-width: 620px) { :root main .stats + .bb-partner { padding-top: 66px; } }
:root main .home-programs { padding-bottom: 88px; }
:root main .home-whois { padding-bottom: 96px; }
@media (max-width: 620px) {
  :root main .home-programs { padding-bottom: 56px; }
  :root main .home-whois { padding-bottom: 92px; }
}

/* the donate page's crimson sponsor band had no padding of its own, so its eyebrow touched the band's top edge and its
   note the bottom edge. It now sits on the small step like the other bands */
:root main .forum.sponsor-band { padding: 110px 0; }
@media (max-width: 620px) { :root main .forum.sponsor-band { padding: 66px 0; } }

/* 8.5b The About photo mosaic: its photos are <figure>s and kept the browser's 40 px side margins, so the grid's 16 px
   gaps came out uneven and the photos stood narrower than their cells. They now fill their cells on the one gap. */
:root main .ab-mgrid > .gal-item { margin: 0; }

/* 8.6 The members sign-in bar is quieter: the interface type at 14 px, so it takes one or two lines, not three */
:root .medx-members-bar-txt { font-family: var(--font-ui) !important; font-size: 14px; line-height: 1.45; font-weight: 400; color: rgba(247, 243, 238, .88); }
:root .medx-members-bar-cta { border-radius: var(--r-sm) !important; }

/* 8.7 iPhone. Hero text and buttons on one grid: the eyebrow on one line where it fits, the lead in regular weight
   for contrast on the photo, every hero button full width at one height, label centred. */
@media (max-width: 620px) {
  :root main :is(.home-hero, .page-hero, .gx-hero) .kicker { letter-spacing: .16em; line-height: 1.75; }
  :root main :is(.home-hero, .page-hero, .gx-hero) .kicker::before { width: 24px; margin-right: 10px; }
  :root main :is(.home-hero-sub, .ph-lead, .gx-hero-lead, .page-hero .lead) { font-size: 16px; line-height: 1.6; font-weight: 400; }
  :root main :is(.home-hero-cta, .ph-cta, .gx-hero-cta, .page-hero-cta) { flex-direction: column; align-items: stretch; gap: 12px; }
  :root main :is(.home-hero-cta, .ph-cta, .gx-hero-cta, .page-hero-cta) .btn { width: 100%; min-height: 52px; padding: 0 20px; }
  /* every button label a touch tighter on a phone, so labels such as Pre-register for the conference keep one line */
  :root main .btn { letter-spacing: .1em; padding-left: 20px; padding-right: 20px; }
  :root main .hf-index { letter-spacing: .12em; text-wrap: balance; }
  :root main p { line-height: 1.6; }
  :root .medx-members-bar-txt { font-size: 13px; line-height: 1.4; }
  /* past speakers: two portraits a row, so the small source photos are drawn at their own size, not blown up */
  :root main .sp-grid.plx-sp-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; }
  :root main .sp-grid.plx-sp-featured .sp-photo :is(.nobel, .role-tag) { letter-spacing: .06em; padding: 5px 9px; top: 8px; left: 8px;
    right: auto; max-width: calc(100% - 16px); line-height: 1.3; }
  :root main .sp-grid.plx-sp-featured .sp-photo .nobel { gap: 5px; }
  :root main .sp-grid.plx-sp-featured .sp-photo .role-tag { border-radius: var(--r-sm) !important; }
}
/* the Advisory Council facts (HR) at 320 px: the one-line italic key ("Jednom godišnje") and its text no longer fit
   side by side, and the page scrolled sideways. Under 380 px the key sits above its text */
@media (max-width: 379px) {
  :root main .ac-meets-grid { grid-template-columns: minmax(0, 1fr); }
  :root main .ac-facts li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
}