@font-face {
    font-family: "Olivia Sans";
    src: url("https://pjonori.com/OliviaSansVF.ttf")
        format("truetype-variations");
    font-weight: 400 700;
}

@font-face {
    font-family: "Gianna Serif";
    src: url("https://pjonori.com/GiannaSerifVF.ttf")
        format("truetype-variations");
    font-weight: 400 700;
}

:root {
    /*Color*/
    color-scheme: light dark;

    --color-black: light-dark(#000, #000);

    --gray-0: light-dark(#fff, #000);
    --gray-100: light-dark(#fafafa, #1a1a1a);
    --gray-200: light-dark(#efefef, #292929);
    --gray-300: light-dark(#6c6c6c, #909090);
    --gray-400: light-dark(#333, #efefef);
    --gray-500: light-dark(#000, #fff);

    --color-overlay: light-dark(
        rgba(255, 255, 255, 0.8),
        rgba(0, 0, 0, 0.8)
    ); /* FIX */
    --color-nav-hover: light-dark(
        rgba(0, 0, 0, 0.1),
        rgba(255, 255, 255, 0.1)
    ); /* FIX */

    /*Spacing*/
    --space-0: 0.5em;
    --space-100: 1em;
    --space-200: 1.33em;
    --space-300: 1.77em;
    --space-400: 2.35em;
    --space-500: 3.13em;
    --space-600: 4.16em;
    --space-700: 10em;

    --space-minor-400: 0.33em;
    --space-minor-300: 0.22em;
    --space-minor-200: 0.15em;
    --space-minor-100: 0.1em;
    --space-minor-0: 0.065em;

    /*Border radius*/

    /*Typography*/
    --font-family-serif: "Gianna Serif", serif;
    --font-family-sans: "Olivia Sans", sans-serif;
    --font-family-serif-system: "Hoefler Text", "Noto", "Georgia", serif;
    --font-family-sans-system: system-ui, -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", "Segoe UI", "Roboto", sans-serif;
    --font-family-mono: monospace;
    /* FIX */

    --font-size-base: clamp(15px, 2.25vw, 20px);
    --font-size-0: 0.67em;
    --font-size-100: 0.8em;
    --font-size-200: 1em;
    --font-size-300: 1.2em;
    --font-size-400: 1.44em;
    --font-size-500: 1.73em;
    --font-size-600: 2.07em;
    --font-size-700: 2.48em;
    --font-size-800: 3.3em;

    --font-weight-0: 400;
    --font-weight-100: 450;
    --font-weight-200: 520;
    --font-weight-300: 650;

    --font-line-height-line: 1.15;
    --font-letter-spacing-line: -0.002em;
    --font-line-height-block: 1.5;

    /* Opacity */
    --opacity-0: 0.1;
    --opacity-100: 0.23;
    --opacity-200: 0.33;
    --opacity-300: 0.57;
    --opacity-400: 0.9;

    /* Shadow */
    --shadow-0: 0 0 var(--space-0) rgba(0, 0, 0, var(--opacity-0));
    --shadow-100: 0 0 var(--space-100) rgba(0, 0, 0, var(--opacity-100));
    --shadow-200: 0 0 var(--space-300) rgba(0, 0, 0, var(--opacity-200));

    /* Time */
    --time-0: 200ms;
    --time-100: 300ms;
    --time-200: 600ms;

    /* Easing */
    --quad: cubic-bezier(0.45, 0, 0.55, 1);

    /*
    ------------------------------------
    Semantic
    ------------------------------------
    */

    /* Color */
    --color-background-deemphasized: var(--gray-0);
    --color-background: var(--gray-100);
    --color-background-emphasized: var(--gray-200);

    --color-text-deemphasized: var(--gray-300);
    --color-text: var(--gray-400);
    --color-text-emphasized: var(--gray-500);

    /* Font weight */
    --font-size-deemphasized: var(--font-size-100);
    --font-size: var(--font-size-200);
    --font-size-emphasized: var(--font-size-400);
    --font-size-accentuated: var(--font-size-600);
    --font-size-display: var(--font-size-800);

    /* Font weight */

    --font-weight-light: var(--font-weight-0);
    --font-weight-regular: var(--font-weight-100);
    --font-weight-emphasized: var(--font-weight-200);
    --font-weight-bold: var(--font-weight-300);

    /* Border */
    --border-deemphasized: var(--gray-200) solid var(--space-minor-0);
    --border-default: var(--gray-200) solid var(--space-minor-200);
    --border-emphasized: var(--gray-200) solid var(--space-minor-300);
    --border-overlay: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
    /* fix */

    /* Border radius */
    --border-radius-tight: var(--space-minor-100);
    --border-radius-default: var(--space-minor-300);
    --border-radius-loose: var(--space-0);
    --border-radius-looser: var(--space-100); /* FIX NAME */

    /* Blur */
    --blur-deemphasized: blur(4px);
    --blur: blur(8px);
    --blur-emphasized: blur(16px);

    /* Transition */

    --transition-deemphasized: var(--time-0) var(--quad);
    --transition: var(--time-100) var(--quad);
    --transition-emphasized: var(--time-200) var(--quad);

    --transition-deemphasized-delayed: var(--time-0) var(--quad) var(--time-100);
    --transition-emphasized-delayed: var(--time-100) var(--quad) var(--time-100);

    /* Layout */

    --layout-width: 60ch;
    --layout-width-min: min(100%, 320px);
    --layout-width-inset-relative: 62%;

    --layout-width-full-inset: calc(100vw - var(--space-600));

    /*
    ------------------------------------
    Component
    ------------------------------------
    */

    --body-padding: var(--space-400);
    --color-body-background: var(--color-background);
    --color-code-background: var(--color-black);
    --color-image-background: var(--color-background-deemphasized);
    --color-container-background: var(--color-background-emphasized);

    --color-tabs-border: var(--color-text);
    --color-footer-text: var(--color-text-deemphasized);

    /* TYPOGRAPHY */

    --heading-font-family: var(--font-family-sans);
    --heading-font-weight: var(--font-weight-emphasized);
    --heading-letter-spacing: var(--font-letter-spacing-line);
    --heading-line-height: var(--font-line-height-line);
    --heading-margin: var(--space-400) 0 var(--space-100) 0;

    --heading-1-font-size: var(--font-size-700);
    --heading-2-font-size: var(--font-size-600);
    --heading-3-font-size: var(--font-size-500);
    --heading-4-font-size: var(--font-size-400);
    --heading-5-font-size: var(--font-size-300);
    --heading-6-font-size: var(--font-size-200);

    --heading__link-transition: text-decoration-color var(--time-100);

    --paragraph-font-size: var(--font-size-200);
    --paragraphy-font-weight: var(--font-weight-regular);
    --paragraph-margin: var(--space-300) 0;

    --link-underline-thickness: var(--space-minor-0);
    --link-underline-offset: var(--space-minor-100);

    --blockquote-padding: 0 var(--space-300);
    --blockquote-border: var(--border-emphasized);
    --blockquote-font-size: var(--font-size-300);
    --blockquote-margin: var(--space-400) 0;

    --type-muted-font-weight: var(--font-weight-300);
    --type-muted-font-size: var(--font-size-0);
    --type-muted-letter-spacing: var(--space-minor-0);

    --color-type-muted: var(--color-text-deemphasized);

    /* HEADER */

    --header-font-family: var(--font-family-sans);
    --header-font-weight: var(--font-weight-emphasized);
    --header-font-size: var(--font-size-100);
    --header-color: var(--color-text);
    --header-height: var(--space-500);
    --header-width: calc(100% + var(--body-padding) * 2);
    --header-padding: var(--space-400);
    --header-margin: calc(var(--space-400) * -1);
    --header-margin-bottom: var(--space-300);

    --header__items-gap: var(--space-100);
    --header__back-size: var(--space-100);

    /* LAYOUT */

    --stack-gap: var(--space-100);

    --section-margin: var(--space-300) 0;
    --section-isolated-margin: var(--space-600) 0;
    --section-accentuated-margin: var(--space-700) 0;

    --grid-columns: repeat(auto-fit, minmax(300px, 1fr));
    --grid-gap: var(--space-300);

    --layout__full-width: var(--layout-width-full-inset); /* FIX */
    --layout__full-left: calc(
        var(--layout-width-full-inset) * -0.5 + min(var(--layout-width), 100%) *
            0.5
    );
    /* FIX */

    /* TABS */

    --tabs-gap: var(--space-200);
    --tabs-font-family: var(--font-family-sans);
    --tabs-font-size: var(--font-size-200);

    --tabs__item-padding: var(--space-0) 0;
    --tabs__item-font-weight: var(--font-weight-emphasized);
    --tabs__item-underline-height: var(--space-minor-200);
    --tabs__item-underline-bottom: calc(var(--space-minor-300) * -1);
    --tabs__item-underline-width: max(20px, 25%);
    /* FIX */

    /* FOOTER */

    --footer-font-family: var(--font-family-sans);
    --footer-font-weight: var(--font-weight-emphasized);
    --footer-font-size: var(--font-size-100);
    --footer-width: calc(100% + var(--body-padding) * 2);
    --footer-padding: var(--space-400);
    --footer-margin: calc(var(--space-400) * -1);
    --footer-margin-top: var(--space-700);
    --footer-border: var(--border-default);

    --footer__links-margin: var(--space-600);
    --footer__links-gap: var(--space-minor-400);

    --footer__link-width: min(200px, 100%);
    --footer__link-padding: var(--space-minor-400) 0;

    /* NAVIGATION */

    --nav-gap: var(--space-200);
    --nav-font-size: var(--font-size-200);
    --nav-font-family: var(--font-family-sans);
    --nav-font-weight: var(--font-weight-emphasized);
    --nav-line-height: var(--font-line-height-line);

    --nav__item-transition: var(--transition-deemphasized-delayed);

    --nav__item-underline-height: var(--space-minor-100);
    --nav__item-underline-width: var(--space-500);
    --nav__item-underline-bottom: calc(var(--space-minor-300) * -1);
    --nav__item-underline-left: calc(var(--space-0) * -1);

    --nav-vertical-gap: var(--space-500);
    --nav-vertical__item-padding: calc(var(--space-0) / 2) 0;
    /*FIX*/

    --nav-large-font-size: var(--font-size-600);

    --color-nav-unselected: var(--color-text-deemphasized);
    --color-nav-selected: var(--color-text-emphasized);

    --color-nav-underline: var(--color-text-emphasized);
    /* FIX */

    /* CODE */

    --code-border-radius: var(--border-radius-default);
    --code-padding: 0 var(--space-minor-300);
    --code-font-size: var(--font-size-100);

    --code__block-padding: var(--space-400);

    --color-code-background: var(--color-black);
    --color-code-text: var(--color-text);

    /* CONTAINERS */

    --container-padding: var(--space-100) var(--space-200);
    --container-border-radius: var(--border-radius-loose);

    --container-inset-width: var(--layout-width-inset-relative);
    --container-inset-min-width: var(--layout-width-min);

    --container-system-font-family: var(--font-family-sans);

    --color-container--significant: var(--color-background-emphasized);

    /* CARDS */
    --card-padding: var(--space-100);
    --card-border-radius: var(--border-radius-loose);

    --card__title-padding: var(--space-100);
    --card__title-font-family: var(--font-family-sans);
    --card__title-font-size: var(--font-size-100);
    --card__title-font-weight: var(--font-weight-emphasized);

    --card-transition-duration: var(--transition);
    /* SEM */

    --color-card-background: var(--color-background-emphasized);
    --color-card-background-hover: color-mix(
        in srgb,
        var(--gray-200) 90%,
        var(--gray-300)
    );
    /* SEM */

    /* TABLES */

    --table-font-family: var(--font-family-sans);
    --table-font-size: var(--font-size-100);
    --table-border: var(--border-default);
    --table-border-radius: var(--border-radius-default);
    --table-border-spacing: var(--space-0);

    --table__header-border: var(--border-deemphasized);
    --table__header-font-weight: var(--font-weight-emphasized);

    --table__row-background-hover: var(--color-text); /* FIX */
    --table__row-background-text: var(--color-background); /* FIX */

    --table__cell-padding: var(--space-minor-300) var(--space-500)
        var(--space-minor-300) var(--space-0);

    --table__cell-border-radius: var(--border-radius-tight);

    --color-table-border: var(--gray-300);

    /* IMAGES */

    --figure-background: var(--color-background-emphasized);
    --image-shadow: var(--shadow-0);
    --image-border-radius: var(--border-radius-default);

    --image__caption-font-size: var(--font-size-0);
    --image__caption-font-weight: var(--font-weight-200);

    --image__caption-line-height: var(--font-line-height-line);
    --image__caption-margin: var(--space-100) 0 var(--space-300) 0;

    --layout-image-width: var(--layout-width-full-inset);

    --layout-image-max-width: var(--layout-width-full-inset);

    --layout-image-left: calc(
        var(--layout-width-full-inset) * -0.5 + min(var(--layout-width), 100%) *
            0.5
    );

    --layout-image-max-height: calc(100vh - var(--space-400));

    --color-image__caption: var(--color-text-deemphasized);

    /* POPOVERS */

    --popover-padding: var(--space-400);
    --popover-background: var(--color-overlay);
    /* FIX */
    --popover-background-blur: var(--blur);

    --popover__hide-top: var(--space-100);
    --popover__hide-right: var(--space-100);
    --popover__hide-font-size: var(--font-size-400);

    --popover__hide-size: var(--space-300);
    --popover__hide-border-radius: var(--border-radius-tight);

    --popover__layout-width: var(--layout-width);

    --color-popover__hide-background: var(--color-background-emphasized);

    /* VIDEO */

    --video-shadow: var(--shadow-0);

    /* MOBILE SCREEN */
    --mobile-screen-border-radius: var(--border-radius-looser);
    --mobile-screen-max-height: 80vh;
    --mobile-screen-min-height: 300px;

    --mobile-screen-aspect-ratio: 886/1920;
    --mobile-screen-shadow: var(--shadow-100);

    /* DATAPOINTS */

    --datapoint-font-family: var(--font-family-sans);
    --datapoint-line-height: var(--font-line-height-line);

    --datapoint__title-font-size: var(--font-size-100);
    --datapoint__title-font-weight: var(--font-weight-bold);
    --datapoint__title-margin: 0 0 var(--space-0) 0;

    --datapoint__data-font-size: var(--font-size-800);

    --datapoint__trend-font-size: var(--font-size-800);
    --datapoint__trend-font-weight: var(--font-weight-emphasized);
    --datapoint__trend-margin: var(--space--minor-300) 0 0 0;

    --color-datapoint__trend: var(--color-text-deemphasized);

    /* BREADCRUMBS */

    --breadcrumb-color: var(--color-text-deemphasized);
    --breadcrum-margin: 0 var(--space-0);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: only dark;
        /*
        --gray-0: #000;
        --gray-100: #1a1a1a;
        --gray-200: #333;
        --gray-300: #878787;
        --gray-400: #efefef;
        --gray-500: #fff;

        --color-overlay: rgba(0, 0, 0, 0.9);
        --color-nav-hover: rgba(255, 255, 255, 0.1);

        --color-background-deemphasized: var(--gray-0);
        --color-background: var(--gray-100);
        --color-background-emphasized: var(--gray-200);

        --color-text-deemphasized: var(--gray-300);
        --color-text: var(--gray-400);
        --color-text-emphasized: var(--gray-500);
        */
    }
}

@view-transition {
    navigation: auto;
}

/* Create a custom animation */
@keyframes move-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes move-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
    animation: 0.3s ease-in both move-out; /* FIX */
}

::view-transition-new(root) {
    animation: 0.3s ease-in both move-in 0.4s; /* FIX */
}

.light {
    /* forces light color-scheme */
    color-scheme: only light;
}

.dark,
.color-dark {
    /* forces dark color-scheme */
    color-scheme: only dark;
}

button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

html {
    font-size: var(--font-size-base);
    padding: 0;
    overflow-x: hidden;
}

body.color-dark,
body.color-dark * {
}

body {
    font-family: var(--font-family-serif);
    background: var(--color-body-background);
    color: var(--color-text);
    padding: var(--body-padding);
    position: relative;
    margin: 0;
    line-height: var(--font-line-height-block);
    font-synthesis: none;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    font-weight: var(--paragraphy-font-weight);
}

hr {
    border: 0;
    border-top: var(--border-deemphasized);
    margin: var(--space-400) 0;
}

ul,
ol {
    padding-left: var(--space-100);
}

/*
 * ---------------------------
 * TYPOGRAPHY
 * ---------------------------
*/

em {
    font-variation-settings: "ital" 10;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    display: block;
    letter-spacing: var(--heading-letter-spacing);
    line-height: var(--heading-line-height);
    text-wrap: balance;
    margin: var(--heading-margin);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    text-decoration-color: transparent;
    transition: var(--heading__link-transition);
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    text-decoration-color: inherit;
}

h1 {
    font-size: var(--heading-1-font-size);
}

h2 {
    font-size: var(--heading-2-font-size);
}

h3 {
    font-size: var(--heading-3-font-size);
}

h4 {
    font-size: var(--heading-4-font-size);
}

h5 {
    font-size: var(--heading-5-font-size);
}

h6 {
    font-size: var(--heading-6-font-size);
}

h1 small,
h2 small,
h3 small,
h4 small {
    display: block;
    font-size: 0.8rem;
    margin-top: var(--space-0);
}

p {
    font-size: var(--paragraph-font-size);
    text-wrap: pretty;
    margin: var(--paragraph-margin);
}

a {
    color: inherit;
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: var(--link-underline-offset);
}

.type-muted {
    text-transform: uppercase;
    font-weight: var(--type-muted-font-weight);
    font-size: var(--type-muted-font-size);
    letter-spacing: var(--type-muted-letter-spacing);
    color: var(--color-type-muted);
}

.headline {
    font-family: var(--font-family-sans);
}

.type-emphasized {
    font-size: var(--font-size-emphasized);
}

.type-accentuated {
    font-size: var(--font-size-accentuated);
}

.type-centered {
    text-align: center;
}

strong {
    font-weight: var(--font-weight-bold);
}

blockquote {
    display: block;
    padding: var(--blockquote-padding);
    border: var(--blockquote-border);
    border-left: 0;
    border-right: 0;
    font-size: var(--blockquote-font-size);
    margin: var(--blockquote-margin);
}

/*
 * ---------------------------
 * HEADER
 * ---------------------------
*/

.header {
    font-family: var(--header-font-family);
    font-weight: var(--header-font-weight);
    font-size: var(--header-font-size);
    display: flex;
    height: var(--header-height);
    width: var(--header-width);
    max-width: 100vw;
    padding: var(--header-padding);
    box-sizing: border-box;
    margin: var(--header-margin);
    margin-bottom: var(--header-margin-bottom);
}

.header a {
    text-decoration: none;
}

.header > * {
    flex-grow: 1;
}

.header__primary,
.header__secondary {
    display: flex;
    align-items: center;
    gap: var(--header__items-gap);
}

.header__secondary {
    justify-content: end;
}

.header__primary__back {
    display: inline-block;
    width: var(--header__back-size);
    height: var(--header__back-size);
    aspect-ratio: 1/1;
    color: transparent;
    user-select: none;
    position: relative;
    visibility: hidden;
}

.header__primary__title {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.header__primary__back:before {
    /* FIX - this needs to be a minimum tappable area*/
    visibility: visible;
    content: "‹";
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--header-color);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/*
 * ---------------------------
 * LAYOUT
 * ---------------------------
*/

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
}

.stack-horizontal {
    flex-direction: row;
}

section,
article {
    margin: var(--section-margin);
}

section.space--isolated {
    margin: var(--section-isolated-margin);
}

section.space--accentuated,
article.space--accentuated {
    margin: var(--section-accentuated-margin);
}

.grid {
    display: grid;
    grid-template-columns: var(--grid-columns);
    gap: var(--grid-gap);
    margin: 0 auto;
}

.layout {
    width: var(--layout-width);
    min-width: var(--layout-min-width);
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.layout__full {
    width: var(--layout__full-width);
    left: var(--layout__full-left);
    position: relative;
}

/*
 * ---------------------------
 * TABS
 * ---------------------------
*/

.tabs {
    display: inline-flex;
    gap: var(--tabs-gap);
    font-family: var(--tabs-font-family);
    font-size: var(--tabs-font-size);
    padding: 0;
    max-width: 100%;
    user-select: none;
}

.tabs a {
    text-decoration: none;
    font-weight: inherit;
}

.tabs li {
    display: inline-block;
    padding: var(--tabs__item-padding) 0;
    position: relative;
    font-weight: var(--tabs__item-font-weight);
}

.tabs li:before {
    content: "";
    display: block;
    height: var(--tabs__item-underline-height);
    border-radius: calc(var(--tabs__item-underline-height) / 2);
    background: var(--color-tabs-border);
    bottom: var(--tabs__item-underline-bottom);
    position: absolute;
    width: var(--tabs__item-underline-width);
}

.tabs li:has(a) {
    border-color: transparent;
}

.tabs li:has(a):before {
    display: none;
}

/*
 * ---------------------------
 * FOOTER
 * ---------------------------
*/

footer {
    font-family: var(--footer-font-family);
    font-weight: var(--footer-font-weight);
    font-size: var(--footer-font-size);
    color: var(--color-footer-text);
    width: var(--footer-width);
    max-width: 100vw;
    padding: var(--footer-padding);
    box-sizing: border-box;
    margin: var(--footer-margin);
    margin-top: var(--footer-margin-top);
    border-top: var(--border-default);
}

.footer__primary,
.footer__secondary {
    display: flex;
    gap: var(--space-100);
}

footer ul {
    margin-top: var(--footer__links-margin);
    min-width: 100%;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

footer li {
    max-width: 100%;
    width: var(--footer__link-width);
}

footer ul a {
    display: block;
    padding: var(--footer__link-padding);
    box-sizing: border-box;
}

/*
 * ---------------------------
 * NAVIGATION
 * ---------------------------
*/

nav,
.navigation {
    display: flex;
    gap: var(--nav-gap);
    font-size: var(--nav-font-size);
    font-family: var(--nav-font-family);
}

nav a,
.navigation a {
    text-decoration: none;
    font-weight: var(--nav-font-weight);
    line-height: var(--nav-line-height);
}

.navigation--vertical {
    flex-direction: column;
    width: 100%;
    gap: var(--nav-vertical-gap);
}

.navigation--vertical:has(a:hover) :not(:hover) {
    color: var(--color-nav-unselected);
}

.navigation--vertical a {
    padding: var(--nav-vertical__item-padding);
    display: flex;
    transition: color var(--transition-emphasized-delayed);
    position: relative;
}

.navigation--vertical a:hover {
    color: var(--color-nav-selected);
}

.navigation--vertical a:before {
    content: "";
    display: block;
    width: 0;
    height: var(--nav__item-underline-height);
    border-radius: calc(var(--nav__item-underline-height) / 2);
    background: transparent;
    background: var(--color-nav-underline);
    position: absolute;
    transition: var(--nav__item-transition);
    bottom: var(--nav__item-underline-bottom);
    left: var(--nav__item-underline-left);
}

.navigation--vertical a:hover:before {
    width: var(--nav__item-underline-width);
    background: var(--color-nav-underline);
    left: 0;
}

.navigation--large a {
    font-size: var(--nav-large-font-size);
}

/*
 * ---------------------------
 * CODE
 * ---------------------------
*/

code {
    background: var(--color-code-background);
    color: var(--color-code-text);
    font-family: var(--font-family-mono);
    display: inline-block;
    border-radius: var(--code-border-radius);
    display: inline-block;
    padding: var(--code-padding);
    font-size: var(--font-size-100);
}

pre {
    white-space: -moz-pre-wrap;
    /* Mozilla */
    white-space: -hp-pre-wrap;
    /* HP printers */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: pre-wrap;
    /* CSS 2.1 */
    word-wrap: break-word;
    /* IE */
    word-break: break-all;
    margin: 0 auto;
    display: block;
    font-family: inherit;
}

pre code {
    padding: var(--code__block-padding);
    display: block;
}

/*
 * ---------------------------
 * CONTAINERS
 * ---------------------------
*/

.container {
    padding: var(--container-padding);
    border-radius: var(--container-border-radius);
    box-sizing: border-box;
}

.container--significant {
    background: var(--color-container--significant);
}

.container--inset {
    margin: 0 auto;
    width: var(--container-inset-width);
    min-width: var(--container-inset-min-width);
    max-width: 100%;
}

.container--system {
    font-family: var(--container-system-font-family);
}

/*
 * ---------------------------
 * SCREEN
 * ---------------------------
*/

.screen {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
}

.screen--centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
 * ---------------------------
 * CARDS
 * ---------------------------
*/

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-card-background);
    text-decoration: none;
    overflow: hidden;
    border-radius: var(--card-border-radius);
}

.card__image {
    max-width: 100%;
    width: 100%;
    flex-grow: 1;
    height: auto;
    object-fit: contain;
}

.card__title {
    display: block;
    padding: var(--card__title-padding);
    font-family: var(--card__title-font-family);
    font-size: var(--card__title-font-size);
    font-weight: var(--card__title-font-weight);
}

a.card {
    transition: background var(--card-transition-duration);
}

a.card:hover {
    background: var(--color-card-background-hover);
}

/*
 * ---------------------------
 * TABLES
 * ---------------------------
*/

table {
    border: var(--table-border);
    font-family: var(--table-font-family);
    font-size: var(--table-font-size);
    border-radius: var(--table-border-radius);
    border-spacing: var(--table-border-spacing);
    width: 100%;
}

thead th {
    border-bottom: var(--table__header-border);
    font-weight: var(--table__header-font-weight);
}

tr:hover td {
    background: var(--table__row-background-hover);
    color: var(--table__row-background-text);
}

th,
td {
    text-align: start;
    padding: var(--table__cell-padding);
    border-radius: var(--table__cell-border-radius);
}

/*
 * ---------------------------
 * IMAGES
 * ---------------------------
*/

figure {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    flex-direction: column;
    gap: var(--space-200);
}

figure.contained {
    background: var(--figure-background);
    padding: var(--space-500); /* FIX */
}

.layout__full figcaption {
    width: var(--layout-width);
}

img,
svg,
object,
.layout img[src*="#tocontent"],
.layout object[src*="#tocontent"] {
    width: 100%;
    max-width: 100%;
    height: auto;
    left: auto;
    max-height: none;
    filter: drop-shadow(var(--image-shadow));
    border-radius: var(--image-border-radius);
}

.post img,
.post svg,
.post object,
img.full,
video.full {
    object-fit: contain;
    display: block;
    object-position: center;
    max-height: var(--layout-image-max-height);
    position: relative;
    width: var(--layout-image-width);
    max-width: var(--layout-image-max-width);
    left: var(--layout-image-left);
}

.layout__full img,
.layout__full object,
.layout__full video {
    max-height: var(--layout-image-max-height);
    object-fit: contain;
}

.post img[src*="#tosize"],
.post object[src*="#tosize"] {
    width: auto;
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    left: auto;
}

.post img[src*="fullheight"],
.post object[src*="fullheight"] {
    max-height: none;
}

img + em {
    font-size: var(--image__caption-font-size);
    font-weight: var(--image__caption-font-weight);
    line-height: var(--image__caption-line-height);
    display: block;
    margin: var(--image__caption-margin);
    color: var(--color-image__caption);
    font-style: italic;
}

/*
 * ---------------------------
 * POPOVERS
 * ---------------------------
*/

[popover]:popover-open,
[popover]:popover-open::backdrop {
    opacity: 1;
}

[popover] {
    /* Final state of the exit animation */
    opacity: 0;

    transition-property: opacity, transform, overlay, display;
    transition-duration: 0.4s; /* FIX */
    transition-behavior: allow-discrete;
    /* Using the shorthand transition property, we could write:
    transition:
      opacity 0.7s,
      transform 0.7s,
      overlay 0.7s allow-discrete,
      display 0.7s allow-discrete;

    or even:
    transition: all 0.7s allow-discrete;
  */
}

/* Needs to be included after the previous [popover]:popover-open
   rule to take effect, as the specificity is the same */
@starting-style {
    [popover]:popover-open,
    [popover]:popover-open::backdrop {
        opacity: 0;
    }
}

[popover] {
    background: none;
    border: none;
    padding: var(--popover-padding);
    position: fixed;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    /*animation: fadeIn 1s ease-in;*/ /* FIX */
}

[popover]::backdrop {
    background: var(--popover-background);
    backdrop-filter: var(--popover-background-blur);
    /*animation: fadeIn 1s ease-in;*/ /* FIX */

    opacity: 0;

    transition-property: opacity, transform, overlay, display;
    transition-duration: 0.4s; /* FIX */
    transition-behavior: allow-discrete;
}

[popovertargetaction="hide"] {
    position: fixed;
    top: 0;
    right: 0;
    visibility: hidden;
}

[popovertargetaction="hide"]:before {
    content: "×";
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--popover__hide-font-size);
    margin-top: var(--popover__hide-top);
    margin-right: var(--popover__hide-right);
    width: var(--popover__hide-size);
    height: var(--popover__hide-size);
    background: var(--color-popover__hide-background);
    border-radius: var(--popover__hide-border-radius);

    visibility: visible;
}

[popover] .layout {
    width: var(--popover__layout-width);
    min-height: 100%;
    display: flex;
    align-items: center;
}

/*
* ---------------------------
* VIDEO
* ---------------------------
*/

video {
    box-shadow: var(--video-shadow);
    max-width: 100%;
    max-height: 80vh;
}

/*
* ---------------------------
* MOBILE SCREEN
* ---------------------------
*/

video.mobile,
img.mobile,
img[src*="#mobile"] {
    max-height: var(--mobile-screen-max-height);
    min-height: var(--mobile-screen-min-height);
    width: auto;
    border-radius: var(--mobile-screen-border-radius);
    aspect-ratio: var(--mobile-screen-aspect-ratio);
    min-width: 0;
    display: block;
    margin: 0 auto;
    left: auto;
}

video.mobile {
    box-shadow: var(--mobile-screen-shadow);
}

img.mobile,
img[src*="#mobile"] {
    filter: drop-shadow(var(--mobile-screen-shadow));
}

img.mobile,
img[src*="#mobile"] {
    /* object-fit: fill;*/
}

/*
figure.contained {
    display: flex;
    background: var(--gray-300);
    padding: 1em;
    box-sizing: border-box;
    width: 100vw;
    min-width: 100%;
    min-height: 100vh;
    position: relative;
    left: calc(0.5 * 100% - 100vw / 2);
    margin-top: 2em;
    margin-bottom: 2em;
    justify-content: center;
    align-items: center;
}
*/

/*
* ---------------------------
* DATAPOINT
* ---------------------------
*/

.datapoint {
    font-family: var(--datapoint-font-family);
    padding: 0;
    margin: 0;
    line-height: var(--datapoint-line-height);
}

.datapoint dt {
    font-size: var(--datapoint__title-font-size);
    margin: var(--datapoint__title-margin);
    font-weight: var(--datapoint__title-font-weight);
}

.datapoint dd {
    font-size: var(--datapoint__data-font-size);
    margin: 0;
}

.datapoint .datapoint__trend {
    font-size: var(--font-size-100);
    margin: var(--datapoint__trend-margin);
    font-weight: var(--font-weight-emphasized);
    color: var(--color-datapoint__trend);
}

/*
* ---------------------------
* BREADCRUMBS
* ---------------------------
*/

.breadcrumb + .breadcrumb:before {
    content: "/";
    color: var(--breadcrumb-color);
    margin: var(--breadcrum-margin);
    display: inline-block;
}