:root {
    color-scheme: light dark;

    /* ===== Color palette ===== */
    --mist: #f4f4f4;
    --pale: #e9e7e5;
    --alto: #d5dfdf;
    --cyan-srgb: #cdd;
    --cyan: var(--cyan-srgb);
    --cyab: #cddb;
    --teal: #8bc;
    --teab: #8bcd;
    --tear: #4090a0;
    --dear: #5ab;
    --fire: #c08010;
    --blue: #168;
    --blub: #168d;
    --brue: #1f6f8f;
    --navy: #157;
    --dusk: #345;
    --rust: #531;
    --mine: #393939;
    --deep-srgb: #114455;
    --deep: var(--deep-srgb);
    --deeb: #145d;
    --dark: #313131;
    --darb: #333b;
    --void: #1a2026;
    --grau: #16161d;
    --coal: #000;

    /* ===== Color application ===== */
    --body-bkg: light-dark(var(--mist), var(--dark));
    --header-bkg: transparent;
    --main-bkg: transparent;
    --footer-bkg: transparent;

    --logo-e-clr: light-dark(var(--mine), var(--pale));
    --logo-d-clr: light-dark(var(--brue), var(--dear));

    --section-a-bkg: light-dark(var(--cyan-srgb), var(--mine));
    --section-b-bkg: light-dark(var(--pale), var(--deep-srgb));
    --section-c-bkg: light-dark(var(--cyan-srgb), var(--void));

    --text-clr: light-dark(var(--mine), var(--pale));
    --heading-clr: light-dark(var(--mine), var(--pale));
    --heading-span-clr: light-dark(var(--mine), var(--pale));

    --section-b-h2-clr: light-dark(var(--navy), var(--teal));
    --section-c-h2-clr: light-dark(var(--mine), var(--alto));
    --ul-clr: light-dark(var(--deep), var(--cyan));
    --h3-clr: light-dark(var(--dusk), var(--alto));
    --footer-clr: light-dark(var(--dark), var(--mist));
    --quote-clr: light-dark(var(--rust), var(--teal));
    --border-clr: light-dark(var(--rust), var(--dear));
    --ul-border-clr: light-dark(var(--blue), var(--dear));

    --pill-clr: light-dark(var(--blue), var(--teal));
    --cta-text-clr: light-dark(var(--mist), var(--grau));
    --cta-bkg: light-dark(var(--blub), var(--deeb));
    --cta-txt: #fff;
    --cta-left: light-dark(var(--cyab), var(--cyab));
    --cta-left-lite: light-dark(var(--cyab), var(--cyab));
    --sec-bkg: light-dark(var(--darb), var(--darb));
    --sec-txt: light-dark(var(--mist), var(--mist));

    --link-clr: light-dark(var(--blue), var(--cyan));
    --link-vis-clr: light-dark(#719, #eaf);

    /* ===== Typography ===== */
    --heading-font: "futura-pt", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, sans-serif;
    --body-font: "azo-sans-web", "futura-pt", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-sans-serif, sans-serif;
    --alt-font: var(--heading-font);
    --title-font: var(--body-font);
    --serif-font: Georgia, ui-serif, serif;

    --font-xs: .9rem;
    --font-sm: 1rem;
    --font-md: 1.1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.6rem;
    --font-xxl: 1.9rem;
    --font-xxxl: 2.3rem;
    --font-huge: 2.6rem;
    --fs-title: 1.9rem;

    /* ===== Spacing ===== */
    --gap-1: .25rem;
    --gap-2: .5rem;
    --gap-3: .75rem;
    --gap-4: 1rem;
    --gap-5: 1.5rem;
    --gap-6: 2rem;
    --gap-7: 2.5rem;

    /* ===== Radius ===== */
    --radius-pill: 2rem;
    --radius-large: 3rem;

    /* ===== Global ===== */
    font-size: 100%;
    text-wrap: pretty;
    -webkit-text-size-adjust: 100%;
    line-height: 1.7;
    scroll-behavior: smooth;
    background-color: var(--body-bkg);
}

/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    gap: 0;
    box-sizing: border-box;
}

::selection {
    background-color: light-dark(var(--deep), var(--teal));
    color: light-dark(#fff, #000);
}

html {
    min-height: 100dvh;
}

body {
    min-height: 100dvh;
    display: grid;
    position: relative;
    overflow-x: clip;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header""main""footer";
    font-family: var(--body-font);
}

/* ===== Typography ===== */

abbr {
    text-decoration: none;
}

h1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: .7;
    font-size: var(--fs-title);
    font-weight: bold;
    color: var(--heading-clr);
    /* font-size-adjust: from-font; */
}

h1 span:first-child {
    margin-top: var(--gap-1);
    font-family: var(--title-font);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

h1 span:last-child {
    margin-top: var(--gap-2);
    font-family: var(--heading-font);
    font-size: 0.98em;
    font-weight: bold;
    color: var(--heading-span-clr);
}

h1,
h2,
h3 {
    text-wrap: balance;
}

h2 {
    color: var(--section-b-h2-clr);
    font-family: var(--heading-font);
    font-size: var(--font-xxl);
    line-height: 1.2;
    margin: var(--gap-7) 0 var(--gap-5);
}

.enkel h2 {
    color: var(--section-c-h2-clr);
    margin: var(--gap-5) 0;
}

h3 {
    font-family: var(--heading-font);
    font-size: var(--font-xl);
    font-weight: bold;
    color: var(--h3-clr);
}

main p {
    margin: 0 0 var(--gap-4);
    font-size: var(--font-md);
    line-height: 2;
    color: var(--text-clr);
}

main p:has(> strong),
main p strong {
    margin-bottom: 0;
}

.highlight {
    background-color: light-dark(#ebd7d7, #002856aa);
    margin: 0 calc(-1*(var(--gap-5))) var(--gap-4);
    padding: var(--gap-5) var(--gap-5) 0.1rem;
    overflow-x: clip;
}

.highlight p,
.highlight strong,
.highlight a {
    color: light-dark(#002856, #ebd7d7);
}

.about h3+p {
    margin-top: var(--gap-2);
}

main p:last-child {
    margin-bottom: var(--gap-5);
}

.intro {
    width: 100%;
    text-wrap: balance;
    font-family: var(--alt-font);
    font-size: var(--font-lg);
    line-height: 1.5;
}

/* ===== Interactive / links ===== */

a {
    color: var(--link-clr);
    text-decoration: underline;
    text-underline-offset: .3em;
}

a:hover,
a:visited:hover,
a:focus-visible,
a:visited:focus-visible {
    background-color: var(--link-clr);
    color: light-dark(#fff, #000);
}

.about .nav-link:focus-visible,
.about .nav-link:visited:focus-visible,
.about .nav-link:hover,
.about .nav-link:visited:hover {
    background-color: light-dark(#0002, #fff1);
    color: var(--link-clr);
}

.about .nav-link:focus-visible,
.about .nav-link:visited:focus-visible {
    outline: 3px solid var(--link-clr);
    outline-offset: 0;
}

a:visited {
    color: var(--link-vis-clr);
}

/* ===== Pills ===== */

address {
    font-style: normal;
    display: flex;
    gap: var(--gap-1);
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--gap-2);
    width: 100%;
}

figure.photo {
    position: relative;
}

figure.photo address {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 50%;
    gap: 2px;
    transform: translateX(-50%);
    text-align: center;
    padding: 0 var(--gap-5);
}

.pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: var(--gap-2) var(--gap-3);
    margin: var(--gap-2) 0 var(--gap-4);
    border: 1px solid var(--pill-clr);
    border-radius: var(--radius-pill);
    font-family: var(--alt-font);
    font-size: var(--font-lg);
    text-decoration: none;
    cursor: pointer;
    width: auto;
    transition: transform .06s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
    user-select: none;
    white-space: nowrap;
    min-inline-size: 44px;
    min-height: 44px;
}

.cta {
    flex: 3 1 0;
    background: var(--pill-clr);
    color: var(--cta-text-clr);
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}

.cta:hover {
    background-color: var(--ul-clr);
}

.cta:link,
.cta:visited {
    color: var(--cta-text-clr);
}

.sec {
    flex: 1 1 0;
    background: none;
    color: var(--pill-clr);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    min-width: 6rem;
}

.sec::after {
    margin-left: var(--gap-1);
    transform: translateY(-3px);
    font-size: var(--font-sm);
    color: currentColor;
    content: " ◳";
}

.cta.glass {
    background-color: var(--cta-bkg);
    color: var(--cta-txt);
    border: 1px solid var(--cta-left-lite);
}

.sec.glass {
    background-color: var(--sec-bkg);
    color: var(--sec-txt);
    border: 1px solid var(--cta-left);
}

.nav-link {
    display: inline-block;
    font-family: var(--alt-font);
    font-size: var(--font-lg);
    line-height: 44px;
    border: none;
}

.about .nav-link {
    display: block;
    text-align: center;
    margin: calc((var(--gap-2))*-1) calc((var(--gap-5))*-1) var(--gap-5);
    background-color: light-dark(#0000000a, #ffffff0a);
    padding: var(--gap-2) 0 var(--gap-3);
}

.ext::after {
    display: inline;
    text-decoration: none;
    content: "  »";
}

footer .lang::after {
    display: inline;
    text-decoration: none;
    font-family: serif;
    content: "  ⚑";
}

.pill:hover {
    background-color: light-dark(var(--teal), var(--navy));
    color: light-dark(#000, #fff);
}

.pill.sec:hover::after {
    color: light-dark(#000, #fff);
}

.pill:focus-visible,
footer figure:focus-within {
    outline: 3px solid var(--link-clr);
    outline-offset: 3px;
}

.pill.glass:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 0;
}

/* ===== Graphics ===== */

svg {
    display: block;
    height: 3.5rem;
    width: auto;
    overflow: visible;
}

path:first-of-type {
    fill: var(--logo-e-clr);
}

path:last-of-type {
    fill: var(--logo-d-clr);
}

circle {
    fill: var(--body-bkg, none);
    fill-opacity: .05;
    stroke: var(--body-bkg, none);
    stroke-width: 3;
    stroke-opacity: .10;
}

.footer-logo path {
    fill: var(--footer-clr);
}

/* ===== Layout regions ===== */

header {
    grid-column: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0;
    background-color: var(--header-bkg);
}

.brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--gap-4);
    padding: var(--gap-7) var(--gap-3);
}

main {
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(4, auto);
    background-color: var(--main-bkg);
}

footer {
    grid-column: 1;
    padding: var(--gap-5);
    position: relative;
    background-color: var(--footer-bkg);
    color: var(--footer-clr);
}

.intro {
    text-align: center;
    background-color: var(--section-a-bkg);
    padding: var(--gap-4) var(--gap-3);
}

.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    overflow-x: clip;
}

.about {
    padding: var(--gap-2) var(--gap-5);
    background-color: var(--section-b-bkg);
}

.about figure {
    margin-top: var(--gap-4);
}

.enkel {
    padding: var(--gap-5);
    border-radius: 0 0 var(--gap-7) 0;
    background-color: var(--section-c-bkg);
}

.enkel .photo img,
.about .photo img {
    width: calc(100% + (var(--gap-5) * 2));
    height: auto;
    margin: var(--gap-5) calc(var(--gap-5) * -1);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

.about .photo img {
    margin-top: 0;
    mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 5rem,
            #000 calc(100% - 5rem),
            transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 5rem,
            #000 calc(100% - 5rem),
            transparent 100%);
}

.enkel .photo img {
    mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 20rem,
            #000 100%);

    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 20rem,
            #000 100%);
}

/* ===== Lists, dividers, footer text ===== */

blockquote {
    border-left: solid 1.6px var(--border-clr);
    padding-inline-start: var(--gap-4);
    margin: var(--gap-5) 0;
    line-height: 1.9;
    font-size: 1.2rem;
    font-family: var(--serif-font);
    color: var(--quote-clr);
}

blockquote>footer {
    margin-top: var(--gap-2);
    color: var(--text-clr);
}

figcaption {
    padding-block-end: var(--gap-5);
    margin: calc(var(--gap-2) * -1) 0 var(--gap-6);
    border-bottom: 1.6px solid var(--border-clr);
    font-family: var(--serif-font);
    color: var(--quote-clr);
}

figcaption span {
    display: block;
    margin-top: var(--gap-2);
    font-weight: 600;
    font-size: .95em;
}

ul {
    margin: var(--gap-4) var(--gap-5) var(--gap-5);
    font-size: var(--font-md);
    color: var(--ul-clr);
}

.divider {
    margin: var(--gap-6) calc(var(--gap-5) * -1) var(--gap-6);
    border-top: 2px solid transparent;
    border-image: repeating-linear-gradient(to right,
            #e73 0%, #e73 20%,
            #c43 20%, #c43 40%,
            #948 40%, #948 60%,
            #46c 60%, #46c 80%,
            #4a4 80%, #4a4 100%) 1;
    opacity: 75%;
}

footer small {
    display: block;
    max-width: 75%;
    letter-spacing: .03rem;
    font-family: var(--alt-font);
    font-size: var(--font-md);
    line-height: 1.6;
    color: var(--footer-clr);
}

footer small:last-of-type {
    font-weight: 600;
    color: var(--footer-clr);
}

footer small a,
footer small a:visited {
    color: var(--footer-clr);
}

footer ul {
    margin: var(--gap-5) 0;
    list-style: none;
    line-height: 2.6;
    font-family: var(--alt-font);
    font-size: 1.2rem;
    border-left: 2px solid var(--ul-border-clr);
    padding: 0 0 0 var(--gap-5);
}

footer .nav-link {
    display: inline-block;
    text-align: left;
}

#up::after {
    display: inline;
    content: "  ⤒";
    font-size: .8rem;
    text-decoration: none;
}

.footer-logo {
    position: absolute;
    right: var(--gap-5);
    bottom: var(--gap-6);
}

.footer-logo a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: transparent;
}

.footer-logo svg {
    height: var(--gap-7);
    width: auto;
    overflow: visible;
    background: none;
}

footer figure a:hover,
footer figure a:visited,
footer figure a:visited:hover,
footer figure a:focus-visible,
footer figure a:visited:focus-visible {
    background-color: transparent;
    color: transparent;
}

footer address {
    --teal: var(--dear);
}

/* ===== Media queries ===== */

@media (prefers-color-scheme: dark) {
    circle {
        fill-opacity: .1;
    }

    .enkel img {
        filter: brightness(85%);
    }
}

@media (min-width:45em) {
    :root {
        --section-a-bkg: var(--body-bkg);
        --fs-title: clamp(1.9rem, 4vw, 2.1rem);
    }

    body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto auto;
        grid-template-areas:
            "header header"
            "about  photo"
            "about  enkel"
            "footer footer";
        margin: 0 auto;
    }

    header {
        grid-area: header;
        flex-direction: row;
        justify-content: space-between;
        padding: var(--gap-4) 0;
    }

    address {
        justify-content: flex-start;
        margin: 0 0 var(--gap-2) 0;
        max-width: 24rem;
        min-width: 22rem;
    }

    main {
        display: contents;
    }

    .brand {
        width: 50%;
        padding: var(--gap-6) 0 var(--gap-6) var(--gap-6);
        justify-content: flex-start;
    }

    .intro {
        text-align: left;
        width: 50%;
        padding: var(--gap-1) 0 0;
    }

    .about {
        grid-area: about;
        padding: var(--gap-5) var(--gap-6);
        border-radius: var(--radius-large) 0 0 0;
        text-align: left;
    }

    .highlight {
        margin: 0 calc(-1*(var(--gap-6))) var(--gap-4);
        padding: var(--gap-5) var(--gap-6) 0.1rem;
    }

    .about .nav-link {
        text-align: left;
        margin: calc((var(--gap-5))*-1) calc((var(--gap-6))*-1) var(--gap-5);
        padding: var(--gap-2) var(--gap-6) var(--gap-4);
        border-radius: var(--radius-large) 0 0 0;
    }

    .photo {
        grid-area: photo;
    }

    figure.photo address {
        text-align: center;
        padding: 0 var(--gap-3);
    }

    .cta.glass {
        border: 1px solid var(--cta-left-lite);
    }


    .enkel {
        grid-area: enkel;
        padding: var(--gap-5) var(--gap-6);
        text-align: left;
    }

    .enkel .photo img,
    .about .photo img {
        width: calc(100% + var(--gap-6) * 2);
        margin: var(--gap-2) calc(var(--gap-6) * -1);
    }

    .about .photo img {
        margin-top: 0;
    }

    .nav-link {
        text-align: left;
        margin-bottom: var(--gap-2);
    }

    footer {
        grid-area: footer;
        padding: var(--gap-7) var(--gap-6);
        text-align: left;
    }

    .divider {
        margin: 0 calc(var(--gap-6) * -1) var(--gap-5);
    }

    footer small {
        display: block;
        width: auto;
        text-align: left;
    }

    .footer-logo {
        right: var(--gap-6);
        bottom: var(--gap-7);
    }

    .footer-logo svg {
        height: var(--gap-7);
    }
}

@media (min-width:75em) {
    body {
        width: min(62vw, 75em);
        margin: 0 auto;
        grid-template-rows: auto 1fr auto auto;
    }

    header {
        padding: var(--gap-5) 0 var(--gap-4);
    }

    footer {
        padding: var(--gap-7) 0;
    }

    .divider {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        width: 100dvw;
        margin: 0 0 var(--gap-7);
    }

    .footer-logo {
        right: 0;
    }

    .footer-logo svg {
        width: 4.2rem;
        height: auto;
    }
}

@media (max-width:320px) {

    .about,
    .enkel,
    footer {
        padding: var(--gap-2) var(--gap-4);
    }

    .highlight {
        margin: 0 calc(-1*(var(--gap-4))) var(--gap-4);
        padding: var(--gap-5) var(--gap-4) 0.1rem;
    }

    #topLogo {
        height: 3rem;
    }

    h1 span:first-child {
        font-size: 0.8em;
    }

    h1 span:last-child {
        font-size: 0.79em;
    }

    footer a,
    footer ul {
        font-size: var(--font-xs);
    }

    .pill {
        margin: 0;
        font-size: var(--font-xs);
    }

    .about .nav-link {
        background-color: transparent;
        margin: var(--gap-3) 0;
        text-align: center;
        height: 44px;
        line-height: 44px;
    }

    .divider {
        margin: 0;
    }

    .enkel .photo img,
    .about .photo img {
        width: calc(100% + (var(--gap-4) * 2));
        height: auto;
        margin: var(--gap-5) calc(var(--gap-4) * -1);
    }

    .footer-logo {
        bottom: var(--gap-2);
    }
}

/* by Erik Jansson, updated 2026-01-05 */