/* 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, 0% 2px;   /* no underline at rest; one bar sweeps in on hover and focus, and out again */
    transition: background-size 300ms ease;
}
a:hover, a:focus-visible { background-position: left bottom, left bottom; background-size: 100% 4px, 0% 2px; }
.card, .gallery a, .mini a, .rivers 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; }
.top nav a, .top .mark, .foot .email { padding-bottom: 0; }
.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; }
.card .img.codeprev { aspect-ratio: 16 / 10; }  /* /demos cards without a screenshot: the first lines of the code */
.card .img.codeprev pre { margin: 0; padding: .8rem 1rem; font: .72rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow: hidden; white-space: pre; tab-size: 2; }
.card .img.codeprev code { background: none; border: 0; padding: 0; }
/* /demos/<slug>: the MeetCritique pages. */
.demo code { overflow-wrap: anywhere; }
.demo .chart-fig { max-width: none; margin: 2rem 0; }  /* diagrams span both columns, edge to edge with the screenshots above */
.demo .chart-fig a { width: 100%; background: none; border: 0; border-radius: 0; }
.demo .chart-fig img { margin-inline: auto; }
.demo .chart-fig figcaption { text-align: center; }
.demo details.code summary small { margin-left: .6rem; font-weight: 400; color: var(--soft); }
.demo details.code summary small code { background: none; border: 0; padding: 0; }
.back { margin-top: 2.5rem; margin-bottom: 0; font-weight: 700; }
.demo-sec { margin-top: 2.75rem; padding-top: 1.25rem; border-top: 2px solid var(--rule); }
.demo .sec-h { margin: 0 0 1rem; font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; }
.demo .sec-n { margin-right: .4em; }
.demo .sec-h .hl { color: #0d0e10; }
.demo .sec-h .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%); }
.demo .split { margin-top: 1rem; }
.demo .split > * { min-width: 0; }
.demo .side .gallery { grid-template-columns: repeat(2, 1fr); margin: 1.75rem 0 .75rem; }
.demo .gallery a:first-child { grid-column: auto; grid-row: auto; }
.demo .shots-note { margin: 0 0 2rem; color: var(--soft); font-size: .9rem; }
@media (max-width: 800px) { .demo .side .gallery { margin-top: 0; } }

.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; }
.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 img.lb-zoomable { touch-action: none; user-select: none; -webkit-user-drag: none; }
.lightbox img.lb-zoomed { cursor: grab; }
.lightbox img.lb-dragging { cursor: grabbing; }
.lightbox figcaption { transition: opacity var(--ease); }
.lightbox .lb-hint { display: block; margin-top: .4rem; font-size: 13px; color: #9aa4b0; }
.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; }
}

/* Contact */
.contact .dots { width: 9rem; right: 0; top: 9rem; opacity: .25; }
.contact-form { display: grid; gap: 1.25rem; margin: 2rem 0 4rem; position: relative; z-index: 1; }
.contact-form label > span { display: block; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: .95rem; margin-bottom: .3rem; }
.contact-form input, .contact-form textarea {
    width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--card);
    border: 1px solid var(--rule); border-radius: 0; padding: .6rem .75rem;
}
.contact-form textarea { resize: vertical; min-height: 10rem; }
.contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: none; border: 1px solid var(--blue); outline-offset: 0; }
.contact-form [aria-invalid] { border-color: #d0021b; }
.field-error, .form-error { display: block; color: #d0021b; font-style: normal; font-size: .95rem; margin-top: .3rem; }
@media (prefers-color-scheme: dark) { .field-error, .form-error, .contact-form [aria-invalid] { color: #ff6b6b; border-color: #ff6b6b; } }
.contact-form button {
    justify-self: start; display: inline-flex; align-items: center; gap: .5em; font: inherit; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em;
    color: #0d0e10; background: var(--callout); border: 2px solid #0d0e10; padding: .55rem 1.6rem; cursor: pointer;
    transition: transform var(--ease);
}
.contact-form button:hover, .contact-form button:focus-visible { transform: rotate(-1deg) scale(1.03); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact .lede { font-weight: 400; }
.contact-form button svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }

/* Contact form entrance */
.motion .contact-form > label, .motion .contact-form > button { --d: calc(var(--i) * 200ms + 150ms); }

/* Yellow highlighter reveal */
.motion .enter > label > span { position: relative; width: fit-content; animation: cf-text 700ms var(--d) both; }
.motion .enter > label > span::after {
    content: ""; position: absolute; inset: -.05em -.3em; background: var(--callout);
    animation: cf-sweep 700ms cubic-bezier(.7, 0, .3, 1) var(--d) both;
}
.motion .enter > label > :is(input, textarea) { animation: cf-wipe 600ms cubic-bezier(.2, .8, .2, 1) calc(var(--d) + 350ms) both; }
.motion .enter > button { animation: cf-wipe 600ms cubic-bezier(.2, .8, .2, 1) calc(var(--d) + 350ms) both; }
@keyframes cf-text { 0%, 49% { color: transparent; } 50%, 100% { color: inherit; } }
@keyframes cf-sweep {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(1); transform-origin: left; }
    50.1% { transform: scaleX(1); transform-origin: right; }
    100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes cf-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }


/* Blog */
.blog .dots { width: 9rem; right: 0; top: 9rem; opacity: .25; }
.posts { list-style: none; padding: 0; margin: 2rem 0 4rem; position: relative; z-index: 1; }
.posts li { padding: 1.5rem 0; border-bottom: 1px solid var(--frame); }
.posts h2.shout { margin: 0 0 .5rem; }
.posts h2 a { color: var(--ink); padding-bottom: 0; }
.posts p { margin: 0; color: var(--soft); }
.post .body { margin-bottom: 3rem; }
.post .lede { font-weight: 400; }
.post .body h2.shout { margin-top: 2.75rem; }
.steps { padding-left: 1.4rem; }
.steps li { margin-bottom: .9rem; padding-left: .3rem; }
.steps li::marker { font-weight: 900; color: var(--blue); }
.post code { font: .9em ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--card); border: 1px solid var(--frame); border-radius: 4px; padding: .05em .35em; }
.chart-fig { margin: 2.5rem 0; }
.chart-fig a { display: block; width: fit-content; max-width: 100%; background: var(--card); border: 1px solid var(--frame); border-radius: 8px; padding: 0; overflow: hidden; }
.chart-fig img { display: block; width: auto; max-width: 100%; height: auto; max-height: 60vh; }   /* tall charts and diagrams stop at 60% of the screen; the lightbox shows them larger */
.chart-fig figcaption { color: var(--soft); font-style: italic; font-size: .95rem; margin-top: .5rem; }
.chart-slot { margin: 2.5rem 0; padding: 3rem 1rem; text-align: center; color: var(--soft); border: 2px dashed var(--frame); border-radius: 8px; }
.process > li > strong.hl { margin: 0 .45em 0 .3em; }
.process > li > strong.hl::before {
    left: -.25em; right: -.3em; top: .05em; bottom: -.05em;
    transform: rotate(-.25deg) skewX(-4deg);
    clip-path: polygon(0 6%, 100% 0, 100% 94%, 1% 100%);
}
.process > li:nth-child(even) > strong.hl::before { transform: rotate(.25deg) skewX(4deg); clip-path: polygon(0 0, 100% 6%, 99% 100%, 0 94%); }

/* /portfolio/bragnarok: skill usage lines and the code accordion. */
.bragnarok .split { margin-top: 1rem; }
.bragnarok .split > * { min-width: 0; }  /* the code block scrolls inside the column instead of widening it */
.bragnarok .side .gallery { grid-template-columns: repeat(2, 1fr); margin: 1.75rem 0 3rem; }
.bragnarok .gallery a:first-child { grid-column: auto; grid-row: auto; }
.bragnarok .gallery a.big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 800px) { .bragnarok .side .gallery { margin-top: 0; } }
.bragnarok .callout { grid-column: span 2; margin: 1.25rem 0 0.5rem 0; font-size: 1.05rem; line-height: 1; }
.bragnarok .callout:first-child { margin-top: 0; }
.bragnarok .callout b { display: inline-block; margin: 0 .5em .35rem 0; font-weight: 900; text-transform: uppercase; letter-spacing: -.04em; word-spacing: .15em; font-size: 1.2rem; color: #0d0e10; }
.bragnarok .callout 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%);
}
.bragnarok .callout:nth-of-type(even) b.hl::before { transform: rotate(.25deg) skewX(4deg); clip-path: polygon(0 0, 100% 6%, 99% 100%, 0 94%); }
.bragnarok code { overflow-wrap: anywhere; }
.bragnarok .usage { margin: .25rem 0 .75rem; }
.bragnarok h3.shout { margin-top: 2rem; font-size: clamp(1rem, 3vw, 1.4rem); letter-spacing: .0em; }
details.code { margin: 1.5rem 0 1rem; background: var(--card); border: 1px solid var(--frame); border-radius: 6px; }
details.code summary { cursor: pointer; padding: .9rem 1rem; font-weight: 700; }
details.code summary::marker { color: var(--blue); }
details.code pre { margin: 0; padding: 1rem; overflow-x: auto; border-top: 1px solid var(--frame); font: .85rem/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; tab-size: 2; }
details.code pre code { background: none; border: 0; padding: 0; overflow-wrap: normal; }
.bragnarok .rivers { margin: 0 0 1rem; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.bragnarok .rivers a { display: block; border: 1px solid var(--frame); border-radius: 6px; overflow: hidden; }
.bragnarok .rivers a { transition: transform var(--ease); }
.bragnarok .rivers a:hover, .bragnarok .rivers a:focus-visible { transform: scale(1.03) rotate(-.8deg); position: relative; z-index: 2; }
.bragnarok .rivers img { display: block; width: 100%; height: auto; }
.bragnarok .rivers figcaption { grid-column: 1 / -1; color: var(--soft); font-size: .9rem; }
.bragnarok .shot-links { margin: -2rem 0 3rem; font-weight: 700; }
.bragnarok .shot-links .sep { color: var(--soft); font-weight: 400; }
/* Code colors (the One Light / One Dark palettes). */
:root { --t-c: #7c8590; --t-s: #387a37; --t-k: #a626a4; --t-n: #986801; --t-b: #0e7490; --t-f: #2f5fd0; }
@media (prefers-color-scheme: dark) { :root { --t-c: #8b939c; --t-s: #98c379; --t-k: #c678dd; --t-n: #d19a66; --t-b: #56b6c2; --t-f: #61afef; } }
.t-c { color: var(--t-c); font-style: italic; }
.t-s { color: var(--t-s); }
.t-k { color: var(--t-k); }
.t-n { color: var(--t-n); }
.t-b { color: var(--t-b); }
.t-f { color: var(--t-f); }