/* Start reset: https://www.joshwcomeau.com/css/custom-css-reset/ */
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
    margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    /* 4. Increase line-height */
    line-height: 1.5;
    /* 5. Improve text rendering */
    -webkit-font-smoothing: antialiased;
}

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

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

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

/* 9. Improve line wrapping */
p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/*
    10. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}
/* End reset */

@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/jetbrains-mono/jetbrains-mono-variable-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/jetbrains-mono/jetbrains-mono-variable-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/jetbrains-mono/jetbrains-mono-italic-variable-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/jetbrains-mono/jetbrains-mono-italic-variable-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Pixelify Sans';
    src: url('assets/fonts/pixelify-sans/pixelify-sans-variable-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-body: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    --font-heading: 'Pixelify Sans', var(--font-body);
    --heading-scale: 1.2;

    font-family: var(--font-body);
    font-synthesis: none;

    --text-primary: oklch(17.764% 0 none);
    --background: oklch(99.809% 0.00918 106.565);

    --text-on-highlight: oklch(17.764% 0 none);
    --highlight-background: oklch(88.36% 0.12898 93.666);
    
    --text-on-sidenote-highlight: var(--background);
    --sidenote-highlight-background: oklch(37.851% 0.19541 263.229);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.15;
}

td {
    font-size: 90%;
}

/* Dark Mode! */
@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: oklch(89.755% 0 none);
        --background: oklch(17.6157% 0 none);

        --text-on-sidenote-highlight: var(--text-primary)
    }
}

body {
    margin-block-start: 2rem;
    margin-block-end: 3rem;
    margin-inline: auto;
    
    padding-inline: 1rem;

    background-color: var(--background);
    color: var(--text-primary);
}

a:link,
a:visited {
    color: inherit;
    text-underline-offset: 0.1em;
    text-decoration-thickness: 0.05em;
}

mark {
    color: var(--text-on-highlight);
    background: var(--highlight-background);
}

p, table {
    margin-block-start: 1em;
}

caption {
    text-align: start;
    font-weight: bold;
}

h1 {
    font-size: calc(2em * var(--heading-scale));
    margin-block-start: 3rem;
    margin-block-end: 1.5rem;
}

h2 {
    font-size: calc(1.5em * var(--heading-scale));
    margin-block-start: 2.1rem;
    margin-block-end: 1.4rem;
}

h3 {
    font-size: calc(1.17em * var(--heading-scale));
    margin-block-start: 2rem;
    margin-block-end: 1.4rem;
}

h4 {
    font-size: calc(1em * var(--heading-scale));
    margin-block-start: 1.7rem;
    margin-block-end: 1.2rem;
}

h5 {
    font-size: calc(0.83em * var(--heading-scale));
    margin-block-start: 1.4rem;
    margin-block-end: 1rem;
}

h6 {
    font-size: calc(0.67em * var(--heading-scale));
    margin-block-start: 1.2rem;
    margin-block-end: 0.8rem;
}

#primary-bio-section {
    margin-block-start: 3em;
    margin-block-end: 4em;
}

.sidenote-ref {
    display: inline-block;
    padding-inline: 0.1em;
    border-radius: 2px;
    line-height: 1;
    transition:
        color 0.4s ease-out,
        background-color 0.4s ease-out;
}

/*
Highlight sidenote and footnote when either is hovered over.
*/
.note-group:has(.note-stealth-projects:hover) .note-stealth-projects,
.note-group:has(.note-uf-year:hover) .note-uf-year,
.note-group:has(.note-relocating:hover) .note-relocating,
.note-group:has(.note-sivers:hover) .note-sivers {
    background-color: var(--sidenote-highlight-background);
    color: var(--text-on-sidenote-highlight);
    transition-duration: 0s;
}

.sidenote-number {
    padding-inline: 0.1em;
    border-radius: 2px;
    font-size: 0.7em;
    line-height: 0;
    text-decoration: none;
    transition:
        color 0.4s ease-out,
        background-color 0.4s ease-out;
}

.sidenote {
    display: none;
    font-size: 0.75rem;
    line-height: 1.35;
    transition:
        color 0.4s ease-out,
        background-color 0.4s ease-out;
}

.sidenote-backref {
    display: inline-block;
    min-inline-size: 1.1em;
    margin-inline-end: 0.25em;
    font-size: 0.75em;
    line-height: 0;
    text-decoration: none;
    vertical-align: super;
}

.mobile-footnote > .sidenote-backref {
    line-height: 1;
    padding-block: 0.2rem;
}

.mobile-footnotes {
    display: grid;
    gap: 0.35rem;
    max-inline-size: 30em;
    margin-block-start: 0.55rem;
    font-size: 0.75rem;
    line-height: 1.35;
}

.mobile-footnote {
    display: block;
    margin-inline: -0.2rem;
    padding: 0.05rem 0.2rem;
    border-radius: 2px;
    outline-offset: 2px;
    transition:
        color 0.4s ease-out,
        background-color 0.4s ease-out;
}

p {
    max-inline-size: 30em;
}

.links {
    margin-block-start: 1em;
}

/*
    1.5em + 28.5em = 30em,
    to be the same width as paragraph
*/
dl,
ol,
ul {
    max-inline-size: 28.5em;
    padding-inline-start: 1.5em;
}

th,
td {
    padding-inline-end: 1em;
}

th {
    text-align: start;
}

td {
    vertical-align: middle;
    padding-block: 0.5em;
}

table {
    inline-size: 100%;
}

thead,
.what-column,
.by-column,
.length-column,
.music-table .artist-column,
.music-table .notes-column {
    display: none;
}

/* shared by both tables */
.item-text {
    min-inline-size: 0;
}

.item-details {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8em;
}

.detail-by::before,
.detail-length::before,
.detail-notes::before {
    content: "·"; /* add interpunct */
    margin-inline: 0.35em;
}

.icon-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0.25em;
    background-color: transparent;
    border: 0;
}

.brand-icon {
    color: var(--text-primary);
}

.brand-icon--heading {
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-start: 0.25em;
    vertical-align: -0.15em;   
}

.brand-icon--table {
    display: block;
    inline-size: 1.5em;
    block-size: 1.5em;
}

/* favorites table */
.image-column img {
    display: block;
    inline-size: 48px;
    block-size: 48px;
    object-fit: cover;
}

/* music table */
.album-cover {
    display: inline-block;
    min-inline-size: 48px;
}

.music-title-name {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.music-table-link {
    text-decoration: none;
}

.music-table .detail-notes,
.music-table tbody .notes-column {
    font-style: italic;
}

.music-table .detail-notes::before {
    content: " ";
    margin-inline: 0;
}

.links-column {
    inline-size: 1%;
    white-space: nowrap;

    padding-inline-end: 1em;
}

.song-links {
    display: flex;
    inline-size: max-content;
    align-items: center;
    /* padding on .icon-link already adds space between glyphs, so keep this small */
    gap: 0.25em;
    /* offset the icons' edge padding so they still align to the row edge */
    margin-inline: -0.25em;
}

/* phone-only hacks */
@media (width < 576px) {
    table {
        table-layout: fixed;
    }

    .music-table {
        table-layout: auto;
    }

    .number-column {
        inline-size: 1.5rem;
        padding-inline-end: 0.5em;
    }

    .image-column {
        inline-size: 48px;
        padding-inline-end: 0;
    }

    .cover-column {
        inline-size: calc(48px + 0.5em);
        padding-inline-end: 0.5em;
    }

    .song-links {
        gap: 0.5em;
    }

    .music-table .album-cover {
        display: block;
        inline-size: 48px;
        block-size: 48px;
        max-inline-size: none;
        object-fit: cover;
    }

    .name-column {
        overflow: hidden;
    }

    .title-column {
        max-inline-size: 0;
        overflow: hidden;
    }

    .item-text > a {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/*
let music table links only appear on hover
when user can hover AND big width
*/
@media (hover: hover) and (width >= 576px) {
    .music-table tbody .song-links {
        opacity: 0;
        transition: opacity 0.15s ease-out;
    }

    .music-table tbody tr:hover .song-links,
    .music-table tbody tr:focus-within .song-links {
        opacity: 1;
    }
}

/* small+: reveal what-column (favorites) and notes-column (music) */
@media (width >= 576px) {
    thead {
        display: table-header-group;
    }

    .what-column {
        display: table-cell;
    }

    .music-table .notes-column {
        display: table-cell;
    }

    .detail-type {
        display: none;
    }

    .detail-length::before,
    .music-table .detail-notes {
        content: none;
        display: none;
    }

    .brand-icon--table {
        inline-size: 1.2em;
        block-size: 1.2em;
    }
}

/* medium+: widen body, turn footnotes into margin sidenotes,
   reveal length-column (favorites) and artist-column (music) */
@media (width >= 768px) {
    body {
        margin-block-start: 4rem;
        margin-inline: unset;
        margin-inline-start: 12.5%;

        padding-inline: 0 1rem;
        inline-size: 87.5%;
        max-inline-size: 992px;
    }

    .length-column {
        display: table-cell;
        inline-size: 6rem;
    }

    .detail-length {
        display: none;
    }

    .detail-by::before {
        content: none;
    }

    .music-table .artist-column {
        display: table-cell;
    }

    .music-table .music-details {
        display: none;
    }

    td {
        padding-block: 0;
    }

    .sidenote {
        display: inline;
        float: right;
        clear: right;
        margin-inline-end: -60%;
        width: 50%;
        margin-top: 0.3rem;
        margin-bottom: 0;
        font-size: 0.8em;
        line-height: 1.3;
        vertical-align: baseline;
        position: relative;
    }

    .sidenote::before,
    .sidenote::after {
        content: none;
    }

    .sidenote-backref {
        display: inline;
    }

    .mobile-footnotes {
        display: none;
    }
}

/* large+: reveal by-column (favorites) */
@media (width >= 992px) {
    .by-column {
        display: table-cell;
    }

    .length-column {
        inline-size: auto;
    }

    .item-details {
        display: none;
    }
}