/* One stylesheet for every page, and the order is the cascade. *//* Vendored rather than fetched: the Nix build has no network. Latin subset
   only, as Google Fonts cuts it. */

@font-face {
    font-family: 'Kalam';
    src: url('/fonts/kalam-300-latin.woff2') format('woff2');
    font-weight: 300;
    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: 'Kalam';
    src: url('/fonts/kalam-400-latin.woff2') format('woff2');
    font-weight: 400;
    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: 'Kalam';
    src: url('/fonts/kalam-700-latin.woff2') format('woff2');
    font-weight: 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: 'Caveat';
    src: url('/fonts/caveat-latin-wght.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: 'Monaspace Radon';
    src: url('/fonts/monaspace-radon-400-latin.woff2') format('woff2');
    font-weight: 400;
    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 {
    color-scheme: light dark;

    /* Pencil on paper in the light, chalk on slate in the dark. */
    --paper: light-dark(#f4f4f4, #2a2a2a);
    --ink: light-dark(#262626, #ededed);
    --soft: light-dark(#3d3d3d, #d2d2d2);
    --muted: light-dark(#5c5c5c, #a8a8a8);
    --line: light-dark(#b4b4b4, #6b6b6b);
    --ruled: light-dark(#d2d2d2, #474747);
    --tint: color-mix(in oklab, var(--ink) 5%, transparent);

    /* Prime tile sizes, so the dot lattices never fall back into step. */
    --speck: light-dark(rgb(0 0 0 / 0.035), rgb(255 255 255 / 0.03));
    --grain:
        radial-gradient(
                circle at 23% 61%,
                var(--speck) 0.8px,
                transparent 1.3px
            )
            0 0 / 11px 11px,
        radial-gradient(
                circle at 74% 18%,
                var(--speck) 0.8px,
                transparent 1.3px
            )
            0 0 / 11px 11px,
        radial-gradient(
                circle at 41% 89%,
                var(--speck) 0.85px,
                transparent 1.35px
            )
            0 0 / 13px 13px,
        radial-gradient(
                circle at 88% 37%,
                var(--speck) 0.85px,
                transparent 1.35px
            )
            0 0 / 13px 13px,
        radial-gradient(
                circle at 13% 29%,
                var(--speck) 0.9px,
                transparent 1.4px
            )
            0 0 / 17px 17px,
        radial-gradient(
                circle at 62% 71%,
                var(--speck) 0.9px,
                transparent 1.4px
            )
            0 0 / 17px 17px,
        radial-gradient(
                circle at 57% 7%,
                var(--speck) 0.95px,
                transparent 1.45px
            )
            0 0 / 19px 19px,
        radial-gradient(
                circle at 9% 83%,
                var(--speck) 0.95px,
                transparent 1.45px
            )
            0 0 / 19px 19px,
        radial-gradient(circle at 33% 47%, var(--speck) 1px, transparent 1.5px)
            0 0 / 23px 23px,
        radial-gradient(circle at 81% 93%, var(--speck) 1px, transparent 1.5px)
            0 0 / 23px 23px,
        radial-gradient(
                circle at 79% 73%,
                var(--speck) 1.05px,
                transparent 1.55px
            )
            0 0 / 29px 29px,
        radial-gradient(
                circle at 47% 21%,
                var(--speck) 1.05px,
                transparent 1.55px
            )
            0 0 / 29px 29px,
        radial-gradient(circle at 5% 51%, var(--speck) 1.1px, transparent 1.6px)
            0 0 / 31px 31px,
        radial-gradient(
                circle at 67% 39%,
                var(--speck) 1.1px,
                transparent 1.6px
            )
            0 0 / 31px 31px,
        radial-gradient(
                circle at 29% 11%,
                var(--speck) 1.15px,
                transparent 1.65px
            )
            0 0 / 37px 37px,
        radial-gradient(
                circle at 93% 59%,
                var(--speck) 1.15px,
                transparent 1.65px
            )
            0 0 / 37px 37px;

    /* onedark in the dark, catppuccin latte in the light, both pulled to a
       tenth of their chroma. */
    --code-comment: light-dark(oklch(53% 0.014 285), oklch(66% 0.016 285));
    --code-punct: light-dark(oklch(61.5% 0.01 285), oklch(60% 0.012 285));
    --code-string: light-dark(oklch(50% 0.062 145), oklch(80% 0.048 145));
    --code-keyword: light-dark(oklch(48% 0.072 305), oklch(78% 0.052 305));
    --code-fn: light-dark(oklch(50% 0.068 250), oklch(80% 0.05 250));
    --code-number: light-dark(oklch(52% 0.07 58), oklch(82% 0.05 58));

    --font-hand: 'Kalam', 'Comic Sans MS', cursive;
    --font-scrawl: 'Caveat', var(--font-hand);
    --font-code: 'Monaspace Radon', ui-monospace, monospace;

    --gutter: clamp(1rem, 5vw, 4rem);
    --measure: 72rem;

    --ease-pen: cubic-bezier(0.3, 0.7, 0.2, 1);
}

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

* {
    margin: 0;
}

/* The paper as the grain leaves it: Firefox paints its overscroll in the
   root's colour alone, without the body's grain. */
html {
    -webkit-text-size-adjust: 100%;
    background-color: light-dark(#f2f2f2, #2b2b2b);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: clip;
    background: var(--grain), var(--paper);
    color: var(--ink);
    font-family: var(--font-hand);
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
    body {
        text-shadow: 0 0 1px rgb(255 255 255 / 0.18);
    }
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px dashed var(--ink);
    outline-offset: 4px;
}

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

ul,
ol {
    list-style: none;
    padding: 0;
}

strong,
b {
    font-weight: 700;
}

time {
    font-variant-numeric: tabular-nums;
}

code,
pre,
kbd {
    font-family: var(--font-code);
}

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

.skip {
    position: absolute;
    left: -100vw;
}

.skip:focus {
    left: var(--gutter);
    top: 0.5rem;
    z-index: 1;
    padding: 0.5rem 1rem;
    background: var(--paper);
    border: 2px solid var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* The pencil every page draws with: strokes are SVG masks filled with the
   current ink, so they follow the dark scheme. */

.scrawl {
    font-family: var(--font-scrawl);
    font-weight: 500;
}

.title {
    font-family: var(--font-scrawl);
    font-weight: 700;
    font-size: clamp(3.75rem, 8vw, 6rem);
    line-height: 0.9;
    text-wrap: balance;
}

.head {
    margin-bottom: 1.1rem;
    font-family: var(--font-scrawl);
    font-weight: 600;
    font-size: 2.35rem;
    line-height: 1;
}

/* A name that heads its own block: a project, a step of the CV. */
.name {
    font-family: var(--font-scrawl);
    font-weight: 700;
    line-height: 1.1;
}

/* Only the capital goes: Linux and MCP keep theirs. */
.title:not(.title-proper)::first-letter,
.head::first-letter {
    text-transform: lowercase;
}

.ln {
    position: relative;
    display: inline-block;
}

.ln::after {
    content: '';
    position: absolute;
    left: -3%;
    bottom: -0.18em;
    width: 106%;
    height: 0.5em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.8'%20d='M1.5%207%20C%2010%204.6,%2019%204.8,%2028%206.6%20S%2047%208.2,%2058%205.8%20S%2078%203.4,%2088%205.6%20S%2096%207,%2098.5%204'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.2'%20stroke-opacity='0.45'%20d='M56%206.9%20C%2068%205.2,%2080%204.4,%2096%205.6'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.45s var(--ease-pen);
    pointer-events: none;
}

.ln:hover::after,
.ln:focus-visible::after,
.ln[aria-current]::after {
    clip-path: inset(0);
}

/* Drawn again on every line a title wraps to, which a pseudo-element is not. */
.ln-lines {
    padding-bottom: 0.45em;
    background: linear-gradient(currentColor 0 0) 0 100% / 0 0.5em no-repeat;
    mask:
        linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 0.5em) no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.8'%20d='M1.5%207%20C%2010%204.6,%2019%204.8,%2028%206.6%20S%2047%208.2,%2058%205.8%20S%2078%203.4,%2088%205.6%20S%2096%207,%2098.5%204'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.2'%20stroke-opacity='0.45'%20d='M56%206.9%20C%2068%205.2,%2080%204.4,%2096%205.6'/%3e%3c/svg%3e") 0 100% / 100% 0.5em no-repeat;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.45s var(--ease-pen);
}

:is(a:hover, a:focus-visible) > .ln-lines {
    background-size: 100% 0.5em;
}

.more,
.back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-family: var(--font-scrawl);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1;
}

.more::before,
.back::before {
    content: '';
    width: 2.5rem;
    height: 1.125rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2018'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%2010%20C%2014%208,%2026%209,%2037%209%20M%2037%209%20L%2029%203%20M%2037%209%20L%2030%2015'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: translate 0.3s var(--ease-pen);
}

.more::before {
    order: 1;
}

.back::before {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2046%2020'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M44%2011%20C%2032%2012,%2018%2010,%204%2010%20M%204%2010%20L%2012%203%20M%204%2010%20L%2011%2017'/%3e%3c/svg%3e");
}

:is(.more, .back):is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

.more:hover::before {
    translate: 0.25rem 0;
}

.back:hover::before {
    translate: -0.25rem 0;
}

.framed,
.framed-alt {
    position: relative;
}

.framed::before,
.framed-alt::before {
    content: '';
    position: absolute;
    inset: -9px;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.3%209.8%20C%20129.2%204.1,%20258.5%2010.7,%20397.4%205.7%20C%20399.3%2094.7,%20402.6%20203.0,%20395.1%20294.7%20C%20268.0%20296.1,%20131.8%20287.5,%203.5%20294.1%20C%204.6%20193.3,%200.6%20101.3,%205.6%207.5%20C%2011.4%209.3,%2018.1%207.8,%2024.3%206.7'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M-1.5%20289.9%20C%20-6.1%20192.0,%208.9%20103.1,%207.2%206.5%20C%20127.6%208.8,%20258.0%201.8,%20397.9%2010.0'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

.framed-alt::before {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.1%2010.1%20C%20133.4%207.3,%20258.7%20-0.4,%20397.1%202.7%20C%20399.6%2097.5,%20396.4%20197.8,%20395.7%20293.4%20C%20265.2%20286.4,%20142.6%20293.1,%206.2%20291.0%20C%209.5%20200.2,%2014.9%20104.0,%209.4%2010.6%20C%2021.3%2011.1,%2031.2%207.2,%2044.1%209.2'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M3.0%20290.9%20C%206.7%20202.1,%209.5%20108.5,%2012.3%2012.3%20C%20130.7%208.8,%20265.3%2015.9,%20393.8%205.7'/%3e%3c/svg%3e");
}

.rule {
    height: 16px;
    border: 0;
    background: var(--muted);
    mask: url('/_astro/rule.CqFJ_Hvw.svg') 0 0 / 100% 100% no-repeat;
}

.rule-alt {
    mask-image: url('/_astro/rule-alt.BCC_ci3f.svg');
}

/* Pointed at, a drawing is swapped between three tracings of itself, never
   moved, as a pencil line boils in hand-drawn animation; then it settles back
   on the first. */
:root {
    --boil: 0.6s;
    --boil-times: 2;
}

:is(.framed, .framed-alt):not(.gallery-frame):has(img, video):hover::before,
.prose-body p:has(> img, > picture):hover::before,
.say:is(:hover, :focus-within)::before,
.pj-card:hover .pj-card-visual::before {
    animation: boil var(--boil) steps(1) var(--boil-times);
}

@keyframes boil {
    0% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.3%209.8%20C%20129.2%204.1,%20258.5%2010.7,%20397.4%205.7%20C%20399.3%2094.7,%20402.6%20203.0,%20395.1%20294.7%20C%20268.0%20296.1,%20131.8%20287.5,%203.5%20294.1%20C%204.6%20193.3,%200.6%20101.3,%205.6%207.5%20C%2011.4%209.3,%2018.1%207.8,%2024.3%206.7'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M-1.5%20289.9%20C%20-6.1%20192.0,%208.9%20103.1,%207.2%206.5%20C%20127.6%208.8,%20258.0%201.8,%20397.9%2010.0'/%3e%3c/svg%3e");
    }
    33.333% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.1%2010.1%20C%20133.4%207.3,%20258.7%20-0.4,%20397.1%202.7%20C%20399.6%2097.5,%20396.4%20197.8,%20395.7%20293.4%20C%20265.2%20286.4,%20142.6%20293.1,%206.2%20291.0%20C%209.5%20200.2,%2014.9%20104.0,%209.4%2010.6%20C%2021.3%2011.1,%2031.2%207.2,%2044.1%209.2'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M3.0%20290.9%20C%206.7%20202.1,%209.5%20108.5,%2012.3%2012.3%20C%20130.7%208.8,%20265.3%2015.9,%20393.8%205.7'/%3e%3c/svg%3e");
    }
    66.667% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M9.2%200.6%20C%20137.9%206.8,%20260.1%205.3,%20394.9%208.7%20C%20399.2%20102.1,%20403.2%20203.7,%20397.7%20294.1%20C%20273.5%20288.0,%20133.9%20290.4,%207.0%20293.0%20C%205.2%20200.4,%2011.9%20102.9,%207.5%203.7%20C%2015.2%203.9,%2026.9%203.2,%2039.5%203.7'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M2.5%203.8%20C%20132.1%2011.9,%20252.0%20-0.3,%20393.6%2010.8%20C%20402.0%20108.0,%20391.1%20191.7,%20394.9%20292.4'/%3e%3c/svg%3e");
    }
}

.boil-frame + .boil-frame {
    visibility: hidden;
}

:is(.brand, .spread-visual, .pj-card):hover .boil-frame {
    animation: boil-1 var(--boil) steps(1) var(--boil-times);
}

:is(.brand, .spread-visual, .pj-card):hover .boil-frame:nth-of-type(2) {
    animation-name: boil-2;
}

:is(.brand, .spread-visual, .pj-card):hover .boil-frame:nth-of-type(3) {
    animation-name: boil-3;
}

@keyframes boil-1 {
    0% {
        visibility: visible;
    }
    33.333%,
    100% {
        visibility: hidden;
    }
}

@keyframes boil-2 {
    0%,
    66.667%,
    100% {
        visibility: hidden;
    }
    33.333% {
        visibility: visible;
    }
}

@keyframes boil-3 {
    0% {
        visibility: hidden;
    }
    66.667%,
    100% {
        visibility: visible;
    }
}

.icon {
    flex: none;
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background: currentColor;
    mask: center / contain no-repeat;
}

/* Caveat sits low in its em box: centred on the line, an icon floats above
   the letters. */
:is(.scrawl, .links, .pj-block-name) .icon {
    translate: 0 0.12em;
}

.icon-ecrits {
    mask-image: url('/_astro/ecrits.DhpOs_8A.svg');
}

.icon-projets {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='round'%3e%3cpath%20d='M18.364%2011.813a.32.32%200%200%200-.28.321v1.523c-.07%201.404-.201%203.128-.211%203.629s0%201.202%200%201.874a2.1%202.1%200%200%201-.29%201.002c-.091.12-.372.18-.752.27a25%2025%200%200%201-4.3.482c-1.444.09-2.893.05-4.33-.12a1.9%201.9%200%200%201-.792-.21a1.9%201.9%200%200%201-.45-.743c-.166-.493-.294-1-.382-1.513a35%2035%200%200%201-.5-3.007a28%2028%200%200%201-.191-3.067a.27.27%200%200%200-.531%200a30%2030%200%200%200%20.08%203.137c.07%201.003.19%202.085.36%203.107q.105.845.331%201.664c.13.41.348.788.642%201.103c.36.265.787.428%201.233.47c1.5.215%203.018.275%204.53.181a24%2024%200%200%200%204.49-.591a2.34%202.34%200%200%200%201.233-.652c.21-.33.34-.703.38-1.092q.075-1.142%200-2.285c0-.501.06-2.225.07-3.618v-1.584a.3.3%200%200%200-.34-.28m1.523-4.321a4.5%204.5%200%200%200-1.864-.39q-1.312.02-2.616.18c-1.764.14-3.498.16-5.242.31c-.751.07-1.513.171-2.265.311c-.751.14-1.303.23-1.904.371q-.642.15-1.293.361q-.428.097-.822.29a.55.55%200%200%200-.29.402q-.038.466%200%20.932q.049.677.18%201.343a.27.27%200%200%200%20.14.2a.25.25%200%200%200%20.291.14a48%2048%200%200%201%203.508-.6q1.757-.23%203.528-.261l4.009-.11l3.247.09c.2%200%20.551.1.842.11c.244.017.487-.046.692-.18a2.27%202.27%200%200%200%20.631-1.755a3.3%203.3%200%200%200-.21-1.172a1.1%201.1%200%200%200-.562-.572m-.37%202.496c0%20.09-.762.1-1.003.1h-3.287l-4.01.25q-1.805.098-3.587.392c-1.103.18-2.185.41-3.288.661c0-.3-.08-.621-.11-.942q-.03-.451%200-.902q.953-.226%201.874-.561c.642-.12%201.283-.21%201.925-.31a27%2027%200%200%201%202.195-.241c1.743-.11%203.477-.07%205.241-.17c.792%200%201.674-.181%202.526-.161c.493.008.98.11%201.433.3q.05.082.08.17q.095.346.09.703c.012.24-.015.48-.08.711'/%3e%3cpath%20d='M14.385%2013.998a7.3%207.3%200%200%201-2.435.441c-.84.127-1.696.1-2.526-.08a.8.8%200%200%201-.341-.36a1.2%201.2%200%200%201-.17-.462l-.06-.711a.3.3%200%200%200-.281-.321a.31.31%200%200%200-.32.27v.852c.03.253.108.498.23.722c.133.242.33.443.57.581a7.7%207.7%200%200%200%202.928.341a7.9%207.9%200%200%200%202.946-.501c.262-.17.462-.42.572-.712a2.7%202.7%200%200%200%20.12-1.062q0-.301-.08-.591a.78.78%200%200%200-.331-.401a1.45%201.45%200%200%200-.652-.17a9%209%200%200%200-1.142.06l-1.644.1c-.37%200-.732.1-1.092.17c-.532.1-1.053.23-1.594.36a.26.26%200%200%200-.16.405a.26.26%200%200%200%20.27.107c.531-.08%201.053-.17%201.584-.23a9%209%200%200%201%201.002-.07h2.556q.163.005.32.05v.22q.032.32%200%20.641a.49.49%200%200%201-.27.351M2.478%2012.324c-.3.11-.591.16-.882.271a2.4%202.4%200%200%200-.37.16q-.181.106-.342.24q-.405.288-.761.632a.29.29%200%200%200-.09.371a.29.29%200%200%200%20.41.09c.301-.12.602-.18.902-.3q.305-.11.582-.28q.473-.33.852-.763a.28.28%200%200%200%20.06-.37a.25.25%200%200%200-.361-.05m21.419.17a6%206%200%200%200-.762-.632a2.4%202.4%200%200%200-.341-.21a2.4%202.4%200%200%200-.37-.16c-.292-.11-.582-.16-.883-.271a.25.25%200%200%200-.36.06a.28.28%200%200%200%20.06.37q.38.433.851.763q.277.17.582.28c.3.12.601.18.902.3a.3.3%200%200%200%20.32-.5M3.831%207.062a.26.26%200%200%200%200-.37a6%206%200%200%200-.641-.943a3%203%200%200%200-.361-.32a3%203%200%200%200-.401-.27c-.31-.181-.642-.322-1.002-.482a.3.3%200%200%200-.331.501l.772.742c.11.1.21.2.33.29q.166.144.351.261c.29.2.592.35.882.571a.26.26%200%200%200%20.401.02m16.748-3.247c-.22.22-.431.421-.631.642q-.125.154-.231.32q-.105.162-.18.341q-.153.438-.24.892a.25.25%200%200%200%20.11.35a.27.27%200%200%200%20.36-.11c.2-.23.411-.41.602-.65l.21-.301q.091-.154.16-.321c.13-.27.22-.531.341-.812a.303.303%200%200%200-.501-.34zm-9.882.391q.165.471.38.922a.26.26%200%200%200%20.512-.09c0-.38.07-.732.05-1.123a4.4%204.4%200%200%200-.09-.621c-.06-.32-.16-.621-.2-.942a.32.32%200%200%200-.292-.31a.3.3%200%200%200-.31.28q-.12.494-.15%201.002a3%203%200%200%200%200%20.431q.025.23.1.451'/%3e%3c/svg%3e");
}

.icon-cv {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='round'%3e%3cg%20fill-rule='evenodd'%20clip-rule='evenodd'%3e%3cpath%20d='M12.24%206.205a.27.27%200%200%200%20.3-.25a.29.29%200%200%200-.25-.3c-.638-.12-1.238-.34-1.857-.519a11%2011%200%200%200-1.278-.34a8.5%208.5%200%200%200-2.257-.11a.25.25%200%201%200%200%20.49q.947.155%201.857.46h.16c-.11.619-.26%201.258-.38%201.907c-.07.42-.13.849-.19%201.268c-.1.65-.179%201.289-.319%201.898a.27.27%200%200%200%20.17.35a.28.28%200%200%200%20.35-.17q.389-.902.649-1.848q.112-.405.18-.819q.07-.412.1-.829V5.765c.189%200%20.369.11.559.15q1.09.24%202.207.29m5.073%205.323a.27.27%200%200%200-.13-.37a6.6%206.6%200%200%200-.929-.45c-.469-.189-.998-.339-1.438-.499s-.729-.2-1.108-.27a6%206%200%200%200-.76-.1q-.968-.088-1.937%200a.26.26%200%200%200-.25.25a.25.25%200%200%200%20.25.24a10%2010%200%200%201%201.089.16c.42.08.819.21%201.238.31s.84.19%201.269.3c.43.11.998.16%201.438.279q.46.106.899.28a.29.29%200%200%200%20.37-.13m-.86%203.895a.28.28%200%200%200-.12-.37a16%2016%200%200%200-3.285-1.388q-.73-.219-1.478-.36c-.5-.1-1-.18-1.508-.23c-1.179-.13-2.357-.14-3.516-.16a.23.23%200%200%200-.228.131a.2.2%200%200%200-.022.09a.22.22%200%200%200%20.21.26c1.358.179%202.737.429%204.115.678c.899.17%201.797.32%202.686.55c.952.225%201.881.536%202.777.928a.29.29%200%200%200%20.37-.13m-5.683%201.239c-.53-.11-1.059-.2-1.598-.26a20.7%2020.7%200%200%200-3.775%200a.25.25%200%200%200-.211.344a.24.24%200%200%200%20.23.146c1.221.055%202.436.198%203.636.43l1.528.299q.759.15%201.528.33q1.787.398%203.515.998a.28.28%200%200%200%20.36-.15a.26.26%200%200%200-.15-.36a26%2026%200%200%200-3.495-1.377c-.52-.15-1.04-.29-1.568-.4m5.522-10.127a4%204%200%200%201-.609-.12c.08-.2.2-.43.31-.679c.57-1.268.929-2.636%200-3.655a.252.252%200%200%200-.39.32c.999%201.328-.609%202.806-.928%203.994s2.746%201.199%203.844.85l1.648-.46c.42-.19.17-.68-.08-.63c-2.037.5-2.097.63-3.795.38'/%3e%3cpath%20d='M17.094%201.39c-1.268-.259-.689-.109-9.188-1.168a.29.29%200%200%200-.07.57c7.91%201.058%208.16%201.068%209.158%201.288c1%20.22%203.126%202.926%203.636%203.925a1%201%200%200%201%20.16.6c-.27%201.417-1.379%205.532-1.708%206.47c-.33.94-.63%201.619-.899%202.448c-.11.32-.999%204.214-2.137%204.594c-1.568.529-3.166-.15-4.734-.21c-.999%200-2.996-.14-4.275-.34c-4.993-.809-4.773-.699-6.052-1.518c1.438-1.528%202.767-5.353%203.486-7.54a67%2067%200%200%200%201.458-7.5c.08-.44.789-2.707.08-2.477c-.3.09-.26.54-.29.729c-.2%201.248-1.068%206.092-1.248%206.891a34.6%2034.6%200%200%201-3.456%208.549q-.278.39-.599.749q-.24.24-.4.54a.71.71%200%200%200%20.31.748c.541.41%201.145.731%201.788.95c3%20.682%206.055%201.103%209.128%201.258c1.588.06%203.266.779%205.083.16c1.658-.57%202.537-4.645%202.717-5.214c.26-.829.59-1.628.859-2.447c.27-.819%201.378-4.993%201.658-6.621c.27-1.448-3.186-5.164-4.465-5.433'/%3e%3cpath%20d='M23.137%207.583c-.28%201.418-1.768%207.06-2.098%207.99c-.33.928-.629%201.627-.899%202.456c-.11.32-.998%204.205-2.137%204.584c-1.568.53-3.166-.15-4.734-.21c-.998%200-2.996-.14-4.274-.339c-4.764-.769-4.784-.57-5.882-1.268c-.65-.36-.9.28-.51.619c.44.34.953.576%201.498.689a53%2053%200%200%200%209.128%201.268c1.588.06%203.276.77%205.084.16c1.808-.609%202.537-4.644%202.676-5.223c.26-.819.59-1.618.86-2.437c.269-.819%201.837-6.462%202.136-8.06c.13-.808-.649-1.048-.848-.23'/%3e%3c/g%3e%3c/svg%3e");
}

.icon-contact {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20stroke='%23000'%20stroke-width='1'%20stroke-linejoin='round'%3e%3cpath%20d='M23.824%202.799a10%2010%200%200%200-.14-1.47a.9.9%200%200%200-.25-.47a1.3%201.3%200%200%200-.44-.19q-1.05-.194-2.118-.26C18.117.18%2013.589%200%2011.77%200c-.54%200-4.638%200-7.666.1Q2.762.146%201.435.35a2%202%200%200%200-.86.32a.9.9%200%200%200-.23.38a9.4%209.4%200%200%200-.21%201.699c-.13%202.319-.13%206.247-.13%207.116c0%20.87.13%204.618.26%206.887c0%20.73.08%201.3.12%201.57a.7.7%200%200%200%20.14.379a1.86%201.86%200%200%200%201%20.41c.715.072%201.434.072%202.149%200c.77-.07%201.43-.13%201.999-.13c1.54%200%201.41.37%201.46.56a4.15%204.15%200%200%201%200%201.669a4.9%204.9%200%200%201-1%202.199a.38.38%200%200%200%20.35.59c.39-.005.78-.055%201.16-.15a5.6%205.6%200%200%200%202.688-1.31a9.4%209.4%200%200%200%201-1.34c.5-.789.799-1.519%201.079-1.918c.09%200%20.33-.07.57-.07c1.649%200%205.517.17%206.896.28q1.094.075%202.19%200a2%202%200%200%200%201.169-.4c.32-.7.483-1.46.48-2.23c.28-2.598.28-7.006.28-7.865c0-.86-.06-4.238-.17-6.197m-1%2013.053q-.014%201.145-.17%202.28c0%20.12-.07.26-.08.31a.8.8%200%200%201-.249.06q-.413.06-.83.07h-1.459c-1.21-.07-4.308-.18-6.197-.17q-.727-.017-1.45.06a.63.63%200%200%200-.399.179c-.32.37-.64%201.24-1.22%202.179q-.405.632-.929%201.17a5.13%205.13%200%200%201-2.729%201.239a6.05%206.05%200%200%200%20.76-2.469c.23-2.659-1.34-2.499-2.129-2.509c-.58%200-1.27%200-2.069.11q-.85.064-1.7%200a1.63%201.63%200%200%201-.869-.22l-.2-8.276c0-.71%200-3.158.11-5.297c0-1.11.11-2.14.2-2.779q.028-.217.08-.43c.13%200%20.34%200%20.51-.05a32%2032%200%200%201%203.428-.19c2.819-.06%206.057%200%206.527%200c1.36%200%204.258.12%206.777.27c1.44.09%202.749.19%203.578.29l.47.08q.009.175%200%20.35c.16%201.7.23%205.767.22%206.877c.05.76.12%204.258.03%206.866z'/%3e%3cpath%20d='M19.267%205.797c-.7-.06-2.66-.2-4.948-.29H10.08c-2.08.07-3.938.22-4.998.32a.3.3%200%200%200%200%20.6c1%200%202.879.12%204.938.18h4.228c2.269%200%204.228-.12%204.928-.1a.35.35%200%200%200%20.36-.33a.35.35%200%200%200-.27-.38m-.269%203.708H12.12c-.69%200-1.39%200-2.06.08c-2.338.13-4.277.3-4.777.31a.3.3%200%200%200%200%20.6c.51%200%202.469.16%204.838.18h2.059c.7%200%201.39-.05%202.069-.09c1.899-.11%203.668-.27%204.808-.37a.34.34%200%201%200%200-.68zM12.3%2013.334c-.42%200-1.4-.1-2.529-.11h-1.07c-.36%200-.73%200-1.069.08c-1.06.12-1.999.29-2.479.33a.3.3%200%201%200%200%20.6q1.444.167%202.899.17c.57%200%201.16%200%201.71-.11c1.138-.11%202.118-.27%202.548-.3a.34.34%200%200%200%20.34-.34a.33.33%200%200%200-.35-.32'/%3e%3c/svg%3e");
}

.icon-mail {
    mask-image: url('/_astro/mail.Ducaz7tZ.svg');
}

.icon-agenda {
    mask-image: url('/_astro/agenda.Do8T99Ep.svg');
}

.icon-langue {
    mask-image: url('/_astro/langue.C6fTvSXS.svg');
}

.icon-pdf {
    mask-image: url('/_astro/pdf.CKNVjzGR.svg');
}

.icon-lien {
    mask-image: url('/_astro/lien.3CpqnYVz.svg');
}

.icon-rss {
    mask-image: url('/_astro/rss.DmL1zdOy.svg');
}

.icon-github {
    mask-image: url('/_astro/github.uiUyg9AN.svg');
}

.icon-linkedin {
    mask-image: url('/_astro/linkedin.IPdbTltM.svg');
}

.icon-aplorio {
    mask-image: url('/_astro/aplorio.D1ct_gXB.svg');
}

.icon-kilorep {
    mask-image: url('/_astro/kilorep.Bp8vdEgw.svg');
}

.icon-universe {
    mask-image: url('/_astro/universe.BIHiluql.svg');
}

.icon-prampto {
    mask-image: url('/_astro/prampto.BEupA1lm.svg');
}

.icon-safi {
    mask-image: url('/_astro/safi.BufLYqMU.svg');
}

.icon-daydo {
    mask-image: url('/_astro/daydo.DZcIrSad.svg');
}

.icon-ordo {
    mask-image: url('/_astro/ordo.BEJAyhL6.svg');
}

/* A capture keeps its colours, a little washed out until it is pointed at. */
.shot img,
.shot video {
    width: 100%;
    filter: saturate(0.7) contrast(0.96);
    transition: filter 0.4s ease;
}

.shot:hover img,
.shot:hover video {
    filter: none;
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0.35rem 1.6rem 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-family: var(--font-scrawl);
    font-weight: 400;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}

.btn::before,
.btn::after {
    content: '';
    position: absolute;
    background: var(--ink);
    pointer-events: none;
}

.btn::before {
    inset: 0;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.1%2010.1%20C%20133.4%207.3,%20258.7%20-0.4,%20397.1%202.7%20C%20399.6%2097.5,%20396.4%20197.8,%20395.7%20293.4%20C%20265.2%20286.4,%20142.6%20293.1,%206.2%20291.0%20C%209.5%20200.2,%2014.9%20104.0,%209.4%2010.6%20C%2021.3%2011.1,%2031.2%207.2,%2044.1%209.2'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M3.0%20290.9%20C%206.7%20202.1,%209.5%20108.5,%2012.3%2012.3%20C%20130.7%208.8,%20265.3%2015.9,%20393.8%205.7'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
}

.btn::after {
    inset: 5px;
    opacity: 0.4;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%2060'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.2'%20d='M-40.7%2061.3%20Q-19.6%2029.2%201.2%20-1.8%20M-29.8%2060.1%20Q-9.9%2027.5%2014.3%20-0.7%20M-16.3%2060.2%20Q7.3%2032.7%2029.7%20-1.3%20M-3.7%2062.0%20Q19.8%2028.7%2039.7%20-1.9%20M6.6%2060.6%20Q25.8%2030.5%2048.3%200.4%20M20.6%2061.1%20Q40.0%2028.2%2063.8%20-1.8%20M32.7%2060.6%20Q54.3%2028.8%2076.3%20-0.2%20M45.2%2060.5%20Q67.9%2032.3%2090.4%20-0.3%20M56.9%2062.0%20Q77.9%2031.5%2099.6%20-1.6%20M66.6%2060.1%20Q89.9%2030.4%20110.5%200.0%20M81.5%2061.4%20Q103.3%2029.7%20124.4%20-0.2%20M93.4%2060.9%20Q114.5%2031.2%20140.0%20-0.0%20M104.6%2061.6%20Q127.5%2031.0%20151.5%20-1.1%20M114.1%2060.3%20Q133.8%2031.6%20157.9%20-1.6%20M126.5%2060.8%20Q145.7%2029.7%20169.0%200.6%20M140.2%2061.6%20Q162.2%2029.5%20186.5%200.6%20M151.4%2061.9%20Q173.0%2028.4%20197.7%20-1.5%20M162.9%2061.2%20Q182.4%2029.5%20206.8%20-1.2%20M175.5%2061.9%20Q197.8%2030.7%20219.9%200.1'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    visibility: hidden;
}

/* Hatched in three passes of the pencil, a third of the strokes at a time,
   while the frame boils. */
.btn:is(:hover, :focus-visible)::after {
    visibility: visible;
    animation: hatch-in 0.3s steps(1) both;
}

.btn:is(:hover, :focus-visible)::before {
    animation: boil var(--boil) steps(1) var(--boil-times);
}

@keyframes hatch-in {
    0% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%2060'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.2'%20d='M-40.7%2061.3%20Q-19.6%2029.2%201.2%20-1.8%20M-3.7%2062.0%20Q19.8%2028.7%2039.7%20-1.9%20M32.7%2060.6%20Q54.3%2028.8%2076.3%20-0.2%20M66.6%2060.1%20Q89.9%2030.4%20110.5%200.0%20M104.6%2061.6%20Q127.5%2031.0%20151.5%20-1.1%20M140.2%2061.6%20Q162.2%2029.5%20186.5%200.6%20M175.5%2061.9%20Q197.8%2030.7%20219.9%200.1'/%3e%3c/svg%3e");
    }
    33.333% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%2060'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.2'%20d='M-40.7%2061.3%20Q-19.6%2029.2%201.2%20-1.8%20M-29.8%2060.1%20Q-9.9%2027.5%2014.3%20-0.7%20M-3.7%2062.0%20Q19.8%2028.7%2039.7%20-1.9%20M6.6%2060.6%20Q25.8%2030.5%2048.3%200.4%20M32.7%2060.6%20Q54.3%2028.8%2076.3%20-0.2%20M45.2%2060.5%20Q67.9%2032.3%2090.4%20-0.3%20M66.6%2060.1%20Q89.9%2030.4%20110.5%200.0%20M81.5%2061.4%20Q103.3%2029.7%20124.4%20-0.2%20M104.6%2061.6%20Q127.5%2031.0%20151.5%20-1.1%20M114.1%2060.3%20Q133.8%2031.6%20157.9%20-1.6%20M140.2%2061.6%20Q162.2%2029.5%20186.5%200.6%20M151.4%2061.9%20Q173.0%2028.4%20197.7%20-1.5%20M175.5%2061.9%20Q197.8%2030.7%20219.9%200.1'/%3e%3c/svg%3e");
    }
    66.667%,
    100% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20180%2060'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.2'%20d='M-40.7%2061.3%20Q-19.6%2029.2%201.2%20-1.8%20M-29.8%2060.1%20Q-9.9%2027.5%2014.3%20-0.7%20M-16.3%2060.2%20Q7.3%2032.7%2029.7%20-1.3%20M-3.7%2062.0%20Q19.8%2028.7%2039.7%20-1.9%20M6.6%2060.6%20Q25.8%2030.5%2048.3%200.4%20M20.6%2061.1%20Q40.0%2028.2%2063.8%20-1.8%20M32.7%2060.6%20Q54.3%2028.8%2076.3%20-0.2%20M45.2%2060.5%20Q67.9%2032.3%2090.4%20-0.3%20M56.9%2062.0%20Q77.9%2031.5%2099.6%20-1.6%20M66.6%2060.1%20Q89.9%2030.4%20110.5%200.0%20M81.5%2061.4%20Q103.3%2029.7%20124.4%20-0.2%20M93.4%2060.9%20Q114.5%2031.2%20140.0%20-0.0%20M104.6%2061.6%20Q127.5%2031.0%20151.5%20-1.1%20M114.1%2060.3%20Q133.8%2031.6%20157.9%20-1.6%20M126.5%2060.8%20Q145.7%2029.7%20169.0%200.6%20M140.2%2061.6%20Q162.2%2029.5%20186.5%200.6%20M151.4%2061.9%20Q173.0%2028.4%20197.7%20-1.5%20M162.9%2061.2%20Q182.4%2029.5%20206.8%20-1.2%20M175.5%2061.9%20Q197.8%2030.7%20219.9%200.1'/%3e%3c/svg%3e");
    }
}

.btn > span {
    position: relative;
    z-index: 1;
    padding: 0 0.3rem;
}

.sk {
    max-width: none;
    overflow: visible;
}

.pen,
.pen-soft {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pen {
    stroke: var(--ink);
    stroke-width: 2;
}

.pen-soft {
    stroke: var(--muted);
    stroke-width: 1.4;
}

@media (prefers-color-scheme: dark) {
    .pen {
        stroke-width: 2.6;
    }
}

/* Each starts from a sliver, not from nothing: Chrome skips an unpainted
   element as LCP until it shows. */
.write {
    animation: write 1.25s cubic-bezier(0.5, 0.1, 0.4, 1) 0.1s both;
}

.draw-in {
    animation: write 1s var(--ease-pen) 1.1s both;
}

@keyframes write {
    from {
        clip-path: inset(-30% 94% -30% 0);
    }
    to {
        clip-path: inset(-30% -5% -30% 0);
    }
}

/* At rest the stroke is whole, so a reader without motion still sees it. */
.loop {
    stroke-dasharray: 1;
    animation: loop 1.1s cubic-bezier(0.4, 0.1, 0.2, 1) 1.6s both;
}

@keyframes loop {
    from {
        stroke-dashoffset: 1;
    }
}

.fade-late {
    animation: fade 0.8s ease 2.4s both;
}

@keyframes fade {
    from {
        opacity: 0;
    }
}

.bar,
main,
.foot {
    width: 100%;
    max-width: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

main {
    flex: 1;
    padding-top: clamp(1.75rem, 5vw, 3.25rem);
    animation: settle 0.8s var(--ease-pen) 0.1s both;
}

/* From a sliver, as .write: an unpainted element is no LCP candidate. */
@keyframes settle {
    from {
        opacity: 0.1;
        translate: 0 0.5rem;
    }
}
.bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 2rem;
    flex-wrap: wrap;
    padding-top: clamp(1.25rem, 3.5vw, 2.5rem);
}

.bar-start {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.brand {
    flex: none;
    display: block;
    width: 56px;
    height: 56px;
    margin-left: -4px;
}

.brand-mark {
    width: 100%;
    height: 100%;
}

.brand-box,
.brand-soft {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.brand-box {
    stroke-width: 2.1;
}

.brand-soft {
    stroke-width: 1.4;
    stroke-opacity: 0.45;
}

.brand-it {
    fill: currentColor;
}

.bar-title {
    font-family: var(--font-scrawl);
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1;
}

.bar-title::first-letter {
    text-transform: lowercase;
}

.nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 clamp(1rem, 2.6vw, 2rem);
    /* Just small enough for the four links to hold one line down to 320px. */
    font-size: clamp(1.2rem, 9vw - 0.6rem, 1.6rem);
    text-transform: lowercase;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
}

.nav-link .icon {
    display: none;
    width: 1.35rem;
    height: 1.35rem;
}

.nav-link .ln::after {
    bottom: -0.1rem;
}

.nav-link:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

.nav-link[aria-current] .ln::after {
    clip-path: inset(0);
}

@media (min-width: 44rem) {
    .nav {
        font-size: 1.75rem;
    }
}

/* Read out, not shown: the nav underlines the page and keeps to one line. */
@media (max-width: 44rem) {
    .bar {
        column-gap: 1rem;
    }

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

/* Room for the icons only once the bar holds on one line. */
@media (min-width: 60rem) {
    .nav-link .icon {
        display: inline-block;
    }
}
.foot {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.foot-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-top: 1rem;
    font-size: 1.125rem;
}

.foot-row a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
}

.foot-row a:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

.foot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0 1.5rem;
}

.foot-row .icon {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--muted);
    transition: color 0.2s ease;
}

.foot-row a:hover .icon {
    color: var(--ink);
}

.foot-row .ln::after {
    bottom: -0.05rem;
}

@media (max-width: 34rem) {
    .foot-links .ln {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .foot-row {
        gap: 0.5rem 1rem;
        font-size: 1.05rem;
    }

    .foot-links {
        gap: 0 0.9rem;
    }
}

.page-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 2rem;
}

.page-head-top > :not(h1) {
    font-family: var(--font-scrawl);
    font-weight: 400;
    font-size: 1.7rem;
}

.lede {
    max-width: 34ch;
    margin-top: 1.75rem;
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.5;
    text-wrap: pretty;
}

/* A link inside running text keeps a faint rule, inked on hover. */
.lede a,
.prose a {
    text-decoration: underline 1px var(--line);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.2s ease;
}

.lede a:hover,
.prose a:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

.posts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.posts li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1rem;
}

.posts-date {
    flex: 0 0 8rem;
    font-size: 1.4rem;
    color: var(--muted);
}

.posts a {
    flex: 1 1 16rem;
    font-size: 1.2rem;
    line-height: 1.4;
}

/* Without dates, a pencilled dash leads each title. */
.posts-bare li {
    flex-wrap: nowrap;
    gap: 0.75rem;
}

.posts-bare li::before {
    content: '';
    flex: none;
    width: 1.1rem;
    height: 0.5rem;
    background: var(--muted);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2012'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%207%20C%2030%203,%2070%2010,%20118%205'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    translate: 0 -0.2rem;
}

.busy {
    position: relative;
    display: inline-block;
    flex: none;
    width: 48px;
    height: 24px;
    vertical-align: middle;
}

.busy-line {
    width: 100%;
    height: 100%;
}

.busy-line .pen {
    stroke-width: 1.6;
    stroke-dasharray: 1;
    animation: busy-write 3.4s cubic-bezier(0.45, 0.05, 0.4, 1) infinite;
}

/* The pencil's tip rides the line as it is drawn, then lifts back to the start. */
.busy-pencil {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: var(--ink);
    mask: url('/_astro/crayon.C_Q14efT.svg') center / contain no-repeat;
    offset-path: path(
        'M3 17 C 7 9, 10 9, 11 15 S 16 21, 19 13 S 25 7, 27 14 S 33 20, 37 12 S 42 9, 45 13'
    );
    offset-rotate: 0deg;
    offset-anchor: 18% 88%;
    offset-distance: 100%;
    animation: busy-ride 3.4s cubic-bezier(0.45, 0.05, 0.4, 1) infinite;
}

@keyframes busy-write {
    0% {
        stroke-dashoffset: 1;
        opacity: 1;
    }
    55%,
    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    95%,
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes busy-ride {
    0% {
        offset-distance: 0%;
    }
    55%,
    82% {
        offset-distance: 100%;
        translate: 0 0;
    }
    90% {
        translate: 0 -5px;
    }
    100% {
        offset-distance: 0%;
        translate: 0 0;
    }
}

.pj-block {
    break-inside: avoid;
    margin-bottom: 2.5rem;
}

.pj-block .head {
    margin-bottom: 0.75rem;
    font-size: 2.1rem;
}

.pj-block ul {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

/* With pictures, the tools stand side by side, each above its own words. */
.pj-cards:has(.pj-card-visual) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: 2.25rem clamp(1.5rem, 3.5vw, 2.75rem);
}

.pj-card-visual {
    display: block;
    margin-bottom: 0.85rem;
    aspect-ratio: 16 / 10;
    rotate: -0.6deg;
}

.pj-card:nth-child(even) .pj-card-visual {
    rotate: 0.7deg;
}

.pj-card-visual.framed::before {
    inset: -6px;
}

.tool-sketch {
    width: 100%;
    height: 100%;
}

.tool-sketch-word {
    font-family: var(--font-scrawl);
    font-weight: 600;
    fill: var(--ink);
}

.pj-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.pj-block-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-scrawl);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.2;
}

.pj-block-name .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.pj-block-name:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

.pj-block-tag {
    margin-left: 0.45rem;
    font-size: 1.25rem;
    color: var(--muted);
}

.pj-block p:not(.pj-card-title) {
    margin-top: 0.15rem;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--soft);
}

/* One sheet of ruled paper; the frame inks over while a field has the focus.
   It lies above what follows, for the addresses offered under the field. */
.say {
    --line-gap: 2.3rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1 1 32rem;
    max-width: 42rem;
    min-width: 0;
    padding: 1.6rem clamp(1.1rem, 3vw, 2rem) 1.6rem;
    rotate: -0.3deg;
}

.say.framed-alt::before {
    inset: 0;
    background: var(--muted);
    transition: background-color 0.2s ease;
}

.say:focus-within.framed-alt::before {
    background: var(--ink);
}

.say-greeting {
    font-size: 2.1rem;
    line-height: 1;
}

.say-message,
.say-email {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-weight: 400;
    font-size: 1.2rem;
}

.say-message {
    min-height: calc(7 * var(--line-gap));
    padding: 0;
    resize: vertical;
    line-height: var(--line-gap);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--line-gap) - 1px),
        var(--ruled) calc(var(--line-gap) - 1px) var(--line-gap)
    );
    background-attachment: local;
}

.say-message::placeholder,
.say-email::placeholder {
    color: var(--muted);
    opacity: 1;
}

/* The lines and the frame show the focus. */
.say-message:focus-visible,
.say-email:focus-visible {
    outline: none;
}

.say-reply {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.9rem;
}

.say-label {
    flex: none;
    font-size: 1.6rem;
    line-height: 1.2;
}

.say-email-box {
    position: relative;
    flex: 1 1 14rem;
    min-width: 0;
}

.say-email {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.4rem 0.2rem 0.2rem;
    background: linear-gradient(var(--line), var(--line)) 0 100% / 100% 1.5px
        no-repeat;
    transition: background-size 0.2s ease;
}

.say-email:focus {
    background-image: linear-gradient(var(--ink), var(--ink));
    background-size: 100% 2px;
}

.say-suggest {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0.4rem 0;
    list-style: none;
    background: var(--grain), var(--paper);
    rotate: 0.5deg;
}

.say-suggest.framed::before {
    inset: 0;
}

.say-suggest li {
    padding: 0.3rem 0.9rem;
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.say-suggest-typed {
    color: var(--muted);
}

.say-suggest [aria-selected='true'] .ln::after,
.say-suggest li:hover .ln::after {
    clip-path: inset(0);
}

.say-reply .field-wrong {
    flex-basis: 100%;
}

.field-wrong {
    display: none;
    margin-top: 0.4rem;
    font-size: 1.45rem;
    line-height: 1.1;
}

.field:has(:user-invalid) .field-wrong {
    display: block;
}

.field:has(.say-email:user-invalid) .say-email {
    background-image: linear-gradient(var(--ink), var(--ink));
    background-size: 100% 2px;
}

.trap {
    position: absolute;
    left: -100vw;
}

.say-send {
    display: flex;
    justify-content: flex-end;
}

.say-send .btn {
    font-size: 2rem;
}

.clip {
    display: block;
    width: 100%;
    height: auto;
    /* Universe's own canvas, under the poster while it loads. */
    background: #0e0f13;
}

.device {
    position: relative;
}

.device-screen {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    height: var(--h);
    overflow: hidden;
    border-radius: var(--r);
}

.device-screen :is(picture, img, video) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.device-sketch {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.device-sketch path {
    vector-effect: non-scaling-stroke;
}

.gallery {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    overflow: hidden;
}

.gallery[open] {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
}

.gallery::backdrop {
    background: var(--grain), color-mix(in srgb, var(--paper) 78%, transparent);
    backdrop-filter: blur(3px);
}

body:has(.gallery[open]) {
    overflow: hidden;
}

.gallery-track {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.gallery-slide {
    flex: 0 0 100%;
    display: grid;
    place-items: center;
    padding: clamp(3.5rem, 7vh, 5rem) clamp(1rem, 7vw, 6rem) 1rem;
    scroll-snap-align: start;
}

.gallery-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    max-width: 100%;
}

.gallery-frame img {
    width: auto;
    height: auto;
    max-width: min(100%, 72rem);
    max-height: calc(100dvh - 12rem);
}

.gallery-frame.framed::before {
    inset: -12px;
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.5'%20d='M7.4%201.78%20C%20138.1%201.65,%20266.1%201.82,%20398.74%201.72%20C%20398.12%20103.5,%20398.87%20197.6,%20398.87%20297.87%20C%20268.3%20298.94,%20138.8%20297.65,%201.92%20298.14%20C%201.22%20194.2,%201.74%2094.7,%201.27%201.34%20C%205.1%201.65,%2014.7%202.18,%2026.2%201.9'/%3e%3c/svg%3e");
}

/* The page's frame, stretched this large, would wobble over the capture. */
.gallery[open] .gallery-frame::before {
    animation: boil-thin var(--boil) steps(1) var(--boil-times);
}

@keyframes boil-thin {
    0% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.5'%20d='M7.4%201.78%20C%20138.1%201.65,%20266.1%201.82,%20398.74%201.72%20C%20398.12%20103.5,%20398.87%20197.6,%20398.87%20297.87%20C%20268.3%20298.94,%20138.8%20297.65,%201.92%20298.14%20C%201.22%20194.2,%201.74%2094.7,%201.27%201.34%20C%205.1%201.65,%2014.7%202.18,%2026.2%201.9'/%3e%3c/svg%3e");
    }
    33.333% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.5'%20d='M13.1%202.33%20C%20137.7%201.12,%20267.1%201.59,%20398.26%201.18%20C%20398.73%2099.3,%20398.69%20199.5,%20398.97%20298.88%20C%20268.5%20298.41,%20133.2%20297.97,%201.5%20298.92%20C%202.1%20201.1,%201.92%20101.5,%202.36%201.51%20C%208.0%201.52,%2015.4%201.92,%2023.8%201.12'/%3e%3c/svg%3e");
    }
    66.667% {
        mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.5'%20d='M10.2%201.13%20C%20134.4%202.18,%20270.0%201.72,%20398.12%201.52%20C%20398.26%2095.3,%20398.04%20201.2,%20398.61%20298.47%20C%20268.8%20298.38,%20138.5%20297.64,%202.17%20298.87%20C%201.11%20197.5,%201.51%20102.5,%202.16%201.79%20C%207.6%201.8,%2012.2%201.74,%2022.6%201.58'/%3e%3c/svg%3e");
    }
}

.gallery-figure figcaption {
    max-width: 44rem;
    font-size: 1.05rem;
    line-height: 1.45;
    text-align: center;
    color: var(--soft);
    text-wrap: balance;
}

.gallery-fine {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.gallery-at {
    padding-bottom: 1.25rem;
    text-align: center;
    font-size: 1.6rem;
    color: var(--muted);
}

.gallery-btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.gallery-btn::before {
    content: '';
    width: 2.6rem;
    height: 1.4rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2018'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%2010%20C%2014%208,%2026%209,%2037%209%20M%2037%209%20L%2029%203%20M%2037%209%20L%2030%2015'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: translate 0.25s var(--ease-pen);
}

.gallery-prev {
    left: clamp(0.25rem, 2vw, 1.5rem);
    top: 50%;
    translate: 0 -50%;
}

.gallery-prev::before {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2046%2020'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M44%2011%20C%2032%2012,%2018%2010,%204%2010%20M%204%2010%20L%2012%203%20M%204%2010%20L%2011%2017'/%3e%3c/svg%3e");
}

.gallery-next {
    right: clamp(0.25rem, 2vw, 1.5rem);
    top: 50%;
    translate: 0 -50%;
}

.gallery-prev:hover::before {
    translate: -0.25rem 0;
}

.gallery-next:hover::before {
    translate: 0.25rem 0;
}

.gallery-close {
    top: clamp(0.5rem, 2vh, 1.25rem);
    right: clamp(0.5rem, 2vw, 1.5rem);
}

.gallery-close::before {
    width: 1.9rem;
    height: 1.9rem;
    mask-image: url('/_astro/fermer.81AunRG-.svg');
}

@media (max-width: 44rem) {
    .gallery-prev,
    .gallery-next {
        top: auto;
        bottom: 0.5rem;
        translate: none;
    }
}

.gallery::backdrop {
    background-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
    .gallery::backdrop {
        background-blend-mode: screen;
    }
}

.hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3rem;
}

.hero-text {
    flex: 1 1 30rem;
    min-width: 0;
}

.hero-name {
    font-weight: 700;
    font-size: clamp(4.25rem, 10vw, 8.5rem);
    line-height: 0.85;
}

.hero-line {
    width: min(100%, 540px);
    margin-top: 0.35rem;
}

.hero-motto {
    margin-top: 1.1rem;
    font-family: var(--font-scrawl);
    font-weight: 500;
    font-size: clamp(1.6rem, 2.4vw, 1.9rem);
    line-height: 1.25;
}

.motto-text {
    display: inline-block;
    max-width: 100%;
    transform: skewX(-11deg);
    transform-origin: left bottom;
    text-wrap: balance;
}

.motto-end {
    white-space: nowrap;
}

/* Raised to the capitals, as a written quotation mark sits. */
.motto-mark {
    display: inline-block;
    width: 0.625em;
    height: 0.5em;
    vertical-align: 0.42em;
}

.motto-mark:first-child {
    margin-right: 0.08em;
}

.motto-end .motto-mark {
    margin-left: 0.06em;
}

.motto-mark .pen {
    stroke-width: 1.7;
}

.motto-dot {
    fill: var(--ink);
}

/* Ink on white paper in either scheme: inverted, the drawing turns eerie. */
.hero-portrait {
    flex: none;
    background: #fff;
    width: clamp(9.5rem, 19vw, 15rem);
    margin: 0 clamp(0.5rem, 3vw, 2rem) 0 0.5rem;
    rotate: -2.2deg;
}

.hero-portrait img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 3rem clamp(2.5rem, 6vw, 5rem);
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

/* The projects on the writing page's ruled lines: the mark in the margin,
   the name on one line and what it is on the next. Every baseline sits
   --rule-gap above its rule. */
.ruled.notebook {
    --line-gap: 3rem;
    --margin: 3.25rem;
    --rule-gap: 0.775rem;
    margin-top: 0;
    padding-bottom: 0;
}

.notebook-row {
    display: grid;
    grid-template-columns: var(--margin) minmax(0, 1fr);
    column-gap: 2rem;
    line-height: var(--line-gap);
}

.notebook-mark {
    align-self: end;
    justify-self: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: var(--rule-gap);
}

/* A line box --line-gap tall sets the baseline at half its height, plus
   0.326em in Caveat and 0.26em in Kalam. */
.notebook-name {
    position: relative;
    top: calc(var(--line-gap) / 2 - var(--rule-gap) - 0.326em);
    display: flex;
    align-items: baseline;
    gap: 0 0.7rem;
    min-width: 0;
    height: var(--line-gap);
    font-size: 2.05rem;
    line-height: var(--line-gap);
}

.notebook-name .busy {
    align-self: center;
}

.notebook-code {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-left: auto;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--muted);
}

.notebook-code .icon {
    width: 1rem;
    height: 1rem;
    translate: none;
}

.notebook-code:is(:hover, :focus-visible) {
    color: var(--ink);
}

.notebook-code:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

.notebook-short {
    position: relative;
    top: calc(var(--line-gap) / 2 - var(--rule-gap) - 0.26em);
    grid-column: 2;
    color: var(--soft);
    text-wrap: pretty;
}

/* The head's ::first-letter can't reach into the underlined span. */
.head-go {
    text-transform: lowercase;
}

.head-go:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

@media (max-width: 60rem) {
    .home-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 44rem) {
    .hero {
        flex-direction: column;
        gap: 0;
        text-align: center;
    }

    .hero-text {
        display: contents;
    }

    .hero-line {
        display: block;
        margin-inline: auto;
    }

    .hero-portrait {
        order: 1;
        width: 12.5rem;
        margin: 1.75rem auto 0;
        rotate: -1.6deg;
    }

    .hero-motto {
        order: 2;
        margin-top: 1.25rem;
    }

    .motto-text {
        transform-origin: center bottom;
    }
}

@media (max-width: 34rem) {
    .ruled.notebook {
        --line-gap: 2.5rem;
        --margin: 2rem;
        --rule-gap: 0.6rem;
    }

    .ruled.notebook::before {
        display: none;
    }

    .notebook-row {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.6rem;
    }

    .notebook-mark {
        width: 1.2rem;
        height: 1.2rem;
    }

    .notebook-name {
        font-size: 1.75rem;
    }

    .notebook-code .icon {
        width: 1.15rem;
        height: 1.15rem;
    }

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

    .notebook-short {
        grid-column: 1 / -1;
        font-size: 0.92rem;
    }
}

/* A ruled notebook page: every row sits on one of its lines. */
.ruled {
    --line-gap: 3.2rem;
    --margin: 8.5rem;
    position: relative;
    margin-top: 1.5rem;
    padding-bottom: calc(2 * var(--line-gap));
    border-top: 1px solid var(--ruled);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--line-gap) - 1px),
        var(--ruled) calc(var(--line-gap) - 1px) var(--line-gap)
    );
}

.ruled::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--margin) + 1rem);
    width: 4px;
    border-inline: 1px solid var(--line);
}

.ruled-row {
    position: relative;
    display: grid;
    grid-template-columns: var(--margin) minmax(0, 1fr);
    column-gap: 2rem;
    line-height: var(--line-gap);
}

/* Down onto the line instead of floating midway between two. */
.ruled-year > span,
.ruled-date,
.ruled-go .ln-lines,
.ruled-note {
    position: relative;
    top: 0.55rem;
}

.ruled-year {
    font-weight: 400;
    font-size: 1.75rem;
    text-align: right;
}

.ruled-date {
    text-align: right;
    font-size: 1.6rem;
    color: var(--muted);
}

.ruled-go {
    font-size: clamp(1.2rem, 1.9vw, 1.45rem);
}

.ruled-go::before {
    content: '';
    position: absolute;
    inset: 0;
}

.ruled-fr {
    font-size: 1.5rem;
    color: var(--muted);
}

li.ruled-row::before {
    content: '';
    position: absolute;
    left: 0.15rem;
    top: 1.15rem;
    width: 2.6rem;
    height: 1.2rem;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2018'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%2010%20C%2014%208,%2026%209,%2037%209%20M%2037%209%20L%2029%203%20M%2037%209%20L%2030%2015'/%3e%3c/svg%3e") center / contain no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.35s var(--ease-pen);
}

li.ruled-row:is(:hover, :focus-within)::before {
    clip-path: inset(0);
}

li.ruled-row {
    animation: row-in 0.5s var(--ease-pen) both;
    animation-delay: calc(0.05s + var(--i) * 0.07s);
}

@keyframes row-in {
    from {
        opacity: 0.1;
        translate: 0 0.4rem;
    }
}

@media (max-width: 44rem) {
    .ruled {
        --margin: 4.75rem;
    }

    .ruled-row {
        column-gap: 1.1rem;
    }

    .ruled::before {
        left: calc(var(--margin) + 0.4rem);
    }

    .ruled-date {
        font-size: 1.45rem;
    }

    li.ruled-row::before {
        display: none;
    }
}

.ruled-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.5rem;
}

.ruled-feed {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    font-size: 1.4rem;
    color: var(--muted);
}

.ruled-feed .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.ruled-feed:is(:hover, :focus-visible) {
    color: var(--ink);
}

.ruled-feed:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

@media (max-width: 44rem) {
    .ruled-note {
        column-gap: 0.5rem;
    }

    .ruled-fr {
        font-size: 1.3rem;
    }

    .ruled-feed {
        min-width: 2rem;
        min-height: 44px;
        justify-content: end;
    }

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

/* One column down the middle of the page, as a book page sits. */
.prose,
.prose-next {
    max-width: 46rem;
    margin-inline: auto;
}

.prose-title {
    max-width: 17ch;
    font-size: clamp(3.4rem, 7vw, 5.8rem);
    line-height: 0.9;
    text-wrap: balance;
}

.prose-byline {
    margin-top: 0.9rem;
    font-size: 1.7rem;
    color: var(--muted);
}

.prose-tldr {
    max-width: 58ch;
    margin: 2rem 0 2.4rem;
    padding: 1.3rem 1.6rem 1.4rem;
    rotate: -0.35deg;
}

.prose-tldr.framed::before {
    inset: -6px;
}

.prose-tldr p:first-child {
    margin-bottom: 0.25rem;
    font-size: 1.75rem;
    line-height: 1;
}

.prose-tldr p:last-child {
    font-weight: 400;
    font-size: 1.12rem;
    line-height: 1.6;
}

/* In the body's own ch, so the measure follows its size. */
.prose-body {
    max-width: 64ch;
    font-size: 1.15rem;
}

.prose-body :is(p, ul, ol, blockquote) {
    margin-bottom: 1.1em;
    line-height: 1.7;
    text-wrap: pretty;
    hyphens: auto;
}

.prose-body h2 {
    margin: 1.6em 0 0.55em;
    font-family: var(--font-scrawl);
    font-weight: 400;
    font-size: 2.35em;
    line-height: 1;
    text-wrap: balance;
}

.prose-body h2::after {
    content: '';
    display: block;
    width: 6.5rem;
    height: 0.35em;
    margin-top: 0.12em;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2012'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%207%20C%2030%203,%2070%2010,%20118%205'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
}

.prose-body h3 {
    margin: 1.6em 0 0.5em;
    font-weight: 700;
    font-size: 1.15em;
}

.prose-body ul,
.prose-body ol {
    padding-left: 1.25rem;
    list-style: disc;
}

.prose-body ol {
    list-style: decimal;
}

.prose-body li + li {
    margin-top: 0.375rem;
}

.prose-body blockquote {
    position: relative;
    padding-left: 1.4rem;
    font-weight: 400;
    color: var(--soft);
}

.prose-body blockquote::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%20100'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20d='M4%200%20C%203%2030,%205%2060,%204%20100'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
}

.prose-body pre {
    position: relative;
    margin: 1.4em 0 1.5em;
    padding: 1.1rem 1.3rem;
    font-size: 0.82em;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.prose-body pre::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.1%2010.1%20C%20133.4%207.3,%20258.7%20-0.4,%20397.1%202.7%20C%20399.6%2097.5,%20396.4%20197.8,%20395.7%20293.4%20C%20265.2%20286.4,%20142.6%20293.1,%206.2%20291.0%20C%209.5%20200.2,%2014.9%20104.0,%209.4%2010.6%20C%2021.3%2011.1,%2031.2%207.2,%2044.1%209.2'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M3.0%20290.9%20C%206.7%20202.1,%209.5%20108.5,%2012.3%2012.3%20C%20130.7%208.8,%20265.3%2015.9,%20393.8%205.7'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

.prose-body :not(pre) > code {
    padding: 0.02em 0.35em;
    border: 1px solid var(--line);
    border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    font-size: 0.92em;
}

.prose-body .tok-comment {
    color: var(--code-comment);
}

.prose-body .tok-punct {
    color: var(--code-punct);
}

.prose-body .tok-string {
    color: var(--code-string);
}

.prose-body .tok-keyword {
    color: var(--code-keyword);
}

.prose-body .tok-fn {
    color: var(--code-fn);
}

.prose-body .tok-number {
    color: var(--code-number);
}

/* A picture sits alone in its paragraph; the frame hugs the image. */
.prose-body p:has(> img, > picture) {
    position: relative;
    width: fit-content;
    margin: 2.2em auto 2.4em;
    rotate: 0.4deg;
}

.prose-body p:has(> img, > picture)::before {
    content: '';
    position: absolute;
    inset: -8px;
    z-index: 1;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.3%209.8%20C%20129.2%204.1,%20258.5%2010.7,%20397.4%205.7%20C%20399.3%2094.7,%20402.6%20203.0,%20395.1%20294.7%20C%20268.0%20296.1,%20131.8%20287.5,%203.5%20294.1%20C%204.6%20193.3,%200.6%20101.3,%205.6%207.5%20C%2011.4%209.3,%2018.1%207.8,%2024.3%206.7'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M-1.5%20289.9%20C%20-6.1%20192.0,%208.9%20103.1,%207.2%206.5%20C%20127.6%208.8,%20258.0%201.8,%20397.9%2010.0'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

.prose-body p:has(> img, > picture) img {
    filter: saturate(0.7) contrast(0.96);
    transition: filter 0.4s ease;
}

.prose-body p:has(> img, > picture):hover img {
    filter: none;
}

/* This capture draws its own rounded corners and 8px margin; a frame would
   sit off the artwork. */
.prose-body p:has(img[src*='/ghostty-'])::before {
    display: none;
}

.prose-body img[src*='/meme-'] {
    width: 20rem;
}

.prose-body img[src*='/meme-compute'] {
    width: 16rem;
}

.prose-body img[src*='/meme-pigeon'],
.prose-body img[src*='/meme-shipping'] {
    width: 25rem;
}

.prose-body img[src*='/meme-astronaute'],
.prose-body img[src*='/meme-pooh'],
.prose-body img[src*='/meme-change-my-mind'] {
    width: 30rem;
}

.prose-body p:has(> img, > picture) + p:has(> em:only-child) {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 40ch;
    margin: -1rem auto 2.4rem;
    font-family: var(--font-scrawl);
    font-size: 1.6rem;
    line-height: 1.05;
    color: var(--soft);
    hyphens: manual;
}

.prose-body p:has(> img, > picture) + p:has(> em:only-child)::before {
    content: '';
    flex: none;
    width: 2.6rem;
    height: 2.2rem;
    background: var(--muted);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2044%2036'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.6'%20d='M30%2034%20C%2026%2024,%2022%2014,%2018%204%20M%2018%204%20L%2013%2013%20M%2018%204%20L%2025%2011'/%3e%3c/svg%3e") center / contain no-repeat;
}

.prose-body p:has(> img, > picture) + p > em {
    font-style: normal;
}

.prose-body hr {
    height: 16px;
    margin: 2.5em 0;
    border: 0;
    background: var(--muted);
    mask: url('/_astro/rule-alt.BCC_ci3f.svg') 0 0 / 100% 100% no-repeat;
}

.prose-next {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.prose-next .head {
    margin-top: 1.4rem;
}

.prose-next .more {
    margin-top: 1rem;
}

@media (min-width: 44rem) {
    .prose-body {
        font-size: 1.22rem;
    }
}

.spreads {
    display: flex;
    flex-direction: column;
    gap: clamp(4rem, 9vw, 7rem);
    margin-top: clamp(1.5rem, 4vw, 2.75rem);
}

/* A notebook spread: the devices on one page, the words on the other. */
.spread {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem clamp(2rem, 5vw, 4.5rem);
}

.spread-flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

.spread-flip .spread-visual {
    order: 1;
}

.spread:has(.spread-deck) {
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
}

.spread-flip:has(.spread-deck) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
}

.spread-visual {
    cursor: zoom-in;
}

.devices {
    position: relative;
}

/* The phone leans on the laptop's corner. */
.spread-laptop .devices {
    padding: 0 12% 7% 0;
}

.spread-laptop .device-phone {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 25%;
    rotate: 3deg;
    transition: rotate 0.4s var(--ease-pen);
}

.spread-laptop:hover .device-phone {
    rotate: 1deg;
}

.spread-flip.spread .spread-laptop .devices {
    padding: 0 0 7% 12%;
}

.spread-flip .spread-laptop .device-phone {
    right: auto;
    left: 0;
    rotate: -3deg;
}

.spread-visual figcaption {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.spread-open {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.spread-open::after {
    content: '';
    width: 2.2rem;
    height: 1rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2018'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%2010%20C%2014%208,%2026%209,%2037%209%20M%2037%209%20L%2029%203%20M%2037%209%20L%2030%2015'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: translate 0.3s var(--ease-pen);
}

.spread-visual:hover .spread-open {
    color: var(--ink);
}

.spread-visual:hover .spread-open::after {
    translate: 0.25rem 0;
}

.spread-copy {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.spread-copy > p:not([class]) {
    max-width: 46ch;
    font-size: clamp(1.1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: var(--soft);
    text-wrap: pretty;
}

.spread-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.9rem;
    font-size: clamp(2.4rem, 4vw, 3.2rem);
}

/* A project's links, each behind the logo of where it goes. */
.links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.4rem;
    margin-top: 0.3rem;
}

.links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    font-family: var(--font-scrawl);
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1;
}

.links .icon {
    width: 1.05rem;
    height: 1.05rem;
}

.links a:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

.spread-copy .links {
    margin-top: 0.2rem;
}

.links-story {
    color: var(--muted);
}

.pj-rule {
    margin-top: clamp(4.5rem, 9vw, 6.5rem);
}

.pj-index {
    margin-top: 2.25rem;
}

.pj-stack {
    margin-top: 1rem;
}

.pj-stack summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    font-size: 1.5rem;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
}

.pj-stack summary::-webkit-details-marker {
    display: none;
}

.pj-stack summary::before {
    content: '';
    width: 1.6rem;
    height: 0.8rem;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2018'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%2010%20C%2014%208,%2026%209,%2037%209%20M%2037%209%20L%2029%203%20M%2037%209%20L%2030%2015'/%3e%3c/svg%3e") center / contain no-repeat;
    transition: rotate 0.25s var(--ease-pen);
}

.pj-stack[open] summary::before {
    rotate: 90deg;
}

.pj-stack summary:hover {
    color: var(--ink);
}

.pj-stack dl {
    display: grid;
    gap: 0.4rem;
    margin: 0.5rem 0 0 2.1rem;
}

.pj-stack div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.pj-stack dt {
    min-width: 6rem;
    font-family: var(--font-scrawl);
    font-weight: 700;
    font-size: 1.35rem;
}

.pj-stack dd {
    font-family: var(--font-code);
    font-size: 0.95rem;
    line-height: 2;
    color: var(--soft);
}

@media (max-width: 56rem) {
    .spread,
    .spread-flip,
    .spread:has(.spread-deck),
    .spread-flip:has(.spread-deck) {
        grid-template-columns: minmax(0, 1fr);
    }

    .spread-flip .spread-visual {
        order: 0;
    }
}

.uv-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
}

.uv-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.uv-hero {
    margin-top: clamp(2rem, 5vw, 3rem);
    rotate: -0.6deg;
}

.uv-head {
    margin-top: clamp(3.5rem, 8vw, 5.5rem);
    margin-bottom: 1.75rem;
}

.uv-features {
    display: flex;
    flex-direction: column;
    gap: clamp(3rem, 7vw, 5rem);
}

.uv-h {
    font-weight: 700;
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    line-height: 1.2;
}

.uv-features .spread-copy > p,
.uv-grid p,
.uv-next p {
    max-width: 52ch;
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--soft);
    text-wrap: pretty;
}

.uv-trio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 2rem;
    margin-top: 1.75rem;
}

.uv-trio figcaption {
    margin-top: 1rem;
    font-size: 1.02rem;
    line-height: 1.45;
    color: var(--soft);
}

.uv-trio b {
    color: var(--ink);
}

.uv-fine {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.uv-cli {
    position: relative;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: 1.1rem 1.3rem;
    font-size: 0.95rem;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.uv-cli::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20300'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M8.1%2010.1%20C%20133.4%207.3,%20258.7%20-0.4,%20397.1%202.7%20C%20399.6%2097.5,%20396.4%20197.8,%20395.7%20293.4%20C%20265.2%20286.4,%20142.6%20293.1,%206.2%20291.0%20C%209.5%20200.2,%2014.9%20104.0,%209.4%2010.6%20C%2021.3%2011.1,%2031.2%207.2,%2044.1%209.2'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.4'%20stroke-opacity='0.45'%20d='M3.0%20290.9%20C%206.7%20202.1,%209.5%20108.5,%2012.3%2012.3%20C%20130.7%208.8,%20265.3%2015.9,%20393.8%205.7'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}

.uv-note {
    color: var(--muted);
}

.uv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1.5rem 2rem;
}

.uv-stats div {
    display: flex;
    flex-direction: column-reverse;
}

.uv-stats dd {
    font-size: clamp(3.5rem, 6vw, 4.75rem);
    line-height: 0.9;
}

.uv-stats dt {
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--soft);
}

.uv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: 2.25rem clamp(2rem, 5vw, 4rem);
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.uv-grid .uv-h {
    margin-bottom: 0.5rem;
}

.uv-next {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.uv-links-block {
    margin-top: clamp(3.5rem, 8vw, 5.5rem);
}

.uv-features .spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.spread-shot {
    rotate: -1.2deg;
}

.spread-flip .spread-shot {
    rotate: 1.4deg;
}

@media (max-width: 56rem) {
    .uv-features .spread {
        grid-template-columns: minmax(0, 1fr);
    }

    .spread-shot,
    .spread-flip .spread-shot {
        margin: 0 0.5rem;
        rotate: -0.8deg;
    }
}

.cv-name {
    font-size: clamp(3.75rem, 8vw, 6rem);
    line-height: 0.85;
}

/* The PDF sits on the name's line, its baseline on the name's. */
.cv-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1.25rem;
}

.cv-meta {
    margin-top: 0.8rem;
    font-size: 1.2rem;
}

.cv-pdf {
    display: inline-block;
    padding-block: 0.65rem;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1;
}

.cv-pdf .icon {
    width: 1.15rem;
    height: 1.15rem;
    margin-right: 0.4rem;
    vertical-align: -0.05em;
}

.cv-pdf .ln::after {
    animation: pdf-line 0.7s var(--ease-pen) 1.35s both;
}

/* Pointed at, a second pass of the pencil, mirrored so it never lies exactly
   on the first. */
.cv-pdf .ln::before {
    content: '';
    position: absolute;
    left: -3%;
    bottom: -0.3em;
    width: 106%;
    height: 0.5em;
    background: currentColor;
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2010'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.8'%20d='M1.5%207%20C%2010%204.6,%2019%204.8,%2028%206.6%20S%2047%208.2,%2058%205.8%20S%2078%203.4,%2088%205.6%20S%2096%207,%2098.5%204'/%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='1.2'%20stroke-opacity='0.45'%20d='M56%206.9%20C%2068%205.2,%2080%204.4,%2096%205.6'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
    scale: -1 1;
    clip-path: inset(0 0 0 100%);
    pointer-events: none;
}

.cv-pdf:is(:hover, :focus-visible) .ln::before {
    animation: pdf-line-back 0.6s var(--ease-pen) both;
}

.cv-pdf:hover .icon {
    animation: pdf-drop var(--boil) steps(1) var(--boil-times);
}

@keyframes pdf-line {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0);
    }
}

@keyframes pdf-line-back {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0);
    }
}

@keyframes pdf-drop {
    50% {
        translate: 0 0.26em;
    }
}

/* The steps sit on the writing page's ruled lines; the chosen one is told beside them. */
.cv-steps {
    margin-top: clamp(2rem, 5vw, 3rem);
}

.cv-list {
    margin-top: 0;
    padding-bottom: var(--line-gap);
}

.cv-go {
    color: var(--soft);
}

.cv-go .busy {
    top: 0.55rem;
    margin-left: 0.4rem;
}

.cv-go[aria-selected='true'],
.ruled-row:has([aria-selected='true']) .ruled-date {
    color: var(--ink);
}

.cv-go[aria-selected='true'] .ln::after,
li.ruled-row:has([aria-selected='true'])::before {
    clip-path: inset(0);
}

.step {
    padding-block: 1.6rem 2rem;
    scroll-margin-top: 1.5rem;
}

.step-in {
    animation: step-in 0.4s var(--ease-pen);
}

@keyframes step-in {
    from {
        opacity: 0;
        translate: 0 0.4rem;
    }
}

.step-title {
    font-weight: 400;
    font-size: 1rem;
}

.step-title .name {
    font-size: 1.75rem;
}

.step-title .busy {
    margin-left: 0.4rem;
}

.step-sub,
.step-when {
    font-size: 1rem;
    color: var(--muted);
}

.step ul {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.step li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 1.04rem;
    line-height: 1.5;
    color: var(--soft);
    text-wrap: pretty;
}

.step li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 0.6rem;
    height: 0.3em;
    background: var(--muted);
    mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2012'%20preserveAspectRatio='none'%3e%3cpath%20fill='none'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'%20vector-effect='non-scaling-stroke'%20stroke-width='2'%20d='M2%207%20C%2030%203,%2070%2010,%20118%205'/%3e%3c/svg%3e") 0 0 / 100% 100% no-repeat;
}

.step strong {
    color: var(--ink);
}

@media (min-width: 64rem) {
    .cv-steps {
        display: grid;
        grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
        align-items: start;
        gap: 3.5rem;
    }

    .step {
        padding-top: 0.75rem;
    }
}

/* Each line's label in the notebook's margin, its items where the steps' names start. */
.cv-skills {
    margin-top: clamp(2.75rem, 6vw, 4rem);
}

.skills {
    margin-top: 0.5rem;
    padding-bottom: var(--line-gap);
}

.skills dd {
    position: relative;
    top: 0.625rem;
    font-size: 1.05rem;
    color: var(--soft);
}

/* Whole, an item moves to the next line; it breaks only when wider than one. */
.skill-items li {
    display: inline-block;
    max-width: 100%;
}

@media (max-width: 44rem) {
    .ruled.skills {
        --margin: 6.25rem;
    }

    .skills .ruled-date {
        font-size: 1.25rem;
    }
}

.skill-items li:not(:last-child)::after {
    content: '\00a0·';
    color: var(--muted);
}

.cv-volunteering {
    margin-top: clamp(2.75rem, 6vw, 4rem);
}

.cv-volunteering p {
    font-size: 1.1rem;
    color: var(--soft);
}

.cv-volunteering-when {
    color: var(--muted);
}

@media print {
    @page {
        size: A4;
        margin: 1.1cm 1.3cm 1cm;
    }

    :root:has(.cv-head) {
        color-scheme: light;
        background: none;
    }

    body:has(.cv-head) {
        background: none;
        font-size: 9pt;
    }

    body:has(.cv-head) :is(.skip, .bar, .foot, .cv-pdf, .cv-list) {
        display: none;
    }

    .cv-steps {
        display: block;
    }

    .step[hidden] {
        display: block;
    }

    .step {
        break-inside: avoid;
    }

    .skills {
        margin-top: 0.3rem;
        padding: 0;
        border: 0;
        background: none;
    }

    .skills::before {
        display: none;
    }

    .cv-skills .head {
        break-after: avoid;
    }

    .skills .ruled-row {
        line-height: 1.5;
        break-inside: avoid;
    }

    .skills :is(.ruled-date, dd) {
        top: 0;
    }

    .skills .ruled-date {
        font-size: 1.3rem;
    }
}

.talk {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3rem clamp(2.5rem, 7vw, 6rem);
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.talk-else {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    flex: 1 1 16rem;
    min-width: 0;
    padding-top: 0.5rem;
}

.talk-else a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    font-family: var(--font-scrawl);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
}

.talk-else .icon {
    width: 1.2rem;
    height: 1.2rem;
}

.talk-else a:is(:hover, :focus-visible) .ln::after {
    clip-path: inset(0);
}

.talk-else p {
    font-size: 1.05rem;
    line-height: 1.45;
    color: var(--soft);
}

.lost {
    position: relative;
    display: inline-block;
    margin-top: clamp(0.75rem, 3vw, 1.75rem);
}

.lost-code {
    font-size: clamp(9rem, 26vw, 18rem);
    line-height: 0.8;
    letter-spacing: 0.02em;
}

.lost svg {
    position: absolute;
    left: -6%;
    top: 8%;
    width: 112%;
    height: 78%;
    pointer-events: none;
}

/* Crossed out once the number is written. */
.strike {
    stroke-dasharray: 1;
    animation: loop 0.9s cubic-bezier(0.4, 0.1, 0.2, 1) 1.15s both;
}

.strike-2 {
    animation-duration: 0.7s;
    animation-delay: 1.95s;
}

.lost ~ .back {
    margin-top: 1.5rem;
    font-size: 2rem;
}