:root {
    --edge: clamp(1rem, -4rem + 16.6667vw, 6rem);
    --text: clamp(1.25rem, 1.2143rem + 0.1786vw, 1.5rem);
    --stripe: min(1lh, max(.75lh,4vi - 4vb));
    --max-prose: 32rem;
    --clr-0: hsl(36 76% 96%);
    --clr-1: hsl(36 80% 76%);
    --clr-2: hsl(348 52% 48%);
    --clr-3: hsl(320 48% 28%);
    --clr-4: hsl(200 96% 16%);
    --clr-5: hsl(204 100% 40%);
    --clr-ok: hsl(48 96% 56%);
    --clr-bad: hsl(355 80% 48%);
    --clr-good: hsl(100 84% 40%);

    interpolate-size: allow-keywords;   
    block-size: 100%;
    color-scheme: light dark;
    background: linear-gradient(var(--clr-0) 90vh, var(--clr-3) 0);
    font-size: var(--text);
    font-weight: 400;
    color: var(--clr-0);
    scroll-padding-block-start: 1lh;

    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

body {
    container-type: inline-size;
    min-block-size: 100%;
    margin: 0;
    font-family: 'Barlow', system-ui, -apple-system, Roboto, sans-serif;
    line-height: 1.5;
    overflow-x: clip;
}

* {
    margin: 0;
    padding: 0;
    text-decoration-thickness: 0.1ch;
    text-underline-offset: 0.08lh;
}

h2 {
    font-size:2.125rem;
    margin-block: .5lh 1lh;
    text-transform: uppercase;
    letter-spacing: 0.0125em;
    font-weight: 400;
}

h3 {
    max-inline-size: var(--max-prose);
    font-size:1.5rem;
    font-weight: 600;
}

:where(h2, h3) {
    font-family: 'Barlow Condensed', sans-serif;
    line-height: 1.2;
    text-wrap: pretty;
}

h4 {
    font-size: unset;
    text-wrap: balance;
}

p {
    max-inline-size: var(--max-prose);
    text-wrap: pretty;

    &:empty { display: none }
}

a {
    color: currentColor;

    &:hover {
        text-decoration-thickness: 0.25ch;
        text-underline-offset: 0.08lh;
    }
}

:where(li, p) > a {
    color: var(--clr-4);
    font-weight: 600;

    &:hover {}
}

:where(ul, ol):has([class]) {
    list-style: none;
    padding-inline-start: 0;
}

:where(img, svg, picture) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

picture {
    max-inline-size: var(--max-prose);
}

img {
    border-radius: clamp(0.75rem, 0.625rem + 0.625vw, 1.125rem);
    corner-shape: squircle;
}

figcaption {
    max-inline-size: var(--max-prose);
    margin-block-start: .5lh;
    font-size: 81.5%;
}

table {
    table-layout: auto;
    text-align: left;
    inline-size: 100%;
}





.header {
    min-block-size: calc(100cqh - (var(--stripe) * 3));
    display: grid;
    padding-block-start: 12vh;
    box-sizing: border-box;
    background: var(--clr-0);
    color: var(--clr-4);
}

.title {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(1.25rem, 0rem + 8vw, 2.5rem);
    line-height: .9;
    padding-block-start: var(--edge);
    padding-inline: var(--edge);
    max-inline-size: 60ch;
}

.title__year {
    display: block;
    font-size: 585%;
    font-weight: 800;
    text-indent: -0.0125em;
}

.toc {
    font-family: 'Barlow Condensed', sans-serif;
    max-inline-size: 90ch;
    margin-block: auto 0;
    padding-inline: var(--edge);
    padding-block: 4lh 2lh;
    
    ul {
        list-style-type:"";
        padding-inline-start: 0;
        display: flex;
        flex-direction: column;
        gap: 1ch;

        @container (width > 64rem) {
            flex-direction: unset;    
            gap: 2ch;
        }
    }
    li {
        margin:0;

        &:nth-of-type(1) a {
            background-color: var(--clr-1);
        }
        &:nth-of-type(2) a {
            background-color: var(--clr-2);
            color:var(--clr-0);
        }
        &:nth-of-type(3) a {
            background-color: var(--clr-3);
            color:var(--clr-0);
        }
    }
    a {
        display:inline-flex;
        padding:0.375em 1.125em;
        border-radius: 1in;
        white-space: nowrap;
        font-size: clamp(1rem, 0.6rem + 2vw, 1.5rem);
        font-weight: 500;
        letter-spacing: 0.0125em;
        color:currentColor;
        text-transform: uppercase;
        text-decoration: none;
        transition: background 300ms;


    }
    li > a:hover {
        transition: background 100ms;
        background-color: var(--clr-4);
        color: var(--clr-0);
    }
}



:where(main) > section {
    padding-block: 1lh 3lh;
    padding-inline: var(--edge);
    position:relative;
    margin-block-start:-1px;

    &:nth-of-type(1) {
        background-color: var(--clr-1);
        color:var(--clr-4);
    }
    &:nth-of-type(2) {
        background-color: var(--clr-2);
        font-weight: 350;
    }
    &:nth-of-type(3) {
        background-color: var(--clr-3);
        font-weight: 350;
        padding-block-end: 2lh;
    }
}

:where(main) > div {
    position:sticky;
    height: var(--stripe);

    &:nth-of-type(1) {
        background-color: var(--clr-1);
        bottom:calc(var(--stripe) * 2 - 1px);
    }
    &:nth-of-type(2) {
        background-color: var(--clr-2);
        bottom: calc(var(--stripe)  - 1px);
    }
    &:nth-of-type(3) {
        background-color: var(--clr-3);
        bottom:0;
    }
}



.prose {
    & > :where(h3, h4) {
        margin-block: 1.25lh 0.125lh;
    }
    & > h3 + h4 {
        margin-block: 0.75lh 0.025lh;
    }

    & > :is(p, div, image-compare, figure) + *:not(h2, h3, h4, section, figcaption, .overscroll) {
        margin-block-start: 1.25lh;
    }

    & > :where(h3, h4, li) + *:not(h2, h3, h4, .link-panel) {
        margin-block-start: 0.25lh;
    }

    & > :where(ul, ol):not([class]) {
        padding-inline-start: 1.75rem;
        margin-block-end: 1rlh;

        :is(li + li) {
            margin-block-start: 0.25lh;
        }
    }

    & > table {
        border-spacing: 0;
        width: stretch;
    }

    :is(thead th, tbody td) {
        text-align: right;
    }

    tbody td {
        font-variant-numeric: tabular-nums;
    }

    thead th {
        position: relative;
        padding-block: .5lh;
        font-size: 81.5%;
        font-weight: unset;

        span {
            inset:auto 0 0 auto;
            translate: -4ch -1ch;
            position: absolute;
            white-space: nowrap;
            rotate: 35deg;
            transform-origin: bottom right;
        }
    }
    :where(tr > *) {
        &:not(:last-child) {
            padding-inline-end:1ch;
        }
        &:not(:first-child) {
            padding-inline-start:4ch;
        }
    }
    :where(tbody tr) {
        min-block-size:2lh;

        > * {
            border-block-start: 1px solid hsl(from currentColor H S L / 35%);
            padding-block:0.125lh;
        }
        td {
            inline-size: 4%;
        }
    }
}


image-compare {
    max-inline-size: var(--max-prose);
    --thumb-background-color: var(--clr-1);
    --thumb-size: clamp(3em, 10vmin, 4em);
    --thumb-radius: 50%;
    --thumb-border-size: 0;
    --focus-width: var(--thumb-border-size);
    --focus-color: var(--clr-5);
    --border-width: 0.5px;
    --border-color: hsla(0, 0%, 0%, 0.9);
}

.overscroll {
    overflow-x:auto;
    scrollbar-width: none;
    inline-size: 100dvi;
    margin-inline: calc(var(--edge) * -1);
    box-sizing: border-box;
}

.overscroll-wrapper {
    display: grid;
    grid-template-columns: var(--edge) 1fr var(--edge);

    &:before,
    &:after {
        content:"";
        inline-size: var(--edge);
    }
}


.image-grid {
    display: grid;
    grid-auto-flow: column;
    gap: min(1em, 3vw);

    @container (width > 75rem) {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(0, 25rem));
        max-inline-size: 80rem;
    }
    img {
        @container (width < calc(75rem - 0.1px)) {
            min-inline-size: min(25rem, 75vw);
        }
    }
}

.image-large picture {
    max-inline-size: 48rem;

    img {
        border-radius: unset;
    }
}


.toptasks {
    gap: 1ch;
    display: grid;
    grid-auto-flow: column;
    margin-block-start: 0.5lh;

    @container (width > 75rem) {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        max-inline-size: 64rem;
    }
}

.toptask {
    outline: 2px solid hsl(from var(--clr-4) H S L / 20%);
    display: flex;
    flex-direction: column;
    background: var(--clr-0);
    padding: .875lh 2.25ch 1lh;
    border-radius: 1em;
    min-block-size: 4lh;
    color: var(--clr-4);
    aspect-ratio: 1;

    @container (width < 75rem) {
        min-inline-size: 12rem;
    }
}

.toptask__text {
    display: block;
    text-wrap: pretty;
    line-height: 1.3;
    margin-block-end: auto;
}

.toptask__data {
    line-height: 1;
    display: flex;
    gap: 0 2ch;
    align-items: baseline;
    justify-content: space-between;
    padding-block-start: 1lh;
}

.toptask__rate {
    margin-block-start: auto;
    font-size: 150%;
    font-weight: 600;
    white-space: nowrap;
}

.toptask__demand {
    color: hsl(from var(--clr-4) H calc(S - 20) calc(L + 15));
    font-size: 81.5%;
}

.toptask__viz {
    margin-block: .25lh;
    height: 0.375lh;
    border-radius: 99px;
    background-color: var(--clr-4);
    display: flex;
    overflow: clip;

    &:after {
        content: "";
        display: block;
        flex: none;
        inline-size: var(--_bar-size, 60);
        background: repeating-linear-gradient(
        -45deg,
        hsl(0 0 0/0%) 0 10px,
        hsl(0 0 0/5%) 0 20px
    ) var(--_bar-color, currentColor);
    }
}


.stats-cards {
    display: flex;
    flex-direction: column;
    gap: 1ch;
    margin-block-end: 0.5lh;
    
    @container (width > 24rem) {
        flex-direction: row;
        max-inline-size: var(--max-prose);
    }
}

.stats-card {
    box-sizing: border-box;
    border-radius: 1em;
    background-color: var(--clr-0);
    color:var(--clr-4);
    display: grid;
    padding: .75em 1.25em;
    flex: 1 1 auto;
}

.stats-card--downplay {
    zoom: 0.9;

    @container (width < 24rem) {
        transform-origin: top;
        margin-inline: 1em;
    }

    @container (width > 24rem) {
        transform-origin: left;
        align-self: center;
    }
}

.stats-card__text {
    opacity: 0.75;
    font-size: 90%;
}

.stats-card__number {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 360%;
    font-weight: 600;
    line-height: 1;
}

.bar-chart {
    margin-block: 0.625lh 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 .75em;
    max-inline-size: var(--max-prose);
}

.bar-chart__row {
    --_border: 1px solid hsl(from var(--clr-0) H S L / 30%);
    border-block-start: var(--_border);
    padding-block: 0.375em;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;

    &:last-child {
        border-block-end: var(--_border);
    }
}

.bar-chart__number {
    text-align: right;

    @container (width < 24rem) {
        margin-inline-end: -0.75em;
    }
}

.bar-chart__viz {
    margin-block: .25lh;
    height: 0.625lh;
    border-radius: 99px;
    background-color: var(--clr-4);
    display: flex;
    overflow: clip;

    @container (width < 24rem) {
        grid-row: 2;
        grid-column: 1/-1;
    }

    &:after {
        content: "";
        display: block;
        flex: none;
        inline-size: var(--_bar-size, 60);
        background: repeating-linear-gradient(
        -45deg,
        hsl(0 0 0/0%) 0 10px,
        hsl(0 0 0/5%) 0 20px
    ) var(--clr-0);
    }
}





.footer {
    background: var(--clr-3);
    color: white;
    padding: 2lh var(--edge) 4lh;

    div {
        max-inline-size: var(--max-prose);
    }

    svg {
        max-inline-size: 15ch;
        margin-inline: auto;
        height: auto;
    }
}

.link-panel {
    box-sizing: border-box;
    position: relative;
    display:grid;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas: "icon title" "icon link";
    column-gap: 0.5em;
    background: var(--clr-5);
    border-radius: clamp(0.75rem, 0.625rem + 0.625vw, 1.125rem);
    max-inline-size: var(--max-prose);
    padding: .875em 1.125em .875em 0.875em;
    margin-block-end:1.5lh;
    outline: 0 solid hsl(from var(--clr-4) H S L / 15%);
    transition: outline 200ms, background 300ms;
    color: white;
    corner-shape: squircle;
    

    &:has(a:hover) {
        outline-width: 0.325em;
        transition: outline 50ms ease-out, background 100ms;
        background: hsl(from var(--clr-5) H S calc(L + 8));
    }

    :where(svg, small) { 
        pointer-events: none;
        color: hsl(from var(--clr-5) H calc(S - 25) calc(L + 45));
    }
    svg {
        background: var(--clr-4);
        padding: 0.25rem;
        border-radius: clamp(0.5rem, 0.4167rem + 0.4167vw, 0.75rem);
        corner-shape: squircle; 
        grid-area: icon;
        width: 1rem;
    }
    a { 
        color: currentColor;
        grid-area: title;
        font-weight: bold;
        font-size: 92.5%;

        &:after {
            content: "";
            position: absolute;
            inset: 0;
        }
    }
    small {
        grid-area: link;
        font-size: 75%;
        word-break: break-word;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}