/* =========================================================
   DATAGUY EDITORIAL DESIGN SYSTEM
   Version: 1.0
   Module: 01 Foundation
   ========================================================= */

/* =========================================================
   DESIGN TOKENS
   ========================================================= */

:root{

    /* Colours */

    --dgr-bg:#f7f5ef;
    --dgr-surface:#ffffff;

    --dgr-text:#202020;
    --dgr-text-soft:#555;
    --dgr-text-muted:#777;

    --dgr-heading:#17395d;

    --dgr-accent:#8a1c1c;
    --dgr-accent-light:#d4b2b2;

    --dgr-border:#d9d3c8;
    --dgr-border-light:#ece8df;

    --dgr-success:#2d6b4f;
    --dgr-warning:#9a6a00;
    --dgr-info:#245b8f;

    /* Typography */

    --dgr-font-body:Georgia,"Times New Roman",serif;
    --dgr-font-heading:Georgia,"Times New Roman",serif;
    --dgr-font-ui:Inter,Arial,Helvetica,sans-serif;

    --dgr-text-base:20px;

    --dgr-line-height:1.85;

    /* Layout */

    --dgr-container:860px;
    --dgr-container-wide:1120px;

    /* Radius */

    --dgr-radius:4px;
    --dgr-radius-large:8px;

    /* Shadow */

    --dgr-shadow-soft:
        0 8px 24px rgba(0,0,0,.05);

    /* Animation */

    --dgr-transition:
        .25s ease;

}

/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{

    font-size:100%;
    scroll-behavior:smooth;

}

body{

    margin:0;

    background:var(--dgr-bg);

    color:var(--dgr-text);

    font-family:var(--dgr-font-body);

    font-size:var(--dgr-text-base);

    line-height:var(--dgr-line-height);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

svg{

    display:block;

}

figure{

    margin:0;

}

table{

    border-collapse:collapse;

    width:100%;

}

button,
input,
textarea,
select{

    font:inherit;

}

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

a{

    color:var(--dgr-heading);

    text-decoration:none;

    transition:var(--dgr-transition);

}

a:hover{

    color:var(--dgr-accent);

}

a:focus-visible{

    outline:2px solid var(--dgr-accent);

    outline-offset:4px;

}

/* =========================================================
   CONTAINER
   ========================================================= */

.dgr-container{

    width:min(
        calc(100% - 48px),
        var(--dgr-container)
    );

    margin-inline:auto;

    padding-block:80px;

}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-family:var(--dgr-font-heading);

    color:var(--dgr-heading);

    line-height:1.2;

    font-weight:700;

}

h1{

    font-size:clamp(
        2.8rem,
        6vw,
        4.5rem
    );

}

h2{

    margin-top:4rem;

    margin-bottom:1.2rem;

    padding-bottom:.5rem;

    border-bottom:1px solid var(--dgr-border);

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

}

h3{

    margin-top:2.5rem;

    margin-bottom:.8rem;

    font-size:1.6rem;

}

h4{

    margin-top:2rem;

    margin-bottom:.6rem;

    font-size:1.25rem;

}

p{

    margin:0 0 1.6rem;

}

strong{

    font-weight:700;

}

em{

    font-style:italic;

}

small{

    font-size:.9rem;

}

/* =========================================================
   LISTS
   ========================================================= */

ul,
ol{

    margin:1.5rem 0;

    padding-left:1.5rem;

}

li{

    margin-bottom:.75rem;

}

/* =========================================================
   BLOCKQUOTE
   ========================================================= */

blockquote{

    margin:2.5rem 0;

    padding-left:1.5rem;

    border-left:4px solid
        var(--dgr-border);

    color:var(--dgr-text-soft);

    font-style:italic;

}

/* =========================================================
   HORIZONTAL RULE
   ========================================================= */

hr{

    border:none;

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

    margin:4rem 0;

}

/* =========================================================
   TABLES
   ========================================================= */

table{

    margin:2rem 0;

    background:var(--dgr-surface);

}

th{

    padding:16px;

    background:var(--dgr-heading);

    color:#fff;

    text-align:left;

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

    font-size:.9rem;

    letter-spacing:.04em;

}

td{

    padding:16px;

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

    vertical-align:top;

}

tbody tr:nth-child(even){

    background:#faf8f4;

}

/* =========================================================
   IMAGES
   ========================================================= */

figure{

    margin:3rem 0;

}

figcaption{

    margin-top:1rem;

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

    font-size:.9rem;

    color:var(--dgr-text-muted);

    text-align:center;

}

/* =========================================================
   CODE
   ========================================================= */

pre{

    overflow:auto;

    padding:1.5rem;

    background:#232323;

    color:#fafafa;

    border-radius:6px;

}

code{

    font-family:
        Consolas,
        Monaco,
        monospace;

}

/* =========================================================
   UTILITIES
   ========================================================= */

.dgr-text-center{

    text-align:center;

}

.dgr-text-right{

    text-align:right;

}

.dgr-muted{

    color:var(--dgr-text-muted);

}

.dgr-hidden{

    display:none;

}

.dgr-wide{

    max-width:var(--dgr-container-wide);

}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible{

    outline:2px solid
        var(--dgr-accent);

    outline-offset:3px;

}

::selection{

    background:
        var(--dgr-heading);

    color:#fff;

}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:768px){

    body{

        font-size:18px;

    }

    .dgr-container{

        width:min(
            calc(100% - 32px),
            var(--dgr-container)
        );

        padding-block:48px;

    }

}

/* =========================================================
   PRINT
   ========================================================= */

@media print{

    body{

        background:#fff;

        color:#000;

    }

    a{

        color:#000;

        text-decoration:none;

    }

}



/* =========================================================
   DATAGUY EDITORIAL DESIGN SYSTEM
   Version: 1.0
   Module: 02 Editorial Layout
   ========================================================= */


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

.dgr-article{

    display:block;

    position:relative;

    background:var(--dgr-surface);

    padding:72px;

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

    box-shadow:var(--dgr-shadow-soft);

}

@media (max-width:768px){

    .dgr-article{

        padding:36px 28px;

    }

}


/* =========================================================
   HEADER
   ========================================================= */

.dgr-header{

    margin-bottom:72px;

}

.dgr-publication{

    display:inline-block;

    margin-bottom:18px;

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

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--dgr-heading);

}

.dgr-series{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    margin-bottom:1rem;

}

.dgr-series::before{

    content:"";

    width:30px;

    height:2px;

    background:var(--dgr-heading);

}

.dgr-title{

    margin:0;

    color:var(--dgr-heading);

    font-weight:700;

}

.dgr-subtitle{

    margin-top:1.5rem;

    margin-bottom:2.5rem;

    font-size:1.45rem;

    line-height:1.6;

    color:var(--dgr-text-soft);

    font-style:italic;

    max-width:46rem;

}


/* =========================================================
   META
   ========================================================= */

.dgr-meta{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    padding-top:24px;

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

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

    font-size:.88rem;

    color:var(--dgr-text-muted);

}

.dgr-meta-item{

    display:flex;

    align-items:center;

    gap:.45rem;

}

.dgr-meta-label{

    font-weight:700;

    color:var(--dgr-heading);

}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.dgr-intro{

    margin-bottom:64px;

}

.dgr-lead{

    font-size:1.45rem;

    line-height:1.8;

    color:var(--dgr-heading);

    margin-bottom:2rem;

}

.dgr-standfirst{

    font-size:1.1rem;

    color:var(--dgr-text-soft);

}


/* =========================================================
   BODY
   ========================================================= */

.dgr-body{

    position:relative;

}

.dgr-body>section{

    margin-bottom:72px;

}

.dgr-section{

    scroll-margin-top:120px;

}

.dgr-section:last-child{

    margin-bottom:0;

}

.dgr-section-title{

    margin-bottom:1.5rem;

}

.dgr-section-intro{

    font-size:1.1rem;

    color:var(--dgr-text-soft);

    margin-bottom:2rem;

}


/* =========================================================
   CHAPTER DIVIDER
   ========================================================= */

.dgr-divider{

    display:flex;

    align-items:center;

    gap:18px;

    margin:80px 0;

}

.dgr-divider::before{

    content:"";

    flex:1;

    height:1px;

    background:var(--dgr-border);

}

.dgr-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:var(--dgr-border);

}

.dgr-divider span{

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

    font-size:.72rem;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--dgr-text-muted);

}


/* =========================================================
   SECTION NUMBER
   ========================================================= */

.dgr-section-number{

    display:inline-block;

    margin-bottom:18px;

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

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--dgr-accent);

}


/* =========================================================
   FIGURES
   ========================================================= */

.dgr-figure{

    margin:56px 0;

}

.dgr-figure img{

    border-radius:var(--dgr-radius);

}

.dgr-caption{

    margin-top:14px;

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

    font-size:.88rem;

    color:var(--dgr-text-muted);

    text-align:center;

}


/* =========================================================
   TABLE WRAPPER
   ========================================================= */

.dgr-table{

    overflow-x:auto;

    margin:48px 0;

}


/* =========================================================
   ARTICLE NAVIGATION
   ========================================================= */

.dgr-anchor{

    position:relative;

    top:-120px;

    visibility:hidden;

}


/* =========================================================
   FOOTNOTES
   ========================================================= */

.dgr-footnotes{

    margin-top:72px;

    padding-top:32px;

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

}

.dgr-footnotes h3{

    margin-top:0;

}

.dgr-footnotes ol{

    margin:0;

    padding-left:1.4rem;

}

.dgr-footnotes li{

    font-size:.95rem;

    color:var(--dgr-text-soft);

}


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

@media (max-width:768px){

    .dgr-header{

        margin-bottom:48px;

    }

    .dgr-subtitle{

        font-size:1.2rem;

    }

    .dgr-lead{

        font-size:1.25rem;

    }

    .dgr-meta{

        flex-direction:column;

        gap:10px;

    }

    .dgr-body>section{

        margin-bottom:56px;

    }

    .dgr-divider{

        margin:56px 0;

    }

}


/* ==========================================================================
   EDITORIAL SVG
   ========================================================================== */

.dgr-editorial-svg {
    margin: 2.5rem 0 3rem;
}

.dgr-editorial-svg svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;

    padding: 2rem;

    background: var(--dgr-surface);
    border: 1px solid var(--dgr-border);
    border-radius: var(--dgr-radius-lg);

    overflow: hidden;
    box-sizing: border-box;
}

.dgr-editorial-svg figcaption {
    margin-top: 1rem;

    font-size: 0.9rem;
    line-height: 1.6;

    color: var(--dgr-text-muted);
}

.dgr-editorial-svg strong {
    color: var(--dgr-text);
}


/* ==========================================================================
   EDITORIAL SVG — RESPONSIVE
   ========================================================================== */

@media (max-width: 768px) {

    .dgr-editorial-svg {
        margin: 2rem 0;
    }

    .dgr-editorial-svg svg {
        padding: 1rem;
        border-radius: var(--dgr-radius-md);
    }

    .dgr-editorial-svg figcaption {
        font-size: 0.875rem;
    }

}


/* =========================================================
   DATAGUY EDITORIAL DESIGN SYSTEM
   Version: 1.0
   Module: 03 Editorial Components
   ========================================================= */


/* =========================================================
   SHARED CARD FOUNDATION
   ========================================================= */

.dgr-card{

    position:relative;

    margin:56px 0;

    padding:32px 36px;

    background:var(--dgr-surface);

    border:1px solid var(--dgr-border);

    border-left:5px solid var(--dgr-heading);

    border-radius:var(--dgr-radius);

    box-shadow:var(--dgr-shadow-soft);

}

.dgr-card:last-child{

    margin-bottom:0;

}

.dgr-card-label{

    margin-bottom:14px;

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

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--dgr-heading);

}

.dgr-card-title{

    margin:0 0 18px;

    padding:0;

    border:0;

    font-size:1.55rem;

}

.dgr-card-body>*:last-child{

    margin-bottom:0;

}


/* =========================================================
   INSIGHT
   ========================================================= */

.dgr-card-insight{

    border-left-color:var(--dgr-accent);

}

.dgr-card-insight .dgr-card-label{

    color:var(--dgr-accent);

}


/* =========================================================
   FRAMEWORK
   ========================================================= */

.dgr-card-framework{

    border-left-color:var(--dgr-heading);

}

.dgr-card-framework .dgr-card-label{

    color:var(--dgr-heading);

}


/* =========================================================
   MENTAL MODEL
   ========================================================= */

.dgr-card-model{

    border-left-color:var(--dgr-success);

}

.dgr-card-model .dgr-card-label{

    color:var(--dgr-success);

}


/* =========================================================
   DEFINITION
   ========================================================= */

.dgr-card-definition{

    border-left-color:var(--dgr-info);

}

.dgr-card-definition .dgr-card-label{

    color:var(--dgr-info);

}


/* =========================================================
   EVIDENCE
   ========================================================= */

.dgr-card-evidence{

    border-left-color:#666;

}

.dgr-card-evidence .dgr-card-label{

    color:#666;

}


/* =========================================================
   EXECUTIVE TAKEAWAY
   ========================================================= */

.dgr-card-takeaway{

    background:#faf8f4;

    border-left-color:var(--dgr-heading);

}

.dgr-card-takeaway ul{

    margin-bottom:0;

}


/* =========================================================
   WARNING
   ========================================================= */

.dgr-card-warning{

    border-left-color:var(--dgr-warning);

}

.dgr-card-warning .dgr-card-label{

    color:var(--dgr-warning);

}


/* =========================================================
   OBSERVATION
   ========================================================= */

.dgr-card-observation{

    border-left-color:#7a5c32;

}

.dgr-card-observation .dgr-card-label{

    color:#7a5c32;

}


/* =========================================================
   COMPARISON
   ========================================================= */

.dgr-comparison{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;

    margin:56px 0;

}

.dgr-comparison-column{

    padding:28px;

    background:var(--dgr-surface);

    border:1px solid var(--dgr-border);

}

.dgr-comparison-title{

    margin-bottom:18px;

}


/* =========================================================
   TIMELINE
   ========================================================= */

.dgr-timeline{

    position:relative;

    margin:64px 0;

    padding-left:40px;

}

.dgr-timeline::before{

    content:"";

    position:absolute;

    top:0;

    left:10px;

    width:2px;

    height:100%;

    background:var(--dgr-border);

}

.dgr-timeline-item{

    position:relative;

    margin-bottom:40px;

}

.dgr-timeline-item:last-child{

    margin-bottom:0;

}

.dgr-timeline-item::before{

    content:"";

    position:absolute;

    left:-35px;

    top:7px;

    width:12px;

    height:12px;

    border-radius:50%;

    background:var(--dgr-heading);

}

.dgr-timeline-date{

    margin-bottom:8px;

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

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--dgr-heading);

}


/* =========================================================
   PULL QUOTE
   ========================================================= */

.dgr-pullquote{

    margin:72px auto;

    max-width:760px;

    text-align:center;

}

.dgr-pullquote blockquote{

    margin:0;

    padding:0;

    border:0;

    font-size:2rem;

    line-height:1.45;

    color:var(--dgr-heading);

    font-style:normal;

}

.dgr-pullquote cite{

    display:block;

    margin-top:20px;

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

    font-size:.9rem;

    font-style:normal;

    color:var(--dgr-text-muted);

}


/* =========================================================
   KEY METRIC
   ========================================================= */

.dgr-stat{

    margin:48px 0;

    text-align:center;

}

.dgr-stat-value{

    display:block;

    font-size:4rem;

    font-weight:700;

    line-height:1;

    color:var(--dgr-heading);

}

.dgr-stat-label{

    margin-top:12px;

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

    font-size:.92rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    color:var(--dgr-text-muted);

}


/* =========================================================
   INLINE EMPHASIS
   ========================================================= */

.dgr-highlight{

    color:var(--dgr-heading);

    font-weight:700;

}

.dgr-accent{

    color:var(--dgr-accent);

}


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

@media (max-width:768px){

    .dgr-card{

        padding:24px;

        margin:40px 0;

    }

    .dgr-comparison{

        grid-template-columns:1fr;

    }

    .dgr-pullquote blockquote{

        font-size:1.55rem;

    }

    .dgr-stat-value{

        font-size:3rem;

    }

    .dgr-timeline{

        padding-left:30px;

    }

}


/* =========================================================
   DATAGUY EDITORIAL DESIGN SYSTEM
   Version: 1.0
   Module: 04 Publication Components
   ========================================================= */


/* =========================================================
   CONCLUSION
   ========================================================= */

.dgr-conclusion{

    margin-top:80px;

    padding-top:48px;

    border-top:2px solid var(--dgr-heading);

}

.dgr-conclusion h2{

    margin-top:0;

}

.dgr-conclusion p:last-child{

    margin-bottom:0;

}


/* =========================================================
   EVIDENCE BASE
   ========================================================= */

.dgr-evidence-base{

    margin-top:72px;

    padding:40px;

    background:#faf8f4;

    border:1px solid var(--dgr-border);

    border-left:5px solid var(--dgr-heading);

    border-radius:var(--dgr-radius);

}

.dgr-evidence-base-title{

    margin:0 0 18px;

    padding:0;

    border:0;

    font-size:1.5rem;

}

.dgr-evidence-base p:last-child{

    margin-bottom:0;

}

.dgr-evidence-base a{

    font-weight:700;

}


/* =========================================================
   EVIDENCE LIST
   ========================================================= */

.dgr-evidence-list{

    margin-top:24px;

}

.dgr-evidence-list ul{

    margin:0;

}

.dgr-evidence-list li{

    margin-bottom:10px;

}


/* =========================================================
   RELATED RESEARCH
   ========================================================= */

.dgr-related{

    margin-top:72px;

}

.dgr-related-title{

    margin-bottom:32px;

}

.dgr-related-grid{

    display:grid;

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

    gap:24px;

}

.dgr-related-card{

    display:block;

    padding:28px;

    background:var(--dgr-surface);

    border:1px solid var(--dgr-border);

    border-radius:var(--dgr-radius);

    transition:var(--dgr-transition);

}

.dgr-related-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--dgr-shadow-soft);

}

.dgr-related-card h3{

    margin-top:0;

    margin-bottom:12px;

    font-size:1.2rem;

}

.dgr-related-card p{

    margin-bottom:0;

    color:var(--dgr-text-soft);

}


/* =========================================================
   SERIES
   ========================================================= */

.dgr-series-footer{

    margin-top:72px;

    padding:32px;

    border:1px solid var(--dgr-border);

    background:var(--dgr-surface);

}

.dgr-series-footer-title{

    margin:0 0 16px;

}

.dgr-series-footer p:last-child{

    margin-bottom:0;

}


/* =========================================================
   TAGS
   ========================================================= */

.dgr-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:40px;

}

.dgr-tag{

    display:inline-flex;

    align-items:center;

    padding:8px 14px;

    border:1px solid var(--dgr-border);

    border-radius:999px;

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

    font-size:.8rem;

    color:var(--dgr-text-soft);

    background:#fff;

}


/* =========================================================
   READING TIME
   ========================================================= */

.dgr-reading-time{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

}

.dgr-reading-time::before{

    content:"◷";

}


/* =========================================================
   PUBLICATION FOOTER
   ========================================================= */

.dgr-footer{

    margin-top:96px;

    padding-top:40px;

    border-top:2px solid var(--dgr-border);

    text-align:center;

}

.dgr-footer-publication{

    margin-bottom:10px;

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

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--dgr-heading);

}

.dgr-footer-tagline{

    max-width:680px;

    margin:0 auto 20px;

    color:var(--dgr-text-soft);

}

.dgr-footer-meta{

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

    font-size:.82rem;

    color:var(--dgr-text-muted);

}


/* =========================================================
   COPYRIGHT
   ========================================================= */

.dgr-copyright{

    margin-top:18px;

    font-size:.8rem;

    color:var(--dgr-text-muted);

}


/* =========================================================
   ARTICLE END MARK
   ========================================================= */

.dgr-endmark{

    margin:72px auto 0;

    width:48px;

    height:2px;

    background:var(--dgr-heading);

}


/* =========================================================
   NEXT ARTICLE
   ========================================================= */

.dgr-next{

    margin-top:72px;

    padding:36px;

    background:var(--dgr-surface);

    border:1px solid var(--dgr-border);

    text-align:center;

}

.dgr-next-label{

    margin-bottom:12px;

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

    font-size:.75rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.18em;

    color:var(--dgr-text-muted);

}

.dgr-next-title{

    margin:0;

}


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

@media (max-width:768px){

    .dgr-evidence-base{

        padding:28px;

    }

    .dgr-related-grid{

        grid-template-columns:1fr;

    }

    .dgr-series-footer{

        padding:24px;

    }

    .dgr-next{

        padding:24px;

    }

}


/* =========================================================
   DATAGUY EDITORIAL DESIGN SYSTEM
   Version: 1.0
   Module: 05 Advanced Editorial Components
   ========================================================= */


/* =========================================================
   CALLOUT
   ========================================================= */

.dgr-callout{

    margin:56px 0;

    padding:32px;

    background:#faf8f4;

    border:1px solid var(--dgr-border);

    border-radius:var(--dgr-radius);

}

.dgr-callout-title{

    margin:0 0 16px;

    padding:0;

    border:0;

}

.dgr-callout p:last-child{

    margin-bottom:0;

}


/* =========================================================
   SIDEBAR
   ========================================================= */

.dgr-sidebar{

    margin:56px 0;

    padding:32px;

    background:#fff;

    border:1px solid var(--dgr-border);

    border-left:4px solid var(--dgr-heading);

}

.dgr-sidebar-title{

    margin-top:0;

}


/* =========================================================
   EXECUTIVE SUMMARY
   ========================================================= */

.dgr-summary{

    margin:64px 0;

    padding:36px;

    background:#faf8f4;

    border:1px solid var(--dgr-border);

}

.dgr-summary-title{

    margin-top:0;

}

.dgr-summary ul{

    margin-bottom:0;

}


/* =========================================================
   HIGHLIGHT
   ========================================================= */

.dgr-highlight-box{

    margin:56px 0;

    padding:40px;

    background:var(--dgr-heading);

    color:#fff;

    border-radius:var(--dgr-radius);

}

.dgr-highlight-box h2,

.dgr-highlight-box h3,

.dgr-highlight-box h4{

    color:#fff;

    border:0;

}

.dgr-highlight-box p:last-child{

    margin-bottom:0;

}


/* =========================================================
   KEY QUESTION
   ========================================================= */

.dgr-question{

    margin:56px 0;

    text-align:center;

}

.dgr-question h2{

    border:0;

}

.dgr-question-text{

    font-size:2rem;

    line-height:1.4;

    color:var(--dgr-heading);

}


/* =========================================================
   PROCESS
   ========================================================= */

.dgr-process{

    margin:64px 0;

    display:grid;

    gap:24px;

}

.dgr-process-step{

    display:flex;

    gap:24px;

    align-items:flex-start;

}

.dgr-process-number{

    flex:0 0 56px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--dgr-heading);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

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

    font-weight:700;

}

.dgr-process-content{

    flex:1;

}


/* =========================================================
   PRINCIPLES
   ========================================================= */

.dgr-principles{

    display:grid;

    gap:24px;

    margin:56px 0;

}

.dgr-principle{

    padding:28px;

    border:1px solid var(--dgr-border);

    background:#fff;

}

.dgr-principle h3{

    margin-top:0;

}


/* =========================================================
   MATRIX
   ========================================================= */

.dgr-matrix{

    display:grid;

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

    gap:24px;

    margin:56px 0;

}

.dgr-matrix-cell{

    padding:28px;

    background:#fff;

    border:1px solid var(--dgr-border);

}


/* =========================================================
   CHECKLIST
   ========================================================= */

.dgr-checklist{

    margin:48px 0;

}

.dgr-checklist ul{

    list-style:none;

    padding:0;

}

.dgr-checklist li{

    position:relative;

    padding-left:36px;

}

.dgr-checklist li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--dgr-success);

    font-weight:700;

}


/* =========================================================
   NUMBERED INSIGHT
   ========================================================= */

.dgr-insight-list{

    counter-reset:insight;

}

.dgr-insight-item{

    counter-increment:insight;

    position:relative;

    padding-left:72px;

    margin-bottom:48px;

}

.dgr-insight-item::before{

    content:counter(insight);

    position:absolute;

    left:0;

    top:0;

    width:48px;

    height:48px;

    border-radius:50%;

    background:var(--dgr-heading);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

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

    font-weight:700;

}


/* =========================================================
   DATA TABLE
   ========================================================= */

.dgr-data-table{

    overflow-x:auto;

}

.dgr-data-table table{

    min-width:700px;

}


/* =========================================================
   NOTE
   ========================================================= */

.dgr-note{

    padding:20px 24px;

    margin:40px 0;

    background:#fcfbf8;

    border-left:4px solid var(--dgr-border);

    font-size:.95rem;

}


/* =========================================================
   SOURCE
   ========================================================= */

.dgr-source{

    margin-top:16px;

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

    font-size:.82rem;

    color:var(--dgr-text-muted);

}


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

@media (max-width:768px){

    .dgr-process-step{

        flex-direction:column;

    }

    .dgr-process-number{

        width:44px;

        height:44px;

        flex:0 0 44px;

    }

    .dgr-matrix{

        grid-template-columns:1fr;

    }

    .dgr-highlight-box{

        padding:28px;

    }

    .dgr-question-text{

        font-size:1.5rem;

    }

}



/* =========================================================
   DATAGUY EDITORIAL DESIGN SYSTEM
   Version: 1.0
   Module: 06 Responsive, Accessibility & Polish
   ========================================================= */


/* =========================================================
   READING WIDTHS
   ========================================================= */

.dgr-reading-width{
    max-width:42rem;
}

.dgr-reading-wide{
    max-width:56rem;
}

.dgr-reading-full{
    max-width:none;
}


/* =========================================================
   SPACING UTILITIES
   ========================================================= */

.dgr-mt-0{margin-top:0!important;}
.dgr-mb-0{margin-bottom:0!important;}

.dgr-mt-1{margin-top:1rem!important;}
.dgr-mt-2{margin-top:2rem!important;}
.dgr-mt-3{margin-top:3rem!important;}
.dgr-mt-4{margin-top:4rem!important;}

.dgr-mb-1{margin-bottom:1rem!important;}
.dgr-mb-2{margin-bottom:2rem!important;}
.dgr-mb-3{margin-bottom:3rem!important;}
.dgr-mb-4{margin-bottom:4rem!important;}

.dgr-p-1{padding:1rem!important;}
.dgr-p-2{padding:2rem!important;}
.dgr-p-3{padding:3rem!important;}


/* =========================================================
   ALIGNMENT
   ========================================================= */

.dgr-left{text-align:left;}
.dgr-center{text-align:center;}
.dgr-right{text-align:right;}

.dgr-flex{
    display:flex;
}

.dgr-flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.dgr-space-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}


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

.dgr-grid-2{

    display:grid;

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

    gap:32px;

}

.dgr-grid-3{

    display:grid;

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

    gap:32px;

}

.dgr-grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:24px;

}


/* =========================================================
   DIVIDERS
   ========================================================= */

.dgr-rule{

    margin:64px 0;

    border:0;

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

}

.dgr-rule-heavy{

    border-top:3px solid var(--dgr-heading);

}


/* =========================================================
   BADGES
   ========================================================= */

.dgr-badge{

    display:inline-flex;

    align-items:center;

    padding:.45rem .9rem;

    border-radius:999px;

    background:var(--dgr-heading);

    color:#fff;

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

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

.dgr-badge-light{

    background:#f3f3f3;

    color:var(--dgr-heading);

}


/* =========================================================
   LEAD IMAGE
   ========================================================= */

.dgr-hero-image{

    margin:56px 0;

}

.dgr-hero-image img{

    width:100%;

    border-radius:var(--dgr-radius-large);

}

.dgr-hero-caption{

    margin-top:12px;

    text-align:center;

    font-size:.9rem;

    color:var(--dgr-text-muted);

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

}


/* =========================================================
   KEYWORDS
   ========================================================= */

.dgr-keywords{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:48px 0;

}


/* =========================================================
   ANIMATION
   ========================================================= */

.dgr-card,
.dgr-related-card,
.dgr-next{

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.dgr-card:hover{

    transform:translateY(-2px);

}

.dgr-card:hover,
.dgr-related-card:hover,
.dgr-next:hover{

    box-shadow:
        0 18px 36px rgba(0,0,0,.08);

}


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

@media (max-width:1024px){

    .dgr-grid-4{

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

    }

}


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

@media (max-width:768px){

    .dgr-grid-2,
    .dgr-grid-3,
    .dgr-grid-4{

        grid-template-columns:1fr;

    }

    .dgr-space-between{

        flex-direction:column;

        align-items:flex-start;

        gap:16px;

    }

    .dgr-reading-width,
    .dgr-reading-wide{

        max-width:none;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    *{

        animation:none!important;

        transition:none!important;

        scroll-behavior:auto!important;

    }

}


/* =========================================================
   DARK MODE PREPARATION
   ========================================================= */

@media (prefers-color-scheme:dark){

    :root{

        --dgr-bg:#151515;

        --dgr-surface:#1f1f1f;

        --dgr-text:#ececec;

        --dgr-text-soft:#d5d5d5;

        --dgr-text-muted:#b8b8b8;

        --dgr-border:#393939;

        --dgr-border-light:#2d2d2d;

    }

}


/* =========================================================
   PRINT
   ========================================================= */

@media print{

    .dgr-related,
    .dgr-next,
    .dgr-tags,
    .dgr-footer{

        display:none!important;

    }

    .dgr-article{

        box-shadow:none;

        border:none;

        padding:0;

    }

    .dgr-card{

        page-break-inside:avoid;

        break-inside:avoid;

    }

    h2,
    h3{

        page-break-after:avoid;

    }

    table{

        page-break-inside:avoid;

    }

}


/* =========================================================
   END OF DATAGUY EDITORIAL DESIGN SYSTEM v1.0
   ========================================================= */