/** Fonts */

@font-face {
    font-family: "leaguegothic";
    src: url("/assets/fonts/LeagueGothic-Regular.woff2") format("woff2"), url("/assets/fonts/LeagueGothic-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "lindenhill";
    src: url("/assets/fonts/LindenHill-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "lindenhill";
    src: url("/assets/fonts/LindenHill-Italic-webfont.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Raleway-Black";
    src: url(/assets/fonts/Raleway-Black.woff2) format("woff2"), url(/assets/fonts/Raleway-Black.woff) format("woff");
    font-weight: bolder;
    font-style: normal;
}

@font-face {
    font-family: "Raleway";
    src: url("/assets/fonts/Raleway-VF.woff2") format("woff2"), url("/assets/fonts/Raleway-VF.woff") format("woff");
    font-style: normal;
}

@font-face {
    font-family: "Raleway";
    src: url("/assets/fonts/Raleway-Italic-VF.woff2") format("woff2"), url("/assets/fonts/Raleway-Italic-VF.woff") format("woff");
    font-style: italic;
}

:root {
    --font-base: Raleway;
    --font-heavy: Raleway-Black;
}

/* @link https://utopia.fyi/type/calculator?c=320,16,1.25,1920,28,1.618,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --size-step--2: clamp(0.64rem, calc(0.63rem + 0.03vw), 0.67rem);
    --size-step--1: clamp(0.80rem, calc(0.74rem + 0.28vw), 1.08rem);
    --size-step-0: clamp(1.00rem, calc(0.85rem + 0.75vw), 1.75rem);
    --size-step-1: clamp(1.25rem, calc(0.93rem + 1.58vw), 2.83rem);
    --size-step-2: clamp(1.56rem, calc(0.96rem + 3.02vw), 4.58rem);
    --size-step-3: clamp(1.95rem, calc(0.86rem + 5.46vw), 7.41rem);
    --size-step-4: clamp(2.44rem, calc(0.53rem + 9.55vw), 11.99rem);
    --size-step-5: clamp(3.05rem, calc(-0.22rem + 16.35vw), 19.41rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.25,1920,28,1.618,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --space-3xs: clamp(0.25rem, calc(0.21rem + 0.19vw), 0.44rem);
    --space-2xs: clamp(0.50rem, calc(0.43rem + 0.38vw), 0.88rem);
    --space-xs: clamp(0.75rem, calc(0.64rem + 0.56vw), 1.31rem);
    --space-s: clamp(1.00rem, calc(0.85rem + 0.75vw), 1.75rem);
    --space-m: clamp(1.50rem, calc(1.28rem + 1.13vw), 2.63rem);
    --space-l: clamp(2.00rem, calc(1.70rem + 1.50vw), 3.50rem);
    --space-xl: clamp(3.00rem, calc(2.55rem + 2.25vw), 5.25rem);
    --space-2xl: clamp(4.00rem, calc(3.40rem + 3.00vw), 7.00rem);
    --space-3xl: clamp(6.00rem, calc(5.10rem + 4.50vw), 10.50rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.63vw), 0.88rem);
    --space-2xs-xs: clamp(0.50rem, calc(0.34rem + 0.81vw), 1.31rem);
    --space-xs-s: clamp(0.75rem, calc(0.55rem + 1.00vw), 1.75rem);
    --space-s-m: clamp(1.00rem, calc(0.68rem + 1.63vw), 2.63rem);
    --space-m-l: clamp(1.50rem, calc(1.10rem + 2.00vw), 3.50rem);
    --space-l-xl: clamp(2.00rem, calc(1.35rem + 3.25vw), 5.25rem);
    --space-xl-2xl: clamp(3.00rem, calc(2.20rem + 4.00vw), 7.00rem);
    --space-2xl-3xl: clamp(4.00rem, calc(2.70rem + 6.50vw), 10.50rem);

    /* Custom pairs */
    --space-s-l: clamp(1.00rem, calc(0.50rem + 2.50vw), 3.50rem);
}

/** Colors */

:root {
    --color-lightest: #fcfefc;
    --color-lighter: #f3faf4;
    --color-light: #e0f2e3;
    --color-dark: #392e73;
    --color-highlight: #bc3b21;
}

/** Base styles */

:root {
    --tracking: -0.05ch;
    --tracking-s: -0.075ch;
}

body {
    color: var(--color-dark);
    background: var(--color-lightest);
    font-family: var(--font-base);
    font-size: var(--size-step-0);
    font-feature-settings: "liga", "clig", "kern";
    line-height: 1.4;
    letter-spacing: var(--tracking);
}

h1, h2, h3 {
    line-height: 1;
    letter-spacing: var(--tracking-s);
    max-width: 20ch;
}

h1 {
    font-size: var(--size-step-3);
}

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

h3 {
    font-size: var(--size-step-1);
}

p, li {
    max-width: 50ch;
}

a {
    color: currentcolor;
}

a:hover {
    text-decoration: none;
}

a[data-attention='high'] {
    color: var(--color-highlight);
}

main {
    margin: var(--space-3xs);
}

hr {
    border: none;
    border-top: 3px double var(--color-light);
    height: 5px;
}

input[type='search'] {
    width: calc(100% - 2 * var(--space-s));
    margin: var(--space-s);
}

.flex {
    display: flex;
}

.flex > .center {
    align-self: center;
}

.flex.center {
    justify-content: center;
}

.flex.col {
    flex-direction: column;
}

.flex.row {
    flex-direction: row;
    row-gap: var(--space-s);
}

.flex.wrap {
    flex-wrap: wrap;
}

.flex.h-flow {
    column-gap: var(--flow-space, 1rem);
}

.flex.h-flow > * + * {
    margin-left: unset;
}

.flex.space-between {
    justify-content: space-between;
}

:focus {
    outline: 2px solid;
    outline-offset: 0.3ch;
}

:target {
    scroll-margin-top: 2ex;
}

[role='list'] {
    padding: 0;
}

.flow > * + * {
    margin-top: var(--flow-space, 1em);
}

.h-flow > * + * {
    margin-left: var(--flow-space, 1em);
}

.grid {
    display: grid;
    grid-template-columns: repeat(
        var(--grid-placement, auto-fill),
        minmax(var(--grid-min-item-size, 16rem), 1fr)
    );
    gap: var(--gutter, var(--space-xl));
}

.grid[data-layout='50-50'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(16rem, 50vw, 36rem);
}

.grid[data-layout='thirds'] {
    --grid-min-item-size: clamp(16rem, 33vw, 54rem);
    --gutter: var(--space-xs);
}

.grid[data-rows='masonry'] {
    grid-template-rows: masonry;
    align-items: start;
}

.grid[data-layout='compact'] {
    --gutter: var(--space-3xs);
}

button, .button {
    padding: var(--space-xs);
    border-radius: var(--border-radius, 0.45rem);
    border: 0.05ex solid var(--color-dark);
    color: var(--color-lightest);
    background: var(--color-highlight);
    text-decoration: none;
    display: inline-block;
    font-family: var(--font-heavy);
    width: fit-content;
}

button:hover, .button:hover, button:focus, .button:focus {
    scale: 1.025;
}

button[data-attention='low'], .button[data-attention='low'] {
    color: var(--color-dark);
    background: var(--color-lightest);
}

button[data-style='round'], .button[data-style='round'] {
    font-size: var(--size-step-4);
    font-family: var(--font-base);
    height: var(--size-step-3);
    width: var(--size-step-3);
    border-radius: var(--size-step-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-style='add-toggle'] {
    font-size: var(--size-step-4);
    font-family: var(--font-base);
    height: var(--size-step-3);
    width: var(--size-step-3);
    border-radius: var(--size-step-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-style='add-toggle']::after {
    content: '+';
    transition: transform 50ms ease-out;
}

[data-style='add-toggle'].open::after {
    transform: rotateZ(45deg) translateX(1px);
}

nav {
    background: var(--color-dark);
    top: 0;
    position: sticky;
    display: flex;
}

nav > a {
    padding: var(--space-2xs);
    color: var(--color-light);
}

nav > a[data-active='true'] {
    background: var(--color-highlight);
    font-weight: bold;
}

article {
    border-radius: var(--space-3xs-2xs);
}

article > header:not(.nav-header) {
    background: var(--color-light);
    border-radius: var(--space-3xs-2xs);
}

header {
    padding: var(--space-3xs-2xs);
}

header.nav-header {
    display: flex;
    justify-content: space-between;
    font-size: var(--size-step--1);
}

[data-type='left-right'] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer {
    text-align: center;
    padding: var(--space-xs-s);
}

.centered {
    text-align: center;
    margin: auto;
}

.points-back::before {
    content: "← ";
}

.points-forward::after {
    content: " →";
}

.u-frac {
    font-feature-settings: "frac";
}

.card {
    background: var(--color-lightest);
    border: var(--space-3xs) solid var(--color-lighter);
    border-radius: var(--space-3xs);
    margin: var(--space-s);
    padding: var(--space-xs);
    max-width: unset;
}

a[data-decorations='none'] {
    text-decoration: none;
}

form[data-form='inline'] {
    display: inline-block;
}

p[data-role='fyi'] {
    text-align: center;
    color: var(--color-highlight);
    font-style: italic;
    margin: auto;
}

.strikethrough {
    text-decoration: line-through;
    text-decoration-thickness: 0.1em;
}

.faded {
    opacity: 0.3;
}