/* CLASS ORDER: [ BLOCK ] [ COMPOSITION ] [ UTILITY ] */

:root {
    --ON: initial;
    --OFF: ;

    --light: var(--ON);
    --dark: var(--OFF);

    --color-x: var(--light, #7f00ff) var(--dark, #c182ff);

    --color-mono-00: var(--light, #ffffff) var(--dark, #111111);
    --color-mono-01: var(--light, #fafafa) var(--dark, #141414);
    --color-mono-02: var(--light, #f5f5f5) var(--dark, #171717);
    --color-mono-03: var(--light, #e5e5e5) var(--dark, #262626);
    --color-mono-04: var(--light, #d4d4d4) var(--dark, #404040);
    --color-mono-05: var(--light, #a3a3a3) var(--dark, #525252);
    --color-mono-06: var(--light, #737373) var(--dark, #737373);
    --color-mono-07: var(--light, #525252) var(--dark, #a3a3a3);
    --color-mono-08: var(--light, #404040) var(--dark, #d4d4d4);
    --color-mono-09: var(--light, #262626) var(--dark, #e5e5e5);
    --color-mono-10: var(--light, #171717) var(--dark, #f5f5f5);
    --color-mono-11: var(--light, #111111) var(--dark, #fafafa);

    --color-fg: var(--color-mono-11);
    --color-bg: var(--color-mono-00);

    --color-primary: #ff4500;

    --spacing: 0.25rem;

    --breakpoint-sm: 40rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;

    --text-xxs: 0.5rem;
    --text-xxs--line-height: calc(0.75 / 0.5);
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);

    --font-sans: system-ui, sans-serif;
    --font-serif: Georgia, "Times New Roman", Times, serif;
    --font-mono: monospace;

    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: calc(infinity * 1px);

    --transition-duration-sm: 150ms;
    --transition-duration-md: 250ms;
    --transition-duration-lg: 350ms;
}

@media (prefers-color-scheme: dark) {
    :root {
        --light: var(--OFF);
        --dark: var(--ON);
    }
}

/* == RESET == */

/* References: https://www.joshwcomeau.com/css/custom-css-reset */

/* Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin */
* {
    margin: 0;
}

html {
    /* Enable the browser's inflation algorithm */
    -webkit-text-size-adjust: 100%;
    /* Prevent unwanted layout shifting caused by scrollbar */
    scrollbar-gutter: stable;
}

body {
    /* Add accessible line-height */
    line-height: 1.5;
    /* Improve text rendering */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

/* Inherit fonts for form controls */
input,
button,
textarea,
select {
    font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* Improve line wrapping */
p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* == GLOBAL == */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-mono-03) transparent;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    color: var(--color-fg);
    background-color: var(--color-bg);
    max-width: 48rem;
    margin: 0 auto;
    padding: calc(var(--spacing) * 8)
        clamp(var(--spacing) * 4, 5%, var(--spacing) * 6);
}

body > :not(:first-child) {
    margin-top: calc(var(--spacing) * 16);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.5;
    background-image: radial-gradient(var(--color-mono-05) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    background-repeat: repeat;
    background-position: 0 0;
}

main > :nth-child(n + 3) {
    margin-top: calc(var(--spacing) * 10);
}

h1 {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
    font-weight: var(--font-weight-extrabold);
    margin-bottom: calc(var(--spacing) * 8);
}

h2 {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-weight-bold);
    margin-bottom: calc(var(--spacing) * 6);
}

h3 {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-weight-semibold);
    margin-bottom: calc(var(--spacing) * 4);
}

a {
    color: var(--color-x);
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
    text-decoration-line: underline;
    text-decoration-color: var(--color-x);
    text-decoration-style: dotted;
    text-decoration-thickness: calc(var(--spacing) * 0.35);
    text-underline-offset: var(--spacing);
}
@media (hover: hover) {
    a:hover {
        text-decoration-style: solid;
    }
}
h1 a, h2 a, h3 a {
    color: var(--color-fg);
}
a[data-line="none"] {
    -webkit-text-decoration: none;
    text-decoration: none;
}
a[href^="http"]::after {
    --anchor-icon-color: var(--color-x);
    --anchor-icon-size: 0.75em;
    --anchor-icon-spacing: calc(var(--spacing) * 0.5);

    content: "";
    display: inline-block;
    width: var(--anchor-icon-size);
    height: var(--anchor-icon-size);
    vertical-align: middle;
    margin-left: var(--anchor-icon-spacing);
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19 15.477-.02-9.672a.802.802 0 0 0-.218-.577c-.145-.152-.34-.228-.587-.228H8.499a.751.751 0 0 0-.777.76c0 .199.076.371.227.517.15.145.326.218.525.218h3.733l4.52-.129-1.728 1.54-9.767 9.783a.692.692 0 0 0-.232.518c0 .205.078.387.235.545a.74.74 0 0 0 .542.237.73.73 0 0 0 .527-.224l9.775-9.78 1.544-1.727-.143 4.188v4.065c0 .199.075.376.225.531.15.155.327.232.531.232.202 0 .38-.076.534-.228a.768.768 0 0 0 .23-.569Z' fill='%23000'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    background-color: var(--anchor-icon-color);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
a[href^="http"][data-anchor="none"]::after {
    display: none;
}

code {
    color: var(--color-x);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
}

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

footer {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-mono-08);
}

/* == COMPOSITION == */

.flow-x > :not(:first-child) {
    --flow-x-space: calc(var(--spacing) * 2);
    margin-left: var(--flow-x-space);
}

.flow-y > :not(:first-child) {
    --flow-y-space: calc(var(--spacing) * 2);
    margin-top: var(--flow-y-space);
}

.grid {
    --grid-column-min-width: 15ch;
    --grid-gap: 1rem;

    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--grid-column-min-width)), 1fr)
    );
}

/* == UTILITY == */

.font-mono {
    font-family: var(--font-mono);
}

.color-primary {
    color: var(--color-primary);
}

.color-mono-06 {
    color: var(--color-mono-06);
}
.color-mono-07 {
    color: var(--color-mono-07);
}

.text-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
}

.mt-2 {
    margin-top: calc(var(--spacing) * 2);
}
.-mt-4 {
    margin-top: calc(var(--spacing) * -4);
}

.pl-2 {
    padding-left: calc(var(--spacing) * 2);
}
.pl-3 {
    padding-left: calc(var(--spacing) * 3);
}

.top-0 {
    top: 0;
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.self-drawing {
    --self-drawing-stroke-color: var(--color-fg);
    --self-drawing-duration: 4s;
    --self-drawing-direction: normal;
    --self-drawing-iteration-count: 1;
    --self-drawing-fill-mode: forwards;
    --self-drawing-timing-function: linear;
}
.self-drawing path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke: var(--self-drawing-stroke-color);
    animation-name: self-drawing;
    animation-duration: var(--self-drawing-duration);
    animation-direction: var(--self-drawing-direction);
    animation-iteration-count: var(--self-drawing-iteration-count);
    animation-fill-mode: var(--self-drawing-fill-mode);
    animation-timing-function: var(--self-drawing-timing-function);
}
@keyframes self-drawing {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* == BLOCK & EXCEPTION == */

.navbar {
    --flow-x-space: calc(var(--spacing) * 4);
}
.navbar__logo {
    --self-drawing-stroke-color: var(--color-x);

    display: inline-block;
    vertical-align: middle;
}
.navbar__link {
    text-shadow: var(--light, 0 0 20px #ffffff) var(--dark, 0 0 20px #ffffff);
}

.brief-list {
    --grid-column-min-width: calc(var(--spacing) * 40);
    --grid-gap: calc(var(--spacing) * 6);
}
.brief > .brief__title {
    display: inline-block;
    color: var(--color-mono-10);
}
.brief > .brief__title > .brief__link {
    display: flex;
    align-items: center;
}
.brief > .brief__description {
    color: var(--color-mono-08);
}
.brief > .brief__chips {
    --flow-x-space: var(--spacing);
    margin-top: calc(var(--spacing) * 2);
}
.brief > .brief__chips > .brief__chip {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-mono-08);
    border: 1px solid var(--color-mono-04);
    border-radius: var(--radius-xs);
    padding: var(--spacing) calc(var(--spacing) * 1.5);
}

.tab {
    --tab-border-width: 1px;
    --tab-border: var(--tab-border-width) solid var(--color-mono-04);
    --tab-border-radius: var(--radius-sm);
    --tab-top-spacing: 0px;
    --tab-color: var(--color-fg);
    --tab-background-color: var(--light, var(--color-mono-01)) var(--dark, var(--color-mono-02));

    --tab-name-font-size: var(--text-sm);
    --tab-name-line-height: var(--text-sm--line-height);
    --tab-name-font-family: var(--font-sans);
    --tab-name-block-padding: calc(var(--spacing) * 1.5);
    --tab-name-inline-padding: calc(var(--spacing) * 2);
    --tab-name-color: var(--tab-color);
    --tab-name-background-color: var(--tab-background-color);
    --tab-name-active-background-color: var(--color-mono-03);

    --tab-panel-font-size: var(--text-base);
    --tab-panel-line-height: var(--text-base--line-height);
    --tab-panel-font-family: var(--font-sans);
    --tab-panel-block-padding: calc(var(--spacing) * 3);
    --tab-panel-inline-padding: calc(var(--spacing) * 3);
    --tab-panel-color: var(--tab-color);
    --tab-panel-background-color: var(--tab-background-color);
    --tab-panel-overflow: visible;

    position: relative;
    margin-top: calc(
        var(--tab-name-font-size) * var(--tab-name-line-height) +
        var(--tab-name-block-padding) * 2 +
        var(--tab-border-width) +
        var(--tab-top-spacing)
    );
}
.tab > .tab__name {
    position: absolute;
    top: 0;
    transform: translate3d(var(--tab-name-x, 0), -100%, 0);
    display: inline-block;
    font-size: var(--tab-name-font-size);
    line-height: var(--tab-name-line-height);
    font-family: var(--tab-name-font-family);
    color: var(--tab-name-color);
    background-color: var(--tab-name-background-color);
    border: var(--tab-border);
    border-bottom: none;
    border-right: none;
    padding: var(--tab-name-block-padding) var(--tab-name-inline-padding);
}
.tab > .tab__name:first-of-type {
    border-top-left-radius: var(--tab-border-radius);
}
.tab > .tab__name:last-of-type {
    border-top-right-radius: var(--tab-border-radius);
    border-right: var(--tab-border);
}
.tab > .tab__panel {
    overflow: var(--tab-panel-overflow);
    font-size: var(--tab-panel-font-size);
    line-height: var(--tab-panel-line-height);
    font-family: var(--tab-panel-font-family);
    color: var(--tab-panel-color);
    background-color: var(--tab-panel-background-color);
    padding: var(--tab-panel-block-padding) var(--tab-panel-inline-padding);
    border: var(--tab-border);
    border-radius: var(--tab-border-radius);
}
.tab > .tab__name + .tab__panel {
    border-top-left-radius: 0;
}
.tab > input[name="tab-name"] {
    position: absolute;
    display: none;
}
.tab > input[name="tab-name"]:checked + .tab__name {
    background-color: var(--tab-name-active-background-color);
}
.tab > input[name="tab-name"]:checked + .tab__name + .tab__panel {
    display: block;
}
.tab > input[name="tab-name"] + .tab__name + .tab__panel {
    display: none;
}
.tab > input[name="tab-name"] + .tab__name {
    cursor: pointer;
}