/* Layout */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

.wide {
    width: min(var(--wide, 74rem), 100% - 32px);
    margin-inline: auto;
    position: relative;
}

.measure {
    max-width: var(--col, 44rem);
}

.top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem 1rem;
}

.top nav {
    display: flex;
    gap: 1.25rem;
}

.top a {
    white-space: nowrap;
}

.shout {
    overflow-wrap: break-word;
}

section,
.piece {
    position: relative;
}

.deco {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.skills {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bars {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.bars i {
    flex: 1;
    min-height: 1px;
    position: relative;
}

.bars i::before {
    content: "";
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 0;
    height: calc(var(--reach) * 100%);
}

.peaknote {
    position: absolute;
    bottom: calc(100% + .4rem);
    transform: translateX(-50%);
    white-space: nowrap;
}

.years {
    position: relative;
    height: 1.6rem;
}

.years span {
    position: absolute;
    top: .35rem;
}

.spans {
    display: flex;
}

.spans div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
}

.card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.gallery a {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.gallery a:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery .play,
.mini .play {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 5rem;
    height: 5rem;
    translate: -50% -50%;
    border-radius: 50%;
    background: rgb(10 12 15 / .75);
}

.gallery .play::after,
.mini .play::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 54%;
    translate: -50% -50%;
    border-style: solid;
    border-width: .9rem 0 .9rem 1.5rem;
    border-color: transparent transparent transparent #fff;
}

@media (max-width: 900px) {
    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 600px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .peaknote {
        left: auto !important;
        right: 0;
        translate: none;
        transform: none !important;
    }
}

.pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Chart tooltip */
.tip {
    position: absolute;
    bottom: 100%;
    z-index: 5;
    margin-bottom: 14px;
    pointer-events: none;
    transition: bottom 200ms ease-out;
    background: var(--ink);
    color: var(--bg);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    padding: .3rem .6rem;
    border-radius: 6px;
}

.tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--arrow, 50%);
    translate: -50%;
    border: 6px solid transparent;
    border-top-color: var(--ink);
}

.tip[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Theme */
:root {
    --bg: #f3f4f5;
    --ink: #0d0e10;
    --soft: #545c66;
    --rule: #0d0e10;
    --card: #ffffff;
    --link: #006fb5;
    --blue: #00a1ff;
    --callout: #ffcc00;
    --grain: .09;
    --frame: rgb(0 0 0 / .2);
    --font: Switzer, system-ui, sans-serif;
    --col: 44rem;
    --wide: 74rem;
    --ease: 300ms ease;
    color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
    :root { --bg: #0c0d0f; --ink: #f1f2f4; --soft: #a0a9b3; --rule: #f1f2f4; --card: #16181b; --link: #00a1ff; --grain: .14; --frame: rgb(255 255 255 / .55); }
}

body { background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.7 var(--font); overflow-x: clip; }
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: var(--grain);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::after { filter: invert(1); } }
::selection { background: var(--callout); color: #0d0e10; }
/* Links */
a {
    color: var(--link); text-decoration: none; padding-bottom: .12em;
    background-image: linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-position: right bottom, left bottom;
    background-size: 0% 4px, 100% 2px;
    transition: background-size 300ms ease;
}
a:hover, a:focus-visible { background-position: left bottom, left bottom; background-size: 100% 4px, 100% 2px; }
.card, .gallery a, .mini a { background-image: none; padding-bottom: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
main, .top, .foot { position: relative; z-index: 1; }
h1, h2, h3, p, ul, ol, .grid, .gallery, .bars, .mypart { position: relative; z-index: 1; }

/* Headings */
.shout { font-weight: 900; text-transform: uppercase; letter-spacing: -.07em; word-spacing: .08em; line-height: .86; margin: 0; text-wrap: balance; }
h1.shout { font-size: clamp(2.4rem, 12vw, 5.5rem); margin-top: 2.5rem; }
h2.shout { font-size: clamp(2.2rem, 6vw, 2.6rem); margin: 3rem 0 .75rem; }
h3.shout { font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: -.05em; margin: 1.2rem 0 .3rem; }

/* Highlight */
.hl, .top nav .email, .foot .email, .top .mark { position: relative; white-space: nowrap; }
.hl::before, .top nav .email::before, .foot .email::before, .top .mark::before {
    content: ""; position: absolute; z-index: -1; left: -.12em; right: -.18em; top: .12em; bottom: .02em;
    background: var(--callout); transform: rotate(-0.5deg) skewX(-8deg);
    clip-path: polygon(1% 12%, 99% 0, 100% 86%, 3% 100%);
}
.top nav .email::before, .foot .email::before, .top .mark::before { left: -.45em; right: -.5em; top: -.05em; bottom: -.1em; }
.top nav .email, .foot .email, .top .mark { color: #0d0e10; }
@media (prefers-color-scheme: dark) { .hl { color: #0d0e10; } }

.top { padding: 1.1rem 0; }
.mark { font-weight: 700; letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.mark .dot { font-weight: 900; }
/* Nav */
.top nav a, .foot .email { color: var(--ink); font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
.foot .email { font-style: normal; margin-left: .5em; color: #0d0e10; }
.foot .email { text-transform: none; }
.foot .email .at { font-family: "General Sans", Switzer, sans-serif; font-weight: 700; }
.top nav a, .top .mark, .foot .email { background-size: 0% 4px, 0% 2px; padding-bottom: 0; }
.top nav a:hover, .top nav a:focus-visible, .top .mark:hover, .top .mark:focus-visible,
.foot .email:hover, .foot .email:focus-visible { background-size: 100% 4px, 0% 2px; }
.top nav a[aria-current] { background-size: 100% 4px, 0% 2px; }

.lede { font-size: 1.2rem; margin: 1.75rem 0 1rem; }
.hero .lede { max-width: 52rem; }
/* Asides */
.intro { color: var(--soft); font-style: italic; font-size: .98rem; margin: .25rem 0 1.5rem; }
.chart > .intro:first-of-type::before, .work > .intro::before {
    content: ""; display: inline-block; width: 1.05em; height: .75em; margin-right: .4em; vertical-align: .05em;
    background: var(--blue);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 15'%3E%3Cpath d='M2.5 1.5v7.5h15M13 4.5l4.5 4.5-4.5 4.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Skills */
.skills { display: flex; flex-wrap: wrap; align-items: baseline; font-size: .9rem; color: var(--soft); }
.skills::before {
    content: "Skills:"; font-weight: 700; color: var(--ink); margin-right: .4rem;
    padding-left: 1.3rem; background: no-repeat left center / .95rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l7 7-7 7-7-7z' fill='%2300a1ff'/%3E%3C/svg%3E");
}
.skills li:not(:last-child)::after { content: "●"; margin: 0 .3rem; font-size: .45em; vertical-align: .3em; }
.skills .more { font-weight: 600; }

/* Dot grids */
.deco { color: var(--ink); }
.hero .dots { width: 9rem; right: 0; top: 9rem; opacity: .25; }
.piece .dots { width: 9rem; right: 0; bottom: calc(100% + 20px); opacity: .25; }
@media (max-width: 960px) { .piece .dots { display: none; } }
.about .dots { width: 9rem; right: 0; top: 9rem; opacity: .25; }
.work > .dots2 { top: 10rem; }
.work .dots2 { width: 7rem; left: -3.5rem; top: 14rem; opacity: .18; }
.built .dots3 { width: 7rem; right: -3.5rem; top: -3.5rem; opacity: .18; }
@media (max-width: 700px) { .dots, .dots2, .dots3 { display: none; } }

/* Chart */
.bars { height: 12rem; margin-top: 2rem; gap: 2px; border-bottom: 2px solid var(--ink); }
.bars i { background: var(--ink); transform-origin: bottom; transition: opacity 400ms ease; }
.bars:hover i { opacity: .3; }
.bars i:hover { opacity: 1; transition-duration: 0ms; }
.peaknote { display: none; }
.years { font-size: .8rem; color: var(--soft); }
.years span { border-left: 1px solid var(--soft); padding-left: .3rem; }
.spans { margin: .8rem 0 1rem; font-size: .85rem; font-weight: 600; }
.spans div { position: relative; overflow: visible; padding: calc(4px + .35rem) .5rem 0 0; }
.spans div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ink); }
.spans div:nth-child(2)::before { background: var(--soft); }
.spans span { display: block; overflow: hidden; text-overflow: ellipsis; }

/* Chart animation */
.motion .bars i { transition: opacity 400ms ease, scale 700ms cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 9ms); }
.motion .bars i:hover { transition-duration: 0ms, 700ms; }
.motion .bars:not(.grown) i { scale: 1 0; }
.motion .spans div::before {
    transform-origin: left;
    transition: scale calc(var(--w) / var(--n) * 800ms) linear calc(150ms + var(--a) / var(--n) * 800ms);
}
.motion .spans:not(.grown) div::before { scale: 0 1; }
.motion .spans span {
    transition: opacity 400ms ease-out, translate 500ms cubic-bezier(.2, .8, .2, 1);
    transition-delay: calc(150ms + (var(--a) + var(--w)) / var(--n) * 800ms);
    padding-left: 0.6em;
}
.motion .spans:not(.grown) span { opacity: 0; translate: 0 20px; }

.tip { background: var(--blue); color: #0d0e10; }
.tip::after { border-top-color: var(--blue); }

/* Work cards */
.grid { gap: 3rem 1.75rem; margin-top: 2rem; }
.card .img { border: 1px solid var(--frame); border-radius: 8px; overflow: hidden; background: var(--card); transition: transform var(--ease); }
.card:nth-child(odd):hover .img, .card:nth-child(odd):focus-visible .img { transform: scale(1.03) rotate(-1deg); }
.card:nth-child(even):hover .img, .card:nth-child(even):focus-visible .img { transform: scale(1.03) rotate(1deg); }
.card h3 { transition: color var(--ease); }
.card:hover h3, .card:focus-visible h3 { color: var(--blue); }
.card .who { margin: 0; font-size: .85rem; font-weight: 700; }
.card .sum { margin: .3rem 0 .7rem; color: var(--soft); font-size: .95rem; line-height: 1.55; }
.card .skills { font-size: .82rem; }

.projects { list-style: none; padding: 0; margin: 1.5rem 0 0; }
/* What I built */
.projects > li { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; padding: 1.25rem 0; border-top: 1px solid #DEDEDE; }
.projects > li > .info { grid-column: 1; }
.projects .skills { margin-top: .6rem; }
.mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mini a { display: block; position: relative; border: 1px solid var(--frame); border-radius: 8px; overflow: hidden; background: var(--card); transition: transform var(--ease); }
.mini a:nth-child(odd):hover, .mini a:nth-child(odd):focus-visible { transform: scale(1.04) rotate(-1deg); }
.mini a:nth-child(even):hover, .mini a:nth-child(even):focus-visible { transform: scale(1.04) rotate(1deg); }
.mini img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 720px) { .projects > li { grid-template-columns: 1fr; gap: 1rem; } }
.projects b { font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; font-size: 1.2rem; }
.projects b.hl { margin-right: .6em; }
:is(.projects, .mypart) b.hl::before {
    left: -.3em; right: -.35em; top: .02em; bottom: -.05em;
    transform: rotate(-.25deg) skewX(-4deg);
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 1% 100%);
}
.projects > li:is(:nth-child(3n), :nth-child(5n)) b.hl::before {
    transform: rotate(.25deg) skewX(4deg);
    clip-path: polygon(0 0, 100% 6%, 99% 100%, 0 94%);
}
.projects .meta { color: var(--soft); font-size: .9rem; }
.projects p { margin: .25rem 0 0; }

/* Piece pages */
.byline { margin: 1.5rem 0 .9rem; font-size: 1.1rem; }
.byline .sep, .byline .note { color: var(--soft); }
.mypart { display: block; margin: 2rem 0 2.5rem; font-size: 1.05rem; line-height: 1.55; }
.mypart b { font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; word-spacing: .15em; font-size: 1.2rem; color: #0d0e10; margin-right: .6em; }
.gallery { gap: 14px; margin: 1rem 0; }
.gallery a { border: 1px solid var(--frame); border-radius: 8px; background: var(--card); transition: transform var(--ease); }
.gallery a:hover, .gallery a:focus-visible { transform: scale(1.03) rotate(-.8deg); z-index: 2; }
.body .lede { font-weight: 700; }
.piece > .skills { margin-top: 1.5rem; }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 0 3rem; align-items: start; }
.split .body { grid-column: 1; grid-row: 1; }
.split .side { grid-column: 2; grid-row: 1; }
.side .byline { margin-top: 0; }
@media (max-width: 800px) {
    .split { grid-template-columns: 1fr; }
    .split .body, .split .side { grid-column: 1; grid-row: auto; }
}
.order { font-size: .9rem; margin: 2.5rem 0 1rem; }
.pager { padding-top: 1rem; }
.pager a { font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; word-spacing: .15em; background-size: 0% 4px, 0% 2px; }
.pager a:hover, .pager a:focus-visible { background-size: 100% 4px, 0% 2px; }
.pager a::before, .pager a::after {
    display: inline-block; width: .5em; height: .8em; vertical-align: -.02em; background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M8 2 2 8l6 6' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pager .prev::before { content: ""; margin-right: .45em; }
.pager .next::after { content: ""; margin-left: .45em; scale: -1 1; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin: 6rem auto 2rem; padding-top: 1rem; border-top: 1px solid #555555; color: var(--soft); font-size: .9rem; font-style: italic; }

/* Lightbox */

.lightbox {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
}

.lightbox::backdrop { background: rgb(10 12 15 / .95); }

.lightbox[open] { display: grid; place-items: center; animation: lb-in var(--ease); }

@keyframes lb-in {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: none; }
}

.lightbox figure { margin: 0; padding: 3.5rem 4.5rem; text-align: center; pointer-events: none; }

.lightbox img, .lightbox video {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 8rem - var(--lb-caption, 0px));
    margin: 0 auto;
    border-radius: 8px;
    pointer-events: auto;
}

.lightbox [hidden] { display: none; }
.lightbox video { background: #000; }

.lightbox figcaption { max-width: 60ch; margin: 0 auto; padding-top: .75rem; font-size: 14px; color: #c9d1da; }
.lightbox .lb-text { display: block; font-size: 16px; line-height: 1.5; color: #fff; text-wrap: pretty; }
.lightbox .lb-text:empty { display: none; }
.lightbox .lb-text + .lb-count { display: block; margin-top: .4rem; }

.lightbox button {
    position: fixed;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid rgb(255 255 255 / .25);
    border-radius: 8px;
    background: rgb(255 255 255 / .08);
    color: #fff;
    font: 400 28px/1 var(--font);
    cursor: pointer;
    transition: all var(--ease);
}

.lightbox button:hover, .lightbox button:focus-visible { transform: scale(1.05); border-color: var(--blue); background: rgb(0 161 255 / .2); }
.lightbox .lb-close { top: 1rem; right: 1rem; }
.lightbox .lb-prev { left: 1rem; top: 50%; translate: 0 -50%; }
.lightbox .lb-next { right: 1rem; top: 50%; translate: 0 -50%; }

@media (max-width: 600px) {
    .lightbox figure { padding: 4rem .5rem 5rem; }
    .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 1rem; translate: none; }
    .lightbox .lb-next { right: 1rem; }
}