/**
 * hana+nils · Büro für Gestaltung
 * https://hananils.de · buero@hananils.de
 */

:root {
    --text-font: 'Ludwig', -apple-system, Helvetica, Arial, sans-serif;

    --text-weight-thin: 100;
    --text-weight-light: 200;
    --text-weight-blond: 300;
    --text-weight-normal: 400;
    --text-weight-semibold: 500;
    --text-weight-bold: 600;
    --text-weight-black: 700;
    --text-weight-extrablack: 800;

    /* standard settings without suffix */
    --text-weight: var(--text-weight-light);

    --text-size-1: 11.2rem;
    --text-size-2: 6rem;
    --text-size-3: 4.5rem;
    --text-size-4: 3.1rem;
    --text-size-5: 2.6rem;
    --text-size-6: 2.1rem;
    --text-size-7: 1.7rem;
    --text-size-8: 1.4rem;

    /* @todo: line-heights incomplete – copied from old site, might need adjusting! */
    /* --text-line-1: 10rem;  – descenders/ascenders touch! */
    --text-line-1: 11rem;
    /* --text-line-2: 5.4rem; – descenders/ascenders touch! */
    --text-line-2: 6rem;
    --text-line-3: 4.5rem;
    --text-line-4: 3.8rem;
    --text-line-5: 3.8rem;
    --text-line-6: 3.4rem;
    --text-line-7: 2.72rem;
    --text-line-8: 2.3rem;

    /* standard settings for standard/body text without suffix */
    --text-size: var(--text-size-6);
    --text-line: var(--text-line-6);

    /* "speaking" settings for additional copy text sizes */
    --text-size-lead: var(--text-size-5);
    --text-line-lead: var(--text-line-5);
    --text-size-small: var(--text-size-7);
    --text-line-small: var(--text-line-7);
    --text-size-fine: var(--text-size-8);
    --text-line-fine: var(--text-line-8);

    /**
     * T-shirt sizes
     * inspired by Utopia Fluid Spaces
     */

    /* set S as base for the calculation of all other sizes: */

    --space-3xs: calc(var(--space-s) * 0.25); /* 0.425rem */
    --space-2xs: calc(var(--space-s) * 0.5); /* 0.85rem */
    --space-xs: calc(var(--space-s) * 0.75); /* 1.275rem */
    --space-s: calc(var(--text-line) / 2); /* 1.7rem */
    --space-m: calc(var(--space-s) * 1.5); /* 2.55rem */
    --space-l: calc(var(--space-s) * 2); /* 3.4rem */
    --space-xl: calc(var(--space-s) * 3); /* 5.1rem */
    --space-2xl: calc(var(--space-s) * 4); /* 6.8rem */
    --space-3xl: calc(var(--space-s) * 6); /* 10.2rem */

    /* shorthand for THE common space, to be defined: */
    /* --space: var(--space-); */
}

body,
input,
select,
button {
    font-family: var(--text-font);
    font-size: var(--text-size);
    font-weight: var(--text-weight);
}

a {
    color: inherit;
}

/**
 * Font
 */

/* Thin */

@font-face {
    src: url('../fonts/Ludwig-Thin.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 100;
    font-style: normal;
}

/* Light */

@font-face {
    src: url('../fonts/Ludwig-Light.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 200;
    font-style: normal;
}

/* Light Italic */

@font-face {
    src: url('../fonts/Ludwig-LightItalic.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 200;
    font-style: italic;
}

/* Blond */

@font-face {
    src: url('../fonts/Ludwig-Blond.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 300;
    font-style: normal;
}

/* Blond Italic */

@font-face {
    src: url('../fonts/Ludwig-BlondItalic.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 300;
    font-style: italic;
}

/* Regular */

@font-face {
    src: url('../fonts/Ludwig-Normal.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 400;
    font-style: normal;
}

/* Regular Italic */

@font-face {
    src: url('../fonts/Ludwig-NormalItalic.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 400;
    font-style: italic;
}

/* Semi-Bold */

@font-face {
    src: url('../fonts/Ludwig-SemiBold.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 500;
    font-style: normal;
}

/* Semi-Bold Italic */

@font-face {
    src: url('../fonts/Ludwig-SemiBoldItalic.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 500;
    font-style: italic;
}

/* Bold */

@font-face {
    src: url('../fonts/Ludwig-Bold.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 600;
    font-style: normal;
}

/* Bold Italic */

@font-face {
    src: url('../fonts/Ludwig-BoldItalic.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 600;
    font-style: italic;
}

/* Black */

@font-face {
    src: url('../fonts/Ludwig-Black.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 700;
    font-style: normal;
}

/* Extra Black */

@font-face {
    src: url('../fonts/Ludwig-ExtraBlack.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 800;
    font-style: normal;
}

/* Extra Black Italic */

@font-face {
    src: url('../fonts/Ludwig-ExtraBlackItalic.woff') format('woff');
    font-family: 'Ludwig';
    font-weight: 800;
    font-style: italic;
}

/* Secondary content styling (aside) */

.content .secondary {
    font-size: var(--text-size-small);
    line-height: var(--text-line-small);
}

/* Headlines */

/* Weight */

h2,
h3,
h4,
h5 {
    font-weight: var(--text-weight-extrablack);
}

h6 {
    font-weight: var(--text-weight-bold);
}

/* Size, line height, whitepsace */

h2 {
    font-size: var(--text-size-3);
    line-height: var(--text-line-3);
}

@media (min-width: 600px) {
    h2 {
        font-size: var(--text-size-2);
        line-height: var(--text-line-2);
    }
}

.content h2 {
    margin-top: 6.8rem;
    margin-bottom: 3.4rem;
}

.content .secondary h2 {
    margin-top: 0.85rem;
    margin-bottom: 0;
    font-size: var(--text-size-6);
    line-height: var(--text-line-6);
}

h3 {
    font-size: var(--text-size-4);
    line-height: var(--text-line-4);
}

@media (min-width: 600px) {
    h3 {
        font-size: var(--text-size-3);
        line-height: var(--text-line-3);
    }
}

.content h3 {
    margin-top: 5.1rem;
    margin-bottom: 2.55rem;
}

.content .secondary h3 {
    margin-top: 1.7rem;
    margin-bottom: 0;
    font-size: var(--text-size-small);
    font-weight: var(--text-weight-bold);
    font-variant: small-caps;
    line-height: var(--text-line-small);
    letter-spacing: 0.05rem;
    text-transform: lowercase;
    /* relics from the current site, I think we don't need these anymore: */
    /* margin-bottom: -0.1rem; */
    /* This fixes the baseline alignment: */
    /* padding-top: 0.1rem; */
}

h4 {
    font-size: var(--text-size-5);
    line-height: var(--text-line-5);
}

@media (min-width: 600px) {
    h4 {
        font-size: var(--text-size-4);
        line-height: var(--text-line-4);
    }
}

.with-compact-headlines h2 {
    font-size: var(--text-size-4);
    line-height: var(--text-line-4);
}

.content h4,
.with-compact-headlines h2 {
    margin-top: 3.4rem;
    margin-bottom: 1.7rem;
}

h5,
.with-compact-headlines h3 {
    font-size: var(--text-size-5);
    line-height: var(--text-line-5);
}

.content h5,
.with-compact-headlines h3 {
    margin-top: 2.55rem;
    margin-bottom: 1.7rem;
}

h6,
.with-compact-headlines h4,
.with-compact-headlines h5,
.with-compact-headlines h6 {
    font-size: var(--text-size-6);
    line-height: var(--text-line-6);
}

.content h6,
.with-compact-headlines h4,
.with-compact-headlines h5,
.with-compact-headlines h6 {
    margin-top: 0.85rem;
}

cite {
    font-style: normal;
}

.content a {
    overflow-wrap: break-word;
    text-decoration: underline;
    text-decoration-color: var(--color-subtle);
    text-decoration-thickness: 0.1rem;
    text-underline-offset: 0.15em;
}

.content a:hover {
    text-decoration-color: var(--color-underline);
}

em .moved-punctuation {
    font-style: normal;
}

a > .moved-punctuation {
    display: inline-block;
    text-decoration: none;
}

/* PLANT style */

em abbr {
    font-weight: 200;
    font-style: normal;
    letter-spacing: 0.05em;
}