:root {
    interpolate-size: allow-keywords;

    --color-shadow: color-mix(in srgb, var(--color-federal) 20%, transparent);
    --color-highlight: hsl(0 0% 100% / 0.2);
    --color-oxford: hsl(240 60% 10%);
    --color-federal: hsl(240 75% 20%);
    --color-purple: hsl(300 100% 25%);
    --color-violet: hsl(320 80% 40%);
    --color-lavender: hsl(320 30% 85%);
    --color-snow: hsl(350 50% 97%);
    --color-white: hsl(0 0% 100%);
    --color-cobalt: hsl(210 80% 40%);
    --color-fire: hsl(350 100% 35%);
    --color-sun: hsl(30 100% 60%);
    --color-forest: hsl(140 90% 30%);
}

html {
    color-scheme: light dark;
    block-size: 100%;
    box-sizing: border-box;
    background-color: var(--color-snow);
    color: color-mix(in srgb, var(--color-federal) 75%, var(--color-violet));
}

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

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

::selection {
    background-color: color-mix(in srgb, var(--color-sun) 20%, transparent);
}

a:hover {
    text-decoration-thickness: 0.15ch;
    text-underline-offset: 0.07lh;
    transition: text-decoration-thickness 200ms ease-out, text-underline-offset 50ms ease-out;
}

body {
    min-block-size: 100%;
    margin: 0;
    font-family: 'Roboto Condensed', Arial, sans-serif;
    font-weight: 350;
    font-size: clamp(1.25rem, 1rem + 0.625vw, 1.5rem);
    line-height: 1.6;
    container-type: inline-size;
    overflow-x: clip;
}

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

:where(img, svg) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}
table {
    table-layout: auto;
    text-align: left;
    inline-size: 100%;
}

p:empty {
    display: none;
}

.header {
    position: relative;
    background-image: radial-gradient(
        125% 110% at 50% 110%,
        var(--color-sun) 5%,
        var(--color-violet) 20%,
        var(--color-purple) 35%,
        var(--color-federal) 65%,
        var(--color-oxford) 100%
    );
    color: var(--color-snow);
    position: relative;
}

#canvas {
    position: absolute;
    block-size: 100%;
    inset: 0;
    pointer-events: none;
}

.title {
    display: grid;
    align-content: center;
    block-size: clamp(64svb, 64vb + 24vi, 94svb);
    padding-block: 2lh;
    overflow-x: clip;
}

.title h1 {
    margin-block: auto;
    display: grid;
    font-size: unset;
    margin-block-start: 0;
    text-align: center;
    justify-content: center;
}

.title__text {
    font-variation-settings: "wdth" 75;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05ch;
}

:where(.title__text, .toc h2, main > h3, .strategy__title) {
    font-size: clamp(1.25rem, 0.8333rem + 2.0833vw, 2.5rem);
}

.title__year {
    font: clamp(10rem, 6.4286rem + 17.8571vw, 35rem) / 1 'DynaPuff', sans-serif;
    font-variation-settings: "wdth" 75;
    transition: font-variation-settings 100ms ease-in-out;

    @media (width > 36rem) {
        font-variation-settings: "wdth" 100;
    }
}

.header .snow {
    inline-size: 100%;
    block-size: auto;
    position: sticky;
    bottom: 0;
    inset-inline: 0;
    z-index: 2;
}

.toc {
    opacity: 0;
    padding-block-end: 1lh;
    animation-timeline: view(block 10%);
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-name: fadeIn;
    animation-duration: 1ms;
    animation-range: 12% 64%;
}

.toc ol {
    margin-block-start: 0.5lh;
}

.toc a {
    color: inherit;
    display: flex;
    align-items: baseline;
    gap: 0.5ch;
    padding-block: 0.5rem;
    border-block-start: 1px solid var(--color-highlight);
    text-decoration: none;
}

.toc svg {
    transform: translateY(0.15lh)
}

:where(main) {
    text-wrap: pretty;
}

:where(main, blockquote) > :where(* + *) {
    margin-block-start: 1lh;
}

:where(main) :where(h2, h3) {
    color: var(--color-violet);
}

:where(main) h2 {
    margin-block: 2lh 0.25lh;
    font: clamp(3rem, 0rem + 7.5vw, 6rem) / 1.25 'DynaPuff';
    font-variation-settings: "wdth" 90;
    letter-spacing: 0.05ch;
    text-align: center;
    text-wrap: balance;
    grid-column: feature;
}

:where(main) h2:first-of-type {
    margin-block-start: 0.5lh;
}

:where(main) > h3 {
    text-wrap: balance;
}

:where(main) > :where(h3, h4) {
    line-height: 1.3;
    margin-block: 1.25lh 0.125lh;
}

:where(main) > :where(h3, h4, li) + *:not(h2, h3, h4) {
    margin-block-start: 0.25lh;
}
:where(main) > h3 + h4 {
    margin-block-start: 0.75lh;
}

:where(main) > :is(h2, h3, h4) {
    margin-block-end: 0.025lh;
}

:where(main) > :where(h4) {
    font-size: inherit;
    font-weight: 500;
    text-wrap: balance;
}

:where(main) > :where(ul, ol) {
    padding-inline-start: 1.75rem;
    margin-block-end: 1rlh;

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

:where(main) > :where(.link-tile + .link-tile) {
    margin-block-start: 0.25lh;
}

:where(main) > :where(p, ol, ul, .link-list, blockquote) a {
    color: var(--color-cobalt);
    font-weight: 350;

    &:hover {
        color: var(--color-violet);
        transition: color 200ms;
    }
}

:where(main) > blockquote {
    background-color: color-mix(in srgb, var(--color-lavender) 20%, transparent);
    padding: 0.5lh 2.5ch 0.5lh;
    margin-block-end: 0.375lh;
    position: relative;
    color: var(--color-purple);
    font-size: 90%;
    border-radius: 4px;

    &:after {
        content: "";
        display: block;
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: 0.5ch;
        background-color: color-mix(in srgb, var(--color-violet) 50%, transparent);
        border-radius: 4px 0 0 4px;
    }
    :where(ul, ol) {
        padding-inline-start: 2rem;
    }
}

:where(main) > blockquote + blockquote {
    margin-block-start: 0;
}

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

.stats-card {
    border-radius: 12px;
    background-color: var(--color-white);
    box-shadow:
        0 1px 3px -2px var(--color-shadow),
        0 9px 18px -12px var(--color-shadow);
    display: grid;
    padding: 0.375lh 0.75lh;
    flex: 1;
}

.stats-card--downplay {
    scale: 0.85;
    transform-origin: top;

    @container (width > 36rem) {
        transform-origin: left;
    }
}

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

    &:after {
        content: " " / "";
        display: inline-block;
        inline-size: 0.375ch;
        block-size: 0.5lh;
        background-color: var(--color-snow);
        translate: -0.375ch 0.05lh;
    } 
  } 
.stats-card__number {
    font-size: 360%;
    font-weight: 500;
    line-height: 1;
}

.progress {
    display: grid;
}

.progress__bar {
    box-shadow: inset 0 2px 4px -2px var(--color-shadow);
    background-color: var(--color-lavender);
    border-radius: 99px;
    display: flex;
    flex-direction: row;
    overflow: clip;

    &:after {
        content: "";
        inline-size: var(--chart_size, 0%);
        flex: none;
        block-size: .75rlh;
        background: var(--color-purple) linear-gradient(to left, var(--color-violet) 0%,
        var(--color-purple) 50%);
    }
}
.progress__text {
    margin-block: 0 0.25rlh;
    order: -1;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes poff {
    0% {
        transform: scale(1) translateZ(0px);
        opacity: 1;
        filter: blur(0px);
    }
    100% {
        transform: scale(0.75) translateZ(1000px);
        opacity: 0;
        filter: blur(5px);
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.25;
    }
}

.medlemsviz {
    display: grid;
    grid-template-columns: repeat(auto-fit, clamp(1.75rem, 1.25rem + 1.6667vw, 2.25rem));
    gap: 0.5ch;
    perspective: 1000px;
    transform-style: preserve-3d;
    pointer-events: none;
}

.medlemsviz > * {
    margin: 0;
    inline-size: 100%;
    block-size: auto;
    rotate: var(--angle, 0);
    transform-origin: center;
    transform-style: preserve-3d;
    fill: currentColor;
}

.gruppeviz {
    display: grid;
    grid-template-columns: repeat(auto-fit, clamp(4.5rem, 0rem + 15vw, 9rem));
    gap: 1ch;
    perspective: 1000px;
    transform-style: preserve-3d;
    pointer-events: none;
}

.gruppeviz * {
    margin: 0;
    inline-size: 100%;
    block-size: auto;
    rotate: var(--angle, 0);
    transform-origin: center;
    transform-style: preserve-3d;
}

.sideviz {
    display: grid;
    grid-template-columns: repeat(auto-fit, clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem));
    gap: 0.5ch 0.25ch;
    perspective: 1000px;
    transform-style: preserve-3d;
    pointer-events: none;
}

.sideviz * {
    margin: 0;
    inline-size: 100%;
    block-size: auto;
    rotate: var(--angle, 0);
    transform-origin: center;
    transform-style: preserve-3d;
}
:where(.poff, .fade) {
    opacity: 0.4;
}



@media (prefers-reduced-motion:no-preference) {
    @supports (animation-timeline: scroll()) {
        .poff {
            opacity: 1;
            animation-name: poff;
            animation-timeline: view();
            animation-direction: normal;
            animation-fill-mode: forwards;
            animation-range: entry-crossing 24vh entry 96vh;
        }
        .fade {
            opacity: 1;
            animation-name: fade;
            animation-timeline: view();
            animation-direction: normal;
            animation-fill-mode: forwards;
            animation-range: entry-crossing 32vh entry 64vh;
        }
        :where(.gruppeviz) .poff {
            animation-range: entry-crossing 36vh entry 96vh;
        } 
        :where(.gruppeviz) .fade {
            animation-range: entry 32vh entry 56vh
        } 
        :where(.medlemsviz) .poff:where(:nth-child(48), :nth-child(50), :nth-child(52), :nth-child(59), :nth-child(62)) {
            animation-range-start: 24vh;
        }
        :where(.medlemsviz) .poff:where(:nth-child(49), :nth-child(51), :nth-child(54), :nth-child(57), :nth-child(63)) {
            animation-range-start: 48vh;
        }
        :where(.medlemsviz) .poff:where(:nth-child(47), :nth-child(53), :nth-child(56), :nth-child(60)) {
            animation-range-start: 36vh;
        }
    }
}

.link-tile {
    color-scheme: light;
    background: var(--color-federal) linear-gradient(90deg, var(--color-purple), var(--color-federal));
    border-radius: 12px;
    padding: 1em 2em 1em 1em;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75ch;
    grid-auto-flow: column;
    align-items: start;
    transition: background-color 100ms;
    color: white;

    small {
        word-break: break-all;
        pointer-events: none;
        font-size: 80%;
        opacity: 0.8;
        line-height: 1.25;
        margin-block-start: 0.05lh;
    }
    a {
        text-decoration-color: var(--color-lavender);
        text-wrap: pretty;
        font-weight: 400;
        color: currentColor;
    }
    a:after {
        content: "";
        position: absolute;
        inset: 0;
    }
}

.link-tile__icon {
  max-inline-size: 1.125em;
  block-size: auto;
  translate: 0 0.075lh;
  color: currentColor;
}

.link-tile__content {
  line-height: 1.35;
  display: grid;
  gap: 0.1lh;
}

.link-tile:has(a:hover) {
      background: var(--color-federal) linear-gradient(90deg, var(--color-violet), var(--color-purple));
}

.link-tags {
    ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25lh 0.625ch;
        font-size: 90%;
        line-height: 1.3;
    }
    a {
        background-color: var(--color-lavender);
        display: inline-block;
        padding: 0.25lh 1ch 0.1375lh;
        border-radius: 4px;
        color: currentColor;
        text-decoration: none;

        &:hover {
        background-color: var(--color-lavender);
        transition: background-color 300ms;
        text-decoration: underline;
        box-shadow: 
            inset 0 0 0 1px color-mix(in srgb, var(--color-lavender) 50%, transparent);
        
        }
    }
}

.gallery {
    display: grid;
    gap: 0.5em;
}

.gallery:has(picture:nth-child(2)) {
    @container (width > 64rem) {
        grid-column: feature;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        align-items: start;
    }
}

.gallery:has(svg) {
    grid-column: feature;

    svg {
        inline-size: 100%;
    }
}

.gallery picture {
    display: grid;
    grid-template-rows: 1fr auto;

    &:not([data-title=""]):after {
        content: attr(data-title);
        grid-column: 1;
        grid-row: 2;
        margin: auto auto 0.75rem 0.75rem;
        padding: 0.3em 0.4em;
        line-height: 1;
        border-radius: 4px;
        background-color: color-mix(in srgb, var(--color-oxford) 70%, transparent);
        backdrop-filter: blur(0.1em);
        color: var(--color-snow);
        font-size: 90%;
        text-align: center;
    }
    img {
        grid-column: 1;
        grid-row: 1 / span 2;
        border: 1px solid color-mix(in srgb, var(--color-purple) 10%, transparent);
        border-radius: 8px;
        overflow: clip;
        box-shadow:
        0 1px 3px -2px var(--color-shadow),
        0 9px 18px -12px var(--color-shadow);
    }
}

.toptasks {
    @container (width > 64rem) {
        grid-column: feature;
        display: grid;
        gap: 1ch;
        grid-template-columns: 1fr 1fr;
    }
}

.toptask {
    display: grid;
    background-color: var(--color-white);
    box-shadow:
        0 1px 3px -2px var(--color-shadow),
        0 9px 18px -12px var(--color-shadow);
    border-radius: 12px;
    padding: 1.5rem;

    @container (width > 64rem) {
        margin-block-start: 0;
    }
}

.toptask__text {
    display: block;
    text-wrap: balance;
    line-height: 1.3;
}

.toptask__numbers {
    line-height: 1;
    display: flex;
    gap: 0 2ch;
    align-items: end;
    justify-content: space-between;
}

.toptask__metric {
    font-size: 180%;
    font-weight: 500;
    margin-block: 0.125lh;
    white-space: nowrap;
}

.toptask__demand {
    opacity: 75%;
    font-size: 90%;
    padding-block-end: 0.625lh;
}

.toptask__graphic {
    height: 0.375lh;
    border-radius: 99px;
    background-color: var(--color-lavender);
    box-shadow: inset 0 2px 4px -2px var(--color-shadow);
    display: flex;
    overflow: clip;

    &:after {
        content: " ";
        display: block;
        flex: none;
        inline-size: var(--toptask_size, 60);
        background-color: var(--toptask_color, currentColor);
    }
}

.strategy {
    display: grid;
    gap: 0.25lh 1ch;
    margin-block-end: 0.5lh;
  
    @container (width > 64rem) {
        grid-column: feature;
        grid-template-columns: repeat(3, 1fr);
    }
}

.strategy__card {
    background: white;
    border-radius: 8px;
    padding: 1em 1.5em 1.5em;
    padding-inline-end: 4em;
    display: grid;
    align-content: start;
    position: relative;
    overflow: clip;
    box-shadow:
        0 1px 3px -2px var(--color-shadow),
        0 9px 18px -12px var(--color-shadow);

    @container (width > 64rem) {
        padding-inline-end: 3em;
    }

    &:after {
        content: attr(data-number) / "";
        position: absolute;
        bottom: 0;
        inset-inline-end: 0.125em;
        font-size: 800%;
        line-height: 1;
        font-weight: 900;
        translate: 0 0.175em;
        opacity: 0.05;
        color: var(--color-cobalt);
        pointer-events: none;
    }
}

.strategy__title {
    font-weight: 500;
}

.strategy__subtitle {
    line-height: 1.4;
}

.footer {
    min-block-size: 12rem;
    text-align: center;
    padding-block: 1lh;
    min-block-size: 98svb;
    align-items: center;

    svg {
        max-inline-size: 100%;
        block-size: auto;
        margin-inline: auto;

    }
    .footprints {
        color: hsl(267 41% 90%);
    }
    
    p {
        max-inline-size: 46ch;
        padding-block: 0.5lh 2lh;
        text-wrap: pretty;
        margin-inline: auto;
    }
}

.velferdsstaten {
    inline-size: clamp(8rem, 8rem + 8vi, 16rem);
    margin-block-end: 2lh;
}

.kalle {
    position: fixed;
    inset: 100% auto auto 50%;
    margin-inline: auto;
    inline-size: clamp(32ch, 32ch + 4vi, 48ch);
    block-size: auto;
    translate: -50% 0;
    pointer-events: none;
}

.kalle.boo {
    animation: boo 2s cubic-bezier(0.75, 0, 0.15, 1);
}

@keyframes boo {
    50% {
        translate: -50% -90%;
    }
}

:where(.toc, .main, .footer) {
    --_layout-gap: clamp(1rem, 1rem + 3vi, 6rem);
    --_layout-full: minmax(var(--_layout-gap), 1fr);
    --_layout-feature: minmax(0, 10rem);
    --_layout-popout: minmax(0, 6rem);
    --_layout-content: min(64ch, 100% - var(--_layout-gap) * 2);

    display: grid;
    grid-template-columns: 
        [full-start] var(--_layout-full) 
        [feature-start] var(--_layout-feature) 
        [popout-start] var(--_layout-popout) 
        [content-start] var(--_layout-content) 
        [content-end] var(--_layout-popout) 
        [popout-end] var(--_layout-feature) 
        [feature-end] var(--_layout-full) 
        [full-end];
        
    & > * { grid-column: content }
} 

.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;
}