/* ==========================================================================
   R88/R89 — social photo card (1:1 square, 1080 x 1080)
   --------------------------------------------------------------------------
   Every length below is a FINAL PIXEL value for the 1080px export. The card
   is laid out at exactly 1080x1080 and the on-screen preview shrinks it with
   a transform on a wrapper, so nothing here may be expressed in em/rem/%:
   those would compound with the preview scale and the exported PNG would not
   match what is on screen.

   The sheet is a SQUARE again. The thumbnail inside it is a 16:9 band that
   spans the card's full width, straight under the header and straight above
   the headline block — no frame, no rounded corners, no vignette — and the
   headline block takes the space that is left.
   ========================================================================== */

/* --- Page chrome (never exported; the toolbar lives outside the card) ---- */

:root {
    --nc-red: #e10600;
    --nc-deep: #b30000;
    --nc-gold: #ffd700;
    /* The gold sampled from the main site logo's "G" mark (public/g_bangla_news.png):
       mid-tone #cf9d47, highlight #f8cb73. This is the gold the thumbnail border
       and the date text use, so the card ties back to the masthead logo. */
    --nc-gold-logo: #d4a03c;
    --nc-ink: #0f0303;
}

* {
    box-sizing: border-box;
}

body.nc-body {
    margin: 0;
    background: #0a0a0a;
    color: #e5e7eb;
    -webkit-font-smoothing: antialiased;
    /* NO `font-family` here on purpose. It used to live on this rule and the
       card inherited it, which is why the embedded copy on a single-post page
       picked up the SITE's typeface instead. The face is declared on
       `.nc__card` now — exactly one place, no inheritance to lose. */
}

.nc-bar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 20px;
    background: rgba(15, 3, 3, .94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #3b1212;
}

.nc-bar__id {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    color: #fca5a5;
}

.nc-bar__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

.nc-bar__ttl {
    min-width: 0;
    flex: 1 1 260px;
    font-size: 13px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nc-bar__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-inline-start: auto;
}

.nc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border: 1px solid #7f1d1d;
    border-radius: 8px;
    background: #1c1010;
    color: #fcd34d;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.nc-btn:hover:not(:disabled) {
    background: #2a1414;
    border-color: #b91c1c;
    color: #fde68a;
}

.nc-btn:disabled {
    opacity: .55;
    cursor: progress;
}

.nc-btn--go {
    background: linear-gradient(135deg, #ef4444, #991b1b);
    border-color: #f87171;
    color: #fff;
}

.nc-btn--go:hover:not(:disabled) {
    background: linear-gradient(135deg, #f87171, #b91c1c);
    color: #fff;
}

.nc-stage {
    padding: 26px 16px 40px;
    display: flex;
    justify-content: center;
}

.nc-note {
    max-width: 1080px;
    margin: 0 auto 22px;
    padding: 0 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #9ca3af;
}

.nc-note a {
    color: #fcd34d;
    text-decoration: none;
    word-break: break-all;
}

.nc-note a:hover {
    text-decoration: underline;
}

.nc-note__err {
    display: none;
    margin: 0 auto 16px;
    max-width: 760px;
    padding: 11px 15px;
    border: 1px solid #7f1d1d;
    border-radius: 8px;
    background: rgba(127, 29, 29, .22);
    color: #fecaca;
    font-size: 13px;
    text-align: center;
}

.nc-note__err.is-on {
    display: block;
}

/* --- The scale wrapper ---------------------------------------------------
   The wrapper carries the preview scale; .nc__card never does. That separation
   matters twice over: the wrapper reserves the right amount of room, and the
   export can target .nc__card directly with no transform to undo.          */

.nc-fit {
    width: calc(var(--nc-fit) * 1080px);
    height: calc(var(--nc-fit) * 1080px);
    flex: none;
    /* The hairline and the drop shadow live on the WRAPPER, never on the card.
       html-to-image clones the card node and rasterises it, and a shadow drawn
       OUTSIDE the card's border-radius lands in the PNG's corners — which is
       why the downloaded file used to show red wedges at the bottom two
       corners (the glow is offset 24px downward, so the top two were clean).
       On the wrapper they still frame the preview and are never exported. */
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, .2),
        0 24px 70px -14px rgba(180, 0, 0, .55);
}

.nc__card {
    width: 1080px;
    height: 1080px;
    transform: scale(var(--nc-fit));
    transform-origin: top left;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border-radius: 24px;
    /* The visible 6px red frame is the .nc__edge element, NOT a border and NOT
       this shadow. A real `border` would cost the card 6px on each side, so the
       16:9 band would be 16:9 of 1068 instead of 1080. And an INSET shadow is
       painted with the background, i.e. UNDERNEATH the children — the header,
       the media band and the footer are opaque and cover it completely, which
       is why the old 3px inset ring was invisible. */
    background: #000;

    /* The typeface is declared HERE, not on `body.nc-body`, because the card
       is also embedded in the single-post page. There, `<body>` is the site's
       own and sets 'Noto Serif Bengali', which would otherwise inherit into
       the headline through the bare elements. Declaring it on `.nc__card`
       makes the card render identically no matter which page hosts it. */
    font-family: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #f8fafc;
    text-align: left;
    letter-spacing: normal;
}

/* --- The red frame around the whole sheet --------------------------------- *
 * 6px, all four sides. Absolutely positioned and pointer-events:none, so it
 * costs the layout nothing — the content box stays exactly 1080x1080 and the
 * 16:9 thumbnail band keeps its exact ratio. `border-radius: inherit` makes the
 * ring follow the card's own 24px corners instead of squaring them off, and it
 * is the LAST child, so it paints over the header / media / headline / footer
 * edges rather than under them.
 * ⚠️ If this ever needs to be hidden in one context, do it with `display:none`
 * — setting the border to 0 would leave a 6px gap where it used to be.
 */
.nc__edge {
    position: absolute;
    inset: 0;
    z-index: 20;
    border: 6px solid var(--nc-red);
    border-radius: inherit;
    pointer-events: none;
}

/* --- Top bar: logo + date ------------------------------------------------ */

.nc__top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 22px;
    /* White header: the main-site logo is a red/gold mark that needs a light
       ground to read (it used to sit on a red gradient). Everything else in
       this block is unchanged. */
    background: #fff;
    border-bottom: 1px solid rgba(239, 68, 68, .4);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
}

.nc__logo {
    /* 89 → 104px at the reader's request ("logo size ektu increase"). The header
       is a flex row with 16px vertical padding, so this costs the card 15px of
       header height; the 16:9 media band is a fixed 607.5px, so the loss comes
       out of .nc__head (which is flex:1). */
    height: 104px;
    width: auto;
    object-fit: contain;
    /* No drop-shadow: the reader asked for no shadow under the header logo. */
}

.nc__date {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 19px;
    border-radius: 999px;
    /* Red pill with a red outline and white text; the calendar icon inherits
       currentColor, so it turns white too. */
    background: var(--nc-red);
    border: 2px solid var(--nc-red);
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.nc__date svg {
    width: 22px;
    height: 22px;
    flex: none;
}

/* (The site address used to sit under the date pill here. The reader asked
   for it at the right of the footer instead, so the header is back to logo +
   date and nothing else.) */

/* --- Hero media ---------------------------------------------------------- *
 * R89: the thumbnail is a 16:9 band that spans the card's full width. It sits
 * directly under the header and directly above the headline block, with no
 * padding frame, no corner radius and no vignette — the only frame left on
 * the sheet is the card's own border. The height is written in pixels rather
 * than left to `aspect-ratio` because the exporter rasterises a serialised
 * copy of this node and an explicit height cannot be re-derived differently.
 */

.nc__media {
    position: relative;
    flex: none;
    width: 100%;
    /* 1080 / 16 * 9 = 607.5 — exactly 16:9 of the card's width. */
    height: 607.5px;
    aspect-ratio: 16 / 9;
    /* ⚠️ VISIBLE, not hidden. `overflow:hidden` clips descendants at the
       PADDING edge — which is exactly the photo's own outline — so the photo's
       outward black shadow (see .nc__photo) was clipped to nothing. Nothing in
       here actually overflows: the photo is sized to the content box and the
       tint is inset 0, so visible changes no other pixel. */
    overflow: visible;
    /* 26px frame on THREE sides only (top/left/right), bottom open.
       The OUTER edge is square (border-radius:0); the rounding lives on the
       PHOTO's top corners (see .nc__photo).
       The border itself is TRANSPARENT so the background gradient beneath it
       shows through as the frame colour. The gradient runs top→bottom:
       GOLD at the top, through amber, into the SAME red as the bottom
       .nc__tint overlay, so the frame and the overlay blend at the bottom. */
    border-top: 26px solid transparent;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-radius: 0;
    /* Starts GOLD at the very top so the top edge and the top of both side
       edges are the same colour — the three sides read as ONE continuous
       frame rather than three strips. It then runs down through amber into
       the overlay red at the bottom.

       ⚠️ Use background-IMAGE, never the `background` shorthand: the shorthand
       resets background-origin/-repeat, and origin is the whole point here.
       ⚠️ background-origin MUST be border-box. It defaults to padding-box,
       which anchors the gradient 26px DOWN (at the photo, not at the frame's
       outer edge) and then TILES it upward, so the top border showed the tail
       of the previous tile (#6d0000 dark red) while the side borders showed
       gold at that same height — the top edge read as a separate strip and the
       frame never joined at the corners. With border-box the 0% stop sits on
       the frame's own top edge, so all three sides are the same gradient. */
    background-color: #6d0000;
    /* The TOP band is FLAT GOLD — no gradient across it at all. A 180deg
       gradient paints every x at a given y with the same colour, so holding the
       first stop flat until 4.28% (= 26px, the exact height of the top band on
       this 607.5px box) makes the entire top edge one solid gold. The sides
       then pick the gradient up on the very pixel where the top band ends, so
       both side bands START on that same gold and the corners join with no
       seam — flat on top, gradient down the left and right.
       ⚠️ The top-right highlight radial that used to be the first layer here is
       GONE: it was a wash over the top band, i.e. exactly the "gradient on the
       top" this look rules out. Do not re-add it without confining it to the
       side bands (it cannot be, with a single centred radial). */
    background-image: linear-gradient(
        180deg,
        #e8c25a 0%,
        #e8c25a 4.28%,   /* 26 / 607.5 — flat gold for the whole top band */
        #d4a03c 18%,
        #c08a2e 38%,
        #b06a26 56%,
        #a31414 80%,
        #6d0000 100%
    );
    background-origin: border-box;
    background-clip: border-box;
    background-repeat: no-repeat;
}

.nc__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(1.02) contrast(1.05);
    /* Inner rounding: the photo's top corners curve INSIDE the square gold
       frame; the gold background behind it fills the corner, so the outside
       of the border stays a hard 90°. */
    border-radius: 18px 18px 0 0;
    /* Black shadow on the OUTSIDE of the photo only — no inset layer, so the
       picture itself is never darkened. It lands on the 26px gold band, which
       makes the photo read as sitting ON TOP of the frame rather than punched
       into it.
         • layer 1  a 1px contact line, so the edge is defined against the gold
         • layer 2  the soft black halo, equal on all sides
         • layer 3  a longer falloff pulled downward, which also ties the photo
                    into the .nc__tint / .nc__head shadow at the bottom
       No light layers here: the top-right highlight was removed when the reader
       asked for a flat gold top, and a box-shadow cannot be faded along one
       edge anyway. */
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .45),
        0 0 20px 2px rgba(0, 0, 0, .62),
        0 12px 28px 6px rgba(0, 0, 0, .45);
}

.nc__media--fallback {
    background: radial-gradient(circle at center, #260505 0%, #110101 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nc__photo--fallback {
    width: auto !important;
    height: 420px !important;
    max-width: 85% !important;
    max-height: 85% !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 15px 30px rgba(0,0,0,0.85)) !important;
}

/* The red wash across the bottom of the thumbnail. It is an OVERLAY, not a
   vignette: it does not sit inside a frame and it does not cut the photo —
   it bleeds the image into the sheet's own red so the hard edge reads as
   ink rather than as a crop. */
.nc__tint {
    position: absolute;
    inset: auto 0 0 0;
    /* 44% → 34%: the red wash was climbing too far up the picture. 34% of the
       581.5px content box = ~198px, which still carries the photo into the
       headline block without swallowing the lower third of the image. */
    height: 34%;
    background: linear-gradient(0deg,
        rgba(109, 0, 0, .95) 0%,
        rgba(140, 0, 0, .72) 38%,
        rgba(140, 0, 0, .28) 70%,
        rgba(140, 0, 0, 0) 100%);
    pointer-events: none;
}

/* --- Headline block ------------------------------------------------------ *
 * The media band is a fixed 16:9, so the headline block takes whatever the
 * square has left and centres the title in it.
 */

.nc__head {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 25px 32px 32px;
    background: linear-gradient(180deg, #6d0000, #8c0000, #500000);
    border-top: 3px solid rgba(251, 191, 36, .8);
    box-shadow: 0 18px 34px rgba(0, 0, 0, .55);
}

.nc__pattern {
    position: absolute;
    inset: 0;
    opacity: .2;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 25px 25px;
}

.nc__title {
    position: relative;
    margin: 0;
    width: 100%;
    color: #fff;
    font-size: 54px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-align: center;
    text-shadow: 0 5px 19px rgba(0, 0, 0, .85);
    /* Long headlines are shortened by JS before export; the clamp is the hard
       ceiling for the (brief) moment in between. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
}

/* While measuring, the clamp is lifted so scrollHeight reports the real
   overflow instead of the clamped box height. */
.nc__title--measuring {
    display: block;
    -webkit-line-clamp: unset;
}

/* --- Footer: three sections on one line ------------------------------------ *
 * left   : the four marks with "/GBanglaNews" centred UNDER them — the label
 *          sits on the icon group's middle, not on the card's left edge
 * centre : the notice pill, larger than the rest
 * right  : the site address, text only
 * A `1fr auto 1fr` grid gives the two outer sections equal width, so the
 * notice is centred against the CARD rather than against whatever the labels
 * happen to measure. `align-items:center` puts all three on one middle line.
 */

.nc__foot {
    flex: none;
    display: flex;
    flex-direction: column;
    padding: 14px 22px 16px;
    background: #350000;
    border-top: 1px solid rgba(127, 29, 29, .6);
}

.nc__foot-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* left section: marks above, wordmark below, both on the same centre line */
.nc__sect--brand {
    justify-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nc__social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    flex-wrap: nowrap;
}

/* Each mark is a link wrapping a transparent PNG. */
.nc__mark {
    flex: none;
    display: inline-flex;
    width: 38px;
    height: 38px;
    text-decoration: none;
}

.nc__mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Centred under the marks it belongs to. */
.nc__site-text {
    color: #fcd34d;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .01em;
    text-align: center;
    white-space: nowrap;
}

/* The notice is the loudest thing on the row: one step up from the labels. */
.nc__notice {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 22px;
    border-radius: 999px;
    border: 1px solid #7f1d1d;
    background: rgba(76, 5, 25, .85);
    color: #fcd34d;
    font-size: 28px;
    font-weight: 700;
    white-space: nowrap;
}

.nc__notice s {
    text-decoration: none;
    color: #fbbf24;
    font-weight: 700;
}

.nc__url {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    color: #fecaca;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

/* --- Gallery grid (/cards) ----------------------------------------------- */

.nc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px 22px;
    padding: 24px 18px 50px;
    max-width: 1680px;
    margin: 0 auto;
}

.nc-cell {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nc-cell .nc-fit {
    margin: 0 auto;
}

.nc-cell__bar {
    display: flex;
    gap: 8px;
}

.nc-cell__bar .nc-btn {
    flex: 1;
    justify-content: center;
    padding: 7px 10px;
    font-size: 12px;
}

.nc-pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0 18px 44px;
    flex-wrap: wrap;
}

.nc-pager a,
.nc-pager span {
    min-width: 34px;
    padding: 7px 11px;
    border: 1px solid #3b1212;
    border-radius: 7px;
    background: #1c1010;
    color: #d1d5db;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

.nc-pager .is-on {
    background: linear-gradient(135deg, #ef4444, #991b1b);
    border-color: #f87171;
    color: #fff;
    font-weight: 700;
}

.nc-pager .is-off {
    opacity: .4;
}

/* --- Narrow screens ------------------------------------------------------ */

@media (max-width: 560px) {
    .nc-grid {
        grid-template-columns: 1fr;
    }

    .nc-bar {
        padding: 10px 12px;
    }

    .nc-bar__ttl {
        display: none;
    }
}

/* ===================================================================== *
 * R88 — the summary sheet ("সংবাদ সংক্ষেপে")
 * ---------------------------------------------------------------------
 * Redrawn against the reference notice: a dark navy header bar with the
 * wordmark and the site address under it, a large black headline, a red date
 * bar with a small dark square before the time, the justified body over a
 * faint dot watermark, and a dark navy footer with two cells split by a
 * hairline. The red frame is the sheet's own border.
 * ===================================================================== */

.sc__card {
    display: flex;
    flex-direction: column;
    width: 1080px;
    height: 1080px;
    box-sizing: border-box;
    overflow: hidden;
    /* The red frame is INSIDE the 1080x1080 sheet (border-box), so the export
       is exactly the reference's proportions and not a red card on white. */
    border: 10px solid #e11d2e;
    border-radius: 10px;
    background: #fff;
    color: #111827;
    font-family: 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.5;
    text-align: left;
}

/* --- header bar -------------------------------------------------------- */

.sc__top {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 20px 36px;
    background: #fff;
    border-bottom: 2px solid #f1f5f9;
}

.sc__brand {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.sc__logo {
    height: 72px;
    width: auto;
    flex: none;
    object-fit: contain;
}

.sc__brand-stack {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sc__brand-text {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    line-height: 1.1;
    white-space: nowrap;
}

/* the site address, printed in small type under the wordmark */
.sc__brand-url {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    color: #94a3b8;
    white-space: nowrap;
}

.sc__section {
    flex: none;
    color: #e11d2e;
    font-size: 30px;
    font-weight: 800;
    white-space: nowrap;
}

/* --- the notice itself ------------------------------------------------- */

.sc__main {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px 40px 0;
}

.sc__title {
    margin: 0;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.015em;
    color: #0f172a;
    overflow-wrap: break-word;
    /* The clamp is the ceiling; the JS steps the size down first so a long
       headline still fits the three lines instead of being cut mid-word. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sc__title--measuring {
    display: block;
    -webkit-line-clamp: unset;
}

/* the red date bar, with the small dark square the reference puts before it */
.sc__date {
    flex: none;
    display: flex;
    align-items: center;
    gap: 18px;
    align-self: flex-start;
    width: min(100%, 560px);
    height: 58px;
    margin-top: 28px;
    padding: 0 26px;
    background: #e11d2e;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}

.sc__date-mark {
    width: 13px;
    height: 13px;
    flex: none;
    background: #7f1020;
}

/* --- body -------------------------------------------------------------- */

.sc__body {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 30px;
    padding-bottom: 28px;
    overflow: hidden;
}

.sc__lead {
    margin: 0;
    font-size: 30px;
    line-height: 1.72;
    color: #1f2937;
    text-align: justify;
    overflow-wrap: break-word;
}

/* the faint pattern behind the body: dots, plus the navy corner glow */
.sc__watermark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background-image:
        radial-gradient(58% 52% at 100% 100%, rgba(11, 18, 32, .22), rgba(11, 18, 32, 0) 72%),
        radial-gradient(rgba(225, 29, 46, .16) 2.4px, transparent 2.5px);
    background-size: auto, 34px 34px;
}

/* --- footer ------------------------------------------------------------ */

.sc__foot {
    flex: none;
    display: flex;
    align-items: center;
    background: #0b1220;
    color: #fff;
}

.sc__foot-cell {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 36px;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc__foot-cell--right {
    justify-content: flex-end;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: .02em;
}

.sc__foot-cell + .sc__foot-cell {
    border-inline-start: 1px solid rgba(255, 255, 255, .24);
}

.sc__foot-cell b {
    flex: none;
    font-weight: 500;
    color: #94a3b8;
}