/* =========================================================
   INSIDE SERENITY
   Main Publication Styles
   ========================================================= */


/* =========================================================
   01. RESET + VARIABLES
   ========================================================= */

:root {
    --ink: #292536;
    --ink-soft: #665f78;

    --navy: #1f1b30;
    --navy-soft: #29223e;

    --purple: #9d7cff;
    --purple-light: #bca7ff;
    --purple-pale: #eee9ff;

    --paper: #faf9ff;
    --paper-soft: #f5f2fb;
    --white: #ffffff;

    --line: #dfdbe8;

    --max-width: 1320px;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(157, 124, 255, 0.06),
            transparent 32%
        ),
        var(--paper);

    color: var(--ink);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    line-height: 1.6;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
}


/* =========================================================
   02. MASTHEAD
   ========================================================= */

.masthead {
    background:
        linear-gradient(
            115deg,
            #1b182a 0%,
            #211c34 55%,
            #28203f 100%
        );

    color: var(--white);
}


.masthead-inner {
    width: min(calc(100% - 80px), var(--max-width));
    margin: 0 auto;

    padding:
        24px
        0
        82px;
}


.masthead-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.16);
}


.issue-label,
.issue-date {
    margin: 0;

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}


.masthead-main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.8fr)
        minmax(320px, 0.9fr);

    align-items: center;

    gap: 70px;

    padding-top: 72px;
}


.masthead-title h1 {
    margin: 0;

    font-size:
        clamp(3.3rem, 6vw, 5.4rem);

    line-height: 0.94;

    letter-spacing: -0.065em;

    font-weight: 800;
}


.masthead-title h1 span {
    color: var(--purple-light);
}


.masthead-about {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: center;

    gap: 28px;

    padding-left: 40px;

    border-left:
        1px solid rgba(255, 255, 255, 0.2);
}


.masthead-icon {
    width: 54px;
    height: 54px;

    flex-shrink: 0;
}


.masthead-icon svg {
    width: 100%;
    height: 100%;
}


.masthead-kicker {
    max-width: 300px;

    margin:
        0
        0
        14px;

    font-size: 0.95rem;

    line-height: 1.5;
}


.masthead-edition {
    margin: 0;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}


/* =========================================================
   03. MAIN
   ========================================================= */

main {
    overflow: hidden;
}


/* =========================================================
   04. SECTION 01 — CONTINUING THE DISCUSSION
   ========================================================= */

.discussion {
    width: min(calc(100% - 80px), var(--max-width));

    margin: 0 auto;

    padding:
        84px
        0
        110px;
}


/* ----- Section heading ----- */

.discussion-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 820px)
        auto;

    justify-content: space-between;

    gap: 70px;

    align-items: end;

    margin-bottom: 46px;
}


.discussion-label {
    margin:
        0
        0
        14px;

    color: #805fff;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.discussion-heading h2 {
    max-width: 860px;

    margin:
        0
        0
        16px;

    font-size:
        clamp(2.25rem, 3.35vw, 3.55rem);

    line-height: 1.02;

    letter-spacing: -0.045em;

    font-weight: 800;
}


.discussion-intro {
    max-width: 700px;

    margin: 0;

    color: var(--ink-soft);

    font-size: 0.98rem;

    line-height: 1.72;
}


.discussion-index {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding-bottom: 8px;
}


.discussion-number {
    color: var(--purple);

    font-size: 0.8rem;
    font-weight: 700;
}


.discussion-index-line {
    display: block;

    width: 34px;
    height: 2px;

    margin-top: 10px;

    background: var(--purple);
}


/* =========================================================
   06. DISCUSSION CARDS
   ========================================================= */

.discussion-cards {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* ----- Individual card ----- */

.discussion-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.76);

    border:
        1px solid rgba(54, 45, 76, 0.11);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


.discussion-card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(157, 124, 255, 0.38);

    box-shadow:
        0 24px 55px
        rgba(39, 30, 62, 0.09);
}


/* =========================================================
   07. CARD IMAGES
   ========================================================= */

.discussion-card-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #ebe7f2;
}


.discussion-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 500ms ease;
}


.discussion-card:hover
.discussion-card-image img {
    transform: scale(1.025);
}


/*
   The PTSD artwork is portrait-orientated.
   This gives the first card a better crop.
*/

.discussion-card-1
.discussion-card-image img {
    object-position:
        center 35%;
}


/* =========================================================
   08. PLACEHOLDER ARTWORK
   Cards without an image
   ========================================================= */

.discussion-card-placeholder {
    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: flex-end;

    width: 100%;

    aspect-ratio: 16 / 10;

    padding: 26px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #211c34,
            #30264b
        );
}


.discussion-card-placeholder::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

    top: -75px;
    right: -55px;

    border:
        1px solid
        rgba(188, 167, 255, 0.25);

    border-radius: 50%;
}


.discussion-card-placeholder::after {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    top: -20px;
    right: -4px;

    border:
        1px solid
        rgba(188, 167, 255, 0.17);

    border-radius: 50%;
}


.discussion-card-placeholder span {
    position: relative;

    z-index: 1;

    color:
        rgba(188, 167, 255, 0.8);

    font-size: 3.2rem;
    font-weight: 300;

    line-height: 1;
}


/* Give card 3 a subtle variation */

.discussion-card-3
.discussion-card-placeholder {
    background:
        linear-gradient(
            145deg,
            #29223e,
            #1d192c
        );
}


/* =========================================================
   09. CARD CONTENT
   ========================================================= */

.discussion-card-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding:
        30px
        30px
        32px;
}


.discussion-card-meta {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 21px;
}


.discussion-card-number {
    color: var(--purple);

    font-size: 0.7rem;
    font-weight: 800;
}


.discussion-card-category {
    color: var(--ink-soft);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


.discussion-card h3 {
    margin:
        0
        0
        18px;

    font-size:
        clamp(1.55rem, 2.2vw, 2.15rem);

    line-height: 1.08;

    letter-spacing: -0.035em;

    font-weight: 800;
}


.discussion-card-text {
    margin:
        0
        0
        32px;

    color: var(--ink-soft);

    font-size: 0.93rem;

    line-height: 1.7;
}


/* =========================================================
   10. READ ARTICLE LINK
   ========================================================= */

.discussion-card-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: auto;

    padding-top: 18px;

    border-top:
        1px solid var(--line);

    color: var(--ink);

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.discussion-card-link span {
    color: var(--purple);

    font-size: 1.25rem;

    transition:
        transform 180ms ease;
}


.discussion-card-link:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   11. RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .masthead-main {
        grid-template-columns: 1fr;
        gap: 42px;
    }


    .masthead-about {
        max-width: 520px;

        padding-left: 0;

        border-left: 0;
    }


    .discussion-heading {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }


    .discussion-heading h2 {
        max-width: 700px;

        font-size:
            clamp(2.2rem, 5vw, 3.25rem);
    }


    .discussion-cards {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .discussion-card-3 {
        grid-column:
            1 / -1;
    }


    .discussion-card-3 {
        display: grid;

        grid-template-columns:
            minmax(260px, 0.8fr)
            1fr;
    }


    .discussion-card-3
    .discussion-card-placeholder {
        height: 100%;

        aspect-ratio: auto;
    }

}


/* =========================================================
   12. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .masthead-inner,
    .discussion {
        width:
            min(calc(100% - 36px), var(--max-width));
    }


    .masthead-inner {
        padding-bottom: 55px;
    }


    .masthead-top {
        gap: 20px;
    }


    .issue-label,
    .issue-date {
        font-size: 0.58rem;
    }


    .masthead-main {
        padding-top: 50px;
    }


    .masthead-title h1 {
        font-size:
            clamp(2.8rem, 14vw, 4.2rem);
    }


    .masthead-about {
        grid-template-columns:
            44px
            1fr;

        gap: 18px;
    }


    .masthead-icon {
        width: 44px;
        height: 44px;
    }


    .discussion {
        padding:
            68px
            0
            80px;
    }


    .discussion-heading {
        display: block;

        margin-bottom: 38px;
    }


    .discussion-heading h2 {
        max-width: 100%;

        font-size:
            clamp(2.15rem, 9.5vw, 3rem);

        line-height: 1.04;
    }


    .discussion-index {
        align-items: flex-start;

        margin-top: 30px;
    }


    .discussion-cards {
        grid-template-columns: 1fr;
    }


    .discussion-card-3 {
        display: flex;

        grid-column: auto;
    }


    .discussion-card-3
    .discussion-card-placeholder {
        aspect-ratio: 16 / 10;
    }

}
/* =========================================================
   13. INSIDE SERENITY — ARTICLE READER
   ========================================================= */


/* ---------------------------------------------------------
   Article page foundation
   --------------------------------------------------------- */

.article-page {
    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(157, 124, 255, 0.055),
            transparent 30%
        ),
        var(--paper);

    color: var(--ink);
}


/* =========================================================
   ARTICLE MASTHEAD
   ========================================================= */

.article-masthead {
    background:
        linear-gradient(
            115deg,
            #1b182a 0%,
            #211c34 58%,
            #28203f 100%
        );

    color: var(--white);
}


.article-masthead-inner {
    width:
        min(calc(100% - 80px), 1180px);

    margin: 0 auto;

    padding:
        24px
        0
        76px;
}


/* ---------------------------------------------------------
   Top navigation
   --------------------------------------------------------- */

.article-topbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);
}


.article-back {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255, 255, 255, 0.72);

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        color 180ms ease;
}


.article-back:hover {
    color: var(--white);
}


.article-back span {
    color: var(--purple-light);

    font-size: 1rem;
}


.article-publication {
    margin: 0;

    color: var(--white);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.05em;
}


.article-publication span {
    color: var(--purple-light);
}


/* =========================================================
   ARTICLE HERO
   ========================================================= */

.article-hero {
    max-width: 900px;

    padding-top: 72px;
}


.article-category {
    margin:
        0
        0
        20px;

    color: var(--purple-light);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.article-hero h1 {
    max-width: 900px;

    margin:
        0
        0
        28px;

    color: var(--white);

    font-size:
        clamp(3rem, 5.5vw, 5.4rem);

    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.article-standfirst {
    max-width: 720px;

    margin:
        0
        0
        30px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size:
        clamp(1rem, 1.4vw, 1.18rem);

    line-height: 1.75;
}


.article-meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.article-meta-dot {
    color: var(--purple-light);
}


/* =========================================================
   ARTICLE MAIN
   ========================================================= */

.article-main {
    overflow: visible;
}


.article-shell {
    width:
        min(calc(100% - 80px), 1180px);

    margin: 0 auto;

    padding:
        70px
        0
        110px;
}


/* =========================================================
   FEATURE IMAGE
   ========================================================= */

.article-feature {
    width: min(100%, 940px);

    margin:
        0
        auto
        72px;
}


.article-feature img {
    width: 100%;

    max-height: 660px;

    object-fit: contain;

    background: var(--paper-soft);
}


.article-feature figcaption {
    margin-top: 12px;

    color: var(--ink-soft);

    font-size: 0.7rem;

    line-height: 1.5;
}


/* =========================================================
   ARTICLE MARKER
   ========================================================= */

.article-marker {
    width:
        min(100%, 760px);

    margin:
        0
        auto
        42px;

    display: flex;

    align-items: center;

    gap: 15px;

    color: #805fff;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.article-marker-line {
    display: block;

    width: 42px;
    height: 2px;

    background: var(--purple);
}


/* =========================================================
   MARKDOWN ARTICLE BODY
   ========================================================= */

.article-body {
    width:
        min(100%, 760px);

    margin: 0 auto;

    color: var(--ink);

    font-size: 1.05rem;

    line-height: 1.85;
}


/* ---------------------------------------------------------
   Opening paragraph
   --------------------------------------------------------- */

.article-body > p:first-child {
    color: var(--ink);

    font-size:
        clamp(1.18rem, 1.8vw, 1.38rem);

    line-height: 1.75;
}


/* ---------------------------------------------------------
   Paragraphs
   --------------------------------------------------------- */

.article-body p {
    margin:
        0
        0
        28px;

    color: var(--ink-soft);
}


/* ---------------------------------------------------------
   Headings
   --------------------------------------------------------- */

.article-body h1 {
    display: none;
}


.article-body h2 {
    margin:
        70px
        0
        24px;

    color: var(--ink);

    font-size:
        clamp(2rem, 3vw, 2.8rem);

    line-height: 1.08;

    letter-spacing: -0.04em;

    font-weight: 800;
}


.article-body h3 {
    margin:
        48px
        0
        18px;

    color: var(--ink);

    font-size:
        clamp(1.4rem, 2vw, 1.8rem);

    line-height: 1.2;

    letter-spacing: -0.025em;
}


/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

.article-body a {
    color: #6f4cff;

    text-decoration-thickness: 1px;

    text-underline-offset: 4px;
}


.article-body a:hover {
    color: #4f2bdc;
}


/* ---------------------------------------------------------
   Strong text
   --------------------------------------------------------- */

.article-body strong {
    color: var(--ink);

    font-weight: 700;
}


/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

.article-body ul,
.article-body ol {
    margin:
        0
        0
        32px;

    padding-left: 26px;

    color: var(--ink-soft);
}


.article-body li {
    margin-bottom: 12px;

    padding-left: 6px;
}


.article-body li::marker {
    color: var(--purple);
}


/* ---------------------------------------------------------
   Blockquotes
   --------------------------------------------------------- */

.article-body blockquote {
    position: relative;

    margin:
        60px
        -70px;

    padding:
        38px
        46px
        38px
        52px;

    background:
        linear-gradient(
            135deg,
            rgba(157, 124, 255, 0.09),
            rgba(238, 233, 255, 0.45)
        );

    border-left:
        3px solid var(--purple);
}


.article-body blockquote p {
    margin: 0;

    color: var(--ink);

    font-size:
        clamp(1.35rem, 2.2vw, 1.85rem);

    line-height: 1.5;

    letter-spacing: -0.025em;

    font-weight: 600;
}


/* ---------------------------------------------------------
   Horizontal rules
   --------------------------------------------------------- */

.article-body hr {
    width: 100%;

    height: 1px;

    margin:
        60px
        0;

    border: 0;

    background: var(--line);
}


/* ---------------------------------------------------------
   Images inside Markdown
   --------------------------------------------------------- */

.article-body img {
    width: 100%;

    margin:
        45px
        0;

    border-radius: 2px;
}


/* =========================================================
   LOADING / ERROR STATES
   ========================================================= */

.article-loading {
    color: var(--ink-soft);
}


.article-error {
    padding:
        40px;

    background: var(--paper-soft);

    border-left:
        3px solid var(--purple);
}


.article-error h2 {
    margin-top: 0;
}


.article-error a {
    display: inline-block;

    margin-top: 10px;

    color: #6f4cff;

    font-weight: 700;
}


/* =========================================================
   ARTICLE FOOTER
   ========================================================= */

.article-footer {
    background: var(--navy);

    color: var(--white);
}


.article-footer-inner {
    width:
        min(calc(100% - 80px), 1180px);

    margin: 0 auto;

    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 50px;

    padding:
        54px
        0;
}


.article-footer-brand {
    margin:
        0
        0
        8px;

    font-size: 1.35rem;
    font-weight: 800;

    letter-spacing: -0.035em;
}


.article-footer-brand span {
    color: var(--purple-light);
}


.article-footer-description {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.82rem;
}


.article-footer-back {
    display: flex;

    align-items: center;

    gap: 18px;

    color: var(--white);

    text-decoration: none;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.article-footer-back span {
    color: var(--purple-light);

    font-size: 1.2rem;

    transition:
        transform 180ms ease;
}


.article-footer-back:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   ARTICLE RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .article-masthead-inner,
    .article-shell,
    .article-footer-inner {
        width:
            min(calc(100% - 48px), 1180px);
    }


    .article-hero {
        padding-top: 58px;
    }


    .article-body blockquote {
        margin:
            50px
            -25px;

        padding:
            32px
            34px;
    }

}


/* =========================================================
   ARTICLE RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .article-masthead-inner,
    .article-shell,
    .article-footer-inner {
        width:
            min(calc(100% - 36px), 1180px);
    }


    .article-masthead-inner {
        padding-bottom: 55px;
    }


    .article-topbar {
        align-items: flex-start;
    }


    .article-publication {
        font-size: 0.62rem;
    }


    .article-back {
        font-size: 0.6rem;
    }


    .article-hero {
        padding-top: 48px;
    }


    .article-hero h1 {
        font-size:
            clamp(2.7rem, 13vw, 4rem);
    }


    .article-shell {
        padding:
            42px
            0
            75px;
    }


    .article-feature {
        margin-bottom: 50px;
    }


    .article-marker {
        margin-bottom: 30px;
    }


    .article-body {
        font-size: 1rem;
    }


    .article-body h2 {
        margin-top: 55px;
    }


    .article-body blockquote {
        margin:
            45px
            0;

        padding:
            28px
            25px;
    }


    .article-footer-inner {
        flex-direction: column;

        align-items: flex-start;

        padding:
            42px
            0;
    }

}
/* =========================================================
   14. SECTION 02 — INSIDE SERENITY
   Editorial News Digest
   ========================================================= */

.inside-serenity {
    width: min(calc(100% - 80px), var(--max-width));

    margin: 0 auto;

    padding:
        92px
        0
        120px;

    border-top:
        1px solid var(--line);
}


/* =========================================================
   SECTION 02 HEADING
   ========================================================= */

.inside-serenity-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 820px)
        auto;

    justify-content: space-between;
    align-items: end;

    gap: 70px;

    margin-bottom: 72px;
}


.inside-serenity-label {
    margin:
        0
        0
        14px;

    color: #805fff;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.inside-serenity-heading h2 {
    max-width: 760px;

    margin:
        0
        0
        18px;

    font-size:
        clamp(2.6rem, 4vw, 4.2rem);

    line-height: 1.02;

    letter-spacing: -0.05em;

    font-weight: 800;
}


.inside-serenity-intro {
    max-width: 700px;

    margin: 0;

    color: var(--ink-soft);

    font-size: 0.98rem;

    line-height: 1.75;
}


.inside-serenity-index {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    padding-bottom: 8px;
}


.inside-serenity-number {
    color: var(--purple);

    font-size: 0.8rem;
    font-weight: 700;
}


.inside-serenity-index-line {
    display: block;

    width: 34px;
    height: 2px;

    margin-top: 10px;

    background: var(--purple);
}


/* =========================================================
   STORY LIST
   ========================================================= */

.inside-serenity-stories {
    border-top:
        1px solid var(--line);
}


/* =========================================================
   INDIVIDUAL STORY
   ========================================================= */

.inside-serenity-story {
    position: relative;

    display: grid;

    grid-template-columns:
        110px
        minmax(0, 680px)
        1fr;

    gap: 42px;

    min-height: 330px;

    padding:
        58px
        0;

    border-bottom:
        1px solid var(--line);
}


/* ---------------------------------------------------------
   Large editorial number
   --------------------------------------------------------- */

.inside-serenity-story-number {
    color:
        rgba(157, 124, 255, 0.58);

    font-size:
        clamp(2.8rem, 4vw, 4.3rem);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -0.04em;
}


/* =========================================================
   STORY CONTENT
   ========================================================= */

.inside-serenity-story-content {
    max-width: 680px;
}


.inside-serenity-story-category {
    margin:
        0
        0
        16px;

    color: #805fff;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.inside-serenity-story h3 {
    max-width: 620px;

    margin:
        0
        0
        22px;

    color: var(--ink);

    font-size:
        clamp(2rem, 3vw, 3.15rem);

    line-height: 1.04;

    letter-spacing: -0.045em;

    font-weight: 800;
}


.inside-serenity-story-text {
    max-width: 620px;

    margin:
        0
        0
        30px;

    color: var(--ink-soft);

    font-size: 0.94rem;

    line-height: 1.75;
}


/* =========================================================
   STORY LINK
   ========================================================= */

.inside-serenity-story-link {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(157, 124, 255, 0.4);

    color: var(--ink);

    text-decoration: none;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    transition:
        border-color 180ms ease,
        color 180ms ease;
}


.inside-serenity-story-link span {
    color: var(--purple);

    font-size: 1.1rem;

    transition:
        transform 180ms ease;
}


.inside-serenity-story-link:hover {
    color: #6f4cff;

    border-color: var(--purple);
}


.inside-serenity-story-link:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   EDITORIAL DECORATION
   ========================================================= */

.inside-serenity-story::after {
    content: "";

    position: absolute;

    top: 58px;
    right: 0;

    width: 130px;
    height: 130px;

    opacity: 0.35;

    background-image:
        radial-gradient(
            circle,
            var(--purple) 1px,
            transparent 1.3px
        );

    background-size:
        13px
        13px;

    pointer-events: none;
}


/* =========================================================
   ALTERNATING STORIES
   ========================================================= */

/*
   Stories 02 and 04 shift towards the right.

   This breaks the repetitive card/grid feeling from
   Section 02 and gives Section 03 a magazine layout.
*/

.inside-serenity-story:nth-child(even) {
    grid-template-columns:
        1fr
        minmax(0, 680px)
        110px;
}


.inside-serenity-story:nth-child(even)
.inside-serenity-story-number {
    grid-column: 3;
    grid-row: 1;

    text-align: right;
}


.inside-serenity-story:nth-child(even)
.inside-serenity-story-content {
    grid-column: 2;
    grid-row: 1;
}


.inside-serenity-story:nth-child(even)::after {
    right: auto;
    left: 0;
}


/* =========================================================
   VERY SUBTLE STORY HOVER
   ========================================================= */

.inside-serenity-story-content {
    transition:
        transform 220ms ease;
}


.inside-serenity-story:hover
.inside-serenity-story-content {
    transform:
        translateX(5px);
}


.inside-serenity-story:nth-child(even):hover
.inside-serenity-story-content {
    transform:
        translateX(-5px);
}


/* =========================================================
   SECTION 02 — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .inside-serenity {
        width:
            min(calc(100% - 80px), var(--max-width));

        padding:
            80px
            0
            100px;
    }


    .inside-serenity-heading {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 40px;

        margin-bottom: 58px;
    }


    .inside-serenity-story,
    .inside-serenity-story:nth-child(even) {
        grid-template-columns:
            90px
            minmax(0, 1fr);

        gap: 35px;

        min-height: 0;

        padding:
            50px
            0;
    }


    .inside-serenity-story:nth-child(even)
    .inside-serenity-story-number {
        grid-column: 1;
        grid-row: 1;

        text-align: left;
    }


    .inside-serenity-story:nth-child(even)
    .inside-serenity-story-content {
        grid-column: 2;
        grid-row: 1;
    }


    .inside-serenity-story::after {
        width: 90px;
        height: 90px;
    }

}


/* =========================================================
   SECTION 02 — MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .inside-serenity {
        width:
            min(calc(100% - 36px), var(--max-width));

        padding:
            68px
            0
            80px;
    }


    .inside-serenity-heading {
        display: block;

        margin-bottom: 42px;
    }


    .inside-serenity-heading h2 {
        font-size:
            clamp(2.3rem, 10vw, 3.3rem);
    }


    .inside-serenity-index {
        align-items: flex-start;

        margin-top: 30px;
    }


    .inside-serenity-story,
    .inside-serenity-story:nth-child(even) {
        display: block;

        padding:
            42px
            0;
    }


    .inside-serenity-story-number,
    .inside-serenity-story:nth-child(even)
    .inside-serenity-story-number {
        margin-bottom: 25px;

        text-align: left;

        font-size: 2.7rem;
    }


    .inside-serenity-story h3 {
        font-size:
            clamp(1.8rem, 8vw, 2.5rem);
    }


    .inside-serenity-story-text {
        font-size: 0.92rem;
    }


    .inside-serenity-story::after {
        top: 40px;

        width: 65px;
        height: 65px;

        opacity: 0.22;
    }


    .inside-serenity-story:nth-child(even)::after {
        right: 0;
        left: auto;
    }


    .inside-serenity-story:hover
    .inside-serenity-story-content,
    .inside-serenity-story:nth-child(even):hover
    .inside-serenity-story-content {
        transform: none;
    }

}

/* =========================================================
   15. SECTION 03 — MESSAGE FROM OUR CEO
   ========================================================= */

.ceo-message {
    background:
        radial-gradient(
            circle at 78% 30%,
            rgba(157, 124, 255, 0.14),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #1b182a 0%,
            #211c34 52%,
            #2a2141 100%
        );

    color: var(--white);

    padding:
        96px
        0
        110px;
}


.ceo-message-inner {
    width:
        min(calc(100% - 80px), var(--max-width));

    margin: 0 auto;
}


/* =========================================================
   SECTION 03 HEADING
   ========================================================= */

.ceo-message-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 820px)
        auto;

    justify-content: space-between;
    align-items: end;

    gap: 70px;

    margin-bottom: 58px;
}


.ceo-message-label {
    margin:
        0
        0
        14px;

    color: var(--purple-light);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.ceo-message-heading h2 {
    max-width: 760px;

    margin:
        0
        0
        18px;

    color: var(--white);

    font-size:
        clamp(2.6rem, 4vw, 4.2rem);

    line-height: 1.02;

    letter-spacing: -0.05em;

    font-weight: 800;
}


.ceo-message-intro {
    max-width: 680px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.98rem;

    line-height: 1.75;
}


/* =========================================================
   SECTION 03 INDEX
   ========================================================= */

.ceo-message-index {
    display: flex;

    flex-direction: column;
    align-items: flex-end;

    padding-bottom: 8px;
}


.ceo-message-number {
    color: var(--purple-light);

    font-size: 0.8rem;
    font-weight: 700;
}


.ceo-message-index-line {
    display: block;

    width: 34px;
    height: 2px;

    margin-top: 10px;

    background: var(--purple-light);
}


/* =========================================================
   CEO VIDEO FEATURE
   ========================================================= */

.ceo-message-feature {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(280px, 0.65fr);

    gap: 56px;

    align-items: start;
}


.ceo-video-wrap {
    position: relative;

    overflow: hidden;

    background: #12101d;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, 0.22);
}


.ceo-video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #12101d;
}


/* =========================================================
   CEO DETAILS
   ========================================================= */

.ceo-message-details {
    position: relative;

    padding:
        12px
        0
        0;
}


.ceo-message-mark {
    margin-bottom: 18px;

    color:
        rgba(188, 167, 255, 0.42);

    font-size: 5rem;
    font-weight: 300;

    line-height: 0.8;
}


.ceo-message-person {
    margin-bottom: 28px;
}


.ceo-message-name {
    margin:
        0
        0
        5px;

    color: var(--white);

    font-size:
        clamp(1.7rem, 2.5vw, 2.5rem);

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.035em;
}


.ceo-message-role {
    margin: 0;

    color:
        rgba(255, 255, 255, 0.55);

    font-size: 0.72rem;
    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.ceo-message-role-dot {
    margin:
        0
        7px;

    color: var(--purple-light);
}


.ceo-message-caption {
    max-width: 310px;

    margin: 0;

    padding-top: 22px;

    border-top:
        1px solid rgba(255, 255, 255, 0.14);

    color:
        rgba(255, 255, 255, 0.68);

    font-size: 0.92rem;

    line-height: 1.7;
}


.ceo-message-details::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -30px;

    width: 110px;
    height: 110px;

    opacity: 0.18;

    background-image:
        radial-gradient(
            circle,
            var(--purple-light) 1px,
            transparent 1.3px
        );

    background-size:
        12px
        12px;

    pointer-events: none;
}


/* =========================================================
   SECTION 03 — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .ceo-message {
        padding:
            82px
            0
            96px;
    }


    .ceo-message-inner {
        width:
            min(calc(100% - 80px), var(--max-width));
    }


    .ceo-message-heading {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 40px;
    }


    .ceo-message-feature {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    .ceo-message-details {
        max-width: 620px;
    }


    .ceo-message-caption {
        max-width: 520px;
    }

}


/* =========================================================
   SECTION 03 — MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .ceo-message {
        padding:
            68px
            0
            78px;
    }


    .ceo-message-inner {
        width:
            min(calc(100% - 36px), var(--max-width));
    }


    .ceo-message-heading {
        display: block;

        margin-bottom: 42px;
    }


    .ceo-message-heading h2 {
        font-size:
            clamp(2.3rem, 10vw, 3.3rem);
    }


    .ceo-message-index {
        align-items: flex-start;

        margin-top: 28px;
    }


    .ceo-message-feature {
        display: block;
    }


    .ceo-message-details {
        margin-top: 34px;
    }


    .ceo-message-mark {
        font-size: 4rem;
    }


    .ceo-message-caption {
        max-width: 100%;
    }


    .ceo-message-details::after {
        display: none;
    }

}

/* =========================================================
   16. SECTION 03 — HELP & SUPPORT
   ========================================================= */

.support-section {
    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(157, 124, 255, 0.075),
            transparent 28%
        ),
        var(--paper);

    padding:
        96px
        0
        110px;
}


.support-section-inner {
    width:
        min(calc(100% - 80px), var(--max-width));

    margin: 0 auto;
}


/* =========================================================
   SECTION 03 HEADING
   ========================================================= */

.support-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 820px)
        auto;

    justify-content: space-between;
    align-items: end;

    gap: 70px;

    margin-bottom: 58px;
}


.support-label {
    margin:
        0
        0
        14px;

    color: #805fff;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.support-heading h2 {
    max-width: 760px;

    margin:
        0
        0
        18px;

    color: var(--ink);

    font-size:
        clamp(2.6rem, 4vw, 4.2rem);

    line-height: 1.02;

    letter-spacing: -0.05em;

    font-weight: 800;
}


.support-intro {
    max-width: 700px;

    margin: 0;

    color: var(--ink-soft);

    font-size: 0.98rem;

    line-height: 1.75;
}


.support-index {
    display: flex;

    flex-direction: column;
    align-items: flex-end;

    padding-bottom: 8px;
}


.support-number {
    color: var(--purple);

    font-size: 0.8rem;
    font-weight: 700;
}


.support-index-line {
    display: block;

    width: 34px;
    height: 2px;

    margin-top: 10px;

    background: var(--purple);
}


/* =========================================================
   RESOURCE GRID
   ========================================================= */

.support-resources {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;

    margin-bottom: 38px;
}


/* =========================================================
   RESOURCE CARD
   ========================================================= */

.support-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 330px;

    padding:
        28px
        30px
        30px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid rgba(54, 45, 76, 0.11);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


.support-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(157, 124, 255, 0.34);

    box-shadow:
        0 22px 48px
        rgba(39, 30, 62, 0.075);
}


/* =========================================================
   FEATURED RESOURCE
   ========================================================= */

.support-card-featured {
    grid-column:
        1 / -1;

    min-height: 300px;

    padding:
        34px
        36px
        36px;

    background:
        linear-gradient(
            135deg,
            rgba(238, 233, 255, 0.94),
            rgba(255, 255, 255, 0.9)
        );

    border:
        1px solid rgba(157, 124, 255, 0.24);
}


.support-card-featured::after {
    content: "";

    position: absolute;

    top: -45px;
    right: -35px;

    width: 190px;
    height: 190px;

    border-radius: 50%;

    border:
        1px solid rgba(157, 124, 255, 0.20);

    pointer-events: none;
}


.support-card-featured::before {
    content: "";

    position: absolute;

    top: 18px;
    right: 28px;

    width: 88px;
    height: 88px;

    opacity: 0.28;

    background-image:
        radial-gradient(
            circle,
            var(--purple) 1px,
            transparent 1.25px
        );

    background-size:
        11px
        11px;

    pointer-events: none;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.support-card-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 40px;
}


.support-card-number {
    color: var(--purple);

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.05em;
}


.support-card-category {
    color: var(--ink-soft);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.support-card-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    max-width: 640px;
}


.support-card h3 {
    margin:
        0
        0
        18px;

    color: var(--ink);

    font-size:
        clamp(1.65rem, 2.4vw, 2.35rem);

    line-height: 1.08;

    letter-spacing: -0.04em;

    font-weight: 800;
}


.support-card-featured h3 {
    max-width: 720px;

    font-size:
        clamp(2rem, 3.2vw, 3.1rem);
}


.support-card-description {
    margin:
        0
        0
        24px;

    color: var(--ink-soft);

    font-size: 0.94rem;

    line-height: 1.72;
}


.support-card-contact {
    display: inline-flex;

    align-self: flex-start;

    margin:
        0
        0
        26px;

    padding:
        9px
        12px;

    background:
        var(--purple-pale);

    color: #5d40c7;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.04em;
}


/* =========================================================
   RESOURCE LINKS
   ========================================================= */

.support-card-link {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    align-self: flex-start;

    margin-top: auto;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(157, 124, 255, 0.42);

    color: var(--ink);

    text-decoration: none;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.support-card-link span {
    color: var(--purple);

    font-size: 1rem;

    transition:
        transform 180ms ease;
}


.support-card-link:hover span {
    transform:
        translate(3px, -3px);
}


/* =========================================================
   URGENT HELP
   ========================================================= */

.urgent-help {
    display: grid;

    grid-template-columns:
        52px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 26px;

    margin-top: 44px;

    padding:
        28px
        30px;

    background:
        #f5f2fb;

    border:
        1px solid rgba(54, 45, 76, 0.12);

    border-left:
        3px solid var(--purple);
}


.urgent-help-marker {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--purple-pale);

    color: #6f4cff;

    font-size: 1.1rem;
    font-weight: 800;
}


.urgent-help-content h3 {
    margin:
        0
        0
        6px;

    color: var(--ink);

    font-size: 1.1rem;

    line-height: 1.2;
}


.urgent-help-content p {
    max-width: 760px;

    margin: 0;

    color: var(--ink-soft);

    font-size: 0.9rem;

    line-height: 1.65;
}


.urgent-help-link {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: var(--ink);

    text-decoration: none;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    white-space: nowrap;
}


.urgent-help-link span:last-child {
    color: var(--purple);

    font-size: 1.1rem;

    transition:
        transform 180ms ease;
}


.urgent-help-link:hover span:last-child {
    transform:
        translateX(4px);
}


/* =========================================================
   SECTION 03 — TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .support-section {
        padding:
            82px
            0
            96px;
    }


    .support-section-inner {
        width:
            min(calc(100% - 80px), var(--max-width));
    }


    .support-heading {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 40px;
    }


    .urgent-help {
        grid-template-columns:
            52px
            minmax(0, 1fr);
    }


    .urgent-help-link {
        grid-column: 2;

        justify-self: start;

        margin-top: 6px;
    }

}


/* =========================================================
   SECTION 03 — MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .support-section {
        padding:
            68px
            0
            80px;
    }


    .support-section-inner {
        width:
            min(calc(100% - 36px), var(--max-width));
    }


    .support-heading {
        display: block;

        margin-bottom: 42px;
    }


    .support-heading h2 {
        font-size:
            clamp(2.3rem, 10vw, 3.3rem);
    }


    .support-index {
        align-items: flex-start;

        margin-top: 28px;
    }


    .support-resources {
        grid-template-columns: 1fr;
    }


    .support-card-featured {
        grid-column: auto;
    }


    .support-card,
    .support-card-featured {
        min-height: 0;

        padding:
            26px
            24px
            28px;
    }


    .support-card-top {
        margin-bottom: 30px;
    }


    .urgent-help {
        display: block;

        padding:
            24px;
    }


    .urgent-help-marker {
        margin-bottom: 18px;
    }


    .urgent-help-link {
        display: inline-flex;

        margin-top: 22px;

        white-space: normal;
    }

}

/* =========================================================
   17. PUBLICATION FOOTER
   ========================================================= */

.publication-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, #1b182a 0%, #211c34 55%, #28203f 100%);
    color: var(--white);
}

.publication-footer::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -240px;
    right: -120px;
    border: 1px solid rgba(188, 167, 255, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

.publication-footer::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    top: -145px;
    right: -35px;
    border: 1px solid rgba(188, 167, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.publication-footer-inner {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 80px), var(--max-width));
    margin: 0 auto;
    padding: 82px 0 34px;
}

.publication-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 80px;
    padding-bottom: 58px;
}

.publication-footer-brand h2 {
    margin: 0 0 20px;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
    font-weight: 800;
}

.publication-footer-tagline {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.94rem;
    line-height: 1.7;
}

.publication-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.publication-footer-links a {
    position: relative;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    transition: color 180ms ease, transform 180ms ease;
}

.publication-footer-links a::after {
    content: "↗";
    display: inline-block;
    margin-left: 10px;
    color: var(--purple-light);
    transition: transform 180ms ease;
}

.publication-footer-links a:hover {
    color: var(--white);
}

.publication-footer-links a:hover::after {
    transform: translate(3px, -3px);
}

.publication-footer-disclaimer {
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.publication-footer-disclaimer p {
    max-width: 900px;
    margin: 0;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.78rem;
    line-height: 1.75;
}

.publication-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 30px;
}

.publication-footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.publication-footer-issue {
    display: flex;
    align-items: center;
    gap: 9px;
}

.publication-footer-brand {
    position: relative;
}

.publication-footer-brand::before {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin-bottom: 25px;
    background: var(--purple);
}

@media (max-width: 1050px) {
    .publication-footer-main {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 50px;
    }
}

@media (max-width: 720px) {
    .publication-footer-inner {
        width: min(calc(100% - 36px), var(--max-width));
        padding: 62px 0 28px;
    }

    .publication-footer-main {
        display: block;
        padding-bottom: 42px;
    }

    .publication-footer-brand h2 {
        font-size: clamp(2.6rem, 13vw, 4rem);
    }

    .publication-footer-links {
        align-items: flex-start;
        margin-top: 42px;
    }

    .publication-footer-disclaimer {
        padding: 22px 0;
    }

    .publication-footer-bottom {
        display: block;
        padding-top: 24px;
    }

    .publication-footer-issue {
        margin-top: 12px;
    }
}

/* =========================================================
   18. 2026 EDITORIAL REFINEMENT PASS
   ========================================================= */

body {
    letter-spacing: -0.005em;
}

.discussion,
.inside-serenity,
.support-section-inner,
.ceo-message-inner {
    isolation: isolate;
}

.discussion,
.inside-serenity {
    position: relative;
}

.discussion::before,
.inside-serenity::before {
    content: "";
    position: absolute;
    left: 50%;
    width: min(100vw, 1800px);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
}

.discussion::before {
    top: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(157, 124, 255, 0.018), transparent 28%, transparent 72%, rgba(157, 124, 255, 0.025));
}

.inside-serenity::before {
    top: 0;
    bottom: 0;
    background: radial-gradient(circle at 18% 18%, rgba(157, 124, 255, 0.05), transparent 24%);
}

/* Masthead */
.masthead-inner {
    padding-bottom: 70px;
}

.masthead-main {
    gap: 82px;
    padding-top: 64px;
}

.masthead-title h1 {
    font-size: clamp(3.25rem, 5.4vw, 5rem);
    letter-spacing: -0.07em;
}

.masthead-about {
    gap: 24px;
}

.masthead-kicker {
    font-size: 0.91rem;
    line-height: 1.55;
}

.masthead-edition {
    color: rgba(255, 255, 255, 0.68);
}

/* Section 01 */

/* Section 01 */
.discussion {
    padding-top: 76px;
    padding-bottom: 92px;
}

.discussion-heading {
    margin-bottom: 42px;
}

.discussion-cards {
    gap: 20px;
}

.discussion-card {
    border-color: rgba(54, 45, 76, 0.09);
    background: rgba(255, 255, 255, 0.84);
}

.discussion-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(39, 30, 62, 0.08);
}

.discussion-card-placeholder {
    align-items: center;
    justify-content: center;
    padding: 0;
}

.discussion-card-placeholder span {
    position: relative;
    z-index: 2;
    font-size: clamp(2.5rem, 4vw, 4rem);
    letter-spacing: -0.04em;
}

.discussion-card-2 .discussion-card-placeholder span,
.discussion-card-3 .discussion-card-placeholder span {
    font-size: 0;
}

.discussion-card-2 .discussion-card-placeholder span::after {
    content: "LISTEN.";
    font-size: clamp(2rem, 3.4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.92);
}

.discussion-card-3 .discussion-card-placeholder span::after {
    content: "HELP →";
    font-size: clamp(2rem, 3.4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.92);
}

.discussion-card-placeholder::before {
    width: 240px;
    height: 240px;
    top: -110px;
    right: -70px;
}

.discussion-card-placeholder::after {
    width: 125px;
    height: 125px;
    top: -34px;
    right: -5px;
}

.discussion-card-content {
    padding: 27px 28px 28px;
}

.discussion-card-meta {
    margin-bottom: 17px;
}

.discussion-card h3 {
    margin-bottom: 15px;
}

.discussion-card-text {
    margin-bottom: 27px;
}

/* Section 02 */
.inside-serenity {
    padding-top: 78px;
    padding-bottom: 88px;
}

.inside-serenity-heading {
    margin-bottom: 44px;
}

.inside-serenity-story,
.inside-serenity-story:nth-child(even) {
    min-height: 0;
    padding: 42px 0;
}

.inside-serenity-story {
    grid-template-columns: 96px minmax(0, 610px) 1fr;
    gap: 40px;
}

.inside-serenity-story:nth-child(even) {
    grid-template-columns: 1fr minmax(0, 610px) 96px;
}

.inside-serenity-story-number {
    font-size: clamp(3.25rem, 4.8vw, 4.9rem);
    color: rgba(157, 124, 255, 0.48);
}

.inside-serenity-story-category {
    margin-bottom: 11px;
}

.inside-serenity-story h3 {
    max-width: 560px;
    margin-bottom: 15px;
    font-size: clamp(1.85rem, 2.55vw, 2.75rem);
}

.inside-serenity-story-text {
    max-width: 580px;
    margin-bottom: 22px;
    font-size: 0.9rem;
    line-height: 1.68;
}

.inside-serenity-story-link {
    padding-bottom: 5px;
}

.inside-serenity-story::after {
    top: 42px;
    width: 96px;
    height: 96px;
    opacity: 0.24;
}

.inside-serenity-story:hover .inside-serenity-story-content,
.inside-serenity-story:nth-child(even):hover .inside-serenity-story-content {
    transform: none;
}

/* Section 03 */
.ceo-message {
    padding-top: 84px;
    padding-bottom: 92px;
}

.ceo-message-heading {
    margin-bottom: 44px;
}

.ceo-message-feature {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.62fr);
    gap: 48px;
}

.ceo-video-wrap {
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
}

.ceo-video {
    background: linear-gradient(145deg, #15121f, #252039);
}

.ceo-message-details {
    padding-top: 8px;
}

.ceo-message-mark {
    margin-bottom: 10px;
    font-size: 4.2rem;
}

.ceo-message-name {
    font-size: clamp(1.9rem, 2.4vw, 2.45rem);
}

.ceo-message-caption {
    font-size: 0.88rem;
}

/* Help & Support */
.support-section {
    padding-top: 82px;
    padding-bottom: 92px;
}

.support-heading {
    margin-bottom: 44px;
}

.support-card-featured {
    min-height: 250px;
}

.support-card {
    min-height: 270px;
}

.support-card-top {
    margin-bottom: 28px;
}

.support-card h3 {
    font-size: clamp(1.55rem, 2vw, 2rem);
}

.support-card-featured h3 {
    font-size: clamp(2rem, 2.8vw, 2.8rem);
}

.support-card-description {
    font-size: 0.9rem;
    line-height: 1.66;
}

.support-card-contact {
    margin-bottom: 20px;
}

.urgent-help {
    margin-top: 34px;
}

/* Footer */
.publication-footer-inner {
    padding-top: 66px;
}

.publication-footer-main {
    align-items: start;
    padding-bottom: 44px;
}

.publication-footer-brand h2 {
    max-width: 650px;
    margin-bottom: 14px;
    font-size: clamp(2.4rem, 4vw, 4.1rem);
}

.publication-footer-brand::before {
    margin-bottom: 20px;
}

.publication-footer-tagline {
    font-size: 0.88rem;
}

.publication-footer-links {
    padding-top: 26px;
}

.publication-footer-disclaimer {
    padding: 21px 0;
}

.publication-footer-disclaimer p {
    max-width: 880px;
    font-size: 0.72rem;
}

.publication-footer-bottom {
    padding-top: 24px;
    padding-bottom: 4px;
}

@media (max-width: 1050px) {
    .inside-serenity-story,
    .inside-serenity-story:nth-child(even) {
        grid-template-columns: 84px minmax(0, 1fr);
        padding: 36px 0;
    }

    .inside-serenity-story::after {
        width: 72px;
        height: 72px;
    }

    .ceo-message-feature {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .masthead-inner {
        padding-bottom: 52px;
    }

    .discussion,
    .inside-serenity,
    .support-section {
        padding-top: 60px;
        padding-bottom: 68px;
    }

    .discussion-card-placeholder {
        aspect-ratio: 16 / 8.5;
    }

    .inside-serenity-story,
    .inside-serenity-story:nth-child(even) {
        padding: 34px 0;
    }

    .inside-serenity-story-number,
    .inside-serenity-story:nth-child(even) .inside-serenity-story-number {
        margin-bottom: 16px;
    }

    .publication-footer-inner {
        padding-top: 50px;
    }
}

/* =========================================================
   19. INSIDE SERENITY — VISUAL IDENTITY LAYER
   A reusable editorial signature system
   ========================================================= */


/* =========================================================
   19.1 RECURRING SECTION WATERMARK NUMBERS
   ========================================================= */

.discussion,
.inside-serenity,
.ceo-message,
.support-section {
    position: relative;
}

.discussion::after,
.inside-serenity::after,
.ceo-message::after,
.support-section::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;

    font-size: clamp(8rem, 15vw, 14rem);
    font-weight: 800;
    line-height: 0.8;

    letter-spacing: -0.08em;
}

.discussion::after {
    content: "01";
    top: 44px;
    right: max(30px, calc((100vw - var(--max-width)) / 2));
    color: rgba(157, 124, 255, 0.045);
}

.inside-serenity::after {
    content: "02";
    top: 34px;
    left: max(30px, calc((100vw - var(--max-width)) / 2));
    color: rgba(157, 124, 255, 0.038);
}

.ceo-message::after {
    content: "03";
    top: 34px;
    right: max(30px, calc((100vw - var(--max-width)) / 2));
    color: rgba(255, 255, 255, 0.035);
}

.support-section::after {
    content: "03";
    top: 36px;
    right: max(30px, calc((100vw - var(--max-width)) / 2));
    color: rgba(157, 124, 255, 0.04);
}


/* Keep section content above watermark layer */

.discussion > *,
.inside-serenity > *,
.ceo-message > *,
.support-section > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   19.2 EDITORIAL EDGE MARK
   ========================================================= */

.discussion-heading-left::before,
.inside-serenity-heading-left::before,
.ceo-message-heading-left::before,
.support-heading-left::before {
    content: "INSIDE SERENITY / WEEKLY";

    display: block;

    margin-bottom: 14px;

    color: rgba(102, 95, 120, 0.52);

    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.ceo-message-heading-left::before {
    color: rgba(255, 255, 255, 0.34);
}


/* =========================================================
   19.3 FEATURE CARD HIERARCHY
   ========================================================= */

@media (min-width: 1051px) {

    .discussion-cards {
        grid-template-columns:
            1.12fr
            0.94fr
            0.94fr;
    }

    .discussion-card-1 {
        transform-origin: center top;
    }

    .discussion-card-1 .discussion-card-image {
        aspect-ratio: 16 / 11;
    }

}


/* =========================================================
   19.4 CARD ART DIRECTION
   ========================================================= */

.discussion-card-2 .discussion-card-placeholder {
    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(188, 167, 255, 0.16),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #221c35,
            #30264b
        );
}

.discussion-card-3 .discussion-card-placeholder {
    background:
        radial-gradient(
            circle at 20% 82%,
            rgba(157, 124, 255, 0.14),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #29223e,
            #1d192c
        );
}


/* =========================================================
   19.5 EDITORIAL PULL-LINE ACCENTS
   ========================================================= */


/* =========================================================
   19.6 SECTION 03 — EDITORIAL DESK DETAILS
   ========================================================= */

.inside-serenity-story:nth-child(1)::before,
.inside-serenity-story:nth-child(2)::before,
.inside-serenity-story:nth-child(3)::before,
.inside-serenity-story:nth-child(4)::before {
    position: absolute;

    top: 48px;

    color: rgba(102, 95, 120, 0.48);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.inside-serenity-story:nth-child(1)::before {
    content: "CAMPAIGN";
    right: 12px;
}

.inside-serenity-story:nth-child(2)::before {
    content: "PRODUCT";
    left: 12px;
}

.inside-serenity-story:nth-child(3)::before {
    content: "GROWTH";
    right: 12px;
}

.inside-serenity-story:nth-child(4)::before {
    content: "ASSURANCE";
    left: 12px;
}


/* =========================================================
   19.7 CEO VIDEO — PLAY LABEL + FRAME
   ========================================================= */

.ceo-video-wrap::before {
    content: "PLAY MESSAGE";

    position: absolute;

    z-index: 2;

    top: 18px;
    left: 18px;

    padding:
        8px
        10px;

    background:
        rgba(18, 16, 29, 0.72);

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    pointer-events: none;
}

.ceo-video-wrap::after {
    content: "";

    position: absolute;

    inset: 12px;

    border:
        1px solid rgba(188, 167, 255, 0.10);

    pointer-events: none;
}


/* =========================================================
   19.8 RESOURCE BADGES
   ========================================================= */

.support-card {
    position: relative;
}

.support-card::after {
    content: "RESOURCE";

    position: absolute;

    right: 22px;
    bottom: 20px;

    color: rgba(102, 95, 120, 0.28);

    font-size: 0.52rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    pointer-events: none;
}

.support-card-featured::after {
    content: "THIS WEEK";
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;

    top: auto;
    right: 28px;
    bottom: 24px;

    color: rgba(111, 76, 255, 0.42);

    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* =========================================================
   19.9 FOOTER — EDITORIAL SIGN-OFF
   ========================================================= */

.publication-footer-brand::after {
    content: "A weekly record of the work, people and conversations shaping Serenity.";

    display: block;

    max-width: 520px;

    margin-top: 26px;

    color: rgba(255, 255, 255, 0.36);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1rem, 1.4vw, 1.25rem);

    font-style: italic;

    line-height: 1.55;
}


/* =========================================================
   19.10 SUBTLE PAPER TEXTURE
   ========================================================= */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    z-index: 9999;

    pointer-events: none;

    opacity: 0.14;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(31, 27, 48, 0.012) 0,
            rgba(31, 27, 48, 0.012) 1px,
            transparent 1px,
            transparent 3px
        );
}


/* =========================================================
   19.11 MOBILE CLEANUP
   ========================================================= */

@media (max-width: 720px) {

    .discussion::after,
    .inside-serenity::after,
    .ceo-message::after,
    .support-section::after {
        font-size: 7rem;
        opacity: 0.7;
    }

    .discussion-heading-left::before,
    .inside-serenity-heading-left::before,
    .ceo-message-heading-left::before,
    .support-heading-left::before {
        font-size: 0.5rem;
        letter-spacing: 0.14em;
    }

    .inside-serenity-story:nth-child(1)::before,
    .inside-serenity-story:nth-child(2)::before,
    .inside-serenity-story:nth-child(3)::before,
    .inside-serenity-story:nth-child(4)::before {
        display: none;
    }

    .support-card::after {
        display: none;
    }

    .publication-footer-brand::after {
        font-size: 0.98rem;
    }

}


/* =========================================================
   20. SECTION 01 — MODULAR EDITORIAL EXTRAS
   ========================================================= */

.discussion-extras {
    margin-top: 58px;
}

.discussion-extras[hidden] {
    display: none !important;
}


/* =========================================================
   20.1 GENERIC EXTRA BLOCK
   ========================================================= */

.discussion-extra {
    position: relative;
    overflow: hidden;
}

.discussion-extra + .discussion-extra {
    margin-top: 28px;
}

.discussion-extra-label {
    margin:
        0
        0
        14px;

    color: #805fff;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}

.discussion-extra-text {
    margin:
        0
        0
        28px;

    color: var(--ink-soft);

    font-size: 0.95rem;

    line-height: 1.78;
}

.discussion-extra-link {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(157, 124, 255, 0.42);

    color: var(--ink);

    text-decoration: none;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.discussion-extra-link span {
    color: var(--purple);

    font-size: 1.1rem;

    transition:
        transform 180ms ease;
}

.discussion-extra-link:hover span {
    transform:
        translateX(5px);
}


/* =========================================================
   20.2 FEATURE EXTRA
   ========================================================= */

.discussion-extra-feature {
    background:
        linear-gradient(
            135deg,
            rgba(238, 233, 255, 0.62),
            rgba(255, 255, 255, 0.88)
        );

    border:
        1px solid rgba(157, 124, 255, 0.20);
}

.discussion-extra-feature::before {
    content: "FEATURE";

    position: absolute;

    top: 22px;
    right: 26px;

    z-index: 2;

    color: rgba(111, 76, 255, 0.32);

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.discussion-extra-feature-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    min-height: 430px;
}

.discussion-extra-feature-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        52px
        56px;
}

.discussion-extra-meta {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 20px;
}

.discussion-extra-number {
    color: var(--purple);

    font-size: 0.68rem;
    font-weight: 800;
}

.discussion-extra-feature h3 {
    max-width: 680px;

    margin:
        0
        0
        22px;

    color: var(--ink);

    font-size:
        clamp(2.4rem, 4vw, 4.25rem);

    line-height: 0.99;

    letter-spacing: -0.055em;

    font-weight: 800;
}

.discussion-extra-feature .discussion-extra-text {
    max-width: 620px;
}

.discussion-extra-statement {
    max-width: 590px;

    margin:
        7px
        0
        31px;

    padding:
        22px
        0
        0
        28px;

    border-left:
        2px solid var(--purple);
}

.discussion-extra-statement p {
    margin: 0;

    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.15rem, 1.8vw, 1.5rem);

    font-style: italic;

    line-height: 1.55;
}


/* =========================================================
   20.3 FEATURE ART / MEDIA
   ========================================================= */

.discussion-extra-feature-media,
.discussion-extra-feature-art {
    min-height: 430px;
}

.discussion-extra-feature-media {
    background: #e8e3f1;
}

.discussion-extra-feature-media img {
    width: 100%;
    height: 100%;

    min-height: 430px;

    object-fit: cover;
}

.discussion-extra-feature-art {
    position: relative;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 42px;

    background:
        radial-gradient(
            circle at 75% 18%,
            rgba(188, 167, 255, 0.18),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #1d192c,
            #2c2345 54%,
            #201b31
        );

    color: var(--white);
}

.discussion-extra-feature-art::before {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    top: -130px;
    right: -90px;

    border:
        1px solid rgba(188, 167, 255, 0.17);

    border-radius: 50%;
}

.discussion-extra-feature-art::after {
    content: "";

    position: absolute;

    left: 32px;
    bottom: 30px;

    width: 105px;
    height: 105px;

    opacity: 0.25;

    background-image:
        radial-gradient(
            circle,
            var(--purple-light) 1px,
            transparent 1.3px
        );

    background-size:
        12px
        12px;
}

.discussion-extra-feature-art-word {
    position: relative;

    z-index: 1;

    font-size:
        clamp(3rem, 6vw, 6.6rem);

    font-weight: 800;

    line-height: 0.9;

    letter-spacing: -0.075em;
}

.discussion-extra-feature-art-line {
    position: relative;

    z-index: 1;

    width: 68px;
    height: 2px;

    margin:
        25px
        0
        18px;

    background: var(--purple-light);
}

.discussion-extra-feature-art-mark {
    position: relative;

    z-index: 1;

    color:
        rgba(188, 167, 255, 0.55);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 5.5rem;

    line-height: 0.7;
}


/* =========================================================
   20.4 QUOTE EXTRA
   ========================================================= */

.discussion-extra-quote {
    padding:
        52px
        58px;

    background:
        linear-gradient(
            125deg,
            #1c182b,
            #2a2141
        );

    color: var(--white);
}

.discussion-extra-quote .discussion-extra-label {
    color: var(--purple-light);
}

.discussion-extra-quote blockquote {
    max-width: 980px;

    margin: 0;
}

.discussion-extra-quote blockquote p {
    margin: 0;

    color: var(--white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.9rem, 3.7vw, 3.8rem);

    line-height: 1.2;

    letter-spacing: -0.035em;
}

.discussion-extra-quote-attribution {
    margin-top: 26px;

    color:
        rgba(255, 255, 255, 0.58);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


/* =========================================================
   20.5 VIDEO EXTRA
   ========================================================= */

.discussion-extra-video {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.6fr)
        minmax(0, 1.4fr);

    gap: 42px;

    align-items: center;

    padding:
        44px;

    background:
        rgba(255, 255, 255, 0.75);

    border:
        1px solid rgba(54, 45, 76, 0.11);
}

.discussion-extra-video-copy h3 {
    margin:
        0
        0
        18px;

    font-size:
        clamp(2rem, 3vw, 3.1rem);

    line-height: 1.04;

    letter-spacing: -0.045em;
}

.discussion-extra-video-media {
    overflow: hidden;

    background: #12101d;
}

.discussion-extra-video-media video {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #12101d;
}


/* =========================================================
   20.6 IMAGE EXTRA
   ========================================================= */

.discussion-extra-image-figure {
    margin: 0;
}

.discussion-extra-image-figure img {
    width: 100%;

    max-height: 720px;

    object-fit: cover;
}

.discussion-extra-image-figure figcaption {
    margin-top: 12px;

    color: var(--ink-soft);

    font-size: 0.72rem;

    line-height: 1.6;
}


/* =========================================================
   20.7 LINKS EXTRA
   ========================================================= */

.discussion-extra-links {
    display: grid;

    grid-template-columns:
        minmax(280px, 0.8fr)
        minmax(0, 1.2fr);

    gap: 56px;

    padding:
        46px
        48px;

    background:
        var(--paper-soft);

    border:
        1px solid rgba(54, 45, 76, 0.10);
}

.discussion-extra-links-heading h3 {
    margin:
        0
        0
        18px;

    font-size:
        clamp(2rem, 3vw, 3rem);

    line-height: 1.05;

    letter-spacing: -0.045em;
}

.discussion-extra-links-list {
    margin: 0;
    padding: 0;

    list-style: none;

    border-top:
        1px solid var(--line);
}

.discussion-extra-links-list li {
    margin: 0;

    border-bottom:
        1px solid var(--line);
}

.discussion-extra-links-list a {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        20px
        0;

    color: var(--ink);

    text-decoration: none;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.discussion-extra-links-list a span:last-child {
    color: var(--purple);

    font-size: 1.1rem;

    transition:
        transform 180ms ease;
}

.discussion-extra-links-list a:hover span:last-child {
    transform:
        translate(4px, -2px);
}


/* =========================================================
   20.8 TEXT EXTRA
   ========================================================= */

.discussion-extra-text-inner {
    max-width: 900px;

    padding:
        42px
        46px;

    background:
        rgba(255, 255, 255, 0.76);

    border-left:
        3px solid var(--purple);
}

.discussion-extra-text-inner h3 {
    margin:
        0
        0
        18px;

    font-size:
        clamp(2rem, 3vw, 3rem);

    line-height: 1.05;

    letter-spacing: -0.045em;
}


/* =========================================================
   20.9 TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .discussion-extras {
        margin-top: 48px;
    }

    .discussion-extra-feature-content {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(270px, 0.72fr);
    }

    .discussion-extra-feature-copy {
        padding:
            44px
            42px;
    }

    .discussion-extra-video,
    .discussion-extra-links {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   20.10 MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .discussion-extras {
        margin-top: 38px;
    }

    .discussion-extra-feature-content {
        display: flex;
        flex-direction: column;
    }

    .discussion-extra-feature-copy {
        order: 2;

        padding:
            34px
            26px
            38px;
    }

    .discussion-extra-feature-media,
    .discussion-extra-feature-art {
        order: 1;

        min-height: 270px;
    }

    .discussion-extra-feature-media img {
        min-height: 270px;
    }

    .discussion-extra-feature::before {
        top: 16px;
        right: 17px;
    }

    .discussion-extra-feature h3 {
        font-size:
            clamp(2.15rem, 10vw, 3.15rem);
    }

    .discussion-extra-statement {
        padding-left: 20px;
    }

    .discussion-extra-quote {
        padding:
            36px
            27px;
    }

    .discussion-extra-video,
    .discussion-extra-links {
        display: block;

        padding:
            28px
            24px;
    }

    .discussion-extra-video-media {
        margin-top: 28px;
    }

    .discussion-extra-links-list {
        margin-top: 28px;
    }

    .discussion-extra-text-inner {
        padding:
            30px
            24px;
    }

}


/* =========================================================
   21. SECTION 01 — YOUTUBE LIVED-EXPERIENCE FEATURES
   Privacy-enhanced, click-to-load video presentation
   ========================================================= */

.discussion-extra-youtube {
    background:
        rgba(255, 255, 255, 0.86);

    border:
        1px solid rgba(54, 45, 76, 0.10);
}

.discussion-extra-youtube-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(320px, 0.88fr);

    align-items: stretch;
}


/* =========================================================
   21.1 VIDEO / THUMBNAIL SIDE
   ========================================================= */

.discussion-extra-youtube-player {
    min-width: 0;

    background: #12101d;
}


.discussion-extra-youtube-placeholder {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 420px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #15121f,
            #252039
        );
}


.discussion-extra-youtube-placeholder img {
    width: 100%;
    height: 100%;

    min-height: 420px;

    object-fit: cover;

    object-position: center;
}


.discussion-extra-youtube-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(18, 16, 29, 0.05) 0%,
            rgba(18, 16, 29, 0.10) 48%,
            rgba(18, 16, 29, 0.72) 100%
        );

    pointer-events: none;
}


/* =========================================================
   21.2 LOAD VIDEO BUTTON
   ========================================================= */

.discussion-extra-youtube-load {
    position: absolute;

    left: 28px;
    bottom: 58px;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        13px
        18px;

    border: 0;

    background:
        rgba(255, 255, 255, 0.94);

    color: var(--ink);

    font: inherit;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        transform 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}


.discussion-extra-youtube-load:hover {
    transform:
        translateY(-2px);

    background: var(--white);

    box-shadow:
        0 16px 34px
        rgba(0, 0, 0, 0.18);
}


.discussion-extra-youtube-load:focus-visible {
    outline:
        3px solid var(--purple-light);

    outline-offset: 3px;
}


.discussion-extra-youtube-play {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border-radius: 50%;

    background: var(--purple);

    color: var(--white);

    font-size: 0.72rem;

    line-height: 1;

    padding-left: 2px;
}


/* =========================================================
   21.3 PRIVACY NOTICE
   ========================================================= */

.discussion-extra-youtube-privacy {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 18px;

    z-index: 2;

    color:
        rgba(255, 255, 255, 0.74);

    font-size: 0.62rem;

    line-height: 1.45;
}


/* =========================================================
   21.4 LOADED YOUTUBE IFRAME
   ========================================================= */

.discussion-extra-youtube-iframe {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 420px;

    border: 0;

    background: #12101d;

    aspect-ratio: 16 / 9;
}


/* =========================================================
   21.5 EDITORIAL COPY SIDE
   ========================================================= */

.discussion-extra-youtube-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        46px
        48px;
}


.discussion-extra-youtube-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 16px;
}


.discussion-extra-youtube-top
.discussion-extra-label {
    margin: 0;
}


.discussion-extra-youtube-duration {
    color: var(--ink-soft);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.discussion-extra-youtube-content h3 {
    max-width: 560px;

    margin:
        0
        0
        10px;

    color: var(--ink);

    font-size:
        clamp(2rem, 3vw, 3.15rem);

    line-height: 1.03;

    letter-spacing: -0.047em;

    font-weight: 800;
}


.discussion-extra-youtube-source {
    margin:
        0
        0
        22px;

    color: #805fff;

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.discussion-extra-youtube-content
.discussion-extra-text {
    max-width: 590px;

    margin-bottom: 24px;
}


/* =========================================================
   21.6 CONTENT WARNING
   ========================================================= */

.discussion-extra-youtube-warning {
    margin:
        2px
        0
        28px;

    padding:
        18px
        20px;

    background:
        rgba(41, 37, 54, 0.045);

    border:
        1px solid rgba(41, 37, 54, 0.12);

    border-left:
        3px solid var(--purple);
}


.discussion-extra-youtube-warning-label {
    margin-bottom: 8px;

    color: var(--ink);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.discussion-extra-youtube-warning p {
    margin:
        0;

    color: var(--ink-soft);

    font-size: 0.82rem;

    line-height: 1.6;
}


.discussion-extra-youtube-age {
    display: inline-flex;

    margin-top: 12px;

    padding:
        7px
        10px;

    background: var(--purple-pale);

    color: #5d40c7;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   21.7 EXTERNAL YOUTUBE LINK
   ========================================================= */

.discussion-extra-youtube-external {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    align-self: flex-start;

    margin-top: auto;

    padding-bottom: 7px;

    border-bottom:
        1px solid rgba(157, 124, 255, 0.42);

    color: var(--ink);

    text-decoration: none;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.discussion-extra-youtube-external span {
    color: var(--purple);

    font-size: 1rem;

    transition:
        transform 180ms ease;
}


.discussion-extra-youtube-external:hover span {
    transform:
        translate(3px, -3px);
}


/* =========================================================
   21.8 EDITORIAL VARIATION BETWEEN STORIES
   ========================================================= */

.discussion-extra-youtube:nth-of-type(even)
.discussion-extra-youtube-grid {
    grid-template-columns:
        minmax(320px, 0.88fr)
        minmax(0, 1.12fr);
}


.discussion-extra-youtube:nth-of-type(even)
.discussion-extra-youtube-player {
    grid-column: 2;
    grid-row: 1;
}


.discussion-extra-youtube:nth-of-type(even)
.discussion-extra-youtube-content {
    grid-column: 1;
    grid-row: 1;
}


/* =========================================================
   21.9 TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .discussion-extra-youtube-grid,
    .discussion-extra-youtube:nth-of-type(even)
    .discussion-extra-youtube-grid {
        grid-template-columns: 1fr;
    }


    .discussion-extra-youtube:nth-of-type(even)
    .discussion-extra-youtube-player,
    .discussion-extra-youtube:nth-of-type(even)
    .discussion-extra-youtube-content {
        grid-column: auto;
        grid-row: auto;
    }


    .discussion-extra-youtube-placeholder,
    .discussion-extra-youtube-placeholder img,
    .discussion-extra-youtube-iframe {
        min-height: 0;

        aspect-ratio: 16 / 9;
    }


    .discussion-extra-youtube-content {
        padding:
            38px
            40px
            42px;
    }

}


/* =========================================================
   21.10 MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .discussion-extra-youtube {
        overflow: visible;
    }


    .discussion-extra-youtube-placeholder {
        aspect-ratio: 16 / 9;
    }


    .discussion-extra-youtube-placeholder img {
        aspect-ratio: 16 / 9;

        min-height: 0;
    }


    .discussion-extra-youtube-load {
        left: 18px;
        bottom: 54px;

        max-width:
            calc(100% - 36px);

        padding:
            11px
            13px;

        font-size: 0.62rem;
    }


    .discussion-extra-youtube-play {
        width: 27px;
        height: 27px;
    }


    .discussion-extra-youtube-privacy {
        left: 18px;
        right: 18px;
        bottom: 14px;

        font-size: 0.57rem;
    }


    .discussion-extra-youtube-content {
        padding:
            30px
            24px
            34px;
    }


    .discussion-extra-youtube-top {
        align-items: flex-start;

        margin-bottom: 18px;
    }


    .discussion-extra-youtube-content h3 {
        font-size:
            clamp(1.9rem, 9vw, 2.7rem);
    }


    .discussion-extra-youtube-warning {
        padding:
            16px
            17px;
    }

}


/* =========================================================
   22. SECTION CONTRAST + EDITORIAL TRANSITIONS
   Clear visual separation between major newsletter sections
   ========================================================= */

/* ---------------------------------------------------------
   Section 01 — themed editorial field
   --------------------------------------------------------- */

.discussion {
    position: relative;

    width:
        min(calc(100% - 80px), var(--max-width));

    margin: 0 auto;

    padding:
        76px
        0
        104px;

    background: transparent;
}


.discussion::before {
    top: 0;
    bottom: 0;

    width: 100vw;

    background:
        radial-gradient(
            circle at 84% 16%,
            rgba(157, 124, 255, 0.075),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f7f4ff 0%,
            #f8f6ff 52%,
            #f4f0fb 100%
        );

    border-top:
        1px solid rgba(157, 124, 255, 0.08);

    border-bottom:
        1px solid rgba(157, 124, 255, 0.10);
}


/* ---------------------------------------------------------
   Section 02 — organisational news field
   --------------------------------------------------------- */

.inside-serenity {
    position: relative;

    width:
        min(calc(100% - 80px), var(--max-width));

    margin: 0 auto;

    padding:
        92px
        0
        96px;

    border-top: 0;
}


.inside-serenity::before {
    top: 0;
    bottom: 0;

    width: 100vw;

    background:
        radial-gradient(
            circle at 14% 12%,
            rgba(157, 124, 255, 0.04),
            transparent 23%
        ),
        linear-gradient(
            180deg,
            #fffefe 0%,
            #fbfaff 100%
        );

    border-top:
        1px solid rgba(41, 37, 54, 0.06);

    border-bottom:
        1px solid rgba(41, 37, 54, 0.07);
}


/* ---------------------------------------------------------
   Strong section handover
   --------------------------------------------------------- */

.inside-serenity::marker {
    content: "";
}


.inside-serenity {
    box-shadow:
        0 -1px 0 rgba(157, 124, 255, 0.08);
}


.inside-serenity-heading {
    position: relative;

    padding-top: 8px;
}


.inside-serenity-heading::before {
    content: "INSIDE SERENITY / ORGANISATIONAL UPDATE";

    display: inline-flex;

    align-items: center;

    min-height: 24px;

    margin:
        -54px
        0
        42px;

    padding:
        6px
        11px;

    background: var(--navy);

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 0.54rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Transition accent between Section 01 and Section 02
   --------------------------------------------------------- */

.discussion::after {
    content: "01";

    top: 44px;
    right:
        max(
            30px,
            calc((100vw - var(--max-width)) / 2)
        );

    color:
        rgba(157, 124, 255, 0.05);
}


.inside-serenity::after {
    content: "02";

    top: 46px;
    left:
        max(
            30px,
            calc((100vw - var(--max-width)) / 2)
        );

    color:
        rgba(157, 124, 255, 0.034);
}


/* ---------------------------------------------------------
   Slightly stronger lived-experience close
   --------------------------------------------------------- */

.discussion-extras {
    position: relative;

    padding-bottom: 6px;
}


.discussion-extras::after {
    content: "";

    display: block;

    width: 100%;
    height: 7px;

    margin-top: 50px;

    background:
        linear-gradient(
            90deg,
            var(--navy) 0%,
            #2b2340 45%,
            var(--purple) 100%
        );
}


/* ---------------------------------------------------------
   Section 02 header and first story breathing room
   --------------------------------------------------------- */

.inside-serenity-heading {
    margin-bottom: 52px;
}


.inside-serenity-stories {
    border-top:
        1px solid rgba(41, 37, 54, 0.10);
}


/* ---------------------------------------------------------
   Help & Support section separation
   --------------------------------------------------------- */

.support-section {
    position: relative;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(157, 124, 255, 0.08),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #f7f4ff 0%,
            #faf9ff 100%
        );

    border-top:
        1px solid rgba(157, 124, 255, 0.10);
}


/* =========================================================
   22.1 TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .discussion {
        padding-bottom: 92px;
    }


    .inside-serenity {
        padding:
            84px
            0
            90px;
    }


    .inside-serenity-heading::before {
        margin:
            -44px
            0
            34px;
    }


    .discussion-extras::after {
        margin-top: 42px;
    }

}


/* =========================================================
   22.2 MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .discussion {
        padding:
            60px
            0
            76px;
    }


    .inside-serenity {
        padding:
            76px
            0
            72px;
    }


    .inside-serenity-heading {
        padding-top: 0;
    }


    .inside-serenity-heading::before {
        margin:
            -34px
            0
            28px;

        padding:
            6px
            9px;

        font-size: 0.48rem;

        letter-spacing: 0.12em;
    }


    .discussion-extras::after {
        height: 5px;

        margin-top: 34px;
    }

}


/* =========================================================
   23. ARTICLE READER — EDITORIAL REDESIGN
   Compact masthead, editorial rail, numbered chapters,
   richer Markdown treatment and publication close
   ========================================================= */


/* =========================================================
   23.1 ARTICLE PAGE FOUNDATION
   ========================================================= */

.article-page {
    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(157, 124, 255, 0.05),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fbfaff 0%,
            #faf9ff 100%
        );
}


/* =========================================================
   23.2 COMPACT ARTICLE MASTHEAD
   ========================================================= */

.article-masthead {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 84% 22%,
            rgba(157, 124, 255, 0.13),
            transparent 26%
        ),
        linear-gradient(
            115deg,
            #1b182a 0%,
            #211c34 58%,
            #28203f 100%
        );
}


.article-masthead::after {
    content: "READ";

    position: absolute;

    right:
        max(
            28px,
            calc((100vw - 1180px) / 2)
        );

    bottom: -24px;

    color:
        rgba(255, 255, 255, 0.025);

    font-size:
        clamp(7rem, 14vw, 12rem);

    font-weight: 800;

    line-height: 0.8;

    letter-spacing: -0.08em;

    pointer-events: none;
}


.article-masthead-inner {
    position: relative;
    z-index: 1;

    width:
        min(calc(100% - 80px), 1180px);

    margin: 0 auto;

    padding:
        20px
        0
        42px;
}


.article-topbar {
    padding-bottom: 16px;
}


.article-back,
.article-publication {
    font-size: 0.65rem;
}


.article-hero {
    max-width: none;

    display: grid;

    grid-template-columns:
        minmax(0, 1.38fr)
        minmax(300px, 0.62fr);

    gap: 70px;

    align-items: end;

    padding-top: 38px;
}


.article-hero-main,
.article-hero-secondary {
    min-width: 0;
}


.article-category {
    margin:
        0
        0
        14px;

    font-size: 0.66rem;

    letter-spacing: 0.13em;
}


.article-hero h1 {
    max-width: 760px;

    margin: 0;

    font-size:
        clamp(2.8rem, 4.5vw, 4.6rem);

    line-height: 0.98;

    letter-spacing: -0.058em;
}


.article-hero-secondary {
    padding:
        0
        0
        4px
        34px;

    border-left:
        1px solid rgba(255, 255, 255, 0.16);
}


.article-standfirst {
    max-width: 500px;

    margin:
        0
        0
        20px;

    font-size:
        clamp(0.95rem, 1.2vw, 1.08rem);

    line-height: 1.65;
}


.article-meta {
    font-size: 0.62rem;
}


/* =========================================================
   23.3 ARTICLE CANVAS
   ========================================================= */

.article-main {
    overflow: visible;
}


.article-shell {
    width:
        min(calc(100% - 80px), 1180px);

    margin: 0 auto;

    padding:
        58px
        0
        92px;
}


.article-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 760px)
        minmax(250px, 1fr);

    gap: 86px;

    align-items: start;
}


.article-content-column {
    min-width: 0;
}


.article-marker {
    width: 100%;

    margin:
        0
        0
        34px;
}


/* =========================================================
   23.4 EDITORIAL RAIL
   ========================================================= */

.article-rail {
    position: sticky;

    top: 28px;

    display: flex;
    flex-direction: column;

    gap: 0;

    min-width: 0;

    border-top:
        2px solid var(--purple);
}


.article-rail-block {
    padding:
        24px
        0;

    border-bottom:
        1px solid rgba(41, 37, 54, 0.11);
}


.article-rail-label {
    margin:
        0
        0
        18px;

    color: #805fff;

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.article-rail-meta {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;
}


.article-rail-meta > div {
    display: grid;

    gap: 3px;
}


.article-rail-meta-label {
    color:
        rgba(102, 95, 120, 0.68);

    font-size: 0.6rem;
    font-weight: 700;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.article-rail-meta-value {
    color: var(--ink);

    font-size: 0.82rem;
    font-weight: 700;

    line-height: 1.45;
}


/* =========================================================
   23.5 IN THIS ARTICLE
   ========================================================= */

.article-rail-navigation {
    display: flex;
    flex-direction: column;
}


.article-rail-navigation-link {
    display: grid;

    grid-template-columns:
        28px
        1fr;

    gap: 11px;

    padding:
        11px
        0;

    border-top:
        1px solid rgba(41, 37, 54, 0.07);

    color: var(--ink);

    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}


.article-rail-navigation-link:first-child {
    border-top: 0;
}


.article-rail-navigation-number {
    color: var(--purple);

    font-size: 0.62rem;
    font-weight: 800;
}


.article-rail-navigation-title {
    color: var(--ink-soft);

    font-size: 0.73rem;

    line-height: 1.45;
}


.article-rail-navigation-link:hover {
    transform:
        translateX(3px);
}


.article-rail-navigation-link:hover
.article-rail-navigation-title {
    color: var(--ink);
}


/* =========================================================
   23.6 SUPPORT RAIL
   ========================================================= */

.article-rail-support {
    padding-bottom: 0;
}


.article-rail-support-text {
    margin:
        0
        0
        16px;

    color: var(--ink-soft);

    font-size: 0.78rem;

    line-height: 1.6;
}


.article-rail-support-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding-bottom: 6px;

    border-bottom:
        1px solid rgba(157, 124, 255, 0.42);

    color: var(--ink);

    text-decoration: none;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.article-rail-support-link span {
    color: var(--purple);

    font-size: 1rem;

    transition:
        transform 180ms ease;
}


.article-rail-support-link:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   23.7 MARKDOWN BODY
   ========================================================= */

.article-body {
    width: 100%;

    margin: 0;

    color: var(--ink);

    font-size: 1.03rem;

    line-height: 1.86;
}


.article-body > p:first-child {
    position: relative;

    margin:
        0
        0
        42px;

    padding:
        0
        0
        0
        24px;

    color: var(--ink);

    font-size:
        clamp(1.18rem, 1.65vw, 1.38rem);

    line-height: 1.72;

    border-left:
        2px solid var(--purple);
}


.article-body p {
    margin:
        0
        0
        27px;

    color: var(--ink-soft);
}


/* =========================================================
   23.8 NUMBERED CHAPTER HEADINGS
   ========================================================= */

.article-body h2.article-chapter-heading {
    position: relative;

    margin:
        74px
        0
        28px;

    padding-top: 38px;

    border-top:
        1px solid rgba(41, 37, 54, 0.10);

    color: var(--ink);

    font-size:
        clamp(2rem, 3vw, 2.9rem);

    line-height: 1.04;

    letter-spacing: -0.045em;
}


.article-body h2.article-chapter-heading::before {
    content:
        attr(data-chapter);

    display: block;

    margin-bottom: 13px;

    color:
        rgba(157, 124, 255, 0.72);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.article-body h2.article-chapter-heading::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 54px;
    height: 2px;

    background: var(--purple);
}


.article-body h3 {
    margin:
        46px
        0
        18px;

    font-size:
        clamp(1.35rem, 1.9vw, 1.72rem);
}


/* =========================================================
   23.9 BLOCKQUOTES / PULL QUOTES
   ========================================================= */

.article-body blockquote {
    position: relative;

    width:
        calc(100% + 92px);

    margin:
        58px
        0
        58px
        -46px;

    padding:
        38px
        42px
        38px
        46px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            rgba(238, 233, 255, 0.92),
            rgba(255, 255, 255, 0.88)
        );

    border:
        1px solid rgba(157, 124, 255, 0.16);

    border-left:
        3px solid var(--purple);
}


.article-body blockquote::after {
    content: "“";

    position: absolute;

    top: 8px;
    right: 22px;

    color:
        rgba(157, 124, 255, 0.15);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 6.4rem;

    line-height: 1;
}


.article-body blockquote p {
    position: relative;

    z-index: 1;

    margin: 0;

    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.3rem, 2vw, 1.72rem);

    font-weight: 400;
    font-style: italic;

    line-height: 1.52;
}


/* =========================================================
   23.10 MARKDOWN IMAGES
   ========================================================= */

.article-body img {
    width:
        calc(100% + 110px);

    max-width: none;

    margin:
        50px
        0
        50px
        -55px;

    background: var(--paper-soft);

    box-shadow:
        0 22px 48px
        rgba(39, 30, 62, 0.08);
}


/* =========================================================
   23.11 HORIZONTAL RULES
   ========================================================= */

.article-body hr {
    position: relative;

    width: 100%;

    height: 28px;

    margin:
        54px
        0;

    border: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 13px,
            rgba(41, 37, 54, 0.12) 13px,
            rgba(41, 37, 54, 0.12) 14px,
            transparent 14px
        );
}


.article-body hr::after {
    content:
        "INSIDE SERENITY / CONTINUING THE CONVERSATION";
}


/* =========================================================
   23.12 LINKS + LISTS
   ========================================================= */

.article-body ul,
.article-body ol {
    margin-bottom: 34px;
}


.article-body li {
    margin-bottom: 11px;
}


.article-body a {
    color: #6f4cff;

    text-decoration-thickness: 1px;

    text-underline-offset: 4px;
}


/* =========================================================
   23.13 ARTICLE CLOSE
   ========================================================= */

.article-close {
    position: relative;

    margin-top: 86px;

    padding:
        42px
        46px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #1d192c,
            #2a2141
        );

    color: var(--white);
}


.article-close::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    top: -110px;
    right: -70px;

    border:
        1px solid rgba(188, 167, 255, 0.13);

    border-radius: 50%;
}


.article-close-marker {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 28px;

    color: var(--purple-light);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.article-close-marker span {
    display: block;

    width: 38px;
    height: 2px;

    background: var(--purple);
}


.article-close-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(260px, 0.7fr);

    gap: 64px;
}


.article-close-copy h2 {
    max-width: 650px;

    margin:
        0
        0
        16px;

    color: var(--white);

    font-size:
        clamp(2rem, 3vw, 3.15rem);

    line-height: 1.02;

    letter-spacing: -0.045em;
}


.article-close-copy p {
    max-width: 610px;

    margin: 0;

    color:
        rgba(255, 255, 255, 0.66);

    font-size: 0.9rem;

    line-height: 1.7;
}


.article-close-actions {
    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    gap: 14px;
}


.article-close-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding:
        15px
        0;

    border-top:
        1px solid rgba(255, 255, 255, 0.14);

    color: var(--white);

    text-decoration: none;

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.article-close-link span {
    color: var(--purple-light);

    font-size: 1rem;

    transition:
        transform 180ms ease;
}


.article-close-link:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   23.14 ARTICLE FOOTER REFINEMENT
   ========================================================= */

.article-footer {
    background:
        linear-gradient(
            115deg,
            #191625,
            #211c34 58%,
            #28203f
        );
}


.article-footer-inner {
    padding:
        44px
        0;
}


/* =========================================================
   23.15 TABLET
   ========================================================= */

@media (max-width: 980px) {

    .article-hero {
        grid-template-columns: 1fr;

        gap: 26px;

        padding-top: 34px;
    }


    .article-hero-secondary {
        max-width: 700px;

        padding:
            20px
            0
            0;

        border-left: 0;

        border-top:
            1px solid rgba(255, 255, 255, 0.14);
    }


    .article-layout {
        grid-template-columns: 1fr;

        gap: 54px;
    }


    .article-rail {
        position: static;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 24px;

        order: -1;

        border-top: 0;
    }


    .article-rail-block {
        padding:
            20px
            0;

        border-top:
            2px solid var(--purple);

        border-bottom:
            1px solid rgba(41, 37, 54, 0.11);
    }


    .article-close-grid {
        grid-template-columns: 1fr;

        gap: 34px;
    }

}


/* =========================================================
   23.16 MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .article-masthead-inner,
    .article-shell,
    .article-footer-inner {
        width:
            min(calc(100% - 36px), 1180px);
    }


    .article-masthead-inner {
        padding-bottom: 34px;
    }


    .article-topbar {
        padding-bottom: 13px;
    }


    .article-hero {
        padding-top: 28px;
    }


    .article-hero h1 {
        font-size:
            clamp(2.45rem, 11.5vw, 3.55rem);
    }


    .article-hero-secondary {
        padding-top: 17px;
    }


    .article-standfirst {
        font-size: 0.94rem;
    }


    .article-shell {
        padding:
            42px
            0
            68px;
    }


    .article-layout {
        gap: 42px;
    }


    .article-rail {
        display: block;
    }


    .article-rail-block {
        padding:
            18px
            0;
    }


    .article-marker {
        margin-bottom: 28px;
    }


    .article-body {
        font-size: 0.98rem;
    }


    .article-body > p:first-child {
        padding-left: 18px;

        margin-bottom: 34px;
    }


    .article-body h2.article-chapter-heading {
        margin-top: 58px;

        padding-top: 30px;
    }


    .article-body blockquote {
        width: 100%;

        margin:
            44px
            0;

        padding:
            28px
            24px;
    }


    .article-body img {
        width: 100%;

        margin:
            38px
            0;

        max-width: 100%;
    }


    .article-close {
        margin-top: 64px;

        padding:
            32px
            24px;
    }


    .article-close-copy h2 {
        font-size:
            clamp(1.9rem, 9vw, 2.65rem);
    }


    .article-footer-inner {
        padding:
            36px
            0;
    }

}

/* =========================================================
   24. POST-OPENING CLEANUP
   Publication now begins directly with Section 01
   ========================================================= */

.masthead-about-copy::after {
    content: "Stories that matter. Progress you can see.";

    display: block;

    max-width: 320px;

    margin-top: 18px;

    color: rgba(255, 255, 255, 0.42);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.92rem;

    font-style: italic;

    line-height: 1.45;
}


/* Stronger handover from masthead into the first editorial section */

.discussion {
    margin-top: 0;
}


.discussion::before {
    border-top: 0;
}


/* Current Issue 006 publication structure:
   01 Continuing the Discussion
   02 Inside Serenity
   03 Help & Support

   The CEO component remains available but is hidden for this edition.
*/

.discussion::after {
    content: "01";
}


.inside-serenity::after {
    content: "02";
}


.ceo-message::after {
    content: "03";
}


.support-section::after {
    content: "03";
}


@media (max-width: 720px) {

    .masthead-about-copy::after {
        max-width: 260px;

        margin-top: 14px;

        font-size: 0.84rem;
    }

}

/* =========================================================
   25. SECTION 02 — HEADER SPACING REFINEMENT
   Removes duplicate index marker and tightens the handover
   into the organisational stories.
   ========================================================= */

/* The large ghosted "02" already carries the section number,
   so the smaller floating index marker is intentionally hidden. */

.inside-serenity-index {
    display: none;
}


/* Tighten the header block so Section 02 keeps breathing room
   without leaving a large empty field before Story 01. */

.inside-serenity-heading {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 26px;
}


/* Pull the first story divider closer to the heading. */

.inside-serenity-stories {
    margin-top: 0;
}


/* Keep the section introduction comfortably spaced while
   reducing the overall vertical gap. */

.inside-serenity-intro {
    margin-bottom: 0;
}


/* Tablet refinement */

@media (max-width: 1050px) {

    .inside-serenity-heading {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 24px;
    }

}


/* Mobile refinement */

@media (max-width: 720px) {

    .inside-serenity-heading {
        margin-bottom: 22px;
    }

    .inside-serenity-index {
        display: none;
        margin-top: 0;
    }

}