/*==========================================================================
   ABOUT
   Desktop values measured off AboutMeBlueprint.pdf. The export is 8001px
   wide for a 1920px design, so a measurement of N export px is N/4.167 CSS
   px and N/8001 of the page width — which is what the percentages and vw
   below are, so the layout holds its proportions at any width.

   Four sections, divided by the same wave as the homepage:
     1  intro      86 - 721.7    white + watermark
     2  philosophy 721.7 - 1300.7   #092D59
     3  process    1300.7 - 2076.7  white + watermark
     4  story      2076.7 - 2580.3  #287492
==========================================================================*/

/* Matches the last section, so the strip below it on a short page does
   not show as bare body. See the note on `body` in style.css. */
body { background: var(--teal); }   /* the story section */

/*--------------------------------------------------------------------------
   Shared type. Sections 2-4 all use the same pairing: a Black heading at
   ~39px and Regular body at ~18px on generous leading.
--------------------------------------------------------------------------*/
.philosophy__heading,
.process__heading,
.story__heading {
    margin: 0;
    font-weight: 900;
    line-height: 1.15;
}

.philosophy p,
.story__body,
.process__card {
    margin: 0;
    font-weight: 400;
    /* The blueprint's copy is hyphenated and ragged right; without this the
       same words take two more lines per column and the sections grow. */
    hyphens: auto;
}

/*==========================================================================
   1. INTRO
==========================================================================*/
/* Mobile follows AboutMobile.png. Every figure there is a share of the page
   width, so this block is written in --u, the capped design unit from
   style.css — same as the mobile homepage.
   flow-root, not block: the portrait's top margin would otherwise collapse
   through the section and carry the whole page down with it. */
.intro-block {
    display: flow-root;
    padding: 0 0 calc(var(--u) * 20.6 - var(--divider-half));
}

.intro-block__portrait {
    position: relative;
    width: calc(var(--u) * 71.62);
    margin: calc(var(--u) * 8.59) auto 0;
}

.intro-block__frame {
    display: block;
    width: 100%;
    height: auto;
}

/* The frame's white is a ring, so the photo is masked to its inner scallop
   and laid on top — the same treatment as the homepage project cards. */
.intro-block__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
            mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
}

.intro-block__heading {
    width: 100%;
    margin: calc(var(--u) * 4.21) 0 0;
    text-align: center;
    font-size: max(2.4rem, calc(var(--u) * 16.62));
    font-weight: 600;
    line-height: 1;
    color: var(--blue);
}

/* On mobile the squiggle is a rule under the whole text column rather than
   an underline the width of the heading, so it is set to the column's width
   and centred instead of taking the heading's. */
.intro-block__heading::after {
    content: "";
    display: block;
    width: calc(var(--u) * 72.29);
    max-width: 100%;
    aspect-ratio: 711.94 / 9.08;
    margin: 0.226em auto 0;
    background-color: var(--blue);
    -webkit-mask: var(--mask-squiggle-medium) no-repeat center / 100% 100%;
            mask: var(--mask-squiggle-medium) no-repeat center / 100% 100%;
}

.intro-block__blurb {
    margin: calc(var(--u) * 5.1) auto 0;
    text-align: center;
    /* Sized so the block stays inside the rule above it, as the reference
       has it. Chromium snaps the rendered size to whole device pixels here,
       and the next step up runs the middle line past the rule's ends. */
    font-size: max(0.8rem, calc(var(--u) * 4.19));
    line-height: 1.654;
    color: #000;
}

/* Set in one weight at every width, matching the homepage's intro. */
.intro-block__blurb strong { font-weight: inherit; }

/* The designer sets the blurb on three lines at every width. */
.intro-block__pronouns { font-size: 0.66em; }

/*--------------------------------------------------------------------------
   Resume + LinkedIn
--------------------------------------------------------------------------*/
/* Mobile: the two links sit side by side in one row, each with its icon to
   the left of the label. The markup puts the label first so the desktop
   layout can right-align both; row-reverse turns that around here. */
.intro-block__links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 6.59);
    margin-top: calc(var(--u) * 8.0);
}

.intro-block__links a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: calc(var(--u) * 2.2);
    font-size: max(0.62rem, calc(var(--u) * 2.93));
    line-height: 1.0;
    text-align: left;
    color: var(--blue);
}

.intro-block__links img {
    flex: none;
    width: calc(var(--u) * 8.3);
    height: auto;
}

.intro-block__links a:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}

@media (hover: hover) {
    .intro-block__links a { transition: transform 0.2s var(--ease); }
    .intro-block__links a:hover { transform: translateY(-2px); }
}

/*==========================================================================
   2. PHILOSOPHY
==========================================================================*/
/* Mobile follows AboutMobile.png, in --u like the rest of the mobile
   layouts. Two tracks: the copy in a narrow one, the five badges in a
   column of their own beside it. The heading and the pull-quote span both. */
.philosophy {
    position: relative;
    display: grid;
    /* Both tracks are fixed in --u, so past the point where --u stops
       growing the badges stop with everything else instead of stretching
       into a track that keeps widening. The pair then centres. */
    grid-template-columns: calc(var(--u) * 60) calc(var(--u) * 15.92);
    justify-content: center;
    column-gap: calc(var(--u) * 5.09);
    row-gap: 0;
    align-items: start;
    padding: calc(var(--u) * 17.79) calc(var(--u) * 8)
             calc(var(--u) * 14.34) calc(var(--u) * 10.99);
    background: var(--navy);
    color: var(--white);
}

/* The two wrappers are there for the desktop grid. Here their children join
   this grid directly, which is what lets the badge column run from the top
   of the first paragraph to the foot of the second. */
.philosophy__col { display: contents; }

.philosophy__heading {
    grid-area: 1 / 1 / 2 / 3;
    font-size: max(1.15rem, calc(var(--u) * 6.4));
    margin: 0 0 calc(var(--u) * 4.30);
}

.philosophy p {
    font-size: max(0.66rem, calc(var(--u) * 3.05));
    line-height: 1.944;
}

.philosophy__col:first-of-type p { grid-area: 2 / 1 / 3 / 2; }

.philosophy__col:last-of-type p:first-child {
    grid-area: 3 / 1 / 4 / 2;
    margin-top: calc(var(--u) * 5.72);
}

/* The last paragraph is the pull-quote; the reference sets it wider than
   the body above it, out to where the heading ends. */
.philosophy__col:last-of-type p:last-child {
    grid-area: 4 / 1 / 5 / 3;
    margin-top: calc(var(--u) * 10.22);
}

.philosophy strong { font-weight: 700; }

/*--------------------------------------------------------------------------
   The five value badges. The cluster keeps its own proportions at any size
   because every icon is placed as a percentage of this box, which itself
   holds the aspect ratio of the arrangement in the blueprint.
--------------------------------------------------------------------------*/
/* Mobile: the badges take the second track, spanning the two body
   paragraphs, and space themselves out down it. The first one therefore
   starts level with the top of the first paragraph and the last one ends
   level with the foot of the second, however the copy happens to wrap. */
.values {
    grid-area: 2 / 2 / 4 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    list-style: none;
    padding: 0;
}

.values__item picture { display: block; }

/* --x is the badge's own left edge inside the track here, not a centre.
   The block margins are percentages, so like --w they resolve against the
   track's width — the same basis the overhang was worked out on. */
.values__item {
    width: var(--w);
    margin: calc(var(--w) * var(--over)) 0 calc(var(--w) * var(--over)) var(--x);
    transform: rotate(var(--r));
}

.values__item img { width: 100%; height: auto; }

/* Mobile: a single column down the right, alternating a little left and
   right, at the sizes and angles the reference draws. Widths and offsets
   are shares of the track. The reference runs them thoughtful, problem,
   story, social, meaning, which is not the order the markup is in, so
   flexbox order puts them right.

   --over is how far the artwork spills past its own box once it is turned:
   half of w*(cos+sin-1) for the angle in question. Carried as margin, it
   makes each badge take up the room it actually looks like it takes, so
   what lines up with the copy is the corner you can see rather than the
   untilted box behind it. */
.values__item--thoughtful { order: 1; --x:  19.6%; --w: 71.73%; --r:  -16.5deg; --over: 0.1214; }
.values__item--problem    { order: 2; --x:   4.3%; --w: 67.65%; --r:  -7.75deg; --over: 0.0629; }
.values__item--story      { order: 3; --x:  20.2%; --w: 70.16%; --r:   8.25deg; --over: 0.0666; }
.values__item--social     { order: 4; --x:   4.5%; --w: 66.83%; --r:   8.25deg; --over: 0.0666; }
.values__item--meaning    { order: 5; --x:  19.9%; --w: 69.85%; --r:     12deg; --over: 0.093; }

/*==========================================================================
   3. PROCESS
==========================================================================*/
/* Mobile follows AboutMobile.png: the five steps sit on a diagonal and each
   one opens its own write-up over the top of the others. The section's
   height is fixed in --u because the steps are placed against it rather
   than flowing, and every figure is a share of the page width. */
.process {
    position: relative;
    min-height: calc(var(--u) * 130.05);
    padding: calc(var(--u) * 13.6) calc(var(--u) * 8) 0;
}

.process__heading {
    margin: 0;
    font-size: max(1.15rem, calc(var(--u) * 7.0));
    text-align: center;
    color: var(--blue);
}

.process__hint {
    margin: calc(var(--u) * 2.4) 0 0;
    font-size: max(0.7rem, calc(var(--u) * 3.6));
    text-align: center;
    color: var(--blue);
}

/* A layer over the whole section, so a step's own position is the figure
   measured off the reference rather than an offset from the copy above.
   Capped and centred like the other mobile layouts. */
.process__steps {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, calc(var(--u) * 100));
    transform: translateX(-50%);
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    /* The layer covers the whole section, heading included, so it has to let
       everything through except the steps themselves. */
    pointer-events: none;
}

/* --x and --y are the icon's centre. They are lengths rather than
   percentages so the panel below can be placed by subtracting them: the
   panel is a child of the step, so a percentage there would resolve against
   the icon rather than the layer. */
.process__step {
    position: absolute;
    left: var(--x);
    top: var(--y);
    /* The reference draws them large enough that neighbours very nearly
       touch: 21.72% of the page on centres 15.5% apart. */
    width: calc(var(--u) * 21.72);
    /* Stated rather than left to the icon, so the centring translate and
       the panel's offsets have a fixed box to work from. */
    height: calc(var(--u) * 21.72);
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}

.process__step:nth-child(1) { --x: calc(var(--u) * 18.99); --y: calc(var(--u) *  43.17); }
.process__step:nth-child(2) { --x: calc(var(--u) * 34.51); --y: calc(var(--u) *  58.11); }
.process__step:nth-child(3) { --x: calc(var(--u) * 50.04); --y: calc(var(--u) *  73.05); }
.process__step:nth-child(4) { --x: calc(var(--u) * 65.56); --y: calc(var(--u) *  87.99); }
.process__step:nth-child(5) { --x: calc(var(--u) * 81.08); --y: calc(var(--u) * 102.93); }

.process__step.is-open { z-index: 3; }

.process__step:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 6px;
    border-radius: 50%;
}

.process__icon {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
}

/* A second, smaller copy of the icon sits on the head of the panel while it
   is open, centred on it, which is how the reference marks which step you
   are reading. The step keeps its own icon on the diagonal underneath.
   Offsets are the marker's place on the layer less the step's own; the step
   is centred on --x/--y, so half of the step's width comes back. */
.process__marker {
    position: absolute;
    z-index: 3;
    left: calc(var(--u) * 54.30 - var(--x));
    top: calc(var(--u) * 42.07 - var(--y));
    width: calc(var(--u) * 13.86);
    max-width: none;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
                visibility 0s linear 0.3s;
}

.process__step.is-open .process__marker {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* The write-up, as a panel over the diagonal. Translucent, so the steps it
   covers still read behind it, the way the reference has them. The offsets
   are the panel's place on the layer less the step's own. */
.process__card {
    position: absolute;
    left: calc(var(--u) * 22.79 - var(--x));
    top: calc(var(--u) * 46.97 - var(--y));
    z-index: 2;
    display: grid;
    align-content: center;
    width: calc(var(--u) * 76.02);
    min-height: calc(var(--u) * 72.88);
    margin: 0;
    /* The head of the panel belongs to the marker, so the copy starts
       under it. */
    padding: calc(var(--u) * 11.5) calc(var(--u) * 8) calc(var(--u) * 6);
    font-size: max(0.68rem, calc(var(--u) * 3.3));
    line-height: 1.5;
    text-align: center;
    color: var(--white);
    background: rgba(21, 58, 112, 0.8);
    border-radius: 42% 58% 46% 54% / 50% 44% 56% 50%;
    /* The panel lies over the rest of the diagonal, so it has to let taps
       through to the steps underneath — otherwise the only way to read a
       second one is to close the first. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.94);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
                visibility 0s linear 0.3s;
}

.process__step.is-open .process__card {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/*==========================================================================
   4. STORY
==========================================================================*/
.story {
    position: relative;
    padding: calc(2.5rem + var(--divider-half)) 1.25rem
             max(3rem, var(--footer-badge-clear));
    background: var(--teal);
    color: var(--white);
}

/* Mobile drops the vertical wave and sets the photo in the scallop frame,
   sitting across the wave at the top. The wave is drawn at z-index 5 and
   would otherwise cut across the frame, so the frame goes above it — and
   stays under the navbar, which is at 100. */
.story__portrait {
    position: relative;
    z-index: 6;
    width: calc(var(--u) * 64.69);
    aspect-ratio: 1;
    /* The reference's own figure is 7.23% of the page above the section, but
       its wave is drawn three times deeper than the one this page uses, so
       the frame reads as sitting lower against ours. Lifted to 11% to give
       it the same clearance by eye; the extra comes back below so nothing
       under it moves. */
    margin: calc(-2.5rem - var(--divider-half) - var(--u) * 11)
            auto calc(var(--u) * 12.07);
}

.story__frame {
    display: block;
    width: 100%;
    height: auto;
}

.story__portrait picture { display: contents; }

/* The frame's white is a ring, so the photo is masked to its own innermost
   scallop and laid on top of it. Same treatment as the portrait further up
   the page, and the mask comes from this very file, so they line up. */
.story__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
            mask: var(--mask-frame-inner) no-repeat center / 100% 100%;
}

.story__wave { display: none; }

.story__heading {
    font-size: clamp(1.5rem, 6.4vw, 2.05rem);
    margin-bottom: 0.7em;
}

.story__body {
    font-size: clamp(0.9rem, 3.9vw, 1.1rem);
    line-height: 1.9;
}

/*==========================================================================
   DESKTOP — the blueprint layout
   Held back to 64em for the same reason as the homepage: the blueprint is
   drawn at 1920, so running it at 768 would put the body copy near 7px.
==========================================================================*/
@media (min-width: 64em) {

    /*--------------------------------------------------------- 1. INTRO --*/
    .intro-block {
        display: grid;
        grid-template-columns: 48.96% minmax(0, 1fr);
        align-items: start;
        justify-items: stretch;     /* the mobile layout centres these */
        gap: 0;
        padding: 1.68vw 0 calc(var(--divider-half) + 1.42vw);
    }

    .intro-block__portrait {
        width: 58.1%;              /* 546.2px at 1920 */
        justify-self: end;
        margin: 0 3.09% 0 0;
    }

    .intro-block__text {
        padding: 6.9vw 0 0 3.77%;  /* heading cap top at y=262 */
    }

    .intro-block__heading {
        width: fit-content;
        text-align: left;
        font-size: 5.52vw;         /* 106px at 1920 */
        margin: 0 0 0 -0.4vw;      /* optical: align the H with the blurb */
    }

    .intro-block__heading::after {
        width: 100%;
        max-width: 21.01vw;         /* 403.4px at 1920 */
        margin: 0.078em 0 0 0.4vw;
    }

    /* Same block as the heading above it — see the note on the homepage. */
    .intro-block__blurb {
        margin: 0.66em 0 0;
        text-align: left;
        width: 22.29vw;             /* the heading's own width at 1920 */
        margin-left: -0.4vw;        /* match the heading's optical pull-back */
        font-size: max(0.7rem, 1.20vw);  /* 23.0px at 1920 — sized so the                                             three lines fit the block with room to spare */
        line-height: 1.3;
        hyphens: none;
    }

    .intro-block__blurb br { display: inline; }

    .intro-block__links {
        position: absolute;
        display: grid;
        right: 2.83%;
        bottom: calc(var(--divider-half) + 2.80vw);
        gap: 0.9vw;
        margin-top: 0;
        justify-items: end;
    }

    .intro-block__links a {
        flex-direction: row;
        gap: 0.85vw;
        font-size: max(0.8rem, 0.94vw);  /* 18px at 1920 */
        line-height: 1.25;
        text-align: right;
    }

    .intro-block__links img {
        width: max(1.75rem, 1.79vw);   /* 34.5px at 1920 — its native size */
    }

    .intro-block { position: relative; }

    /*---------------------------------------------------- 2. PHILOSOPHY --*/
    .philosophy {
        display: grid;
        /* Tracks are a share of the content box (1920 less the 361.7px
           indent), not of the page: 425.2 / 431.7 / the rest at 1920. */
        grid-template-columns: 27.29% 27.70% minmax(0, 1fr);
        gap: 0;
        align-items: start;
        column-gap: 2.14%;
        row-gap: 0;
        padding: calc(var(--divider-half) + 3.72vw) 0 var(--divider-half) 18.84%;
        min-height: 30.16vw;        /* 579px at 1920 */
    }

    .philosophy__heading {
        max-width: none;
        font-size: 2.05vw;          /* 39.4px at 1920 */
        margin: 0 0 0.55em;         /* 21.6px of gap at 1920 */
    }

    .philosophy p {
        max-width: none;
        font-size: max(0.8rem, 0.94vw);
        line-height: 1.91;          /* 34.4px of leading at 1920 */
    }

    .philosophy p + p { margin-top: 1.4em; }
    .philosophy__col:first-of-type p,
    .philosophy__col:last-of-type p:first-child { grid-area: auto; margin-top: 0; }
    .philosophy__heading { grid-area: auto; }

    .philosophy__col:last-of-type p:last-child {
        grid-area: auto;
        max-width: none;
        margin-top: 1.4em;
    }

    .philosophy__col { display: block; }

    /* Back to a cluster in the third track. */
    .values {
        grid-area: auto;
        align-self: start;
        display: block;
        position: relative;
        width: 52.7%;               /* 334.4px of the 634.6px track */
        aspect-ratio: 334.4 / 419;
        margin: -1.48vw 0 0 14.35%;   /* the cluster starts above the text */
    }

    .values__item {
        position: absolute;
        left: var(--x);
        top: var(--y);
        margin: 0;
        transform: translate(-50%, -50%) rotate(var(--r));
    }

    .values__item--thoughtful { --x: 19.0%; --y: 14.7%; --w: 31.04%; --r: -16.8deg; }
    .values__item--problem    { --x: 82.2%; --y: 34.0%; --w: 31.82%; --r:  -6.7deg; }
    .values__item--story      { --x: 36.9%; --y: 51.7%; --w: 33.61%; --r:   7.3deg; }
    .values__item--meaning    { --x: 82.0%; --y: 69.5%; --w: 30.38%; --r:  11.5deg; }
    .values__item--social     { --x: 19.0%; --y: 87.1%; --w: 31.82%; --r:   7.1deg; }

    /*------------------------------------------------------- 3. PROCESS --*/
    .process {
        padding: calc(var(--divider-half) + 3.02vw) 0
                 calc(var(--divider-half) + 3.85vw);
        min-height: 40.42vw;        /* 776px at 1920 */
    }

    .process__heading {
        font-size: 2.12vw;          /* 40.7px at 1920 */
        margin-bottom: 0.5em;
    }

    .process__hint { display: none; }

    /* Back to five boxes in a row, every write-up on the page and none of
       the tapping. */
    .process__steps {
        position: static;
        display: flex;
        align-items: stretch;       /* every card ends at the same line */
        justify-content: center;
        gap: 1.68%;                 /* 32.2px at 1920 */
        margin-top: 1.83vw;   /* icon tops land at y=1470.7 */
    }

    .process__steps {
        left: auto;
        width: auto;
        transform: none;
        pointer-events: auto;
    }

    .process__step,
    .process__step.is-open {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 14.32%;              /* 275px at 1920 */
        height: auto;
        transform: none;
        cursor: auto;
    }

    .process__icon {
        position: relative;
        z-index: 1;
        width: max(5rem, 6.89vw);   /* 132.2px at 1920 — its native size */
    }

    .process__marker { display: none; }

    .process__card {
        /* The step is a flex column, so letting the card grow fills whatever
           height the tallest card sets — five equal boxes side by side. */
        position: static;
        /* The step is a flex container here, and a flex item's z-index counts
           even when it is not positioned — left at 1 the card would paint
           over the icon that is meant to overhang it. */
        z-index: auto;
        display: block;
        /* align-content applies to block containers in current browsers, and
           the card is stretched by flex: 1 — left centred, the shorter
           write-ups would float in the middle of their box. */
        align-content: normal;
        pointer-events: auto;
        flex: 1;
        width: 100%;
        min-height: 22.4vw;         /* 430px at 1920 */
        margin-top: -2.99vw;
        padding: calc(2.99vw + 0.6vw) 1.18vw 1.4vw;
        font-size: max(0.72rem, 0.94vw);
        line-height: 1.9;
        text-align: left;
        background: var(--blue);
        border-radius: 0.6vw;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    /*--------------------------------------------------------- 4. STORY --*/
    .story {
        display: grid;
        grid-template-columns: 48.70% minmax(0, 1fr);   /* text starts at 822.6 */
        align-items: start;
        padding: calc(var(--divider-half) + 3.68vw) 12.03%
                 max(1.76vw, var(--footer-badge-clear)) 0;
        min-height: 26.23vw;        /* 503.6px at 1920 */
    }

    /* The wrapper steps aside so the photo is a child of the section again
       and the blueprint's own placement holds. */
    .story__portrait,
    .story__portrait picture { display: contents; }
    .story__frame { display: none; }

    /* The photo sits under the wave: the wave is opaque teal with a wavy
       left edge, so it is what cuts the photo's right-hand side. */
    .story__photo {
        position: absolute;
        inset: 0 auto 0 0;
        width: 36.46%;              /* runs under the wave's solid edge */
        height: 100%;
        margin: 0;
        transform: none;
        object-position: center;
        -webkit-mask: none;
                mask: none;
    }

    .story__wave {
        display: block;
        position: absolute;
        inset: 0 0 0 auto;
        width: 65.23%;              /* 1252.4px at 1920, its native width */
        background: var(--svg-light-vert-wave) no-repeat left top / 100% 100%;
    }

    .story__text {
        grid-column: 2;
        position: relative;
        z-index: 1;
    }

    .story__heading {
        font-size: 2.05vw;          /* 39.4px at 1920 */
        margin-bottom: 0.38em;      /* 15px of gap at 1920 */
    }

    /* One paragraph flowing across two columns, as the blueprint has it. */
    .story__body {
        columns: 2;
        column-gap: 2.05vw;         /* 39.4px at 1920 */
        font-size: max(0.8rem, 0.93vw);
        line-height: 1.92;
    }
}