/* ==========================================================================
   Blog details page (Figma: QF - BilAraby - WebsiteDesign-Concept-2,
   node 40000567:27568 "Blogs details"). Uses the --hr-* tokens declared
   globally in layout-revamp.css.

   Loaded alongside blogs-revamp.css: the hero/breadcrumb, category chip,
   "Read Article" button and the article card in "Related articles" are the
   same components as on the listing and are not duplicated here.
   ========================================================================== */

/* The same CSS-painted wash the listing carries (blogs-revamp.css holds the
   full note and the --blg-* geometry tokens, which are declared for both
   wrappers there). It replaces blogs-hero-banner.png - a 340KB screenshot of
   this gradient, fixed at 704px and therefore unable to follow --blg-hero-h
   down to 200/160px, so it just kept covering the title block.

   Figma's fill for the shared "Innerpage-hero/Without" instance: a linear
   gradient at 89% opacity whose three stops are red/red-500 (#ee3b33) at 100%,
   50% and 0%, over a solid #F9EAEA. #F9EAEA is its own layer rather than the
   page's background-color, because that colour would tint every section down to
   the footer pink; its box is 1.5x the wash so it eases out instead of ending on
   a hard line against cream-400. */
.blogd-revamp {
    position: relative;
    background:
        linear-gradient(to bottom,
            rgba(238, 59, 51, .89) 0%,
            rgba(238, 59, 51, .445) 50%,
            rgba(238, 59, 51, 0) 100%) no-repeat top center,
        linear-gradient(to bottom,
            #f9eaea 0,
            #f9eaea var(--blg-wash-h),
            rgba(249, 234, 234, 0) 100%) no-repeat top center,
        var(--hr-cream-400);
    /* The #f9eaea layer needs its OWN falloff, or it ends on a hard line: the red
       above it fades to zero, so the band's last pixels would be pure #F9EAEA
       butting straight into cream-400 (#faf9ed) - the two differ by 15 in green,
       which is visible.
       That falloff used to run 1.5x the wash, i.e. to 504px, which is what left
       pale pink still sitting at 76% behind the title block's meta row and 40%
       behind the title itself. It now ends 20px after the red does: the solid
       stop is pinned to --blg-wash-h so it always finishes exactly where the red
       finishes, and the box is 20px taller to give the fade its runway. Figma
       puts the first heading 120px below the hero and the wash ends 80px below
       it, so 20px of runway lands the pink at zero a clear 20px above the
       heading. 15 green units over 20px is 0.75 a pixel - there is no edge to
       see. */
    background-size: 100% var(--blg-wash-h), 100% calc(var(--blg-wash-h) + 20px);
}
/* The tiled feTurbulence grain, same 0.85 tile, same .7 opacity and same decay
   mask as .blogs-revamp::before and the other washed heroes - a plain
   linear-gradient() renders flat and plastic instead of "brushed". */
.blogd-revamp::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--blg-wash-h);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jRyB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48ZmVGdW5jQiB0eXBlPSdsaW5lYXInIHNsb3BlPScxJyBpbnRlcmNlcHQ9Jy0wLjIzMDInLz48L2ZlQ29tcG9uZW50VHJhbnNmZXI+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
    background-repeat: repeat;
    opacity: .7;
    mix-blend-mode: overlay;
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 0;
}

/* ---------- Title block ---------- */
/* position/z-index 1 for the same reason .blg-intro carries it: the wrapper's
   grain overlay is a later sibling at z-index 0, so static content inside the
   wash's band would paint underneath it.
   The gutter comes from --blg-gutter now (declared for both blog wrappers in
   blogs-revamp.css), so this page's sections step 160 -> 40 -> 16 from the same
   single source the listing's do instead of restating the triple by hand. */
.blgd-head { position: relative; z-index: 1; padding: 120px var(--blg-gutter) 0; }
.blgd-head-inner {
    max-width: 1600px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}
.blgd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}
.blgd-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    color: #49473d;
    white-space: nowrap;
}
.blgd-title {
    font-size: 64px;
    line-height: 72px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
    text-transform: capitalize;
}
/* 48px below the title block, then the author row's own 16px bottom padding
   completes Figma's 60px gap before the cover image. */
.blgd-author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-bottom: 16px;
}
.blgd-author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50px;
    object-fit: cover;
    flex-shrink: 0;
}
.blgd-author-text { display: flex; flex-direction: column; gap: 2px; }
.blgd-author-text strong { font-size: 18px; font-weight: 700; color: var(--hr-brown-900); }
.blgd-author-text span { font-size: 14px; color: var(--hr-brown-300); }

/* ---------- Full-bleed cover image ---------- */
.blgd-cover {
    margin-top: 60px;
    height: 600px;
    background: #fff;
}
.blgd-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No usable image: the band keeps its height and carries the title's first two
   letters, the same fallback .blg-card-media-empty / .blg-featured-media-empty
   give the listing. Cream on brown-500 there and here, so an article without an
   image looks the same on the card you clicked and the page you land on.

   The initials sit in the DOM unconditionally, hidden until the box is in its
   empty state, because the img's onerror has to be able to reveal them - see
   show.blade.php. */
.blgd-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hr-brown-500);
}
.blgd-cover-initials {
    display: none;
    font-size: 200px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--hr-cream-500);
    /* Only latin has case to raise; an Arabic pair is left as it is. */
    text-transform: uppercase;
    /* Keeps the pair in the title's own direction inside this otherwise-LTR
       box rather than the page's. */
    unicode-bidi: isolate;
}
.blgd-cover-empty .blgd-cover-initials { display: block; }

/* ---------- Article body ---------- */
.blgd-body {
    position: relative;
    padding: 120px var(--blg-gutter) 80px;
}
.blgd-body-inner {
    max-width: 1192px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/* The teal sweep with its two diamonds — body-corner-motif.svg (Figma node
   40004073:55241), at its natural 300.078 x 175.676. The same asset and the
   same treatment .prd-body-motif carries on the Press Release details page and
   .evt-past-motif on the Events listing.

   Replaces blog-detail/corner-motif.svg, which was a different export of the
   shared "Frame 2147239096" artwork: it drew the blue #33739F diamond and only
   the tail of the teal sweep, because the twin-diamond cluster in that file
   sits at negative x, outside its own 188x234 viewBox. Rendering it here needed
   a clip hack on top of that — a 196x152 box with overflow:hidden over a 188x235
   pseudo-element, cutting 83px off the bottom — plus a scaleX(-1) to mirror it.
   This asset is drawn at the size and orientation it is meant to render at, so
   the box, the clip and the pseudo-element all go with it. Same migration the
   Press Release details page already made. */
.blgd-body-motif {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 300px;
    height: 176px;
    background: url("../images/press-releases-revamp/body-corner-motif.svg") no-repeat top center / 100% 100%;
    pointer-events: none;
}
/* inset-inline-end already moves it to the other corner in RTL; this mirrors the
   artwork with it, so the sweep still opens toward the page's centre rather than
   pointing off the edge. Same convention as .prd-body-motif and .pr-hero-decor. */
[dir="rtl"] .blgd-body-motif { transform: scaleX(-1); }
/* 300px pinned to the viewport's end edge against a 1192px column that is capped
   and centred, so the column's edge reaches the motif as soon as the viewport
   drops below ~1824px. It scales down proportionally from there rather than
   being hidden outright, which is the step .prd-body-motif takes for the
   identical geometry; aspect-ratio carries the asset's own 300x176. */
@media (max-width: 1823.98px) {
    .blgd-body-motif {
        width: min(204px, 16vw);
        height: auto;
        aspect-ratio: 300 / 176;
    }
}

/* Lead paragraph: the design's larger body size, with an amber drop cap. */
/* The lead was its own `description` field, which restated the story's opening
   on every article (BIL-1054). The story is the only body copy now, so its
   first paragraph carries the design's lead size and amber drop cap. */
.blgd-prose > p:first-child {
    font-size: 24px;
    line-height: 32px;
    color: var(--hr-brown-300);
}
.blgd-prose > p:first-child::first-letter {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
    color: var(--hr-yellow-500);
}

/* Pull quote. Also applied to blockquotes inside admin-authored story HTML. */
.blgd-quote,
.blgd-prose blockquote {
    border: 0;
    border-inline-start: 6px solid var(--hr-green-500);
    border-start-end-radius: 16px;
    border-end-end-radius: 16px;
    padding: 40px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.blgd-quote p,
.blgd-prose blockquote p {
    font-size: 32px;
    line-height: 44px;
    font-weight: 700;
    color: var(--hr-green-500);
    margin: 0;
}
.blgd-quote cite {
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    color: var(--hr-brown-900);
}

/* ---------- Admin-authored story HTML ---------- */
.blgd-prose {
    display: flex;
    flex-direction: column;
    gap: 40px;
    font-size: 20px;
    line-height: 28px;
    color: var(--hr-brown-300);
}
.blgd-prose > :first-child { margin-top: 0; }
.blgd-prose > :last-child { margin-bottom: 0; }
.blgd-prose p { margin: 0; }
.blgd-prose strong,
.blgd-prose b { color: var(--hr-brown-900); font-weight: 700; }
.blgd-prose a { color: var(--hr-green-500); text-decoration: underline; }
.blgd-prose h2,
.blgd-prose h3,
.blgd-prose h4 {
    color: var(--hr-brown-900);
    font-weight: 700;
    margin: 0;
}
.blgd-prose h2 { font-size: 40px; line-height: 48px; }
.blgd-prose h3 { font-size: 32px; line-height: 40px; }
.blgd-prose h4 { font-size: 24px; line-height: 32px; }
.blgd-prose ul,
.blgd-prose ol { margin: 0; padding-inline-start: 24px; }
.blgd-prose li + li { margin-top: 12px; }
/* max-width, NOT width. These images come from the Story editor, so their
   natural size is whatever the author happened to upload, and `width: 100%`
   with `max-width: none` scaled every one of them UP to the column: a 100x100
   badge rendered at 420x420 on a phone and 1192 wide on a desktop - a 12x
   blow-up of a 100px source. Large images were never the problem; a 4000x3000
   upload already came down to the column width and kept its ratio.

   height stays auto, which is also what protects the ratio from the width /
   height attributes TinyMCE writes onto the tag: those describe the source, and
   an author who resizes an image by dragging its handle in the editor leaves
   them disagreeing with the file. auto recomputes from the real pixels. */
.blgd-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    /* Centred. display:block alone left an image narrower than the column flush
       to the start, and text-align on the paragraph around it has no effect on a
       block element - so an author centring it in the editor saw no change.
       margin-inline:auto also stops a direct-child image being stretched by this
       container's flex align-items:stretch.

       On a float this resolves to 0, so an image the author floated INSIDE a
       paragraph still sits at the edge with the text wrapping beside it. A
       floated image that is a DIRECT child of .blgd-prose centres instead - but
       that is not a regression: .blgd-prose is a flex container, and a flex item
       ignores float, so such an image never floated here in the first place. */
    margin-inline: auto;
    border-radius: 24px;
}
/* TinyMCE wraps a captioned image in <figure>, which the UA indents by 40px
   either side and spaces with 1em vertically - the column already supplies its
   own 40px gap. Zeroed so the figure lines up with the prose around it and its
   image centres by the rule above. */
.blgd-prose figure { margin: 0; }
.blgd-prose figcaption,
.blgd-figure figcaption {
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-300);
    text-align: center;
    margin-top: 16px;
}
.blgd-prose table { width: 100%; border-collapse: collapse; }
.blgd-prose td,
.blgd-prose th { border: 1px solid rgba(0, 0, 0, .1); padding: 12px; }

/* ---------- Inline visual ---------- */
.blgd-figure { margin: 0; }
.blgd-figure img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 24px;
}

/* ---------- Tags / share footer ---------- */
.blgd-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}
.blgd-foot-label {
    font-size: 16px;
    line-height: 24px;
    color: var(--hr-brown-300);
    white-space: nowrap;
}
.blgd-tags,
.blgd-share { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.blgd-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .05);
    font-size: 16px;
    line-height: 24px;
    color: #161616;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}
.blgd-tag:hover { background: rgba(0, 0, 0, .1); color: #161616; text-decoration: none; }
.blgd-share { gap: 8px; }
.blgd-share .blgd-foot-label { margin-inline-end: 4px; }
.blgd-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 30px;
    background: rgba(0, 0, 0, .05);
    color: #161616;
    font-size: 13px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
.blgd-share-link:hover { background: var(--hr-green-500); color: var(--hr-cream-50); text-decoration: none; }

/* ---------- Divider closing the article ---------- */
/* Diamond clusters at each end of a full-bleed rule, as on the Speaker page. */
.blgd-divider {
    position: relative;
    display: block;
    height: 28px;
}
/* Full-bleed rule, behind the clusters. */
.blgd-divider-line {
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    background: rgba(243, 217, 176, .6);
}
.blgd-divider-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding: 0 var(--blg-gutter);
}
.blgd-divider-cluster { display: flex; flex-shrink: 0; }
/* Figma (node 40001286:69630): solid yellow/yellow-100 (#f3d9b0), full opacity
   — not the washed-out yellow-400-at-50% used on some other pages' dividers. */
.blgd-divider-cluster .blg-diamond {
    width: 20px;
    height: 20px;
    margin-inline: 4px;
    background: #f3d9b0;
}

/* ---------- Related articles ---------- */
.blgd-related {
    position: relative;
    padding: 120px var(--blg-gutter);
    overflow: hidden;
}
/* Oversized geometric watermark bleeding off the section's bottom-left. */
.blgd-related-motif {
    position: absolute;
    bottom: -211px;
    inset-inline-start: -7.82%;
    width: 115.6%;
    height: 687px;
    background: url("../images/blog-detail/related-bg-motif.svg") no-repeat center / 100% 100%;
    pointer-events: none;
}
[dir="rtl"] .blgd-related-motif { transform: scaleX(-1); }
.blgd-related-inner {
    position: relative;
    max-width: 1600px;
    margin-inline: auto;
}
.blgd-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 80px;
}
/* The heading and its optional subtitle travel together as one column, so the
   "View All Articles" pill stays vertically centred against the pair rather than
   against the h2 alone. min-width:0 lets it shrink before the row wraps. */
.blgd-related-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.blgd-related-head h2 {
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
    color: var(--hr-brown-900);
    margin: 0;
}
/* Body/Body Medium/Regular, the size the sibling section subtitles use. Only
   rendered when an admin has written one - the section ships without subtitle
   copy (see Blog::SECTION_HEADINGS). */
.blgd-related-subtitle {
    font-size: 20px;
    line-height: 30px;
    color: var(--hr-brown-300);
    margin: 0;
    max-width: 720px;
}
.blgd-view-all { padding: 16px 24px; font-size: 16px; }
.blgd-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    /* No padding-inline overrides here any more: --blg-gutter carries all four
       sections down to 40px, and .blgd-related with them - it was the one left
       out of this list and kept its own hard-coded 40. */
    .blgd-title { font-size: 44px; line-height: 54px; }
    .blgd-cover { height: 420px; }
    .blgd-cover-initials { font-size: 150px; }
    .blgd-body { padding-top: 80px; }
    /* Was display:none, which is why the motif vanished on every tablet and
       phone. The collision it was protecting against is HORIZONTAL - a fixed
       300px pinned to the viewport's end edge, against a prose column capped at
       1192 and centred - so the shape is bounded by HEIGHT instead: .blgd-body's
       top padding halves to 80px here, and 136px at this aspect ratio is 79.8px
       tall, so the motif still ends just above where the prose begins. It may
       sit over the column's horizontal band, but never over any text - which is
       what the display:none was really protecting.
       16vw keeps it proportional on the way down (60px wide at 375), so it is
       present on every screen rather than only on a >=1200 one. Same two-step
       ladder .prd-body-motif carries for the identical geometry. */
    .blgd-body-motif { width: min(136px, 16vw); }
    .blgd-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blgd-related { padding-block: 80px; }
    .blgd-related-head { margin-bottom: 48px; }
}
@media (max-width: 991.98px) {
    .blgd-head { padding-top: 80px; }
    .blgd-title { font-size: 34px; line-height: 44px; }
    .blgd-cover { height: 300px; margin-top: 40px; }
    .blgd-cover-initials { font-size: 110px; }
    .blgd-prose > p:first-child { font-size: 20px; line-height: 30px; }
    .blgd-prose > p:first-child::first-letter { font-size: 34px; line-height: 40px; }
    .blgd-prose { font-size: 18px; line-height: 28px; gap: 28px; }
    .blgd-prose h2 { font-size: 30px; line-height: 40px; }
    .blgd-prose h3 { font-size: 26px; line-height: 34px; }
    .blgd-body-inner { gap: 32px; }
    .blgd-quote,
    .blgd-prose blockquote { padding: 28px; }
    .blgd-quote p,
    .blgd-prose blockquote p { font-size: 24px; line-height: 34px; }
    .blgd-figure img { height: 280px; }
    .blgd-related-head h2 { font-size: 34px; line-height: 44px; }
    .blgd-related-subtitle { font-size: 18px; line-height: 28px; }
    .blgd-related-copy { gap: 12px; }
}
@media (max-width: 767.98px) {
    /* +60 against the base +40, on this page only. Its last crumb is the article
       title, so the hero's min-height GROWS - 196px at 375 with a two-line trail,
       ~224 at three - while the wash is computed from the 160px token. The crumb
       always ends 32px above the hero's bottom edge (.blg-hero's bottom padding),
       so a 20px-longer tail keeps even a three-line trail on coloured ground
       instead of painting cream-500 text onto cream. It still clears the title
       block: the pink lands at 240, which is exactly where the meta row starts. */
    .blogd-revamp { --blg-wash-h: calc(var(--blg-hero-h) + 60px); }
    .blgd-related-grid { grid-template-columns: 1fr; }
    .blgd-cover { height: 240px; }
    .blgd-cover-initials { font-size: 88px; }

    /* ---------- Centred column, matching the listing and the Videos /
       Events pages ----------------------------------------------------------
       The listing's phone layout centres its intro, its cards and every CTA
       (.blg-intro-inner, .blg-card-content, .blg-read-btn in blogs-revamp.css,
       themselves following .evt-intro-inner / .vid-featured-head). This page
       is the other half of the same journey and was still reading from the
       leading edge throughout.

       What is centred is deliberately limited to the HEADS and the CTAs - the
       title block, the article's own footer and the "Related articles" row.
       The article body itself (.blgd-prose, .blgd-quote) stays on
       the leading edge: those are paragraphs of running text, and the Event
       details page centres its section heads for the same reason it leaves its
       body copy alone. */
    .blgd-head-inner { align-items: center; text-align: center; gap: 16px; }
    .blgd-meta { justify-content: center; gap: 12px; }
    .blgd-meta-item { font-size: 14px; }
    /* 32/40, the phone size the other headers step to (.blg-intro h1,
       .evt-intro-inner h1, .vid-featured-head h1). The <=992 block leaves this
       at 34/44, which is a shade large for a centred line at 360px. */
    .blgd-title { font-size: 32px; line-height: 40px; }
    /* Avatar over the name, as on the listing's featured panel: in a row, a
       centred 56px circle plus two lines of text is wider than the column and
       lands the pair off-centre against the title above it. */
    .blgd-author { flex-direction: column; gap: 12px; margin-top: 8px; }
    .blgd-author-text { align-items: center; }

    /* ---------- Article footer ---------- */
    /* Tags over Share, both centred, instead of the two hugging opposite ends
       of a wrapped row. */
    .blgd-foot { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    .blgd-tags,
    .blgd-share { justify-content: center; }

    /* ---------- Related articles ---------- */
    /* Heading centred on its own line and "View All Articles" moved to the foot
       of the section, full width - the treatment .evt-past-head gets at this
       breakpoint. display:contents dissolves the head so its h2 and its button
       can be ordered around .blgd-related-grid, which is their uncle rather
       than their sibling; every child then needs an explicit order, because
       anything left at the default 0 sorts first. */
    /* ---------- Corner watermark ---------- */
    /* related-bg-motif.svg is 2219.28x687.421 natively - a WIDE sweep whose ink
       sits in the left 44% (x 0..975) with empty canvas after it. The base rule
       sizes its box as `115.6% x 687px` with `background-size: 100% 100%`, which
       is the design's own 1920px geometry: at that width the box comes out
       2220x687 and the shape is exactly its native shape.

       Every step down from 1920 squashes it horizontally, because the width
       tracks the viewport while the height stays pinned at 687px. On a 375px
       phone the box is 434x687 - a 5:1 horizontal crush - and the SVG carries
       preserveAspectRatio="none", so it obeys: the sweep renders as a narrow
       vertical smear up the bottom-start corner instead of a corner sweep.

       The fix is entirely in the HEIGHT. Only that dimension is wrong on a
       phone: `width: 115.6%` already scales with the viewport, so the box is
       the same share of the screen at 375px as it is at 1440px - it is the
       fixed 687px that does not come down with it, and stretches the sweep
       vertically by the whole difference.

       So: keep the base width, and derive the height from the ratio the box
       has on a desktop. That ratio is NOT the artwork's own 2219.28/687.421 -
       the desktop rendering is itself horizontally compressed (at 1440 the box
       is 1664.64x687, 2.42:1 against the file's 3.23:1), so the sweep everyone
       has actually seen in a browser stands taller than its native
       proportions, and matching the file rather than the page produced a
       visibly flatter shape. 1664.64/687.421 reproduces the 1440px desktop box,
       which is the rendering being compared against.

       On the base 115.6% width that lands the phone on exact parity with the
       desktop - the ink (the left 43.94% of the canvas: x 0..975, the rest of
       the file is empty) measuring 50.8% of the viewport across and 47.7% down
       at both sizes.

       140% is then a deliberate step ABOVE that parity, asked for so the mark
       carries a little more presence on a phone than a straight scale-down
       gives: at 375px the box is 525x217 and the ink 231x217, i.e. 61.5% of the
       viewport across against desktop's 50.8%. The proportions are untouched -
       the height rides the aspect-ratio - so this scales the shape without
       going back to stretching it. Move this one number to resize the mark;
       everything else follows.

       -67px keeps the same share of the shape below the section's edge as
       desktop's -211 of 687, clipped by the section's own overflow:hidden
       exactly as it is there. */
    .blgd-related-motif {
        width: 140%;
        height: auto;
        aspect-ratio: 1664.64 / 687.421;
        bottom: -67px;
    }
    .blgd-related { padding-block: 60px; }
    .blgd-related-inner { display: flex; flex-direction: column; }
    .blgd-related-head { display: contents; }
    .blgd-related-head h2 { order: 1; text-align: center; margin-bottom: 32px; font-size: 28px; line-height: 36px; }
    .blgd-related-grid { order: 2; }
    .blgd-related-head .blgd-view-all { order: 3; justify-content: center; margin-top: 40px; padding: 12px 24px; }
}