/* styles/nariai.css
   "Nariai" (members) page — title, a centred "hive" of member cards with
   left/right navigation buttons, and a plain names list below. */

*{box-sizing:border-box}

html{
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: hidden;
}

body{
    display: flex;
    flex-direction: column;
    min-height:100vh;
    overflow-x: hidden;
    margin:0;
}

main{
    flex:1;
}

.nariai-hero {
    /* Fixed <header> renders taller than its nominal 120px, so the top
       padding clears its real height, not the declared one. */
    padding: 150px 8vw 10px;
    background: var(--bg);
    text-align: left;
}
h1 {
    font-size: 2.4rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--accent);
}
.nariai-hero p {
    margin: 0;
    color: #222;
    font-size: 1rem;
    /* Unconstrained, this ran the full hero width — on a wide/desktop
       screen that's an uncomfortably long line to read (the same reason
       every other text-heavy section on the site caps its paragraph
       width rather than letting it span the viewport). */
    max-width: 700px;
}
.nariai-legend {
    margin-top: 8px;
    color: #5a6b60;
    font-size: 0.9rem;
}
/* Mirrors the actual member-card colors (.m-card--regular / .m-card--
   ex_member in this same file) so the legend is a direct visual sample
   of what's in the hive below, not just a color description in words. */
.legend-swatch {
    display: inline-block;
    padding: 5px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.legend-swatch--current {
    background: var(--accent);
    color: var(--text-light);
}
.legend-swatch--ex {
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
}
.nariai-hero .btn-1 {
    margin-top: 20px;
}

.nariai-s {
    /* Top-only breathing room: without it the first (newest-year) group's
       tallest cards — leader/ex_leader, 253px tall — sat flush against the
       hero section above, so their top edge visually ran into the hero's
       own text/legend instead of having clear space. */
    padding: 0px 0 0;
    background: var(--bg);
}

/* The hive just flows as a normal block now — no horizontal scrolling, no
   nav buttons. It grows downward as more members are added and is part of
   the page's own vertical scroll, same as everything else on the page. */
.nariai-viewport {
    width: 100%;
    /* Safety net: nariai.php re-centers the mosaic with a negative margin
       if it ever comes out wider than this box (see buildLayout()) — this
       just makes sure that never creates an actual page-level horizontal
       scrollbar even for a moment. */
    overflow-x: hidden;
}

.m-mosaic {
    position: relative;
    /* Clips card drift/repel at the hive's own bounds (so an outermost
       card's hover/physics motion never visibly pokes past its edge). */
    overflow: clip;
}

.m-slot {
    position: absolute;
    will-change: transform;
}

/* Clean rectangular band behind the scroll-highlighted year's own cards,
   vertically sized by updateYearGlow() in pages/nariai.php to that
   group's actual rendered extents, but always running the full mosaic
   width — solid accent on the right (screen/timeline side), fading to
   transparent on the left as it crosses over the cards. z-index:0
   (explicit, not auto) keeps it behind .m-slot cards regardless of DOM
   order. rgba literal = var(--accent) (#038B45) at low alpha —
   color-mix() would read cleaner but isn't universally supported yet,
   and this never needs to track a non-default accent color.

   Revealed via clip-path, not opacity/width — the element is always laid
   out at its full target size so the gradient paints correctly once, and
   clip-path just wipes how much of that fixed painting is visible. Hidden
   state clips away 100% from the left (nothing visible, collapsed against
   the right edge); becoming visible animates that inset down to 0%, which
   reads as the band growing in from the right. Reversing it (inset back
   up to 100%) reads as it retreating back the way it came, instead of a
   plain fade or a width tween that would squash the gradient itself.

   top/height are deliberately NOT transitioned: pages/nariai.php only
   ever changes them while the band is fully clipped away (collapsed,
   invisible), then reveals it at the new spot — so there's nothing to
   animate there. Transitioning them too would tween the box's position
   at the same time as the reveal, reading as the band sliding in
   sideways/diagonally instead of growing cleanly from a fixed spot. */
.m-year-highlight {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to left, rgba(75, 185, 41, 0.18), rgba(255, 255, 255, 0) 70%);
    clip-path: inset(0 0 0 100%);
    transition: clip-path .4s ease;
}
.m-year-highlight.visible {
    clip-path: inset(0 0 0 0%);
}

/* Decorative year timeline, down the reserved right-hand margin — a slim
   line connecting a dot + enlarged accent-colored year number per group,
   positioned by buildLayout() in pages/nariai.php (left/top/height set
   inline from each group's actual rendered extents). */
.m-year-line {
    position: absolute;
    width: 2px;
    background: var(--accent);
    z-index: 1;
    pointer-events: none;
}

.m-year-badge {
    position: absolute;
    /* Offset by half the dot's own width (not the whole row's), so the
       dot's CENTER lands exactly on the line below/above it — "beads on a
       wire" — instead of the row's overall midpoint, which left the dot
       floating to the left of the line it's meant to sit on. */
    transform: translate(-4px, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: gap .35s ease;
    z-index: 2;
    pointer-events: none;
}
/* The active number scales from its own right edge (growing left, away
   from the viewport edge — see .m-year-num below), which otherwise grows
   straight into the dot/line it sits next to. Widening the gap first gives
   it somewhere to grow into instead. */
.m-year-badge.m-year-active {
    gap: 28px;
}

.m-year-badge::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.m-year-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent);
    white-space: nowrap;
    line-height: 1;
}

/* "Nežinoma" (year not yet filled in for that member) — same shape, muted
   grey instead of accent so it doesn't read as an actual dated milestone. */
.m-year-badge--unknown::before { background: var(--accent); }
.m-year-badge--unknown .m-year-num {
    color: var(--accent);
    font-size: 1rem;
    white-space: normal;
    max-width: 80px;
    text-align: center;
}

/* Scroll-driven highlight (see buildLayout()'s updateActiveYearGroup() in
   pages/nariai.php): whichever year-group currently sits nearest the
   vertical center of the viewport gets its cards popped and its badge
   emphasized, continuously as the page scrolls either direction. Applied
   on .m-card, not .m-slot — .m-slot's own transform is owned every frame
   by the ambient-drift physics loop, so a second transform source there
   would just fight it. */
/* Leader/special/special_plus/ex_leader/decor have no hover effect of
   their own — the box stays a fixed size whether hovered or not — so the
   active-highlight scale just stays applied through hover too. Gating it
   off on hover (like the types below) made an already-highlighted box
   visibly SHRINK the instant the mouse arrived, which read as a bug, not
   an interaction. */
/* --active-dx/--active-dy are set per-card by applyActivePush() in
   nariai.php — a push away from the active group's own center, sized to
   roughly match this scale's own overflow, so growing cards clear their
   neighbors instead of overlapping them. Default 0px covers any card that
   doesn't get a push set (shouldn't happen once active, but keeps the
   transform valid either way). Only the active group's cards ever get a
   non-zero value — every other group's packing is untouched. */
/* The transition lives here unconditionally, not only on the .m-year-active
   variant below, because setActiveYearGroup() removes that class the
   instant a card stops being active. If the transition were declared only
   on the .m-year-active rule, removing the class would drop the transition
   and reset the transform in the very same style recalculation, snapping
   the card back instead of easing it — exactly what regular/ex_member avoid
   by keeping their own transform transition at the base-class level too. */
.m-card--leader,
.m-card--special,
.m-card--special_plus,
.m-card--ex_leader,
.m-card--ex_special_plus,
.m-card--ex_special,
.m-card--decor {
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease;
}
.m-card--leader.m-year-active,
.m-card--special.m-year-active,
.m-card--special_plus.m-year-active,
.m-card--ex_leader.m-year-active,
.m-card--ex_special_plus.m-year-active,
.m-card--ex_special.m-year-active,
.m-card--decor.m-year-active {
    transform: translate(var(--active-dx, 0px), var(--active-dy, 0px)) scale(1.08);
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
    z-index: 4;
}

/* Regular/ex_member DO have their own hover-grow effect (see
   .m-card--regular:hover / .m-card--ex_member:hover below), so the active
   scale only applies at rest, giving way to that bigger, more specific
   hover state while the mouse is actually over the card. The transition
   list here deliberately also names width/height/background-color, even
   though this rule itself never sets them — without that, this higher-
   specificity rule REPLACES rather than merges with .m-card--regular's/
   .m-card--ex_member's own transition the moment hover ends, which was
   making those two properties snap back instantly instead of easing. */
.m-card--regular.m-year-active:not(:hover):not(:focus-visible),
.m-card--ex_member.m-year-active:not(:hover):not(:focus-visible) {
    transform: translate(var(--active-dx, 0px), var(--active-dy, 0px)) scale(1.08);
    box-shadow: 0 8px 22px rgba(0,0,0,.2);
    z-index: 4;
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease,
                width .35s ease, height .35s ease, background-color .35s ease;
}

.m-year-num {
    transition: transform .35s ease;
    /* Scaling instead of growing font-size — the badge sits right against
       the reserved right-hand margin, so a bigger LAYOUT width (font-size)
       pushed the enlarged number past the viewport edge, where .m-mosaic's
       overflow:clip hid it. A transform doesn't reflow anything, and
       anchoring it to the right edge makes it visually grow back toward
       the page content instead of further off the edge. */
    transform-origin: right center;
}
.m-year-badge.m-year-active .m-year-num {
    transform: scale(1.3);
}
.m-year-badge.m-year-active::before {
    transform: scale(1.35);
    transition: transform .35s ease;
}

.m-card {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    border-radius: 6px;
    padding: 12px 16px;
    cursor: default;
}

/* Current members (leader, special roles, regular) — solid accent blocks. */
.m-card--leader,
.m-card--special_plus,
.m-card--special,
.m-card--regular {
    background: var(--accent);
    color: var(--text-light);
}

.m-card--regular .m-first,
.m-card--regular .m-last,
.m-card--regular .m-second-last {
    display: block;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
/* --fs-rest/--fs-hover are set inline, per element, only when the hive had
   to shrink to fit (pages/nariai.php's fitScale) — unset the rest of the
   time, so the literal px fallback below is what normally applies. */
.m-card--regular .m-first { font-size: var(--fs-rest, 19px); }
.m-card--regular .m-last,
.m-card--regular .m-second-last { font-size: var(--fs-rest, 16px); }
.m-card--regular .m-voice {
    display: block;
    font-size: var(--fs-rest, 16px);
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}

/* Current regular members grow to the special-role box size on hover, and
   their text grows to the special-role text sizes. The target box and the
   centring offsets are set per card by nariai.php (--gw, --gh, --gdx, --gdy). */
.m-slot:hover {
    z-index: 6;
}
.m-card--regular {
    transition: width .35s ease, height .35s ease, transform .35s ease;
}
.m-card--regular .m-first,
.m-card--regular .m-last,
.m-card--regular .m-second-last,
.m-card--regular .m-voice {
    transition: font-size .35s ease;
}
.m-card--regular:hover {
    width: var(--gw);
    height: var(--gh);
    transform: translate(var(--gdx), var(--gdy));
}
.m-card--regular:hover .m-first { font-size: var(--fs-hover, 29px); }
.m-card--regular:hover .m-last,
.m-card--regular:hover .m-second-last,
.m-card--regular:hover .m-voice { font-size: var(--fs-hover, 20px); }

/* Photo cards: the accent colour is a curtain over the photo. On hover it
   drops from top to bottom, revealing the picture, and the name falls to
   the bottom with it. --fall is set per card by nariai.php to the exact
   distance the name travels. */
.m-card--has-photo {
    overflow: hidden;
    background-image: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 60%), var(--photo);
    background-size: cover;
    background-position: center;
    justify-content: flex-start;
}
.m-card--has-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    border-radius: inherit;
    transform: translateY(0);
    transition: transform .55s cubic-bezier(.65,0,.35,1);
    z-index: 0;
    pointer-events: none;
}
.m-card--has-photo .m-name-block,
.m-card--has-photo .m-role,
.m-card--has-photo .m-voice {
    position: relative;
    z-index: 1;
}
.m-name-block {
    display: block;
}
.m-card--has-photo .m-name-block {
    transform: translateY(0);
    transition: transform .6s cubic-bezier(.65,0,.35,1) 0s;
}
.m-card--has-photo .m-role,
.m-card--has-photo .m-voice {
    transition: opacity .35s ease .6s, font-size .35s ease;
}
.m-card--has-photo:hover::before,
.m-card--has-photo:focus-visible::before {
    transform: translateY(100%);
}
.m-card--has-photo:hover .m-name-block,
.m-card--has-photo:focus-visible .m-name-block {
    transform: translateY(var(--fall, 0px));
}
.m-card--has-photo:hover .m-role,
.m-card--has-photo:hover .m-voice,
.m-card--has-photo:focus-visible .m-role,
.m-card--has-photo:focus-visible .m-voice {
    opacity: 0;
    transition: opacity .2s ease 0s, font-size .35s ease;
}

/* Former members — outlined, grey. */
.m-card--ex_member,
.m-card--ex_leader,
.m-card--ex_special_plus,
.m-card--ex_special {
    background: var(--bg);
    border: 1.5px solid var(--accent);
    color: var(--accent);
}

/* Decoration — faint outlined squares, no text. */
.m-card--decor {
    background: transparent;
    border: 1.5px solid var(--accent);
    border-radius: 4px;
}

/* Named-card typography (leader / special / special_plus / ex_leader /
   ex_special_plus / ex_special). Font sizes per rank must match FONT_TIERS
   in pages/nariai.php, so the boxes measured there hold the text rendered
   here. Each ex_* type shares its font-size rule with the current-member
   type it mirrors (ex_leader<->leader, ex_special_plus<->special_plus,
   ex_special<->special), not its own separate size. */
.m-card--leader .m-first,
.m-card--special_plus .m-first,
.m-card--special .m-first,
.m-card--ex_leader .m-first,
.m-card--ex_special_plus .m-first,
.m-card--ex_special .m-first {
    display: block;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.m-card--leader .m-last,
.m-card--leader .m-second-last,
.m-card--special_plus .m-last,
.m-card--special_plus .m-second-last,
.m-card--special .m-last,
.m-card--special .m-second-last,
.m-card--ex_leader .m-last,
.m-card--ex_leader .m-second-last,
.m-card--ex_special_plus .m-last,
.m-card--ex_special_plus .m-second-last,
.m-card--ex_special .m-last,
.m-card--ex_special .m-second-last {
    display: block;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.m-card--leader .m-role,
.m-card--leader .m-voice,
.m-card--special_plus .m-role,
.m-card--special_plus .m-voice,
.m-card--special .m-role,
.m-card--special .m-voice,
.m-card--ex_leader .m-role,
.m-card--ex_leader .m-voice,
.m-card--ex_special_plus .m-role,
.m-card--ex_special_plus .m-voice,
.m-card--ex_special .m-role,
.m-card--ex_special .m-voice {
    display: block;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.m-card--leader .m-first,
.m-card--ex_leader .m-first { font-size: var(--fs-rest, 40px); }
.m-card--leader .m-last,
.m-card--leader .m-second-last,
.m-card--leader .m-role,
.m-card--leader .m-voice,
.m-card--ex_leader .m-last,
.m-card--ex_leader .m-second-last,
.m-card--ex_leader .m-role,
.m-card--ex_leader .m-voice { font-size: var(--fs-rest, 25px); }

.m-card--special_plus .m-first,
.m-card--ex_special_plus .m-first { font-size: var(--fs-rest, 35px); }
.m-card--special_plus .m-last,
.m-card--special_plus .m-second-last,
.m-card--special_plus .m-role,
.m-card--special_plus .m-voice,
.m-card--ex_special_plus .m-last,
.m-card--ex_special_plus .m-second-last,
.m-card--ex_special_plus .m-role,
.m-card--ex_special_plus .m-voice { font-size: var(--fs-rest, 23px); }

.m-card--special .m-first,
.m-card--ex_special .m-first { font-size: var(--fs-rest, 29px); }
.m-card--special .m-last,
.m-card--special .m-second-last,
.m-card--special .m-role,
.m-card--special .m-voice,
.m-card--ex_special .m-last,
.m-card--ex_special .m-second-last,
.m-card--ex_special .m-role,
.m-card--ex_special .m-voice { font-size: var(--fs-rest, 20px); }

/* Former member: first name, surname and voice part each on their own
   line, all visible at rest — same as current members, no hover/focus
   needed to see the voice part. First name renders bigger than the
   surname/voice lines, mirroring the current-member cards' own first/
   last split (must match the fsFirst/fsLast split in pages/nariai.php's
   sizeFor()). */
.m-card--ex_member .m-first {
    display: block;
    font-size: var(--fs-rest, 19px);
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}
.m-card--ex_member .m-last,
.m-card--ex_member .m-second-last {
    display: block;
    font-size: var(--fs-rest, 16px);
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
}
.m-card--ex_member .m-voice {
    display: block;
    font-size: var(--fs-rest, 16px);
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}
/* Grows to the average size of the ex_special cards on hover, same
   mechanism as .m-card--regular:hover above (--gw/--gh/--gdx/--gdy set
   per card by pages/nariai.php) — not a uniform transform: scale(), so
   it matches how current members pop (box + text both resize, instead of
   the whole card just visually zooming). */
.m-card--ex_member {
    transition: width .35s ease, height .35s ease, transform .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.m-card--ex_member .m-first,
.m-card--ex_member .m-last,
.m-card--ex_member .m-second-last,
.m-card--ex_member .m-voice {
    transition: font-size .35s ease;
}
.m-card--ex_member:hover,
.m-card--ex_member:focus-visible {
    width: var(--gw);
    height: var(--gh);
    transform: translate(var(--gdx), var(--gdy));
    z-index: 5;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.m-card--ex_member:hover .m-first,
.m-card--ex_member:focus-visible .m-first { font-size: var(--fs-hover, 29px); }
.m-card--ex_member:hover .m-last,
.m-card--ex_member:hover .m-second-last,
.m-card--ex_member:hover .m-voice,
.m-card--ex_member:focus-visible .m-last,
.m-card--ex_member:focus-visible .m-second-last,
.m-card--ex_member:focus-visible .m-voice { font-size: var(--fs-hover, 20px); }

.nariai-note a {
    color: var(--accent);
    text-decoration: underline;
}

/* Small corner badge marking a card that has its own submitted greeting
   attached (admin_nariai.php's "Prisegtas sveikinimas") — the only visual
   cue that hovering/focusing reveals something, since the popover itself
   (below) starts hidden. Absolute within .m-card, which is already
   position:relative. */
.m-greeting-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
    pointer-events: none;
}

/* Popover for that same greeting — appended to <body> by its own script
   at the end of this page, deliberately OUTSIDE .m-mosaic (which clips
   overflow) and position:fixed (viewport-relative, not mosaic-relative)
   so it's never cut off by a card sitting near the hive's own edge, and
   stays correctly placed regardless of the hive's own scroll position.
   Hidden via opacity+visibility (not display:none) so its own
   offsetWidth/Height are always measurable for the JS's own positioning
   math, and so the fade can transition instead of snapping. */
.m-greeting-popover {
    position: fixed;
    z-index: 50;
    max-width: 280px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.25);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    pointer-events: none;
}
.m-greeting-popover.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
}
.m-greeting-popover--below {
    transform: translateY(-4px);
}
.m-greeting-popover--below.is-visible {
    transform: translateY(0);
}
.m-greeting-text {
    margin: 0;
    padding: 2px 4px;
    font-size: .85rem;
    line-height: 1.4;
    color: #222;
    white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
    .m-greeting-popover {
        transition: none;
    }
}

/* Names list below the hive. main.css's sitewide `ul` rule (flex, nowrap,
   list-style:none) is overridden here so these stack as normal lists. */
.nariai-list {
    margin: 40px 0 80px;
    padding: 0 8vw;
    text-align: left;
}
.nariai-names {
    display: block;
    list-style: none;
    white-space: normal;
    padding: 0;
    margin: 0 0 28px;
    column-width: 230px;
    column-gap: 28px;
}
.nariai-names li {
    break-inside: avoid;
    padding: 3px 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}
.nariai-names--current li { color: var(--accent); }
.nariai-names--ex li      { color: #8a8a8a; }
.nariai-role { font-weight: 700; }

/* 481–768px (tablet-width — "smaller than desktop" but not an actual
   phone): layout-only tweaks. Member-card text/sizing is deliberately NOT
   touched here — it stays at full desktop size all the way down to
   480px (pages/nariai.php's isMobile threshold matches), so this range
   never drops back to the old sub-16px floor. Only real phone widths
   (the @media (max-width: 480px) block below) get the smaller card text. */
@media (max-width: 768px) {
    .nariai-hero { padding: 175px 6vw 0px; }
    .nariai-hero h1 { font-size: 1.8rem; }
    .m-year-num { font-size: 1.1rem; }
    .m-year-badge--unknown .m-year-num { font-size: .8rem; max-width: 56px; }
    .m-year-badge::before { width: 8px; height: 8px; }
    .m-year-badge { transform: translate(-3px, -50%); }
    .m-year-badge.m-year-active .m-year-num { transform: scale(1.25); }
    .m-year-badge.m-year-active { gap: 18px; }
}

/* Real phone widths. Font sizes are scaled down 0.75x from desktop here,
   landing the smallest tier (regular/ex_member's voice line) on a 12px
   floor, every other tier shrinking by the same ratio. These literal px
   fallbacks must stay in sync with FONT_TIERS/isMobile's *M fields in
   pages/nariai.php, since sizeFor() measures card boxes against those
   JS values, not these CSS ones. */
@media (max-width: 480px) {
    .m-card--leader .m-first,
    .m-card--ex_leader .m-first { font-size: var(--fs-rest, 30px); }
    .m-card--leader .m-last,
    .m-card--leader .m-second-last,
    .m-card--leader .m-role,
    .m-card--leader .m-voice,
    .m-card--ex_leader .m-last,
    .m-card--ex_leader .m-second-last,
    .m-card--ex_leader .m-role,
    .m-card--ex_leader .m-voice { font-size: var(--fs-rest, 19px); }

    .m-card--special_plus .m-first,
    .m-card--ex_special_plus .m-first { font-size: var(--fs-rest, 26px); }
    .m-card--special_plus .m-last,
    .m-card--special_plus .m-second-last,
    .m-card--special_plus .m-role,
    .m-card--special_plus .m-voice,
    .m-card--ex_special_plus .m-last,
    .m-card--ex_special_plus .m-second-last,
    .m-card--ex_special_plus .m-role,
    .m-card--ex_special_plus .m-voice { font-size: var(--fs-rest, 17px); }

    .m-card--special .m-first,
    .m-card--ex_special .m-first { font-size: var(--fs-rest, 22px); }
    .m-card--special .m-last,
    .m-card--special .m-second-last,
    .m-card--special .m-role,
    .m-card--special .m-voice,
    .m-card--ex_special .m-last,
    .m-card--ex_special .m-second-last,
    .m-card--ex_special .m-role,
    .m-card--ex_special .m-voice { font-size: var(--fs-rest, 15px); }

    .m-card--regular .m-first { font-size: var(--fs-rest, 14px); }
    .m-card--regular .m-last,
    .m-card--regular .m-second-last,
    .m-card--regular .m-voice { font-size: var(--fs-rest, 12px); }
    .m-card--regular:hover .m-first { font-size: var(--fs-hover, 22px); }
    .m-card--regular:hover .m-last,
    .m-card--regular:hover .m-second-last,
    .m-card--regular:hover .m-voice { font-size: var(--fs-hover, 15px); }

    .m-card--ex_member .m-first { font-size: var(--fs-rest, 14px); }
    .m-card--ex_member .m-last,
    .m-card--ex_member .m-second-last,
    .m-card--ex_member .m-voice { font-size: var(--fs-rest, 12px); }
    .m-card--ex_member:focus-visible .m-first { font-size: var(--fs-hover, 22px); }
    .m-card--ex_member:focus-visible .m-last,
    .m-card--ex_member:focus-visible .m-second-last,
    .m-card--ex_member:focus-visible .m-voice { font-size: var(--fs-hover, 15px); }

    /* Role/voice text is free-form (whatever the admin typed into
       "Pareigos / rolė") and can be wider than the phone screen itself at
       these tiers' own font size — names stay nowrap (a wrapped surname
       reads worse than just being the card's own width floor), but role/
       voice lines wrap onto extra lines instead of forcing the card wider
       than the available space. Must stay matched with sizeFor()'s own
       per-line width cap/wrapped-line count in pages/nariai.php, which
       sizes the box assuming wrapping happens at exactly this width. */
    .m-card--leader .m-role, .m-card--leader .m-voice,
    .m-card--special_plus .m-role, .m-card--special_plus .m-voice,
    .m-card--special .m-role, .m-card--special .m-voice,
    .m-card--ex_leader .m-role, .m-card--ex_leader .m-voice,
    .m-card--ex_special_plus .m-role, .m-card--ex_special_plus .m-voice,
    .m-card--ex_special .m-role, .m-card--ex_special .m-voice {
        white-space: normal;
        word-break: break-word;
    }

    .m-card--leader.m-year-active,
    .m-card--special.m-year-active,
    .m-card--special_plus.m-year-active,
    .m-card--ex_leader.m-year-active,
    .m-card--ex_special_plus.m-year-active,
    .m-card--ex_special.m-year-active,
    .m-card--decor.m-year-active,
    .m-card--regular.m-year-active:not(:hover):not(:focus-visible),
    .m-card--ex_member.m-year-active:not(:hover):not(:focus-visible) { transform: translate(var(--active-dx, 0px), var(--active-dy, 0px)) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    /* Highlight itself stays (it's scroll-driven, not an autonomous
       animation), just snaps instead of bouncing/easing into place. Must
       target the base .m-card--leader/special/special_plus/ex_leader/decor
       classes too, not only their .m-year-active variant — that's where
       the transform/box-shadow transition now lives unconditionally (see
       the comment above those base rules), so disabling it only on the
       .m-year-active compound would leave it animating the moment the
       class comes OFF (the active highlight finishing/leaving a group). */
    .m-card--leader,
    .m-card--special,
    .m-card--special_plus,
    .m-card--ex_leader,
    .m-card--ex_special_plus,
    .m-card--ex_special,
    .m-card--decor,
    .m-card--regular.m-year-active:not(:hover):not(:focus-visible),
    .m-card--ex_member.m-year-active:not(:hover):not(:focus-visible),
    .m-year-num,
    .m-year-badge,
    .m-year-badge::before,
    .m-year-highlight {
        transition: none;
    }
}