/*
===============================================================================
DATAGUY | PERSPECTIVES
SOURCE-LED INDEPENDENT THINKING
Design System v1.0
Namespace: dgp
===============================================================================

PURPOSE
-------
Perspectives is a source-led editorial section that takes one interesting
idea, development, article, report, or conversation as a starting point
and develops a broader DataGuy perspective around it.

The system is intentionally text-first.

No hero image is required.
Visual arguments appear within the article through HTML/SVG editorial plates.

DESIGN LANGUAGE
---------------
Warm paper
Cream
Graphite
Black
Muted earth tones

No gradients.
No glassmorphism.
No decorative UI.
No excessive cards.
No image-dependent hero.
No visual clutter.

The visual should feel closer to an independent editorial journal than
a technology publication.
*/


/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {

    /* Canvas */

    --dgp-paper: #F3EEE4;
    --dgp-paper-deep: #E8E0D3;
    --dgp-surface: #FAF7F0;
    --dgp-white: #FFFDF8;

    /* Ink */

    --dgp-black: #151515;
    --dgp-graphite: #363532;
    --dgp-grey: #69665F;
    --dgp-muted: #8B877E;

    /* Borders */

    --dgp-border: #CFC7BA;
    --dgp-border-light: #DDD6CB;
    --dgp-border-dark: #AAA296;

    /* Accent */

    --dgp-accent: #806E5D;
    --dgp-accent-light: #D8CEC1;

    /* Typography */

    --dgp-font-editorial:
        Georgia,
        "Times New Roman",
        serif;

    --dgp-font-ui:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    --dgp-font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    /* Layout */

    --dgp-content: 760px;
    --dgp-wide: 1080px;
    --dgp-gutter: clamp(22px, 5vw, 72px);

    /* Geometry */

    --dgp-radius: 0;

}


/* ==========================================================================
   02. ARTICLE CANVAS
   ========================================================================== */

.dgp-article {

    position: relative;

    width: min(
        calc(100% - 32px),
        1180px
    );

    margin: 40px auto 80px;

    padding:
        clamp(34px, 6vw, 88px)
        var(--dgp-gutter);

    background: var(--dgp-paper);

    color: var(--dgp-black);

    border: 1px solid var(--dgp-border-light);

    overflow: hidden;
}


/* ==========================================================================
   03. PUBLICATION MARKER
   ========================================================================== */

.dgp-publication {

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: var(--dgp-black);

    font-family: var(--dgp-font-ui);

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

    letter-spacing: 0.20em;

    text-transform: uppercase;
}

.dgp-publication::before {

    content: "";

    width: 30px;
    height: 1px;

    background: var(--dgp-black);
}


/* ==========================================================================
   04. HEADER
   ========================================================================== */

.dgp-header {

    max-width: 900px;

    margin-bottom: 70px;
}

.dgp-title {

    max-width: 900px;

    margin: 0;

    color: var(--dgp-black);

    font-family: var(--dgp-font-editorial);

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

    font-weight: 400;

    line-height: 0.94;

    letter-spacing: -0.052em;

    text-wrap: balance;
}


/* ==========================================================================
   05. DEK
   ========================================================================== */

.dgp-dek {

    max-width: 680px;

    margin: 30px 0 34px;

    color: var(--dgp-graphite);

    font-family: var(--dgp-font-editorial);

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

    line-height: 1.55;

    letter-spacing: -0.01em;
}


/* ==========================================================================
   06. META
   ========================================================================== */

.dgp-meta {

    display: flex;
    flex-wrap: wrap;

    gap: 0;

    padding-top: 18px;

    border-top: 1px solid var(--dgp-black);

    color: var(--dgp-muted);

    font-family: var(--dgp-font-ui);

    font-size: 0.65rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.dgp-meta-item {

    padding-right: 18px;
    margin-right: 18px;

    border-right: 1px solid var(--dgp-border);
}

.dgp-meta-item:last-child {

    border-right: 0;
}


/* ==========================================================================
   07. SOURCE INTRODUCTION
   ========================================================================== */

.dgp-source {

    max-width: var(--dgp-content);

    margin: 0 auto 70px;

    padding:
        24px
        26px;

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

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

.dgp-source-label {

    margin-bottom: 10px;

    color: var(--dgp-muted);

    font-family: var(--dgp-font-ui);

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

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.dgp-source-title {

    margin: 0;

    color: var(--dgp-black);

    font-family: var(--dgp-font-editorial);

    font-size: 1.1rem;

    line-height: 1.5;
}

.dgp-source-link {

    display: inline-block;

    margin-top: 16px;

    color: var(--dgp-black);

    font-family: var(--dgp-font-ui);

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

    letter-spacing: 0.10em;

    text-transform: uppercase;

    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}


/* ==========================================================================
   08. BODY
   ========================================================================== */

.dgp-body {

    max-width: var(--dgp-content);

    margin-inline: auto;
}

.dgp-body p {

    margin: 0 0 28px;

    color: var(--dgp-black);

    font-family: var(--dgp-font-editorial);

    font-size: 1.15rem;

    line-height: 1.86;

    letter-spacing: -0.004em;
}

.dgp-body strong {

    font-weight: 700;
}


/* ==========================================================================
   09. SECTION BREAK
   ========================================================================== */

.dgp-break {

    width: 42px;
    height: 1px;

    margin: 72px 0 52px;

    background: var(--dgp-black);
}


/* ==========================================================================
   10. PERSPECTIVE PLATE
   ========================================================================== */

.dgp-plate {

    width: min(
        var(--dgp-wide),
        calc(100% + 120px)
    );

    margin:
        82px
        -60px;

    padding:
        52px
        clamp(24px, 5vw, 60px)
        44px;

    background: var(--dgp-surface);

    border-top: 1px solid var(--dgp-black);
    border-bottom: 1px solid var(--dgp-border-dark);
}

.dgp-plate-label {

    margin-bottom: 12px;

    color: var(--dgp-muted);

    font-family: var(--dgp-font-ui);

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

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.dgp-plate-title {

    margin: 0 0 38px;

    color: var(--dgp-black);

    font-family: var(--dgp-font-editorial);

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

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: -0.035em;
}


/* ==========================================================================
   11. SVG SYSTEM
   ========================================================================== */

.dgp-svg {

    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;

    overflow: visible;

    /*
     * SVG figures scale with their containing plate.
     * The SVG markup should use a viewBox and
     * preserveAspectRatio="xMidYMid meet".
     */
}

.dgp-svg-line {

    fill: none;

    stroke: var(--dgp-graphite);

    stroke-width: 1.2;

    vector-effect: non-scaling-stroke;
}

.dgp-svg-line-strong {

    fill: none;

    stroke: var(--dgp-black);

    stroke-width: 1.8;

    vector-effect: non-scaling-stroke;
}

.dgp-svg-node {

    fill: var(--dgp-surface);

    stroke: var(--dgp-black);

    stroke-width: 1.2;

    vector-effect: non-scaling-stroke;
}

.dgp-svg-node-primary {

    fill: var(--dgp-black);

    stroke: var(--dgp-black);

    stroke-width: 1.2;

    vector-effect: non-scaling-stroke;
}

.dgp-svg-node-secondary {

    fill: var(--dgp-paper-deep);

    stroke: var(--dgp-graphite);

    stroke-width: 1;

    vector-effect: non-scaling-stroke;
}

.dgp-svg-label {

    fill: var(--dgp-black);

    font-family: var(--dgp-font-ui);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.04em;
}

.dgp-svg-label-light {

    fill: var(--dgp-white);

    font-family: var(--dgp-font-ui);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.04em;
}

.dgp-svg-note {

    fill: var(--dgp-muted);

    font-family: var(--dgp-font-ui);

    font-size: 10px;

    letter-spacing: 0.02em;
}

.dgp-svg-highlight {

    fill: var(--dgp-accent);
}

.dgp-svg-caption {

    margin-top: 24px;

    max-width: 700px;

    color: var(--dgp-muted);

    font-family: var(--dgp-font-ui);

    font-size: 0.68rem;

    line-height: 1.6;
}


/* ==========================================================================
   12. KEY QUESTION
   ========================================================================== */

.dgp-question {

    margin: 90px 0;

    padding:
        48px
        0;

    border-top: 1px solid var(--dgp-black);
    border-bottom: 1px solid var(--dgp-black);
}

.dgp-question-label {

    margin-bottom: 18px;

    color: var(--dgp-muted);

    font-family: var(--dgp-font-ui);

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

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.dgp-question-text {

    max-width: 720px;

    margin: 0;

    color: var(--dgp-black);

    font-family: var(--dgp-font-editorial);

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

    line-height: 1.2;

    letter-spacing: -0.035em;
}


/* ==========================================================================
   13. ENDING
   ========================================================================== */

.dgp-ending {

    margin-top: 80px;

    padding-top: 38px;

    border-top: 2px solid var(--dgp-black);
}


/* ==========================================================================
   14. SOURCE FOOTER
   ========================================================================== */

.dgp-source-footer {

    max-width: var(--dgp-content);

    margin: 90px auto 0;

    padding:
        36px
        0
        60px;

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

.dgp-source-footer-label {

    margin-bottom: 20px;

    color: var(--dgp-muted);

    font-family: var(--dgp-font-ui);

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

    letter-spacing: 0.18em;

    text-transform: uppercase;
}

.dgp-source-footer-title {

    margin: 0 0 22px;

    color: var(--dgp-black);

    font-family: var(--dgp-font-editorial);

    font-size: 1.45rem;

    font-weight: 400;

    line-height: 1.4;
}

.dgp-source-cta {

    display: inline-flex;

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

    gap: 30px;

    min-height: 54px;

    padding:
        0
        20px
        0
        22px;

    background: var(--dgp-black);

    border: 1px solid var(--dgp-black);

    color: var(--dgp-white) !important;

    font-family: var(--dgp-font-ui);

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

    letter-spacing: 0.14em;

    text-transform: uppercase;

    text-decoration: none !important;

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

.dgp-source-cta:hover {

    background: var(--dgp-accent);

    border-color: var(--dgp-accent);

    color: var(--dgp-white) !important;
}


/* ==========================================================================
   15. END MARK
   ========================================================================== */

.dgp-endmark {

    width: 42px;
    height: 3px;

    margin-top: 70px;

    background: var(--dgp-black);
}


/* ==========================================================================
   16. LINKS
   ========================================================================== */

.dgp-article a {

    color: var(--dgp-black);

    text-decoration-thickness: 1px;

    text-underline-offset: 4px;
}

.dgp-article a:hover {

    color: var(--dgp-accent);
}


/* ==========================================================================
   17. SELECTION
   ========================================================================== */

.dgp-article ::selection {

    background: var(--dgp-black);

    color: var(--dgp-white);
}


/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {

    .dgp-article {

        width: calc(100% - 16px);

        margin: 16px auto 40px;

        padding: 32px 20px;
    }

    .dgp-title {

        font-size: clamp(
            2.8rem,
            14vw,
            4.8rem
        );

        max-width: 100%;
    }

    .dgp-dek {

        font-size: 1.15rem;
    }

    .dgp-body p {

        font-size: 1.06rem;

        line-height: 1.82;
    }

    .dgp-source {

        margin-bottom: 52px;

        padding: 20px;
    }

    .dgp-plate {

        width: calc(100% + 40px);

        margin:
            64px
            -20px;

        padding:
            36px
            20px;
    }

    .dgp-svg {

        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: auto;
    }

    .dgp-plate {

        overflow: hidden;
    }

    .dgp-meta {

        display: grid;

        gap: 10px;
    }

    .dgp-meta-item {

        padding: 0;
        margin: 0;

        border: 0;
    }

    .dgp-question {

        margin: 70px 0;

        padding: 38px 0;
    }

    .dgp-source-cta {

        width: 100%;
    }

    /*
     * Keep editorial plates fully contained on narrow screens.
     * SVG figures remain fluid rather than becoming horizontally scrollable.
     */
    .dgp-plate-title {

        margin-bottom: 28px;

        font-size: clamp(
            1.5rem,
            7vw,
            2rem
        );
    }

    .dgp-svg-caption {

        max-width: 100%;

        font-size: 0.64rem;
    }
}



.dgp-svg-label-primary {

    fill: var(--dgp-white);

    font-family: var(--dgp-font-ui);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.04em;
}

/* ==========================================================================
   19. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .dgp-article *,
    .dgp-article *::before,
    .dgp-article *::after {

        transition: none !important;

        animation: none !important;
    }
}