body, svg, text, span, h1, h2, p {
    font-family: 'Open Sans', sans-serif;
}

body {
    overflow-x: hidden; /* prevent any accidental horizontal scroll */
}

p {
    font-size: clamp(0.9rem, 1.2vw, 1.4rem);
}

h3 {
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.2rem, 1.6vw, 2rem);
}

li {
    font-size: clamp(0.9rem, 1.2vw, 1.4rem);
}

.conclusion {
    font-size: clamp(2rem, 2.3vw, 2.6rem);
    text-align: center;
    font-family: "Oswald", sans-serif;
    padding-bottom: 50%;
}

.intro {
    margin-top: 5%;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

a {
    color: #FCC480;
}

.banner {
    width:110%;
    margin:-5%;
}

#intro {
    margin-top: 5%;
}

.paragraph {
    padding: 5% 25% 2% 25%;
}

div.img-chart {
    width: 100%;
    padding: 0% 25%;
}

div.img-chart img {
    object-fit: contain;
    width: 50%;
}

/* ---- Steps: shared by both sections ---- */
.step {
    opacity: 0.2;
    padding: 1rem 0;
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: opacity 0.3s;
}

.step.is-active {
    opacity: 1;
}

p.scrolly-overlay {
    text-align: center;
}

/* ---- Chart sizing fix: a flex item with no flex-grow shrinks to
   fit its content, and an SVG's width:100% can't resolve against a
   parent with no real width of its own. Giving .chart an explicit
   100% width breaks that deadlock (this is what was causing the
   "tiny chart" bug). ---- */
.headline__graphic .chart,
.scroll__graphic .chart,
.map__graphic .chart,
.waffle__graphic .chart {
    width: 100%;
}

.chart-caption {
    color: white;
    font-size: 10px;
}

/* ============================================================
   #headline and #scroll — side-by-side on desktop, stacked on
   mobile. Both sections share the same layout pattern, so one
   ruleset covers both. (app.js sizes each section's SVG itself
   based on this same 768px breakpoint via fullWidth/2 vs fullWidth)
   ============================================================ */
#headline, #scroll, #map, #waffle {
    position: relative;
    display: flex;
    width: 100%;
    background-color: black;
}

#headline, #scroll, #map, #waffle > p, text {
    fill: white;
    color: white;
}

.headline__graphic, .scroll__graphic, .map__graphic, .waffle__graphic {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 1;
    max-width: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2% 1%;
}

.headline__text, .scroll__text, .map__text, .waffle__text {
    flex: 1;
    max-width: 800px;
    padding: 0 5rem;
    color: white;
}

.chart-title {
    font-family: "Oswald", sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    margin-left:20px;
    margin-top: 0%;
    color: white;
}

.highlight {
    font-weight: bold;
    color: #FCC480;
}

li::marker {
    color:white;
}

.number {
    font-family: "Oswald", sans-serif;
    font-size: 32px;
    color: #FCC480;
    font-weight: bold;
}

.button-container {
    text-align:center;
    margin:2rem;
}

div.button {
    display:inline-block;
    padding:12px 24px;
    background-color:#0C122B;
    width:fit-content;
    border-radius: 3px;
    fill: #fff;
    text-align: center;
}

div.button:hover {
    background-color:#1d9e88;
    color: #34F6B0;
}

a.button {
    color: #34F6B0;
    text-decoration: none;
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .paragraph {
        padding: 10% 5% 10% 5%;
    }

    div.img-chart {
        width: 100%;
        padding: 0% 1%;
    }

    div.img-chart img {
        object-fit: contain;
        width: 100%;
    }

    /* ---- Mobile scrollytelling: overlay layout ----
       Both the graphic and the text share the same grid cell.
       The graphic is sticky at the top (short height so there's room
       for the text cards below it), text is in front (z-index: 1)
       and scrolls over the chart. ---- */
    #headline, #scroll, #map, #waffle {
        display: grid;
    }

    .headline__graphic, .scroll__graphic, .map__graphic, .waffle__graphic {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        position: sticky;
        top: 0;
        height: 50vh;
        max-width: none;
        z-index: 0;
        padding: 1% 2%;
        /* override the desktop center-center positioning so content
           starts at the top — without this, align-items:center from
           the desktop rule vertically centers .chart inside 50vh and
           overflow:hidden clips both top AND bottom (showing only middle) */
        justify-content: flex-start;
        align-items: flex-start;
    }

    /* clip charts to the sticky panel — safe because .chart is a
       DESCENDANT of the sticky element, not an ancestor */
    .headline__graphic .chart,
    .scroll__graphic .chart,
    .map__graphic .chart,
    .waffle__graphic .chart {
        max-height: 48vh;
        overflow: hidden;
    }

    .headline__text, .scroll__text, .map__text, .waffle__text {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 1;
        max-width: none;
        padding: 0;
        /* push the first step down so it starts below the chart,
           giving the user a moment to see the chart before text appears.
           padding-bottom gives the last step enough scroll distance to trigger. */
        padding-top: 50vh;
        padding-bottom: 40vh;
    }

    /* step cards get a semi-transparent background so they're
       readable when they scroll over the chart */
    .step {
        margin: 0 0.75rem 40vh;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.82);
        border-radius: 6px;
        min-height: unset;
        height: auto;
        display: block;
    }

    .step p {
        margin: 0;
    }

    .step.last {
        background: rgba(0, 0, 0, 0);
    }

    .waffle-name-label {
        font-size: 2px;
    }    
}

/* ---- Waffle chart (company concentration dot-grid + bar) ----
   No CSS fill-transition here, for the same reason as the
   headline towers: d3's own transition().attr('fill', ...)
   already animates this. ---- */

.waffle-tip {
    position: fixed;
    background: #141412;
    color: #f4f1ea;
    padding: 9px 13px;
    font-size: 11.5px;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    border-left: 2px solid #293C8C;
    line-height: 1.65;
    transition: opacity 0.1s;
    max-width: 220px;
}

.waffle-name-label {
    font-size: clamp(7px, 1.2vw, 1.4rem);
}

.waffle-tip.show {
    opacity: 1;
}

/* ---- Map chart (choropleth -> zoomed city bubbles) ---- */
.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
    margin-top: 8px;
    font-size: 11px;
    color: #ccc;
}

.map-leg-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.map-leg-swatch {
    width: 16px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.map-leg-circle {
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.remove-margin {
    padding-top: 0;
}

g.tick > text {
    font-size: clamp(10px, 1.2vw, 1.4rem);
}

.city-label-name {
    font-size: clamp(10px, 1.2vw, 1.4rem);
}

.city-label-figures {
    font-size: clamp(8px, 0.8vw, 1rem);
}

.source-note {
    font-size: 12px;
    color: #aaa;
    margin-top: 5px;
}

.map-tip {
    position: fixed;
    background: #141412;
    color: #f4f1ea;
    padding: 8px 12px;
    font-size: 11.5px;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    border-left: 2px solid #293C8C;
    line-height: 1.65;
    transition: opacity 0.1s;
    max-width: 210px;
}

.map-tip.show {
    opacity: 1;
}

/* ---- Headline chart (Eiffel Tower waffle grid) ----
   No CSS transition here: d3's own .transition().attr('fill', ...)
   already animates the color change smoothly. Adding a CSS
   transition on top would have it re-animating between every
   intermediate value d3 produces, fighting the JS animation. ---- */

/* ---- Main chemicals chart ---- */
.sector-label {
    text-anchor: middle;
    font-size: clamp(0.9rem, 1.2vw, 1.4rem);
    font-weight: bold;
}

.fa-line {
    stroke: #D10787;
    stroke-width: 3;
    fill: none;
}

.free-allowances {
    fill: #D10787;
    opacity: 0.5;
}

.emissions {
    fill: #D10787;
    opacity: 0.2;
}

.emissions-mark {
    fill: #293C8C;
    stroke: #293C8C;
    stroke-width: 4;
}

.total-emissions-label {
    text-anchor: middle;
    font-weight: bold;
    fill: white;
    font-size: clamp(2.1rem, 2.3vw, 2.5rem);
}

.total-emissions-label.sub {
    font-size: clamp(1.1rem, 1.3vw, 1.5rem);
}

.total-fa-label {
    text-anchor: middle;
    font-weight: bold;
    fill: #D10787;
    font-size: clamp(0.9rem, 1.2vw, 1.4rem);
}

.emissions-label {
    font-size: clamp(0.6rem, 0.9vw, 1.1rem);
}

.fa-fill {
    stroke-width: 0.5;
    stroke: #D10787;
}