@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {

    --font: 'Geist', segoe ui, Helvetica, Arial, sans-serif;
    --logo: oklch(0.9189 0 0);
    --link: oklch(0.5687 0.2414 278.85);
    --text: oklch(0.3412 0.0306 259.73);
    --text-weak: oklch(from var(--text) calc(l + 0.1) c h);
    --text-weaker: oklch(from var(--text) calc(l + 0.15) c h);
    --text-weakest: oklch(from var(--text) calc(l + 0.225) c h);
    --heading: oklch(0.181 0.0318 264.66);
    --bg: oklch(1 0 0);
    --surface: oklch(from var(--bg) calc(l - 0.02) c h);
    --surface-lowered: oklch(from var(--surface) calc(l - 0.02) c h);
    --divider: oklch(from var(--surface) calc(l - 0.02) c h);
    --divider-strong: oklch(from var(--surface) calc(l - 0.04) c h);
    --accent: oklch(0 0 0);
    --easing: cubic-bezier(0.32, 0.72, 0, 1);

    --site-width: 580px;
    --site-margin: var(--24px);

    --text-weight: 400;
    --text-bold: 500;
    --text-spacing: -0.009em;
    --text-size-smallest: 0.8125rem;  /* 13px */
    --text-size-small: 0.875rem;  /* 14px */
    --text-size-normal: 0.9375rem;  /* 15px */

    --radius-4: var(--4px);

    /* Precalculated px -> rem Values */
    --2px:   0.125rem;
    --4px:   0.25rem;
    --6px:   0.375rem;
    --8px:   0.5rem;
    --10px:  0.625rem;
    --12px:  0.75rem;
    --14px:  0.875rem;
    --16px:  1rem;
    --18px:  1.125rem;
    --20px:  1.25rem;
    --24px:  1.5rem;
    --28px:  1.75rem;
    --32px:  2rem;

    

}

::selection {background-color: var(--surface-lowered);}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select  { font: inherit; color: inherit; padding: 0;}

html {
    text-rendering: optimizeLegibility;
}

body, html {
    height: 100%;
    scrollbar-gutter: stable;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    color: var(--text);
    background-color: var(--bg);
    font-size: var(--text-size-normal);
    letter-spacing: var(--text-spacing);
    line-height: calc(var(--6px) + 2ex);
}

main {
    flex: 1;
    margin-block: var(--24px);
}

h1, h2, h3, h4 {
    font-size: var(--text-size-normal);
    font-weight: var(--text-bold);
    line-height: calc(var(--4px) + 2ex);
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--heading);
    margin: 0;
}

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

p {
    overflow-wrap: break-word;
    text-wrap: pretty;
    margin: 0;
}

a:not([class]), 
.link {
    color: var(--link); 
    text-decoration: none; 
    transition: color 150ms var(--easing);
}

a:not([class]):hover, 
.link:hover { 
    color: oklch(from var(--link) calc(l - 0.2) c h); 
}

hr {
    border: 0;
    border-top: 1px solid var(--divider);
    margin-block: var(--8px);
}


.stack > * + * {
    margin-block-start: var(--stack-space, var(--8px));
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-space, var(--10px));
    align-items: center;
}

.repel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.naked {
    color: inherit;
    text-decoration: none;
}

.arrow {
    font-size: var(--text-size-smallest);
}

.structure {
    --grid-margin: var(--site-margin, var(--16px));
    --grid-content-width: var(--site-width, 78rem);
    --grid-fluid-area: calc(50vw - (var(--grid-content-width) / 2) - var(--grid-margin));
    max-width: 100%;
    min-width: 0;
    display: grid;
    position: relative;
    grid-auto-rows: min-content;  /* prevent stretching to container height */
    grid-template-areas: "f1 m1 content m2 f2";
    grid-row-gap: var(--20px);
    grid-template-columns:
        var(--grid-fluid-area) 
        max(var(--grid-margin), env(safe-area-inset-left)) 
        [content-start] 1fr [content-end]
        max(var(--grid-margin), env(safe-area-inset-right)) 
        var(--grid-fluid-area);    
}

.structure > * {
    grid-column: content-start / content-end;
    min-width: 0;
    width: 100%;
}

.line.vertical {
    border-left: 1px dashed var(--divider-strong);
    position: fixed;
    width: 1px;
    top: 0;
    bottom: 0;
}

.line.vertical.left {
    left: calc(50vw - (var(--grid-content-width) / 2) - var(--grid-margin) - var(--2px));
}

.line.vertical.right {
    right: calc(50vw - (var(--grid-content-width) / 2) - var(--grid-margin) - var(--2px));
}

.line.horizontal {
    border-top: 1px dashed var(--divider-strong);
    grid-column: m1 / m2;
    margin-block: var(--2px);
}

.button {
    padding: var(--6px) var(--10px);
    border-radius: var(--radius-4);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--4px);
    color: var(--text);
    transition: background-color 150ms var(--easing), color 150ms var(--easing);
}

.button:hover {
    background-color: var(--surface);
    color: var(--text);
}

.weak {
    color: var(--text-weak);
}

.weaker {
    color: var(--text-weaker);
}

.weakest {
    color: var(--text-weakest);
}


.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block: 0 var(--16px);
}

.logo {
    --size: 26px;
    width: var(--size);
    height: var(--size);
    background-color: var(--accent);
    border-radius: 9999px;
    position: relative;
    opacity: 0.1;
}

.section > h2 {
    font-weight: var(--text-weight);
}


/* Accordion customisation */

.accordion {
    --inline-padding: var(--4px);
    margin-inline: calc(-1 * var(--4px));
    width: calc(100% + var(--8px));
}

.accordion-item {
    margin-bottom: var(--2px);
}

.accordion-trigger button {
    font-size: var(--text-size-normal);
    padding: var(--6px) var(--6px);
    border-radius: var(--radius-4);
    min-height: 1.875rem;
    gap: var(--8px);
    background-color: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
    transition: background-color 150ms var(--easing);
}

.accordion-trigger:hover button,
.accordion-trigger button[aria-expanded="true"] {
    background-color: var(--surface);
}

.accordion-trigger {
    min-width: 0;
} 

.accordion-trigger .arrow {
    --size: var(--12px);
    flex-shrink: 0;
    width: var(--size);
    height: var(--size);
    justify-self: end;
    transition: transform 0.2s var(--easing);
}

.accordion-trigger button[aria-expanded="true"] .arrow {
    transform: rotate(-180deg);
}

.accordion-panel {
    --stack-space: var(--8px);
    padding: var(--12px) var(--inline-padding) var(--24px);
}

.project-logo {
    width: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--2px);
    overflow: hidden;
    flex-shrink: 0;
    margin-inline-start: -2px;
}

.project-type {
    color: var(--text-weakest);
    font-weight: var(--text-weight);
    font-size: var(--text-size-small);
    text-align: left;
    margin-inline-start: auto;
}

.project-name {
    color: var(--text);
    font-weight: var(--text-weight);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.project-year {
    font-size: var(--text-size-small);
    color: var(--text-weakest);
    font-weight: var(--text-weight);
    font-variant-numeric: tabular-nums;
    min-width: 4.75rem;
    text-align: right;
}

.prose {

}

.prose p + p {
    text-indent: 1.25rem;
}

.footer {
    color: var(--text-weakest);
    font-size: var(--text-size-small);
    --stack-space: var(--12px);
    padding-block-end: var(--24px);
}

.footer-quote {
    max-width: 28.75rem;  /* 300px */
    line-height: 1.4;
}

/* Component behaviour and defaults*/

[data-accordion] {
    --easing: cubic-bezier(0.32, 0.72, 0, 1);
}

[data-accordion][data-ready] [data-accordion-item] {
    display: grid;
    grid-template-rows: min-content 0fr;  /* min-content over auto to stop chrome being weird */
}

/* Only apply transitions after page load when js adds this attribute */
/* @media (prefers-reduced-motion: no-preference) { */
    [data-accordion][data-ready="animate"] [data-accordion-item] {
        transition: grid-template-rows 0.2s var(--easing) allow-discrete;
    }
/* } */

[data-accordion][data-ready] [data-accordion-item]:has(button[aria-expanded="true"]) {
    grid-template-rows: min-content 1fr;
}

[data-trigger] button {
    display: flex;
    align-items: center;
}

[data-trigger] button[aria-expanded="true"]::after {
    transform: translateY(calc(var(--visual-adjust) * -1)) translateX(calc(var(--visual-adjust) * -1)) scaleY(-1);
}

[data-panel] {
    overflow: hidden;
    min-height: 0; /* Important - ensures proper collapsing */
}

@media screen and (max-width: 600px) {
    .desktop-only {
        display: none;
    }
}

@media screen and (min-width: 600px) {

    hr {
        margin-block: var(--12px);
    }
    
    .header {
        margin-block-start: var(--24px);
    }

    .project-year {
    }


    .accordion-trigger button {
        gap: var(--10px);
    }

}