/* ============================================================
   STAT public site — responsive layer
   Loaded last (see templates/base.html), after style.css *and* after each
   page's own <style> block, so matching a page's selector here is enough to
   win on source order. Keep selectors at the same specificity as the rule
   they override — no !important, no ID stacking.

   Tiers (desktop-first, matching the site's design table):
     Desktop   1200px – 1599px  default rules, nothing here
     Laptop     992px – 1199px  @media (max-width: 1199px)
     Tablet     768px –  991px  @media (max-width:  991px)   ← nav becomes a drawer
     Phone        0px –  767px  @media (max-width:  767px)

   One tier reaches the other way, since the default rules are percentages
   with no upper bound and a 1080p-and-wider screen just stretches them:
     Large     1600px+          @media (min-width: 1600px)   ← caps the page shell
       …tall   + 1100px high    @media (… and (min-height: 1100px))
   ============================================================ */


/* ============================================================
   0. FOUNDATIONS — tier-independent
   ============================================================ */

html{
    -webkit-text-size-adjust: 100%;   /* iOS must not inflate text on rotate */
    overflow-x: clip;                 /* nothing can scroll the page sideways… */
}
@supports not (overflow-x: clip){
    html{ overflow-x: hidden; }       /* …clip keeps position:sticky working; hidden is the fallback */
}

/* media never outgrows its column */
img, video, iframe{ max-width: 100%; }
img{ height: auto; }
.lang-flag{ height: 15px; }           /* restores the fixed box the rule above would stretch */

/* long unbroken strings (URLs, codes) wrap instead of widening the page */
p, li, td, th, h1, h2, h3, h4{ overflow-wrap: break-word; }

/* fluid headline scale — the fixed sizes below 1200px all came from these */
h1{ font-size: clamp(2.4rem, 6vw, 5rem); }
h2{ font-size: clamp(1.6rem, 3.4vw, 2.5rem); }

/* Grid and flex items default to min-width:auto, which lets a wide child (a data
   table, a long unbroken label) push the whole track past the viewport instead of
   scrolling inside it. These are the containers that carry such children. */
#economyTopicP .et-card,
#economyTopicP .top5-region,
#economyTopicP .air-lead-card,
#economyTopicP .air-donut,
#economyTopicP .air-rtable-wrap,
#environmentP .wx-left,
#environmentP .wx-right,
#environmentP .feature,
.kpi-card,
.about-card,
.cinfo-card{ min-width: 0; }

/* Nav labels must never wrap to a second line inside the pill bar — the Dutch,
   French and Spanish menus are ~10% longer than the English one and would each
   break at a different width. The search box absorbs the difference instead. */
header nav .nav3 ul li a{ white-space: nowrap; }
header nav .nav2{ min-width: 160px; }

/* the drawer chrome only exists below the tablet breakpoint */
.nav-toggle,
.nav-drawer-head,
.nav-caret,
.nav-backdrop{ display: none; }


/* ---- hamburger button (styled here, revealed in the tablet tier) ---- */
.nav-toggle{
    flex: 0 0 auto;
    width: 46px; height: 46px; padding: 0;
    align-items: center; justify-content: center;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nav-toggle:hover{ border-color: var(--sky); }
.nav-toggle:focus-visible{ outline: 2px solid var(--sky); outline-offset: 2px; }

.nav-toggle-box{ position: relative; display: block; width: 20px; height: 14px; }
.nav-toggle-box span{
    position: absolute; left: 0;
    width: 100%; height: 2px; border-radius: 2px;
    background: var(--ink);
    transition: top .22s ease, transform .22s ease, opacity .15s ease;
}
.nav-toggle-box span:nth-child(1){ top: 0; }
.nav-toggle-box span:nth-child(2){ top: 6px; }
.nav-toggle-box span:nth-child(3){ top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1){ top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3){ top: 6px; transform: rotate(-45deg); }

/* ---- drawer chrome ---- */
.nav-drawer-head{
    align-items: center; justify-content: space-between;
    gap: 12px; padding: 18px 20px 16px;
    border-bottom: 1px solid var(--line);
}
.nav-drawer-title{
    font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--muted);
}
.nav-close{
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    background: transparent; border: 1px solid var(--line); border-radius: 12px;
    color: var(--ink); cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.nav-close svg{ width: 18px; height: 18px; }
.nav-close:hover{ border-color: var(--sky); color: var(--sky); }
.nav-close:focus-visible{ outline: 2px solid var(--sky); outline-offset: 2px; }

.nav-caret{
    align-items: center; justify-content: center;
    padding: 0; background: transparent; border: 0;
    color: var(--muted); cursor: pointer;
    border-left: 1px solid var(--line);
}
.nav-caret svg{ width: 18px; height: 18px; transition: transform .22s ease; }
.nav-caret[aria-expanded="true"] svg{ transform: rotate(180deg); }
.nav-caret:focus-visible{ outline: 2px solid var(--sky); outline-offset: -2px; }

.nav-backdrop{
    position: fixed; inset: 0; z-index: 900;
    background: rgb(8 15 30 / .44);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.nav-backdrop[hidden]{ display: none; }

@media (prefers-reduced-motion: reduce){
    .nav-toggle-box span,
    .nav-caret svg,
    header nav .nav3{ transition: none; }
}


/* ============================================================
   1. LAPTOP — 992px to 1199px
   The desktop layout still fits; it just needs to stop straining.
   ============================================================ */
@media (max-width: 1199px){

    /* ---- header: buy the nav bar room by shrinking the logo and search ---- */
    header{ padding: 16px 0; }
    header nav{ width: 94%; gap: 16px; }
    header nav .nav1 .logo img{ height: 58px; }
    header nav .nav1 .brand-pair{ gap: 0.85rem; }
    header nav .nav2{ min-width: 170px; }
    header nav .nav2 search form input{ padding: 10px 16px 10px 40px; font-size: .92rem; }
    header nav .nav2 search .search-ic{ left: 14px; }
    header nav .nav3 ul li{ padding: 9px 13px; }
    header nav .nav3 ul li a{ font-size: .93rem; }
    header nav .nav3 ul .dropdown:hover .submenu{ width: max-content; min-width: 190px; }

    /* ---- home ---- */
    .top{ height: 62vh; min-height: 420px; }
    .hero-content h1{ font-size: 3rem; }

    /* ---- economy topic ---- */
    #economyTopicP .et-hero{ height: 38vh; padding: 34px 34px; }
    #economyTopicP .et-hero h1{ font-size: 2.7rem; }
    #economyTopicP .top5-grid{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    #economyTopicP .cpix-div-grid{ column-gap: 30px; }

    /* ---- topic heroes on the social pages share the economy hero's proportions ---- */
    #poP .po-hero h1,
    #lbP .lb-hero h1,
    #scP .sc-hero h1{ font-size: 2.7rem; }
    #socialTopicP .st-hero h1{ font-size: 2.6rem; }

    /* ---- long-form pages ---- */
    #actsP .ac-hero h1{ font-size: 3rem; }
    #faqP .fq-head h1,
    #methodsP .mt-head h1,
    #privacyP .pp-head h1,
    #classP .cl-head h1{ font-size: 2.8rem; }
    #publicationsP .pl-head h1{ font-size: 2.7rem; }
}


/* ============================================================
   2. TABLET — 768px to 991px
   The nav bar can no longer sit on one line, so it becomes a drawer.
   ============================================================ */
@media (max-width: 991px){

    /* ---------------------------------------------------------- header ---- */
    /* two rows: logo + hamburger, then the search across the full width */
    header nav{ flex-wrap: wrap; row-gap: 12px; align-items: center; }
    header nav .nav1{ order: 1; }
    .nav-toggle{ order: 2; display: inline-flex; margin-left: auto; }
    header nav .nav2{ order: 3; width: 100%; min-width: 0; margin: 0; }

    /* ---- .nav3 becomes an off-canvas panel ---- */
    header nav .nav3{
        order: 4;
        position: fixed; top: 0; right: 0; bottom: 0;
        z-index: 950;
        width: min(340px, 86vw);
        display: flex; flex-direction: column;
        background: var(--white);
        border: 0; border-radius: 0;
        box-shadow: -18px 0 46px rgb(16 24 40 / .18);
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(100%);
        visibility: hidden;                                   /* keeps it out of the tab order */
        transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s;
    }
    header nav .nav3.is-open{
        transform: none;
        visibility: visible;
        transition: transform .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    }

    .nav-drawer-head{ display: flex; }
    .nav-backdrop{ display: block; }

    /* The page must not scroll behind an open drawer. Scoped to this tier so that
       if the class ever outlives the drawer, it can't leave the desktop layout
       unscrollable — above 991px there is no drawer to lock the page for. */
    body.nav-is-open{ overflow: hidden; }

    /* ---- drawer rows ---- */
    header nav .nav3 ul{ flex-direction: column; padding: 6px 0 20px; }
    header nav .nav3 ul li{ padding: 0; border-radius: 0; }
    header nav .nav3 > ul > li{ border-bottom: 1px solid var(--line); }
    header nav .nav3 > ul > li:last-child{ border-bottom: 0; }
    header nav .nav3 ul li a{
        display: block; padding: 14px 20px;
        font-size: 1rem; line-height: 1.3;
        white-space: normal;              /* drawer rows are wide enough to wrap */
    }
    header nav .nav3 ul li a.active{ font-weight: 600; }

    /* a dropdown row is link + caret, with the submenu wrapping under both */
    header nav .nav3 > ul > li.dropdown{ display: flex; flex-wrap: wrap; align-items: stretch; }
    header nav .nav3 > ul > li.dropdown > .nav-item{ flex: 1 1 auto; min-width: 0; }
    header nav .nav3 > ul > li.dropdown > .nav-caret{ display: flex; flex: 0 0 54px; }
    header nav .nav3 > ul > li.dropdown > .submenu,
    header nav .nav3 > ul > li.dropdown > .lang_submenu{ flex: 1 0 100%; }

    /* hover menus are wrong on a touch drawer — the caret drives them instead.
       Both selectors are restated at their original specificity (the .lang-switch
       variant lives in base.html) so source order settles it. */
    header nav .nav3 ul .dropdown:hover .submenu,
    header nav .nav3 ul .dropdown.lang-switch:hover .lang_submenu{ display: none; }

    header nav .nav3 ul .dropdown.is-expanded > .submenu,
    header nav .nav3 ul .dropdown.lang-switch.is-expanded > .lang_submenu{
        display: block;
        position: static;
        width: auto;
        background: #f7f9fc;
        border: 0; border-radius: 0;
        box-shadow: none;
        padding: 4px 0 8px;
    }
    header nav .nav3 ul .dropdown.is-expanded > .submenu li,
    header nav .nav3 ul .dropdown.is-expanded > .lang_submenu li{ padding: 0; }
    header nav .nav3 ul .dropdown.is-expanded > .submenu li:hover,
    header nav .nav3 ul .dropdown.is-expanded > .lang_submenu li:hover{ background: transparent; }
    header nav .nav3 ul .dropdown.is-expanded > .submenu a,
    header nav .nav3 ul .dropdown.is-expanded > .lang_submenu a{
        padding: 11px 20px 11px 34px;
        font-size: .94rem; color: var(--muted);
    }
    header nav .nav3 ul .dropdown.is-expanded > .submenu a:hover,
    header nav .nav3 ul .dropdown.is-expanded > .lang_submenu a:hover{ color: var(--fuchsia); }

    /* ---------------------------------------------------------- home ------ */
    .top{ height: 56vh; min-height: 400px; }
    .hero-content{ padding: 0 6%; }
    .hero-content h1{ font-size: 2.6rem; }
    .hero-content p{ font-size: 1.02rem; }

    #homeP section{ margin: 32px auto 48px; }
    #homeP section.kpi{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cpi-card{ padding: 26px 24px 28px; }
    .cpi-head h2{ font-size: 1.7rem; }
    .cpi-stats{ justify-content: flex-start; }

    /* ---------------------------------------------------------- about ----- */
    .about-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-mv{ grid-template-columns: 1fr; }
    .about-lead.about-methods{ gap: 32px; }
    .about-methods-media{ flex-basis: 42%; }
    #aboutP .top{ height: 44vh; min-height: 320px; }

    /* ---------------------------------------------------------- contact --- */
    .contact-info{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .contact-main{ grid-template-columns: 1fr; }
    .contact-map{ min-height: 340px; }
    .contact-intro h2{ font-size: 2rem; }

    /* ---------------------------------------------------------- economy --- */
    #economyTopicP .et-hero{ height: 34vh; min-height: 260px; padding: 28px 26px; }
    #economyTopicP .et-hero h1{ font-size: 2.3rem; }
    #economyTopicP .et-grid{ grid-template-columns: 1fr; }
    #economyTopicP .cpix-div-grid{ grid-template-columns: 1fr; column-gap: 0; }
    #economyTopicP .air-region-body{ grid-template-columns: 1fr; }
    #economyTopicP .cpix-exp-head{ gap: 14px; }
    #economyTopicP .cpix-stats{ flex-wrap: wrap; }
    #economyTopicP .cpix-stat{ flex: 1 1 128px; }
    #economyTopicP #cpixSeries{ flex: 1 1 100%; max-width: none; }
    #economyTopicP .et-section-h{ margin: 34px 0 16px; flex-wrap: wrap; }
    /* the year filter stops being pushed to the far edge once the header wraps */
    #economyTopicP .air-yearfilter{ margin-left: 0; }

    /* tables scroll inside their card rather than widening it */
    #economyTopicP .air-rtable-wrap,
    .est-scroll{ overflow-x: auto; }

    /* ---------------------------------------------------------- social ---- */
    #poP .po-hero h1,
    #lbP .lb-hero h1,
    #scP .sc-hero h1,
    #socialTopicP .st-hero h1{ font-size: 2.3rem; }

    /* ---------------------------------------------------------- env ------- */
    #environmentP .wx-grid{ grid-template-columns: 1fr; }
    /* grid items default to min-width:auto, so the tile labels below would widen
       the column past the viewport instead of wrapping */
    #environmentP .wx-left,
    #environmentP .wx-right{ min-width: 0; }
    #environmentP .feature-grid{ grid-template-columns: 1fr; }
    #environmentP .wx-temp{ font-size: 4.4rem; letter-spacing: -2px; }

    /* ---------------------------------------------------------- acts ------ */
    #actsP .ac-lead{ grid-template-columns: 1fr; }
    #actsP .ac-lead-photo{ min-height: 220px; }
    #actsP .ac-lead-body{ padding: 28px 26px 30px; }

    /* ---------------------------------------------------------- footer ---- */
    .site-footer{ margin-top: 48px; padding: 42px 0 24px; }
    .footer-brand{ height: 64px; gap: 12px; padding: 0 16px; margin-bottom: 14px; }
    .footer-brand img{ height: 44px; }
    .footer-brand .brand-rule{ margin: 11px 0; }
    .footer-top{ gap: 30px; }
}


/* ============================================================
   3. PHONE — up to 767px
   One column everywhere, tighter padding, thumb-sized controls.
   ============================================================ */
@media (max-width: 767px){
    /* ---------------------------------------------------- data explorer fab */
    .data-fab{ right: 14px; bottom: 14px; height: 52px; padding: 0 15px; }
    .data-fab svg{ width: 22px; height: 22px; }


    /* ---------------------------------------------------------- header ---- */
    header{ padding: 12px 0; }
    header nav{ width: 92%; row-gap: 10px; }
    header nav .nav1 .logo img{ height: 46px; }
    header nav .nav1 .brand-pair{ gap: 0.6rem; }
    header nav .nav1 .brand-rule{ margin: 5px 0; }
    .nav-toggle{ width: 44px; height: 44px; border-radius: 12px; }
    header nav .nav2 search form input{ padding: 10px 14px 10px 38px; }
    header nav .nav3{ width: min(320px, 90vw); }

    /* ---------------------------------------------------------- home ------ */
    .top{
        width: 94%;
        height: auto; min-height: 0;
        padding: 54px 0 58px;
        border-radius: 18px;
    }
    .hero-content{ padding: 0 8%; max-width: none; }
    .hero-content h1{ font-size: 2.1rem; }
    .hero-content p{ font-size: .98rem; margin-top: 12px; }
    .hero-btn{ margin-top: 22px; padding: 12px 26px; }

    #homeP section{ width: 94%; margin: 26px auto 40px; }
    #homeP section.kpi{ grid-template-columns: 1fr; gap: 16px; }
    .kpi-card-wide{ grid-column: auto; }
    .kpi-card{ padding: 20px 20px 22px; }
    .kpi-value{ font-size: 2.2rem; }
    .kpi-value.sm{ font-size: 1.7rem; }
    .kpi-split{ gap: 16px; }

    .cpi-card{ padding: 22px 18px 24px; border-radius: 18px; }
    .cpi-head{ gap: 12px; }
    .cpi-head h2{ font-size: 1.5rem; }
    /* the "latest" tile reads as a banner across the card instead of a right-hand block */
    .cpi-latest{ width: 100%; align-items: flex-start; text-align: left; }
    .cpi-latest-value{ font-size: 1.8rem; }
    .cpi-filter{ gap: 8px; }
    .cpi-filter select{ flex: 1 1 40%; min-width: 0; }
    .cpi-view{ margin-left: 0; width: 100%; }
    .cpi-view-btn{ flex: 1; }
    .cpi-stats{ width: 100%; }
    .cpi-stat{ flex: 1 1 calc(50% - 6px); min-width: 0; }
    #cpiChart{ margin-left: -12px; margin-right: -12px; }

    .pub-intro h2{ font-size: 1.6rem; }

    /* the download menu can't hang off the right edge of a narrow card */
    .dl-menu{ right: 0; left: auto; min-width: 0; width: max-content; max-width: 78vw; }

    /* ---------------------------------------------------------- about ----- */
    #aboutP .top{ height: auto; padding: 44px 0 48px; }
    .about-facts,
    .about-grid{ grid-template-columns: 1fr; }
    .about-lead{ flex-direction: column; gap: 18px; }
    .about-lead.about-methods{ gap: 24px; }
    .about-methods-media{ flex-basis: auto; width: 100%; max-width: none; }
    .about-methods-media img{ aspect-ratio: 4 / 3; }
    .about-lead-body h2{ font-size: 1.6rem; }
    .about-card{ padding: 24px 20px 26px; }
    .fact-value{ font-size: 2rem; }
    .about-laws li{ align-items: flex-start; flex-direction: column; gap: 6px; }
    .mv-card{ padding: 24px 20px 26px; }
    .mv-card p{ font-size: 1.02rem; }

    /* ---------------------------------------------------------- contact --- */
    .contact-intro{ width: 94%; margin: 28px auto 22px; }
    .contact-intro h2{ font-size: 1.75rem; }
    .contact-info,
    .contact-main{ width: 94%; }
    .contact-info{ grid-template-columns: 1fr; gap: 16px; }
    .cinfo-card{ padding: 18px 18px; gap: 14px; }
    .contact-form{ padding: 24px 20px 26px; border-radius: 18px; }
    .cf-row{ grid-template-columns: 1fr; }
    .contact-form .hero-btn{ align-self: stretch; text-align: center; }
    .contact-map{ min-height: 280px; }
    .contact-map iframe{ min-height: 260px; }

    /* --------------------------------------------------- document cards --- */
    .pl-panel-head{ align-items: flex-start; }
    .pl-panel-filters{ width: 100%; gap: 10px; }
    .pl-panel-filter{ flex: 1 1 auto; }
    .pl-panel-filter select{ width: 100%; }

    #publicationsP .pl-wrap{ width: 94%; }
    #publicationsP .pl-head h1{ font-size: 2.1rem; }

    /* ---------------------------------------------------------- economy --- */
    #economyP .cpi-card{ width: 94%; margin: 22px auto; }
    /* "view more" and Download stack as a matched pair rather than one full-width
       button above a short one */
    #economyP .cpi-actions{ gap: 10px; }
    #economyP .cpi-more{ flex: 1 1 100%; justify-content: center; }
    #economyP .cpi-actions .dl-bar{ flex: 1 1 100%; margin: 0; }
    #economyP .cpi-actions .dl,
    #economyP .cpi-actions .dl-btn{ width: 100%; justify-content: center; }

    #economyTopicP .et-wrap{ width: 94%; margin: 26px auto 48px; }
    #economyTopicP .et-hero{
        height: auto; min-height: 0;
        padding: 26px 20px 24px;
        border-radius: 18px;
    }
    #economyTopicP .et-hero h1{ font-size: 1.95rem; letter-spacing: -.8px; }
    #economyTopicP .et-hero p{ font-size: .98rem; }
    #economyTopicP .et-crumb{ margin-bottom: 22px; }
    #economyTopicP .et-tabs{ gap: 8px; margin: 18px 0 28px; }
    #economyTopicP .et-tab{ padding: 8px 14px; font-size: .86rem; }
    #economyTopicP .et-card{ padding: 18px 16px 20px; border-radius: 16px; }
    #economyTopicP .et-section-h h2{ font-size: 1.35rem; }
    #economyTopicP .et-section-h h3{ font-size: 1.15rem; }

    /* the searchable country picker must not overflow a narrow card head */
    #economyTopicP .et-card-head{ flex-wrap: wrap; }
    #economyTopicP .csel,
    #economyTopicP .csel-btn{ max-width: 100%; width: 100%; min-width: 0; }
    #economyTopicP .csel-pop{ width: min(280px, 84vw); }

    #economyTopicP .air-card-head{ gap: 10px; }
    #economyTopicP .air-head-right{ flex-wrap: wrap; gap: 10px; }
    #economyTopicP .air-lead-grid{ grid-template-columns: 1fr; gap: 14px; }
    #economyTopicP .top5-grid{ grid-template-columns: 1fr; gap: 14px; }
    #economyTopicP .top5-row{ grid-template-columns: 16px minmax(70px, 96px) 1fr auto; gap: 8px; }
    #economyTopicP .cpix-row{ grid-template-columns: 28px minmax(0, 1.1fr) 1fr 62px; gap: 9px; }
    #economyTopicP .cpix-stat{ flex: 1 1 calc(50% - 6px); min-width: 0; padding: 9px 12px 10px; }
    #economyTopicP .cpix-stat-value{ font-size: 1.2rem; }
    #economyTopicP #cpixChart{ min-height: 280px; }
    #economyTopicP .spark{ min-height: 170px; }
    #economyTopicP .tour-chart{ min-height: 250px; }

    /* wide numeric tables scroll sideways inside their card */
    #economyTopicP .et-tablewrap,
    #economyTopicP .air-mtable-wrap,
    #economyTopicP .air-rtable-wrap,
    .est-scroll{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #economyTopicP table.et-table,
    #economyTopicP table.air-mtable,
    #economyTopicP table.air-rtable{ min-width: 480px; }
    #economyTopicP table.et-table thead th,
    #economyTopicP table.et-table tbody td{ padding: 9px 10px; }
    .tqi-table thead th,
    .tqi-table tbody td{ padding: 10px 9px; font-size: .88rem; }

    /* ---------------------------------------------------------- social ---- */
    #poP .po-wrap,
    #lbP .lb-wrap,
    #scP .sc-wrap,
    #socialTopicP .st-wrap{ width: 94%; margin: 22px auto 48px; }
    #poP .po-hero h1,
    #lbP .lb-hero h1,
    #scP .sc-hero h1,
    #socialTopicP .st-hero h1{ font-size: 1.95rem; letter-spacing: -.8px; }
    #poP .po-hero p,
    #lbP .lb-hero p,
    #scP .sc-hero p,
    #socialTopicP .st-hero p{ font-size: .98rem; }

    /* ---------------------------------------------------------- env ------- */
    #environmentP .env-wrap{ width: 94%; }
    #environmentP .wx-temp{ font-size: 3.6rem; letter-spacing: -2px; }
    #environmentP .wx-tiles{ grid-template-columns: 1fr; gap: 12px; padding: 16px; }
    #environmentP .wx-tile > div{ min-width: 0; }
    /* seven days across a phone gives ~40px per column — scroll the strip instead */
    #environmentP .wx-forecast{
        grid-template-columns: repeat(7, minmax(62px, 1fr));
        gap: 4px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
    }

    /* ---------------------------------------------------- long-form pages - */
    #faqP .fq-wrap,
    #methodsP .mt-wrap,
    #privacyP .pp-wrap,
    #classP .cl-wrap,
    #actsP .ac-wrap{ width: 94%; }
    #faqP .fq-head h1,
    #methodsP .mt-head h1,
    #privacyP .pp-head h1,
    #classP .cl-head h1{ font-size: 2.1rem; }
    #actsP .ac-hero h1{ font-size: 2.1rem; }
    #actsP .ac-hero-body{ padding: 40px 8% 36px; }
    #methodsP .mt-grid{ grid-template-columns: 1fr; }

    /* ---------------------------------------------------------- footer ---- */
    .site-footer{ margin-top: 40px; padding: 36px 0 22px; }
    .footer-top{ width: 94%; display: flex; gap: 50px; align-items: center; justify-content: space-between; }
    .footer-col{ text-align: center; flex: 0 0 0px;}
    .site-footer h3{ font-size: 1.3rem; }
    .footer-bottom{ margin-top: 30px; }
}


/* ============================================================
   4. TOUCH INPUT — independent of width
   ============================================================ */
@media (hover: none){
    /* :hover styling never fires reliably on touch; make the tap targets
       comfortable instead so nothing depends on it */
    .pl-more,
    .dl-btn,
    .hero-btn,
    .et-tab,
    .cpix-pill{ min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }
}


/* ============================================================
   5. LARGE DESKTOP — 1600px and up, tuned on 1920x1200
   Nothing here applies below 1600px, so every existing tier is
   untouched.

   The page shell is a bare percentage everywhere — 92% for content,
   90% for the header and footer — which reads well up to ~1600px and
   then simply keeps stretching. At 1920 the content band is 1753px
   while the footer stops at its own 1200px cap, so the page shows two
   different edges and body copy runs to a measure nobody wants to read.

   So: give every band one shared edge (--shell), and spend the room
   that frees up on scale and breathing space instead of line length.
   ============================================================ */
@media (min-width: 1600px){

    :root{
        /* The one column edge shared by header, content and footer. 1520
           leaves the 92% rhythm effectively intact at 1650 and centres
           cleanly at 1920 (200px gutters) without narrowing the data
           cards, which are the point of the site. */
        --shell: 1520px;
    }

    /* ---------------------------------------------------- one page edge -- */
    /* Each of these was a percentage with no upper bound, and each already
       centres with `margin: … auto` — so a max-width is the entire change. */
    /*header nav,*/
    /*.top,*/
    /*#homeP section,*/
    /*.about-mv,*/
    /*.about-facts,*/
    /*.about-lead,*/
    /*.about-grid,*/
    /*.contact-info,*/
    /*.contact-main,*/
    /*.footer-top,                    !* was capped at 1200: 300px narrower than the content above it *!*/
    /*#economyP .cpi-card,*/
    /*#socialP .cpi-card,*/
    /*#economyTopicP .et-wrap,*/
    /*#socialTopicP .st-wrap,*/
    /*#poP .po-wrap,*/
    /*#lbP .lb-wrap,*/
    /*#scP .sc-wrap,*/
    /*#environmentP .env-wrap,*/
    /*#publicationsP .pl-wrap,*/
    /*#faqP .fq-wrap,*/
    /*#methodsP .mt-wrap,*/
    /*#privacyP .pp-wrap,*/
    /*#classP .cl-wrap,*/
    /*#actsP .ac-wrap,*/
    /*#actsP .ac-hero{ max-width: var(--shell); }*/

    /* Between 1600 and ~1653 the cap does not bite yet, and the header and
       footer are 90% against the content's 92% — a 32px step at the very
       widths this tier exists to tidy up. Put them on the content's rhythm so
       the edges line up through the whole tier, not just past the cap. */
    /*header nav,*/
    /*.footer-top{ width: 92%; }*/

    /* ---------------------------------------------------------- header --- */
    /*header{ padding: 26px 0; }*/
    header nav .nav1 .logo img{ height: 76px; }
    header nav .nav3 ul li{ padding: 11px 22px; }

    /* ------------------------------------------------- home / about hero - */
    /* 70vh is 840px on a 1200-tall screen: hero plus header swallows the whole
       first view. Capping it brings the indicator cards above the fold, which
       is what makes the page read as a dashboard rather than a brochure. */
    /*.top{ height: min(60vh, 660px); border-radius: 26px; }*/
    .hero-content{ max-width: 1000px; }
    .hero-content h1{ font-size: 4rem; letter-spacing: -2px; }
    .hero-content p{ font-size: 1.16rem; max-width: 34rem; margin-top: 20px; }
    .hero-btn{ margin-top: 30px; padding: 15px 36px; font-size: 1.02rem; }

    /* --------------------------------------------- key indicator cards --- */
    /* ~490px across at this width; without more height and a bigger figure
       they read as letterboxes with small type sitting in them */
    #homeP section.kpi{ gap: 26px; }
    .kpi-card{
        min-height: 180px;
        padding: 30px 34px 32px;
        gap: 8px;
        justify-content: center;    /* the stack centres; the arrow keeps its corner */
    }
    .kpi-go{ top: 26px; right: 28px; width: 22px; height: 22px; }
    .kpi-title{ font-size: 1.16rem; }
    .kpi-value{ font-size: 3.1rem; }
    .kpi-value.sm{ font-size: 2.2rem; }
    .kpi-sub{ font-size: 1rem; }
    .kpi-year{ font-size: 0.9rem; }
    .kpi-split{ gap: 40px; }

    /* ---------------------------------------------- latest publications -- */
    .pub-intro{ max-width: 62rem; margin-bottom: 34px; }
    .pub-intro h2{ font-size: 2.35rem; letter-spacing: -0.8px; }
    .pub-intro p{ font-size: 1.1rem; }

    /* ------------------------------------------------- page / card heads - */
    .cpi-head h2{ font-size: 2.3rem; letter-spacing: -0.8px; }
    #publicationsP .pl-head h1,
    #faqP .fq-head h1,
    #methodsP .mt-head h1,
    #privacyP .pp-head h1,
    #classP .cl-head h1{ font-size: 3.4rem; letter-spacing: -1.8px; }
    #actsP .ac-hero h1{ font-size: 3.9rem; }

    /* -------------------------------------------------- topic page heroes  */
    /* 460px under a 1520px band is a 3.3:1 letterbox — a little more height
       restores the proportion these heroes have at 1400 */
    #economyTopicP .et-hero,
    #socialTopicP .st-hero,
    #poP .po-hero,
    #lbP .lb-hero,
    #scP .sc-hero{ max-height: 520px; }
    #economyTopicP .et-hero h1,
    #socialTopicP .st-hero h1,
    #poP .po-hero h1,
    #lbP .lb-hero h1,
    #scP .sc-hero h1{ font-size: 3.5rem; }

    /* ------------------------------------------------ environment banner - */
    #environmentP .wx-banner{ height: min(58vh, 620px); padding: 40px 48px; }
    #environmentP .wx-temp{ font-size: 7.4rem; }

    /* -------------------------------------------------- reading measure -- */
    /* The "photo beside an explainer" leads carry no measure of their own, so
       the prose takes whatever the band gives it — ~1360px here, around 160
       characters to the line. Cap the text; the photo column keeps the rest. */
    /*.about-lead-body p,*/
    #methodsP .mt-lead-body p,
    #privacyP .pp-lead-body p,
    #classP .cl-lead-body p,
    #actsP .ac-lead-body p,
    #actsP .ac-note p{ max-width: 62rem; }

    /* ---------------------------------------------------------- footer --- */
    .site-footer{ padding: 62px 0 30px; }
    .footer-top{ gap: 56px; }
    .site-footer h3{ font-size: 1.6rem; }
    .footer-bottom{ margin-top: 48px; }
}


/* ============================================================
   5a. LARGE DESKTOP, TALL — 1600px+ wide and 1100px+ high
   1920x1200 is 16:10, so it has ~120px more height than 1920x1080 at
   the same width. Spend it on vertical rhythm rather than a taller
   hero — the hero is deliberately capped in the tier above.
   ============================================================ */
@media (min-width: 1600px) and (min-height: 1100px){
    .top{ margin-top: 22px; }
    #homeP section{ margin: 58px auto 86px; }

    .contact-info{ margin: 34px auto; }
    .contact-main{ margin: 34px auto 86px; }

    #economyTopicP .et-wrap,
    #environmentP .env-wrap{ margin: 52px auto 86px; }
    #socialTopicP .st-wrap,
    #poP .po-wrap,
    #lbP .lb-wrap,
    #scP .sc-wrap{ margin: 40px auto 86px; }
    #publicationsP .pl-wrap,
    #faqP .fq-wrap,
    #methodsP .mt-wrap,
    #privacyP .pp-wrap,
    #classP .cl-wrap{ margin: 46px auto 94px; }
    #actsP .ac-wrap{ margin: 0 auto 94px; }

    .site-footer{ margin-top: 86px; }
}