/* 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;
}

/* One strip per side, stretched along it only: the pencil keeps its px width
   at any size, centred on the box's edge. */
:root {
    --edge-t: 16px;
    --frame-1:
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2016'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20x2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.4'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.6'%20stop-opacity='1'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.7'/%3e%3cstop%20offset='1'%20stop-opacity='0.9'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M0%207.7L4%207.4L8%207L13%206.9L20%206.9L20.8%206.9L41.7%207L62.5%207.2L83.3%207.3L104.2%207.4L125%207.5L145.8%207.6L166.7%207.7L187.5%207.7L208.3%207.7L229.2%207.7L250%207.7L270.8%207.7L291.7%207.7L312.5%207.7L333.3%207.7L354.2%207.7L375%207.6L395.8%207.5L416.7%207.5L437.5%207.4L458.3%207.4L479.2%207.5L500%207.5L520.8%207.6L541.7%207.6L562.5%207.6L583.3%207.6L604.2%207.6L625%207.6L645.8%207.5L666.7%207.3L687.5%207.2L708.3%207L729.2%206.9L750%206.7L770.8%206.6L791.7%206.4L812.5%206.3L833.3%206.2L854.2%206.2L875%206.1L895.8%206.1L916.7%206.1L937.5%206.1L958.3%206.1L979.2%206.1L980%206.1L987%206.5L992%207.1L996%207.5L1000%207.6L1000%208.3L996%208.3L992%208.3L987%208.3L980%208.4L979.2%208.4L958.3%208.3L937.5%208.4L916.7%208.4L895.8%208.5L875%208.6L854.2%208.7L833.3%208.9L812.5%209L791.7%209.2L770.8%209.3L750%209.4L729.2%209.5L708.3%209.5L687.5%209.6L666.7%209.6L645.8%209.6L625%209.5L604.2%209.5L583.3%209.5L562.5%209.5L541.7%209.5L520.8%209.4L500%209.4L479.2%209.4L458.3%209.4L437.5%209.3L416.7%209.3L395.8%209.2L375%209.2L354.2%209.1L333.3%209.1L312.5%209L291.7%208.9L270.8%208.9L250%208.9L229.2%209L208.3%209.1L187.5%209.2L166.7%209.4L145.8%209.4L125%209.4L104.2%209.3L83.3%209.2L62.5%209.1L41.7%209L20.8%208.8L20%208.8L13%208.8L8%208.6L4%208.3L0%208.3Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M157.8%204.1L160.2%204.1L162.5%204.1L165.4%204.1L169.5%204.1L182.2%204L206.7%203.8L231.1%203.8L255.5%204.1L279.9%204.6L304.3%205L328.7%205.1L353.1%205.1L377.5%205.2L401.9%205.3L426.3%205.4L450.7%205.5L475.2%205.6L499.6%205.7L524%205.7L548.4%205.7L572.8%205.7L597.2%205.9L621.6%206.3L646%206.7L670.4%207L694.8%207.1L719.2%207.2L731.9%207.3L736%207.3L739%207.3L741.3%207.3L743.7%207.4L743.7%207.8L741.3%207.7L739%207.7L736%207.7L731.9%207.7L719.2%207.7L694.8%207.7L670.4%207.7L646%207.7L621.6%207.6L597.2%207.4L572.8%207.2L548.4%207.1L524%207.3L499.6%207.4L475.2%207.4L450.7%207.2L426.3%206.8L401.9%206.6L377.5%206.5L353.1%206.5L328.7%206.3L304.3%206L279.9%205.6L255.5%205.3L231.1%205.1L206.7%204.8L182.2%204.6L169.5%204.6L165.4%204.6L162.5%204.6L160.2%204.6L157.8%204.6Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M763.7%205.8L764.4%205.8L765.2%205.8L766.2%205.8L767.5%205.8L779.8%205.6L796%205.6L812.2%206L828.4%206L844.6%205.8L860.7%205.8L876.9%205.7L893.1%205.3L909.3%205.2L925.5%205.6L941.7%205.8L954%205.9L955.3%206L956.3%206L957.1%206L957.8%206L957.8%206.3L957.1%206.3L956.3%206.3L955.3%206.3L954%206.3L941.7%206.3L925.5%206.5L909.3%206.3L893.1%206.4L876.9%206.8L860.7%206.9L844.6%206.9L828.4%207.1L812.2%207.1L796%206.5L779.8%206.2L767.5%206.1L766.2%206.1L765.2%206.2L764.4%206.2L763.7%206.2Z'/%3e%3c/svg%3e") 1px 0 / calc(100% - 6px) var(--edge-t)
            no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%201000'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20y2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.4'%20stop-opacity='1'/%3e%3cstop%20offset='0.5'%20stop-opacity='1'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-opacity='0.9'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M8.3%200L8.3%204L8.3%208L8.3%2013L8.3%2020L8.3%2020.8L8.3%2041.7L8.3%2062.5L8.3%2083.3L8.3%20104.2L8.3%20125L8.3%20145.8L8.4%20166.7L8.6%20187.5L8.7%20208.3L8.9%20229.2L9%20250L9.1%20270.8L9.2%20291.7L9.3%20312.5L9.3%20333.3L9.2%20354.2L9.1%20375L9.1%20395.8L9.1%20416.7L9.1%20437.5L9.1%20458.3L9.2%20479.2L9.3%20500L9.3%20520.8L9.3%20541.7L9.4%20562.5L9.5%20583.3L9.5%20604.2L9.6%20625L9.7%20645.8L9.7%20666.7L9.8%20687.5L9.8%20708.3L9.8%20729.2L9.9%20750L9.8%20770.8L9.8%20791.7L9.8%20812.5L9.8%20833.3L9.7%20854.2L9.6%20875L9.6%20895.8L9.5%20916.7L9.4%20937.5L9.3%20958.3L9.1%20979.2L9.1%20980L8.8%20987L8.5%20992L8.3%20996L8.3%201000L7.5%201000L7.3%20996L7%20992L6.7%20987L6.5%20980L6.5%20979.2L6.6%20958.3L6.7%20937.5L6.9%20916.7L7.1%20895.8L7.2%20875L7.3%20854.2L7.4%20833.3L7.5%20812.5L7.5%20791.7L7.5%20770.8L7.5%20750L7.5%20729.2L7.4%20708.3L7.3%20687.5L7.3%20666.7L7.2%20645.8L7.2%20625L7.2%20604.2L7.3%20583.3L7.3%20562.5L7.4%20541.7L7.5%20520.8L7.6%20500L7.7%20479.2L7.7%20458.3L7.7%20437.5L7.7%20416.7L7.7%20395.8L7.7%20375L7.7%20354.2L7.7%20333.3L7.7%20312.5L7.6%20291.7L7.5%20270.8L7.3%20250L7.2%20229.2L7.1%20208.3L7%20187.5L6.9%20166.7L6.8%20145.8L6.9%20125L6.9%20104.2L6.8%2083.3L6.8%2062.5L6.7%2041.7L6.5%2020.8L6.5%2020L6.5%2013L6.8%208L7.4%204L7.7%200Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M9.2%20166L9.2%20168.7L9.2%20171.5L9.2%20174.9L9.2%20179.7L9.2%20194.5L9.3%20223L9.3%20251.6L9.4%20280.1L9.6%20308.6L9.8%20337.1L10%20365.7L10.2%20394.2L10.4%20422.7L10.5%20451.2L10.4%20479.8L10.4%20508.3L10.5%20536.8L10.7%20565.3L11%20593.9L11.3%20622.4L11.4%20650.9L11.7%20679.4L11.9%20707.9L12%20736.5L12%20765L12.1%20793.5L12.2%20822L12.3%20836.9L12.4%20841.7L12.4%20845.1L12.4%20847.8L12.4%20850.6L11.9%20850.6L11.9%20847.8L11.9%20845.1L11.9%20841.7L11.8%20836.9L11.7%20822L11.3%20793.5L11%20765L10.7%20736.5L10.6%20707.9L10.6%20679.4L10.5%20650.9L10.1%20622.4L9.7%20593.9L9.3%20565.3L9.1%20536.8L8.9%20508.3L8.7%20479.8L8.7%20451.2L8.7%20422.7L8.7%20394.2L8.6%20365.7L8.4%20337.1L8.3%20308.6L8.3%20280.1L8.4%20251.6L8.5%20223L8.7%20194.5L8.7%20179.7L8.7%20174.9L8.8%20171.5L8.8%20168.7L8.8%20166Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M11%20870.6L11%20871L11%20871.4L11%20871.9L11%20872.6L11%20878.9L11%20887.1L11.1%20895.4L11.1%20903.7L10.9%20912L10.6%20920.3L10.5%20928.6L10.7%20936.9L10.8%20945.1L10.7%20953.4L10.6%20961.7L10.8%20968L10.8%20968.7L10.8%20969.2L10.9%20969.6L10.9%20970L10.5%20970L10.5%20969.6L10.5%20969.2L10.5%20968.7L10.5%20968L10.1%20961.7L9.8%20953.4L9.7%20945.1L9.6%20936.9L9.4%20928.6L9.5%20920.3L9.8%20912L10%20903.7L10%20895.4L10.1%20887.1L10.5%20878.9L10.7%20872.6L10.7%20871.9L10.7%20871.4L10.7%20871L10.7%20870.6Z'/%3e%3c/svg%3e") 100% 3px / var(--edge-t)
            calc(100% - 3px) no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2016'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20x2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.4'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.6'%20stop-opacity='1'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-opacity='0.7'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M0%208.5L4%209L8%209.7L13%2010L20%2010L20.8%2010L41.7%2010.2L62.5%2010.2L83.3%2010.2L104.2%2010.1L125%2010L145.8%209.8L166.7%209.5L187.5%209.3L208.3%209.2L229.2%209.1L250%209L270.8%209L291.7%209L312.5%209.1L333.3%209.1L354.2%209.1L375%209.1L395.8%209L416.7%208.8L437.5%208.6L458.3%208.4L479.2%208.3L500%208.3L520.8%208.3L541.7%208.3L562.5%208.3L583.3%208.3L604.2%208.3L625%208.3L645.8%208.3L666.7%208.5L687.5%208.6L708.3%208.7L729.2%208.7L750%208.7L770.8%208.7L791.7%208.6L812.5%208.6L833.3%208.6L854.2%208.7L875%208.9L895.8%209L916.7%209.3L937.5%209.5L958.3%209.7L979.2%209.9L980%209.9L987%209.6L992%209L996%208.6L1000%208.4L1000%207.7L996%207.7L992%207.7L987%207.7L980%207.6L979.2%207.6L958.3%207.5L937.5%207.4L916.7%207.3L895.8%207.2L875%207L854.2%206.9L833.3%206.8L812.5%206.7L791.7%206.7L770.8%206.7L750%206.7L729.2%206.8L708.3%206.9L687.5%206.9L666.7%206.9L645.8%206.8L625%206.9L604.2%207L583.3%207.1L562.5%207.1L541.7%207.1L520.8%207L500%206.9L479.2%206.8L458.3%206.8L437.5%206.9L416.7%207L395.8%207.1L375%207.2L354.2%207.3L333.3%207.3L312.5%207.3L291.7%207.2L270.8%207.2L250%207.2L229.2%207.2L208.3%207.3L187.5%207.3L166.7%207.4L145.8%207.5L125%207.5L104.2%207.6L83.3%207.6L62.5%207.5L41.7%207.4L20.8%207.3L20%207.3L13%207.3L8%207.5L4%207.7L0%207.7Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M137.9%2011.9L140.5%2011.9L143%2011.9L146.1%2011.9L150.5%2011.9L164.2%2012L190.5%2012.3L216.7%2012.3L243%2012L269.3%2011.6L295.5%2011.4L321.8%2011.5L348%2011.6L374.3%2011.6L400.6%2011.5L426.8%2011.3L453.1%2011.1L479.4%2011L505.6%2010.9L531.9%2010.8L558.2%2010.5L584.4%2010.2L610.7%209.7L637%209.3L663.2%209L689.5%208.7L715.8%208.5L742%208.4L755.7%208.3L760.1%208.3L763.2%208.2L765.8%208.2L768.3%208.2L768.3%207.9L765.8%207.9L763.2%207.9L760.1%207.9L755.7%207.9L742%207.9L715.8%207.9L689.5%207.7L663.2%207.5L637%207.6L610.7%208L584.4%208.6L558.2%209L531.9%209.2L505.6%209.2L479.4%209.4L453.1%209.7L426.8%2010.1L400.6%2010.4L374.3%2010.5L348%2010.4L321.8%2010.3L295.5%2010.3L269.3%2010.5L243%2010.7L216.7%2010.9L190.5%2011.1L164.2%2011.3L150.5%2011.4L146.1%2011.4L143%2011.4L140.5%2011.4L137.9%2011.5Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M788.3%209.5L789%209.5L789.7%209.5L790.6%209.5L791.9%209.5L803.4%209.6L818.6%209.7L833.7%209.7L848.9%2010.1L864%2010.4L879.1%2010.3L894.3%2010.4L909.4%2010.5L924.6%2010L939.7%209.7L954.9%209.6L966.4%209.5L967.6%209.5L968.5%209.4L969.3%209.4L970%209.4L970%209.1L969.3%209.1L968.5%209.1L967.6%209.1L966.4%209.1L954.9%209.1L939.7%208.8L924.6%208.9L909.4%209.4L894.3%209.3L879.1%209.2L864%209.3L848.9%209L833.7%208.6L818.6%208.8L803.4%209.1L791.9%209.2L790.6%209.2L789.7%209.2L789%209.2L788.3%209.2Z'/%3e%3c/svg%3e") 6px 100% / calc(100% - 7px)
            var(--edge-t) no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%201000'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20y2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.4'%20stop-opacity='1'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-opacity='0.9'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M7.7%200L7.4%204L7%208L6.8%2013L6.8%2020L6.8%2020.8L6.7%2041.7L6.6%2062.5L6.7%2083.3L6.7%20104.2L6.8%20125L6.9%20145.8L6.9%20166.7L7%20187.5L7%20208.3L7.1%20229.2L7.1%20250L7.1%20270.8L7.1%20291.7L7.1%20312.5L7%20333.3L7%20354.2L7%20375L6.9%20395.8L6.9%20416.7L6.8%20437.5L6.8%20458.3L6.7%20479.2L6.7%20500L6.6%20520.8L6.6%20541.7L6.5%20562.5L6.5%20583.3L6.5%20604.2L6.6%20625L6.7%20645.8L6.7%20666.7L6.8%20687.5L7%20708.3L7.1%20729.2L7.2%20750L7.3%20770.8L7.4%20791.7L7.5%20812.5L7.6%20833.3L7.7%20854.2L7.7%20875L7.7%20895.8L7.7%20916.7L7.6%20937.5L7.6%20958.3L7.5%20979.2L7.5%20980L7.7%20987L7.7%20992L7.7%20996L7.7%201000L8.4%201000L8.6%20996L9%20992L9.6%20987L9.8%20980L9.8%20979.2L9.8%20958.3L9.8%20937.5L9.8%20916.7L9.8%20895.8L9.7%20875L9.7%20854.2L9.6%20833.3L9.5%20812.5L9.4%20791.7L9.3%20770.8L9.2%20750L9.1%20729.2L8.9%20708.3L8.8%20687.5L8.7%20666.7L8.6%20645.8L8.6%20625L8.5%20604.2L8.5%20583.3L8.4%20562.5L8.4%20541.7L8.4%20520.8L8.4%20500L8.4%20479.2L8.4%20458.3L8.4%20437.5L8.4%20416.7L8.4%20395.8L8.4%20375L8.3%20354.2L8.3%20333.3L8.3%20312.5L8.3%20291.7L8.3%20270.8L8.3%20250L8.3%20229.2L8.3%20208.3L8.3%20187.5L8.3%20166.7L8.3%20145.8L8.3%20125L8.3%20104.2L8.3%2083.3L8.4%2062.5L8.5%2041.7L8.7%2020.8L8.7%2020L8.7%2013L8.6%208L8.3%204L8.3%200Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M7.7%20127.4L7.7%20129.4L7.7%20131.4L7.7%20134L7.8%20137.5L7.7%20148.6L7.6%20169.7L7.3%20190.9L7.1%20212.1L6.9%20233.3L6.8%20254.4L6.7%20275.6L6.5%20296.8L6.3%20318L6%20339.1L5.7%20360.3L5.4%20381.5L5.1%20402.7L4.7%20423.9L4.3%20445L4%20466.2L3.8%20487.4L3.8%20508.6L3.8%20529.7L3.8%20550.9L3.8%20572.1L3.8%20593.3L3.8%20614.4L3.8%20625.5L3.7%20629L3.7%20631.6L3.7%20633.6L3.7%20635.6L4.1%20635.6L4.1%20633.6L4.1%20631.6L4.1%20629L4.1%20625.5L4.2%20614.4L4.5%20593.3L4.7%20572.1L4.9%20550.9L5.1%20529.7L5.3%20508.6L5.5%20487.4L5.7%20466.2L5.9%20445L6.2%20423.9L6.6%20402.7L7%20381.5L7.4%20360.3L7.6%20339.1L7.6%20318L7.6%20296.8L7.7%20275.6L7.9%20254.4L8.1%20233.3L8.4%20212.1L8.5%20190.9L8.5%20169.7L8.3%20148.6L8.2%20137.5L8.2%20134L8.2%20131.4L8.1%20129.4L8.1%20127.4Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M6.2%20655.6L6.2%20656.7L6.2%20657.7L6.3%20659L6.3%20660.9L6.3%20677.4L6%20699.3L5.8%20721.1L5.8%20742.9L5.9%20764.7L5.8%20786.6L5.4%20808.4L5.2%20830.2L5.3%20852L5.5%20873.8L5.6%20895.7L5.6%20912.3L5.6%20914.1L5.6%20915.4L5.6%20916.4L5.6%20917.5L5.9%20917.5L5.9%20916.4L5.9%20915.4L5.9%20914.1L5.9%20912.3L6.1%20895.7L6.4%20873.8L6.4%20852L6.3%20830.2L6.5%20808.4L6.9%20786.6L7%20764.7L6.9%20742.9L6.9%20721.1L6.9%20699.3L6.8%20677.4L6.6%20660.9L6.6%20659L6.6%20657.7L6.6%20656.7L6.5%20655.6Z'/%3e%3c/svg%3e") 0 0 / var(--edge-t) calc(100% - 4px)
            no-repeat;
    --frame-2:
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2016'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20x2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.4'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.6'%20stop-opacity='1'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.8'/%3e%3cstop%20offset='1'%20stop-opacity='0.7'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M0%207.8L4%207.5L8%207L13%206.7L20%206.8L20.8%206.8L41.7%206.9L62.5%207.1L83.3%207.3L104.2%207.6L125%207.7L145.8%207.7L166.7%207.7L187.5%207.7L208.3%207.7L229.2%207.7L250%207.5L270.8%207.4L291.7%207.3L312.5%207.2L333.3%207.3L354.2%207.3L375%207.4L395.8%207.5L416.7%207.5L437.5%207.5L458.3%207.4L479.2%207.3L500%207.1L520.8%206.9L541.7%206.7L562.5%206.6L583.3%206.5L604.2%206.4L625%206.4L645.8%206.4L666.7%206.4L687.5%206.4L708.3%206.4L729.2%206.4L750%206.3L770.8%206.2L791.7%206.1L812.5%206.1L833.3%206L854.2%206.2L875%206.3L895.8%206.4L916.7%206.6L937.5%206.8L958.3%207L979.2%207.2L980%207.2L987%207.4L992%207.6L996%207.7L1000%207.8L1000%208.2L996%208.3L992%208.4L987%208.6L980%208.7L979.2%208.7L958.3%208.6L937.5%208.4L916.7%208.3L895.8%208.3L875%208.3L854.2%208.3L833.3%208.3L812.5%208.5L791.7%208.6L770.8%208.8L750%208.9L729.2%209L708.3%209L687.5%209L666.7%208.9L645.8%208.9L625%208.8L604.2%208.8L583.3%208.8L562.5%208.9L541.7%209.1L520.8%209.3L500%209.5L479.2%209.7L458.3%209.8L437.5%209.9L416.7%2010L395.8%209.9L375%209.8L354.2%209.7L333.3%209.6L312.5%209.5L291.7%209.4L270.8%209.4L250%209.4L229.2%209.4L208.3%209.3L187.5%209.2L166.7%209.1L145.8%209.1L125%209L104.2%208.9L83.3%208.7L62.5%208.5L41.7%208.4L20.8%208.3L20%208.3L13%208.3L8%208.3L4%208.3L0%208.2Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M123.5%207.3L126.1%207.3L128.7%207.2L131.9%207.2L136.4%207.2L150.4%207.1L177.3%206.9L204.2%206.6L231.1%206.5L258%206.3L284.9%206.2L311.8%206.1L338.7%205.8L365.6%205.6L392.5%205.4L419.3%205.4L446.2%205.4L473.1%205.4L500%205.3L526.9%205.2L553.8%205.1L580.7%205L607.6%204.7L634.5%204.5L661.4%204.5L688.3%204.7L715.2%205L742.1%205.2L756.1%205.3L760.6%205.3L763.8%205.3L766.4%205.3L769%205.3L769%205.8L766.4%205.8L763.8%205.8L760.6%205.8L756.1%205.8L742.1%205.7L715.2%205.8L688.3%205.9L661.4%206.2L634.5%206.3L607.6%206.3L580.7%206.4L553.8%206.5L526.9%206.6L500%206.6L473.1%206.5L446.2%206.4L419.3%206.5L392.5%206.7L365.6%206.8L338.7%207L311.8%207.3L284.9%207.7L258%208L231.1%208.2L204.2%208.2L177.3%208L150.4%207.8L136.4%207.8L131.9%207.8L128.7%207.8L126.1%207.8L123.5%207.8Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M789%205.3L789.7%205.3L790.4%205.3L791.3%205.3L792.6%205.3L804.1%205.2L819.1%205L834.2%204.8L849.3%204.6L864.4%204.5L879.5%204.7L894.6%204.9L909.7%205.1L924.7%205.1L939.8%205.2L954.9%205.5L966.4%205.8L967.6%205.8L968.6%205.8L969.3%205.8L970%205.8L970%206.1L969.3%206.1L968.6%206.1L967.6%206.1L966.4%206.1L954.9%206L939.8%206.1L924.7%206.2L909.7%206.2L894.6%206L879.5%205.8L864.4%205.6L849.3%205.7L834.2%205.9L819.1%205.9L804.1%205.7L792.6%205.6L791.3%205.6L790.4%205.6L789.7%205.6L789%205.6Z'/%3e%3c/svg%3e") 5px 0 / calc(100% - 5px) var(--edge-t)
            no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%201000'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20y2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.4'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.6'%20stop-opacity='1'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.8'/%3e%3cstop%20offset='1'%20stop-opacity='0.7'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M8.3%200L8.5%204L8.9%208L9%2013L9%2020L9%2020.8L9%2041.7L9%2062.5L8.9%2083.3L8.8%20104.2L8.7%20125L8.5%20145.8L8.4%20166.7L8.3%20187.5L8.3%20208.3L8.3%20229.2L8.3%20250L8.3%20270.8L8.3%20291.7L8.3%20312.5L8.3%20333.3L8.5%20354.2L8.6%20375L8.8%20395.8L8.9%20416.7L8.9%20437.5L8.9%20458.3L8.9%20479.2L8.8%20500L8.8%20520.8L8.7%20541.7L8.8%20562.5L8.8%20583.3L8.9%20604.2L9%20625L9.1%20645.8L9.2%20666.7L9.2%20687.5L9.3%20708.3L9.4%20729.2L9.5%20750L9.7%20770.8L9.6%20791.7L9.5%20812.5L9.4%20833.3L9.3%20854.2L9.2%20875L9.1%20895.8L9.1%20916.7L9.1%20937.5L9.1%20958.3L9.1%20979.2L9.1%20980L8.9%20987L8.6%20992L8.4%20996L8.3%201000L7.6%201000L7.5%20996L7.3%20992L6.9%20987L6.7%20980L6.7%20979.2L6.7%20958.3L6.6%20937.5L6.6%20916.7L6.7%20895.8L6.8%20875L6.9%20854.2L7.1%20833.3L7.3%20812.5L7.6%20791.7L7.7%20770.8L7.7%20750L7.7%20729.2L7.7%20708.3L7.7%20687.5L7.7%20666.7L7.7%20645.8L7.7%20625L7.6%20604.2L7.5%20583.3L7.4%20562.5L7.4%20541.7L7.4%20520.8L7.3%20500L7.3%20479.2L7.3%20458.3L7.3%20437.5L7.2%20416.7L7.1%20395.8L6.9%20375L6.7%20354.2L6.6%20333.3L6.6%20312.5L6.6%20291.7L6.7%20270.8L6.7%20250L6.7%20229.2L6.7%20208.3L6.7%20187.5L6.8%20166.7L6.9%20145.8L7%20125L7%20104.2L7%2083.3L7%2062.5L6.9%2041.7L6.8%2020.8L6.8%2020L6.8%2013L7%208L7.4%204L7.6%200Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M11.4%20224L11.3%20226.3L11.3%20228.5L11.3%20231.4L11.3%20235.4L11.3%20247.7L11.4%20271.4L11.4%20295.1L11.5%20318.8L11.4%20342.5L11.2%20366.2L10.8%20389.9L10.4%20413.7L10.3%20437.4L10.2%20461.1L10.2%20484.8L10.1%20508.5L10.1%20532.2L9.9%20555.9L9.8%20579.6L9.6%20603.3L9.4%20627L9.5%20650.7L9.6%20674.5L9.7%20698.2L9.6%20721.9L9.2%20745.6L8.9%20769.3L8.8%20781.6L8.7%20785.6L8.7%20788.5L8.7%20790.7L8.7%20793L8.3%20793L8.3%20790.7L8.3%20788.5L8.3%20785.6L8.3%20781.6L8.4%20769.3L8.6%20745.6L8.6%20721.9L8.6%20698.2L8.5%20674.5L8.4%20650.7L8.3%20627L8.1%20603.3L8.2%20579.6L8.4%20555.9L8.5%20532.2L8.5%20508.5L8.4%20484.8L8.5%20461.1L8.7%20437.4L9.1%20413.7L9.6%20389.9L9.9%20366.2L10.2%20342.5L10.4%20318.8L10.5%20295.1L10.6%20271.4L10.7%20247.7L10.8%20235.4L10.8%20231.4L10.9%20228.5L10.9%20226.3L10.9%20224Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M10.8%2056L10.8%2056.7L10.8%2057.4L10.8%2058.2L10.8%2059.3L10.8%2069.8L11.1%2083.5L11%2097.2L10.6%20110.9L10.5%20124.6L10.7%20138.4L10.8%20152.1L10.8%20165.8L11.1%20179.5L11.3%20193.3L11%20207L10.7%20217.4L10.6%20218.6L10.6%20219.4L10.6%20220.1L10.6%20220.7L10.3%20220.7L10.3%20220.1L10.3%20219.4L10.3%20218.6L10.3%20217.4L10.5%20207L10.4%20193.3L10%20179.5L9.7%20165.8L9.7%20152.1L9.6%20138.4L9.4%20124.6L9.5%20110.9L9.9%2097.2L10.2%2083.5L10.3%2069.8L10.4%2059.3L10.5%2058.2L10.5%2057.4L10.5%2056.7L10.5%2056Z'/%3e%3c/svg%3e") 100% 0 / var(--edge-t) calc(100% - 6px)
            no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2016'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20x2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.4'%20stop-opacity='1'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.8'/%3e%3cstop%20offset='1'%20stop-opacity='0.9'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M0%208.3L4%208.6L8%209.1L13%209.2L20%209.3L20.8%209.3L41.7%209.3L62.5%209.3L83.3%209.3L104.2%209.2L125%209.1L145.8%209L166.7%208.8L187.5%208.7L208.3%208.5L229.2%208.3L250%208.3L270.8%208.3L291.7%208.3L312.5%208.3L333.3%208.3L354.2%208.3L375%208.3L395.8%208.3L416.7%208.4L437.5%208.5L458.3%208.6L479.2%208.6L500%208.7L520.8%208.7L541.7%208.6L562.5%208.6L583.3%208.6L604.2%208.5L625%208.5L645.8%208.6L666.7%208.7L687.5%208.8L708.3%208.9L729.2%209.1L750%209.2L770.8%209.4L791.7%209.5L812.5%209.7L833.3%209.7L854.2%209.8L875%209.8L895.8%209.8L916.7%209.8L937.5%209.7L958.3%209.7L979.2%209.7L980%209.7L987%209.4L992%209.1L996%208.7L1000%208.5L1000%207.7L996%207.7L992%207.6L987%207.3L980%207L979.2%207L958.3%207.1L937.5%207.2L916.7%207.3L895.8%207.4L875%207.4L854.2%207.5L833.3%207.5L812.5%207.4L791.7%207.3L770.8%207.2L750%207L729.2%206.9L708.3%206.7L687.5%206.5L666.7%206.4L645.8%206.3L625%206.3L604.2%206.3L583.3%206.3L562.5%206.4L541.7%206.5L520.8%206.5L500%206.6L479.2%206.7L458.3%206.7L437.5%206.7L416.7%206.7L395.8%206.7L375%206.8L354.2%206.9L333.3%206.9L312.5%207L291.7%207L270.8%207.1L250%207.1L229.2%207.1L208.3%207.2L187.5%207.3L166.7%207.5L145.8%207.6L125%207.6L104.2%207.6L83.3%207.6L62.5%207.6L41.7%207.5L20.8%207.4L20%207.4L13%207.4L8%207.6L4%207.7L0%207.7Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M94.9%2011.4L97.4%2011.4L99.9%2011.4L103%2011.4L107.3%2011.4L120.9%2011.4L146.9%2011.5L172.9%2011.7L198.9%2011.8L224.9%2011.7L250.9%2011.3L276.9%2010.9L302.9%2010.6L329%2010.5L355%2010.5L381%2010.3L407%209.9L433%209.5L459%209.5L485%209.6L511%209.8L537%209.8L563%209.8L589%209.7L615.1%209.6L641.1%209.5L667.1%209.4L693.1%209.2L706.6%209.1L711%209.1L714.1%209.1L716.6%209L719.1%209L719.1%208.5L716.6%208.6L714.1%208.6L711%208.6L706.6%208.6L693.1%208.6L667.1%208.5L641.1%208.2L615.1%208L589%208.1L563%208.5L537%208.6L511%208.5L485%208.4L459%208.4L433%208.5L407%208.7L381%208.8L355%208.9L329%208.9L302.9%209L276.9%209.2L250.9%209.5L224.9%2010L198.9%2010.4L172.9%2010.5L146.9%2010.6L120.9%2010.8L107.3%2010.9L103%2011L99.9%2011L97.4%2011L94.9%2011Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M739.1%209.9L739.7%209.9L740.3%209.9L741.1%209.9L742.1%209.9L751.7%209.9L764.2%2010.2L776.8%2010L789.3%209.6L801.9%209.8L814.4%209.7L827%209.7L839.6%2010.1L852.1%2010.3L864.7%2010.1L877.2%2010.1L886.8%2010L887.8%2010L888.6%2010L889.2%2010L889.8%209.9L889.8%209.6L889.2%209.6L888.6%209.6L887.8%209.7L886.8%209.7L877.2%209.6L864.7%209.2L852.1%209.2L839.6%209L827%208.6L814.4%208.6L801.9%208.7L789.3%208.5L776.8%208.9L764.2%209.3L751.7%209.4L742.1%209.5L741.1%209.5L740.3%209.6L739.7%209.6L739.1%209.6Z'/%3e%3c/svg%3e") 2px 100% / calc(100% - 5px)
            var(--edge-t) no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%201000'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20y2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.3'%20stop-opacity='1'/%3e%3cstop%20offset='0.4'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-opacity='0.8'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M7.6%200L7.1%204L6.3%208L5.9%2013L5.9%2020L5.9%2020.8L6%2041.7L6.1%2062.5L6.2%2083.3L6.4%20104.2L6.6%20125L6.8%20145.8L6.9%20166.7L7%20187.5L7%20208.3L7%20229.2L7%20250L7%20270.8L7%20291.7L7%20312.5L7.1%20333.3L7.2%20354.2L7.3%20375L7.4%20395.8L7.5%20416.7L7.7%20437.5L7.7%20458.3L7.7%20479.2L7.7%20500L7.7%20520.8L7.7%20541.7L7.6%20562.5L7.5%20583.3L7.5%20604.2L7.4%20625L7.4%20645.8L7.4%20666.7L7.5%20687.5L7.5%20708.3L7.5%20729.2L7.5%20750L7.4%20770.8L7.3%20791.7L7.2%20812.5L7%20833.3L6.8%20854.2L6.6%20875L6.5%20895.8L6.5%20916.7L6.5%20937.5L6.5%20958.3L6.5%20979.2L6.6%20980L6.9%20987L7.3%20992L7.7%20996L7.7%201000L8.3%201000L8.3%20996L8.3%20992L8.3%20987L8.3%20980L8.3%20979.2L8.3%20958.3L8.3%20937.5L8.3%20916.7L8.3%20895.8L8.4%20875L8.6%20854.2L8.7%20833.3L8.8%20812.5L8.9%20791.7L8.9%20770.8L8.9%20750L8.8%20729.2L8.8%20708.3L8.7%20687.5L8.7%20666.7L8.7%20645.8L8.8%20625L9%20604.2L9.2%20583.3L9.4%20562.5L9.6%20541.7L9.7%20520.8L9.8%20500L9.9%20479.2L10%20458.3L10%20437.5L9.9%20416.7L9.7%20395.8L9.6%20375L9.4%20354.2L9.3%20333.3L9.2%20312.5L9.2%20291.7L9.3%20270.8L9.3%20250L9.4%20229.2L9.4%20208.3L9.5%20187.5L9.5%20166.7L9.4%20145.8L9.3%20125L9.1%20104.2L9%2083.3L8.8%2062.5L8.6%2041.7L8.5%2020.8L8.5%2020L8.4%2013L8.3%208L8.3%204L8.3%200Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M7.7%2065.9L7.7%2069.1L7.7%2072.2L7.7%2076.2L7.6%2081.8L7.5%2099L7.2%20132.1L7%20165.2L6.8%20198.4L6.6%20231.5L6.5%20264.6L6.2%20297.7L5.8%20330.8L5.4%20364L5.1%20397.1L5.1%20430.2L4.9%20463.3L4.6%20496.5L4.2%20529.6L3.9%20562.7L3.6%20595.8L3.5%20628.9L3.5%20662.1L3.6%20695.2L3.8%20728.3L4%20761.4L4%20794.5L4%20827.7L3.9%20844.9L3.9%20850.5L3.9%20854.4L3.9%20857.6L3.9%20860.8L4.3%20860.8L4.3%20857.6L4.3%20854.4L4.3%20850.5L4.3%20844.9L4.4%20827.7L4.6%20794.5L4.9%20761.4L5.1%20728.3L5.2%20695.2L5.2%20662.1L5.1%20628.9L5.2%20595.8L5.5%20562.7L5.8%20529.6L5.9%20496.5L6%20463.3L6.1%20430.2L6.3%20397.1L6.6%20364L6.9%20330.8L7.4%20297.7L8%20264.6L8.4%20231.5L8.5%20198.4L8.5%20165.2L8.3%20132.1L8.2%2099L8.2%2081.8L8.2%2076.2L8.2%2072.2L8.2%2069.1L8.2%2065.9Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M5.8%20880.8L5.8%20881.1L5.8%20881.5L5.8%20881.9L5.7%20882.6L5.6%20888.2L5.5%20895.7L5.3%20903.1L4.9%20910.5L4.7%20918L4.9%20925.4L4.9%20932.8L4.8%20940.3L5%20947.7L5.5%20955.1L5.7%20962.6L5.7%20968.2L5.7%20968.8L5.7%20969.3L5.7%20969.6L5.7%20970L6%20970L6%20969.6L6%20969.3L6%20968.8L6%20968.2L6.2%20962.6L6.4%20955.1L6.1%20947.7L5.9%20940.3L6%20932.8L6%20925.4L5.8%20918L6%20910.5L6.4%20903.1L6.4%20895.7L6.1%20888.2L6.1%20882.6L6.1%20881.9L6.1%20881.5L6.1%20881.1L6.1%20880.8Z'/%3e%3c/svg%3e") 0 4px / var(--edge-t) calc(100% - 6px)
            no-repeat;
    --frame-3:
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2016'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20x2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.1'%20stop-opacity='1'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.4'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.8'/%3e%3cstop%20offset='1'%20stop-opacity='0.8'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M0%207.8L4%207.6L8%207.1L13%206.8L20%206.8L20.8%206.8L41.7%206.7L62.5%206.7L83.3%206.7L104.2%206.7L125%206.6L145.8%206.5L166.7%206.4L187.5%206.3L208.3%206.2L229.2%206.3L250%206.3L270.8%206.4L291.7%206.6L312.5%206.8L333.3%207.1L354.2%207.2L375%207.4L395.8%207.5L416.7%207.5L437.5%207.5L458.3%207.4L479.2%207.3L500%207.2L520.8%207.1L541.7%207.1L562.5%207.1L583.3%207.1L604.2%207.1L625%207.2L645.8%207.3L666.7%207.3L687.5%207.3L708.3%207.3L729.2%207.2L750%207L770.8%206.9L791.7%206.7L812.5%206.6L833.3%206.5L854.2%206.6L875%206.7L895.8%206.7L916.7%206.7L937.5%206.8L958.3%206.8L979.2%206.8L980%206.8L987%207L992%207.4L996%207.7L1000%207.8L1000%208.2L996%208.3L992%208.3L987%208.3L980%208.4L979.2%208.4L958.3%208.4L937.5%208.3L916.7%208.3L895.8%208.3L875%208.3L854.2%208.3L833.3%208.4L812.5%208.5L791.7%208.8L770.8%209L750%209.3L729.2%209.5L708.3%209.7L687.5%209.9L666.7%209.9L645.8%2010L625%209.9L604.2%209.8L583.3%209.8L562.5%209.7L541.7%209.7L520.8%209.6L500%209.7L479.2%209.7L458.3%209.8L437.5%209.8L416.7%209.8L395.8%209.7L375%209.6L354.2%209.5L333.3%209.3L312.5%209.1L291.7%208.9L270.8%208.8L250%208.6L229.2%208.6L208.3%208.5L187.5%208.6L166.7%208.6L145.8%208.6L125%208.6L104.2%208.6L83.3%208.5L62.5%208.4L41.7%208.3L20.8%208.3L20%208.3L13%208.3L8%208.3L4%208.3L0%208.2Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M300.1%204.1L302.7%204.1L305.3%204.1L308.6%204.1L313.3%204.1L327.6%204.1L355%204L382.5%203.9L410%203.9L437.5%203.9L465%204L492.5%204L520%204.2L547.5%204.4L575%204.7L602.5%204.8L630%204.9L657.5%204.9L685%205L712.5%205.2L740%205.6L767.5%206L795%206.4L822.5%206.6L850%206.7L877.5%206.9L905%207.2L932.5%207.5L946.8%207.6L951.4%207.7L954.7%207.7L957.4%207.7L960%207.7L960%208.2L957.4%208.2L954.7%208.2L951.4%208.2L946.8%208.1L932.5%208.1L905%208.2L877.5%208.3L850%208.3L822.5%208.1L795%207.8L767.5%207.5L740%207.1L712.5%206.7L685%206.3L657.5%206.1L630%205.9L602.5%205.9L575%205.8L547.5%205.7L520%205.5L492.5%205.2L465%205.1L437.5%205.2L410%205.3L382.5%205.4L355%205.2L327.6%204.9L313.3%204.7L308.6%204.6L305.3%204.6L302.7%204.6L300.1%204.6Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M70.5%206L71.3%206L72.1%206L73.2%206.1L74.6%206.1L87.6%206.1L104.7%205.7L121.7%205.3L138.8%205.3L155.9%205.3L173%205L190.1%204.8L207.2%205.1L224.3%205.4L241.3%205.6L258.4%205.7L271.4%206L272.8%206L273.9%206L274.7%206L275.5%206L275.5%206.4L274.7%206.3L273.9%206.3L272.8%206.3L271.4%206.3L258.4%206.3L241.3%206.5L224.3%206.5L207.2%206.2L190.1%205.9L173%206.1L155.9%206.4L138.8%206.4L121.7%206.4L104.7%206.6L87.6%206.6L74.6%206.4L73.2%206.4L72.1%206.4L71.3%206.4L70.5%206.3Z'/%3e%3c/svg%3e") 3px 0 / calc(100% - 5px) var(--edge-t)
            no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%201000'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20y2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.4'%20stop-opacity='1'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-opacity='1'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M8.2%200L8.3%204L8.8%208L9%2013L9%2020L9%2020.8L9%2041.7L8.9%2062.5L8.8%2083.3L8.7%20104.2L8.6%20125L8.5%20145.8L8.5%20166.7L8.5%20187.5L8.4%20208.3L8.4%20229.2L8.5%20250L8.5%20270.8L8.5%20291.7L8.6%20312.5L8.6%20333.3L8.6%20354.2L8.6%20375L8.6%20395.8L8.6%20416.7L8.6%20437.5L8.6%20458.3L8.6%20479.2L8.6%20500L8.5%20520.8L8.5%20541.7L8.5%20562.5L8.5%20583.3L8.6%20604.2L8.6%20625L8.6%20645.8L8.7%20666.7L8.8%20687.5L8.8%20708.3L8.9%20729.2L9%20750L9.1%20770.8L9.1%20791.7L9.1%20812.5L9.2%20833.3L9.2%20854.2L9.2%20875L9.1%20895.8L9.1%20916.7L9.1%20937.5L9.1%20958.3L9%20979.2L9%20980L8.8%20987L8.6%20992L8.4%20996L8.3%201000L7.7%201000L7.7%20996L7.5%20992L7.3%20987L7.1%20980L7.1%20979.2L7%20958.3L7%20937.5L7.1%20916.7L7.1%20895.8L7.1%20875L7.1%20854.2L7.1%20833.3L7.1%20812.5L7%20791.7L6.9%20770.8L6.8%20750L6.6%20729.2L6.4%20708.3L6.3%20687.5L6.1%20666.7L6%20645.8L5.8%20625L5.8%20604.2L5.8%20583.3L5.8%20562.5L5.8%20541.7L5.9%20520.8L6.1%20500L6.2%20479.2L6.4%20458.3L6.5%20437.5L6.6%20416.7L6.7%20395.8L6.8%20375L6.8%20354.2L6.8%20333.3L6.8%20312.5L6.8%20291.7L6.7%20270.8L6.7%20250L6.7%20229.2L6.7%20208.3L6.7%20187.5L6.7%20166.7L6.8%20145.8L7%20125L7.1%20104.2L7.3%2083.3L7.5%2062.5L7.6%2041.7L7.7%2020.8L7.7%2020L7.7%2013L7.7%208L7.7%204L7.8%200Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M8%20211.8L8%20214.2L8%20216.6L8%20219.6L8%20223.8L8.2%20236.7L8.7%20261.6L9.1%20286.5L9.4%20311.4L9.6%20336.3L9.7%20361.2L9.9%20386.1L10.2%20411L10.6%20435.9L11%20460.8L11%20485.7L11%20510.6L11.1%20535.5L11.3%20560.4L11.5%20585.3L11.7%20610.2L12%20635.1L12.1%20660L12%20684.9L11.8%20709.8L11.8%20734.8L11.8%20759.7L11.9%20784.6L12%20797.5L12%20801.7L12%20804.7L12%20807.1L12%20809.5L11.7%20809.5L11.7%20807.1L11.7%20804.7L11.7%20801.7L11.6%20797.5L11.4%20784.6L11%20759.7L10.5%20734.8L10.3%20709.8L10.3%20684.9L10.3%20660L10.4%20635.1L10.3%20610.2L10.1%20585.3L9.9%20560.4L9.9%20535.5L10%20510.6L9.9%20485.7L9.6%20460.8L9.2%20435.9L8.8%20411L8.3%20386.1L8%20361.2L7.8%20336.3L7.8%20311.4L7.7%20286.5L7.6%20261.6L7.6%20236.7L7.6%20223.8L7.6%20219.6L7.6%20216.6L7.6%20214.2L7.6%20211.8Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M9.8%2047.7L9.8%2048.9L9.8%2050.1L9.8%2051.5L9.9%2053.6L10.2%2072.2L10.6%2096.7L10.6%20121.1L10.9%20145.6L11.2%20170L11%20194.5L10.7%20219L10.7%20243.4L10.6%20267.9L10.1%20292.4L10.1%20316.8L10.3%20335.4L10.3%20337.5L10.3%20338.9L10.3%20340.1L10.3%20341.3L10%20341.3L10%20340.1L10%20338.9L9.9%20337.5L9.9%20335.4L9.5%20316.8L9.2%20292.4L9.5%20267.9L9.6%20243.4L9.6%20219L9.9%20194.5L10.1%20170L9.8%20145.6L9.5%20121.1L9.7%2096.7L9.6%2072.2L9.5%2053.6L9.5%2051.5L9.5%2050.1L9.5%2048.9L9.5%2047.7Z'/%3e%3c/svg%3e") 100% 6px / var(--edge-t)
            calc(100% - 7px) no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2016'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20x2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.3'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.4'%20stop-opacity='1'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.7'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-opacity='0.9'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M0%208.3L4%208.3L8%208.7L13%208.8L20%208.8L20.8%208.8L41.7%208.7L62.5%208.6L83.3%208.5L104.2%208.4L125%208.4L145.8%208.3L166.7%208.3L187.5%208.3L208.3%208.3L229.2%208.3L250%208.3L270.8%208.3L291.7%208.3L312.5%208.3L333.3%208.3L354.2%208.3L375%208.3L395.8%208.3L416.7%208.3L437.5%208.3L458.3%208.3L479.2%208.3L500%208.3L520.8%208.3L541.7%208.3L562.5%208.3L583.3%208.4L604.2%208.4L625%208.4L645.8%208.5L666.7%208.5L687.5%208.6L708.3%208.7L729.2%208.8L750%208.9L770.8%209L791.7%209.1L812.5%209.2L833.3%209.3L854.2%209.4L875%209.5L895.8%209.6L916.7%209.7L937.5%209.8L958.3%209.8L979.2%209.9L980%209.9L987%209.6L992%209L996%208.6L1000%208.4L1000%207.7L996%207.7L992%207.7L987%207.7L980%207.5L979.2%207.5L958.3%207.6L937.5%207.7L916.7%207.7L895.8%207.7L875%207.7L854.2%207.7L833.3%207.7L812.5%207.7L791.7%207.6L770.8%207.4L750%207.3L729.2%207.2L708.3%207L687.5%206.9L666.7%206.8L645.8%206.7L625%206.7L604.2%206.7L583.3%206.7L562.5%206.7L541.7%206.8L520.8%206.8L500%206.9L479.2%207L458.3%207L437.5%207.1L416.7%207.1L395.8%207L375%207L354.2%206.9L333.3%206.8L312.5%206.7L291.7%206.6L270.8%206.5L250%206.3L229.2%206.2L208.3%206.2L187.5%206.1L166.7%206.1L145.8%206.1L125%206.1L104.2%206.2L83.3%206.3L62.5%206.4L41.7%206.5L20.8%206.7L20%206.7L13%206.7L8%206.9L4%207.3L0%207.7Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M103.5%209.2L106.3%209.2L109.1%209.2L112.6%209.2L117.4%209.2L132.5%209.2L161.5%209.2L190.5%209.3L219.6%209.3L248.6%209.4L277.6%209.5L306.6%209.5L335.6%209.5L364.6%209.5L393.6%209.7L422.6%209.9L451.6%2010.2L480.6%2010.7L509.6%2011L538.6%2011.3L567.7%2011.5L596.7%2011.6L625.7%2011.9L654.7%2012.3L683.7%2012.6L712.7%2012.6L741.7%2012.3L770.7%2012L785.8%2011.9L790.7%2011.9L794.2%2011.9L796.9%2011.9L799.7%2011.9L799.7%2011.5L796.9%2011.5L794.2%2011.5L790.7%2011.5L785.8%2011.5L770.7%2011.6L741.7%2011.5L712.7%2011.3L683.7%2011.1L654.7%2010.7L625.7%2010.4L596.7%2010L567.7%209.7L538.6%209.6L509.6%209.5L480.6%209.3L451.6%209L422.6%208.6L393.6%208.3L364.6%208.3L335.6%208.5L306.6%208.5L277.6%208.4L248.6%208.2L219.6%207.9L190.5%208L161.5%208.3L132.5%208.6L117.4%208.7L112.6%208.7L109.1%208.8L106.3%208.8L103.5%208.8Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M819.7%2010.4L820.3%2010.4L820.9%2010.3L821.7%2010.3L822.7%2010.3L832.2%2010.2L844.8%2010.2L857.3%2010.3L869.8%2010.1L882.3%209.8L894.9%209.9L907.4%2010.2L919.9%2010.1L932.4%2010.3L945%2010.6L957.5%2010.3L967%2010L968%2010L968.8%2010L969.4%2010L970%2010L970%209.7L969.4%209.7L968.8%209.7L968%209.7L967%209.7L957.5%209.8L945%209.7L932.4%209.2L919.9%209L907.4%209.1L894.9%208.8L882.3%208.7L869.8%209L857.3%209.2L844.8%209.3L832.2%209.7L822.7%2010L821.7%2010L820.9%2010L820.3%2010L819.7%2010Z'/%3e%3c/svg%3e") 0 100% / calc(100% - 5px)
            var(--edge-t) no-repeat,
        url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%201000'%20preserveAspectRatio='none'%3e%3clinearGradient%20id='t'%20y2='1'%3e%3cstop%20offset='0'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.1'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.3'%20stop-opacity='1'/%3e%3cstop%20offset='0.4'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.5'%20stop-opacity='0.9'/%3e%3cstop%20offset='0.6'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.8'%20stop-opacity='0.8'/%3e%3cstop%20offset='0.9'%20stop-opacity='0.9'/%3e%3cstop%20offset='1'%20stop-opacity='0.9'/%3e%3c/linearGradient%3e%3cpath%20fill='url(%23t)'%20d='M7.8%200L7.7%204L7.4%208L7.3%2013L7.3%2020L7.3%2020.8L7.3%2041.7L7.3%2062.5L7.2%2083.3L7.2%20104.2L7.2%20125L7.2%20145.8L7.2%20166.7L7.2%20187.5L7.3%20208.3L7.4%20229.2L7.5%20250L7.7%20270.8L7.7%20291.7L7.7%20312.5L7.7%20333.3L7.7%20354.2L7.7%20375L7.7%20395.8L7.7%20416.7L7.7%20437.5L7.7%20458.3L7.7%20479.2L7.6%20500L7.4%20520.8L7.3%20541.7L7.1%20562.5L7%20583.3L6.9%20604.2L6.8%20625L6.8%20645.8L6.8%20666.7L6.8%20687.5L6.8%20708.3L6.8%20729.2L6.8%20750L6.8%20770.8L6.8%20791.7L6.7%20812.5L6.6%20833.3L6.5%20854.2L6.4%20875L6.3%20895.8L6.2%20916.7L6.1%20937.5L6.1%20958.3L6%20979.2L6%20980L6.5%20987L7.1%20992L7.5%20996L7.6%201000L8.3%201000L8.3%20996L8.3%20992L8.3%20987L8.3%20980L8.3%20979.2L8.3%20958.3L8.4%20937.5L8.5%20916.7L8.6%20895.8L8.7%20875L8.9%20854.2L9%20833.3L9.2%20812.5L9.3%20791.7L9.4%20770.8L9.5%20750L9.5%20729.2L9.5%20708.3L9.4%20687.5L9.4%20666.7L9.4%20645.8L9.3%20625L9.3%20604.2L9.2%20583.3L9.2%20562.5L9.2%20541.7L9.3%20520.8L9.3%20500L9.3%20479.2L9.3%20458.3L9.2%20437.5L9.2%20416.7L9.2%20395.8L9.2%20375L9.2%20354.2L9.2%20333.3L9.3%20312.5L9.3%20291.7L9.3%20270.8L9.2%20250L9.1%20229.2L9%20208.3L8.9%20187.5L8.8%20166.7L8.8%20145.8L8.8%20125L8.7%20104.2L8.8%2083.3L8.8%2062.5L8.8%2041.7L8.8%2020.8L8.8%2020L8.8%2013L8.7%208L8.4%204L8.2%200Z'/%3e%3cpath%20fill-opacity='0.55'%20d='M3.7%20108.1L3.7%20111L3.7%20114L3.7%20117.6L3.7%20122.8L3.7%20138.8L3.6%20169.5L3.6%20200.2L3.7%20230.9L3.9%20261.6L4.2%20292.3L4.4%20323L4.6%20353.7L4.7%20384.4L4.9%20415.1L5.1%20445.8L5.2%20476.5L5.2%20507.2L5.4%20537.9L5.7%20568.6L5.9%20599.3L6%20630L6%20660.7L6.1%20691.4L6.3%20722.1L6.4%20752.8L6.5%20783.4L6.7%20814.1L6.8%20830.1L6.8%20835.3L6.8%20839L6.8%20841.9L6.9%20844.8L7.2%20844.8L7.2%20841.9L7.2%20839L7.2%20835.3L7.2%20830.1L7.3%20814.1L7.5%20783.4L7.6%20752.8L7.8%20722.1L7.8%20691.4L7.7%20660.7L7.5%20630L7.1%20599.3L6.9%20568.6L6.7%20537.9L6.5%20507.2L6.2%20476.5L6.1%20445.8L6.2%20415.1L6.2%20384.4L6.2%20353.7L6%20323L5.8%20292.3L5.7%20261.6L5.4%20230.9L4.9%20200.2L4.5%20169.5L4.2%20138.8L4.1%20122.8L4.1%20117.6L4.1%20114L4.1%20111L4.1%20108.1Z'/%3e%3cpath%20fill-opacity='0.35'%20d='M5.7%20864.8L5.7%20865.3L5.7%20865.7L5.7%20866.2L5.7%20867L5.7%20873.6L5.7%20882.4L5.8%20891.1L5.7%20899.9L5.5%20908.7L5.3%20917.4L5.2%20926.2L5.2%20934.9L5.2%20943.7L5.1%20952.5L5.2%20961.2L5.2%20967.9L5.2%20968.6L5.2%20969.2L5.2%20969.6L5.2%20970L5.6%20970L5.5%20969.6L5.5%20969.2L5.5%20968.6L5.5%20967.9L5.7%20961.2L6%20952.5L6.3%20943.7L6.3%20934.9L6.3%20926.2L6.4%20917.4L6.6%20908.7L6.8%20899.9L6.9%20891.1L6.6%20882.4L6.2%20873.6L6.1%20867L6.1%20866.2L6.1%20865.7L6.1%20865.3L6.1%20864.8Z'/%3e%3c/svg%3e") 0 2px / var(--edge-t) calc(100% - 2px)
            no-repeat;
}

@media (prefers-color-scheme: dark) {
    :root {
        --edge-t: 20px;
    }
}

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

/* Over the picture, which its filter would otherwise paint above the line. */
.framed::before,
.framed-alt::before {
    content: '';
    position: absolute;
    inset: calc(var(--edge-t) / -2);
    z-index: 1;
    background: var(--ink);
    mask: var(--frame-1);
    pointer-events: none;
}

.framed-alt::before {
    mask: var(--frame-2);
}

.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: var(--frame-1);
    }
    33.333% {
        mask: var(--frame-2);
    }
    66.667% {
        mask: var(--frame-3);
    }
}

.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-plume {
    mask-image: url('/_astro/plume.jMYOwFyc.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-t2d-studio {
    mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cg%20transform='translate(0%20-2.2)%20scale(1%201.2)'%3e%3cpath%20d='M5.2%205.8C5%209%204.9%2012%205.3%2014.4C5.6%2016.2%206.7%2017%208%2016.6'/%3e%3cpath%20d='M2.6%209.4C4.2%209.1%206%209.2%207.8%209'/%3e%3cpath%20d='M9.8%209.6C10.8%207.6%2014%207.8%2013.9%2010.2C13.8%2012.4%2011.2%2014.2%209.7%2016.7C11.6%2016.4%2013.4%2016.8%2014.6%2016.5'/%3e%3cpath%20d='M19.6%2010C17.4%209.4%2015.8%2011.4%2016%2013.6C16.2%2015.9%2018.6%2017.3%2020.4%2015.8C21.6%2014.8%2022%2012.2%2021.9%209.6C21.8%208%2021.9%206.6%2022.1%205.2'/%3e%3c/g%3e%3c/svg%3e");
}

.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: calc(var(--edge-t) / -2);
    mask: var(--frame-2);
}

.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;
    --nav-gap: clamp(1rem, 2.6vw, 2rem);
    gap: 0 var(--nav-gap);
    /* 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 {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
}

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

/* Never shorter than 1.6em, or under "cv" the wave squeezes into a tilde. */
.nav-link .ln::after {
    bottom: -0.1rem;
    left: 50%;
    width: max(106%, 1.6em);
    translate: -50% 0;
}

.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;
    }
}

/* Too narrow for the icons: a pencilled dot parts the words instead. */
@media (width < 60rem) {
    .nav {
        --nav-gap: clamp(1rem, 4.5vw, 2rem);
    }

    .nav-link + .nav-link::before {
        content: '';
        position: absolute;
        left: calc(var(--nav-gap) / -2 - 0.11em);
        top: 50%;
        width: 0.22em;
        height: 0.22em;
        translate: 0.04em -0.06em;
        background: currentColor;
        mask: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M13%203%20C%2018%203,%2021%207,%2021%2012%20C%2021%2018,%2017%2021,%2012%2021%20C%206%2021,%203%2017,%203%2012%20C%203%207,%207%203,%2013%203%20Z'/%3e%3c/svg%3e") center / contain no-repeat;
        pointer-events: none;
    }
}

@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: calc(var(--edge-t) / -2 - 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 {
    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 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 {
    max-width: min(100%, 72rem);
}

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

.gallery[open] .gallery-frame::before {
    animation: boil var(--boil) steps(1) var(--boil-times);
}

.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;
    }
}

.home {
    container-type: inline-size;
    position: relative;
}

.home-hero {
    position: relative;
    z-index: 5;
    max-width: 40rem;
}

.home-name {
    font-weight: 700;
    font-size: clamp(4.25rem, 9vw, 7.5rem);
    line-height: 0.85;
}

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

.home-motto {
    margin-top: 1.35rem;
    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);
}

.home-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 2rem;
    margin-top: 2.1rem;
}

.home-call {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.8rem 2rem 0.7rem;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
}

.home-call .icon {
    width: 1.45rem;
    height: 1.45rem;
}

.home-call-box {
    position: absolute;
    inset: -0.2rem -0.3rem;
    width: calc(100% + 0.6rem);
    height: calc(100% + 0.4rem);
    pointer-events: none;
}

.home-call-box path {
    vector-effect: non-scaling-stroke;
}

.home-call-box .pen {
    stroke-width: 1.8;
}

.home-write {
    font-size: 1.55rem;
    color: var(--muted);
}

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

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

/* --u is one of Notebook.astro's 1600 × 1000 units (the book spans .home,
   the container). */
.nb {
    --gap: 2.8rem;
    --rule-gap: 0.62rem;
    --u: calc(100cqi / 1600);
    --turn: 0.9s;
    --turn-ease: cubic-bezier(0.5, 0.05, 0.25, 1);
    position: relative;
    aspect-ratio: 1.6;
    margin-top: 5rem;
}

.nb-draw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.nb-front {
    z-index: 3;
}

.nb-draw path {
    fill: none;
    stroke: var(--ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.nb-line,
.nb-spine {
    stroke-width: 1.7;
}

.nb-cover,
.nb-low .nb-line {
    stroke-width: 1.4;
}

.nb-draw .nb-tab-paper {
    fill: var(--paper);
    stroke: none;
}

.nb-draw .nb-soft {
    stroke: var(--muted);
    stroke-width: 1;
    stroke-opacity: 0.65;
}

.nb-draw :is(.nb-thick, .nb-shade) {
    stroke: var(--muted);
    stroke-width: 1;
}

.nb-draw .nb-ribbon-fill {
    fill: var(--paper);
    stroke: none;
}

.nb-ribbon {
    stroke-width: 1.3;
}

.home-call:is(:hover, :focus-visible) .boil-frame {
    animation: boil-1 var(--boil) steps(1) var(--boil-times);
}

.home-call:is(:hover, :focus-visible) .boil-frame:nth-of-type(2) {
    animation-name: boil-2;
}

.home-call:is(:hover, :focus-visible) .boil-frame:nth-of-type(3) {
    animation-name: boil-3;
}

/* Only the open page under the pointer boils, once: a hidden page's lines
   would show through the boil's visibility. */
#nb-1:checked
    ~ .nb-pages
    :is(.nb-s1:hover > .nb-edge, .nb-s1.nb-face:hover > .nb-low)
    .boil-frame,
#nb-2:checked
    ~ .nb-pages
    :is(.nb-s2:hover > .nb-edge, .nb-s2.nb-face:hover > .nb-low)
    .boil-frame {
    animation: boil-1 0.45s steps(1);
}

#nb-1:checked
    ~ .nb-pages
    :is(.nb-s1:hover > .nb-edge, .nb-s1.nb-face:hover > .nb-low)
    .boil-frame:nth-of-type(2),
#nb-2:checked
    ~ .nb-pages
    :is(.nb-s2:hover > .nb-edge, .nb-s2.nb-face:hover > .nb-low)
    .boil-frame:nth-of-type(2) {
    animation-name: boil-2;
}

#nb-1:checked
    ~ .nb-pages
    :is(.nb-s1:hover > .nb-edge, .nb-s1.nb-face:hover > .nb-low)
    .boil-frame:nth-of-type(3),
#nb-2:checked
    ~ .nb-pages
    :is(.nb-s2:hover > .nb-edge, .nb-s2.nb-face:hover > .nb-low)
    .boil-frame:nth-of-type(3) {
    animation-name: boil-3;
}

/* Placed in the book's units by Home.astro's portraitBox, which also gives
   the clip along the page's top edge. */
.home-portrait {
    --sheet: light-dark(#fcfcfa, #dcdcd9);
    position: absolute;
    z-index: 1;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    aspect-ratio: 1056 / 1008;
    clip-path: var(--clip);
}

.cutout-lift {
    position: relative;
    height: 100%;
    rotate: 2.5deg;
    filter: drop-shadow(0 1px 0.5px rgb(0 0 0 / 0.2))
        drop-shadow(0 4px 7px rgb(0 0 0 / 0.08));
}

/* The torn edge's white rim of fibres, wider than the grey face. */
.cutout-lift::before {
    content: '';
    position: absolute;
    inset: -1.1%;
    background: light-dark(#fff, #efefed);
    clip-path: url('#cutout-torn');
}

/* Rendered, not display: none, or Firefox drops the clip it holds. */
.cutout-defs {
    position: absolute;
    width: 0;
    height: 0;
}

/* The ink is 960 square on the mask's 1056 × 1008: 48px of paper each side. */
.cutout-paper {
    position: relative;
    height: 100%;
    padding: 4.545% 4.545% 0;
    background: var(--sheet);
    clip-path: url('#cutout-torn');
}

.cutout-paper img {
    width: 100%;
    aspect-ratio: 1;
}

/* Out of the book once the ink is decoded (Home.astro's script), not
   before: a half-painted portrait never shows. */
@media (scripting: enabled) {
    .home-portrait:not(.is-in) .cutout-lift {
        opacity: 0;
    }

    .home-portrait.is-in .cutout-lift {
        animation: portrait-rise 1.1s var(--ease-pen) 0.15s both;
    }
}

@keyframes portrait-rise {
    from {
        translate: 0 100%;
    }
}

@keyframes portrait-settle {
    from {
        opacity: 0.1;
        translate: 0 0.75rem;
    }
}

.cutout-grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    opacity: 0.4;
    pointer-events: none;
}
/* In the book's units a page spans 800 wide and 1040 tall from y −40, room
   for its tab above its top edge; --in-* inset its text from the outer edge
   and the spine, --out-* run its rules past the text. */
.nb-pages {
    position: absolute;
    inset: 0;
    z-index: 2;
    perspective: calc(3200 * var(--u));
    pointer-events: none;
}

.nb-page {
    position: absolute;
    top: calc(-40 * var(--u));
    width: 50%;
    height: calc(1040 * var(--u));
}

.nb-side-left {
    --in-l: 73.6;
    --in-r: 40.7;
    --out-l: 1.4rem;
    --out-r: 2.4rem;
    left: 0;
}

.nb-side-right {
    --in-l: 44.8;
    --in-r: 73.6;
    --out-l: 2.4rem;
    --out-r: 1.4rem;
    left: 50%;
}

@media (width >= 64rem) {
    /* A page shows at once, and goes once the sheet has landed over it. */
    .nb-page {
        visibility: hidden;
        transition: visibility 0s var(--turn);
    }

    #nb-1:checked ~ .nb-pages .nb-s1,
    #nb-2:checked ~ .nb-pages .nb-s2 {
        visibility: visible;
        transition-delay: 0s;
    }

    /* The sheet between the spreads: its two faces hinge on the spine and
       turn together, each hidden while it faces away. Kept bare, as a
       filter, clip or opacity here would flatten the turn. */
    .nb-face {
        z-index: 1;
        backface-visibility: hidden;
        transition:
            transform var(--turn) var(--turn-ease),
            visibility 0s var(--turn);
    }

    .nb-face.nb-side-right {
        transform-origin: 0 50%;
    }

    .nb-face.nb-side-left {
        transform-origin: 100% 50%;
        transform: rotateY(180deg);
    }

    #nb-2:checked ~ .nb-pages .nb-face.nb-side-right {
        transform: rotateY(-180deg);
    }

    #nb-2:checked ~ .nb-pages .nb-face.nb-side-left {
        transform: rotateY(0deg);
    }

    /* Under the sheet, a page keeps its tab, lower, behind the sheet's
       edge. */
    .nb-fixed .nb-low {
        visibility: visible;
        transition: visibility 0s var(--turn);
    }

    .nb-fixed > .nb-tab {
        visibility: visible;
        translate: 0 calc(var(--behind) * var(--u));
        color: var(--muted);
        transition: translate 0s var(--turn);
    }

    #nb-1:checked ~ .nb-pages .nb-s1.nb-fixed .nb-low,
    #nb-2:checked ~ .nb-pages .nb-s2.nb-fixed .nb-low {
        visibility: hidden;
        transition-delay: 0s;
    }

    #nb-1:checked ~ .nb-pages .nb-s1.nb-fixed > .nb-tab,
    #nb-2:checked ~ .nb-pages .nb-s2.nb-fixed > .nb-tab {
        translate: none;
        color: var(--ink);
        transition-delay: 0s;
    }

    /* Lifting off, a face darkens; darkest edge on. A shadow, not a filter:
       Chromium lifts an animated filter onto a layer of its own, which
       ignores the face's backface-visibility. */
    .nb-face .nb-paper {
        box-shadow: inset 0 0 0 100vmax rgb(0 0 0 / 0.12);
        transition: box-shadow var(--turn) var(--turn-ease);
    }

    #nb-1:checked ~ .nb-pages .nb-s1 .nb-paper,
    #nb-2:checked ~ .nb-pages .nb-s2 .nb-paper {
        box-shadow: inset 0 0 0 100vmax transparent;
    }
}

.nb-paper {
    position: absolute;
    inset: 0;
    background: var(--grain), var(--paper);
    pointer-events: auto;
}

.nb-paper::after {
    content: '';
    position: absolute;
    inset: calc(142.4 * var(--u) - var(--gap))
        calc(var(--in-r) * var(--u) - var(--out-r))
        calc(54.4 * var(--u) + var(--gap))
        calc(var(--in-l) * var(--u) - var(--out-l));
    background: var(--ruled);
    mask: var(--rules) 0 0 / 100% calc(3 * var(--gap)) repeat-y;
}

/* --x, --y, --w and --h place a tab in its page's units (Home.astro's
   tabBox). */
.nb-tab {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    width: calc(var(--w) * var(--u));
    height: calc(var(--h) * var(--u));
    padding-top: 0.15em;
    font-size: clamp(1rem, 1.95cqi, 1.45rem);
    line-height: 1;
    color: var(--ink);
    cursor: pointer;
    pointer-events: auto;
}

.nb-tab .icon {
    width: 0.72em;
    height: 0.72em;
}

.nb-tab-low {
    color: var(--muted);
}

.nb-pages .nb-tab:hover {
    color: var(--ink);
}

#nb-1:focus-visible ~ .nb-pages .nb-s1 > .nb-tab-own,
#nb-2:focus-visible ~ .nb-pages .nb-s2 > .nb-tab-own {
    outline: 2px dashed var(--ink);
    outline-offset: -0.35rem;
}

/* The tabs name the pages; the heads are read out. */
.nb-head {
    text-transform: lowercase;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Every baseline sits --rule-gap above its rule: a line box --gap tall puts
   it at half its height, plus 0.326em in Caveat and 0.26em in Kalam. */
.leaf-name,
.leaf-links,
.nb-date,
.nb-foot {
    position: relative;
    top: calc(var(--gap) / 2 - var(--rule-gap) - 0.326em);
    height: var(--gap);
    line-height: var(--gap);
}

.leaf-short,
.leaf-stack,
.nb-title .ln-lines {
    position: relative;
    top: calc(var(--gap) / 2 - var(--rule-gap) - 0.26em);
}

.leaf-body,
.nb-writing-body {
    position: absolute;
    inset: calc(142.4 * var(--u)) calc(var(--in-r) * var(--u))
        calc(54.4 * var(--u) + var(--gap)) calc(var(--in-l) * var(--u));
    line-height: var(--gap);
    pointer-events: auto;
}

.nb-writing-body {
    bottom: calc(54.4 * var(--u));
    display: flex;
    flex-direction: column;
}

.nb-page > .nb-foot {
    position: absolute;
    top: auto;
    right: calc(var(--in-r) * var(--u));
    bottom: calc(54.4 * var(--u) - var(--gap) / 2 + var(--rule-gap) + 0.326em);
    left: calc(var(--in-l) * var(--u));
    pointer-events: auto;
}

/* As many posts as the page holds: the rest wrap into a column out of
   sight (and out of the tab order, by Home.astro's script). */
.nb-lines {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    column-gap: 3rem;
    overflow: clip;
    overflow-clip-margin: 0.6rem;
    line-height: var(--gap);
}

.leaf-shot {
    display: flex;
    align-items: center;
    height: calc(6 * var(--gap));
    pointer-events: none;
}

.leaf-card {
    position: relative;
    display: block;
    pointer-events: auto;
    height: calc(100% - 0.9rem);
    max-width: 100%;
}

.leaf-face {
    position: absolute;
    inset: 0;
    transition: opacity 0.6s var(--ease-pen);
}

/* The page boils already: the capture's frame doesn't on top of it. */
.leaf-card .leaf-real.framed:hover::before {
    animation: none;
}

/* mask-image is set inline, one pencil sketch per project. */
.leaf-sketch {
    position: absolute;
    inset: 0;
    background: var(--ink);
    mask: 0 0 / 100% 100% no-repeat;
}

.leaf-real {
    opacity: 0;
}

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

/* Not :focus-within: a click focuses the link, and the colour would stay
   after the pointer leaves. A tap leaves :hover stuck the same way. */
.nb-page:has(:focus-visible) .leaf-real {
    opacity: 1;
}

.nb-page:has(:focus-visible) .leaf-face:not(.leaf-real) {
    opacity: 0;
}

@media (hover: hover) {
    .leaf-card:hover .leaf-real {
        opacity: 1;
    }

    .leaf-card:hover .leaf-face:not(.leaf-real) {
        opacity: 0;
    }
}

.leaf-name {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 2.1rem;
}

.leaf-short {
    color: var(--soft);
    text-wrap: pretty;
}

.leaf-stack {
    font-size: 0.95rem;
    color: var(--muted);
}

.leaf-links {
    display: flex;
    gap: 1.4rem;
    font-size: 1.3rem;
    color: var(--muted);
}

.leaf-links a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}

.leaf-links .icon {
    width: 0.95rem;
    height: 0.95rem;
}

.leaf-links a:is(:hover, :focus-visible) {
    color: var(--ink);
}

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

.nb-post {
    display: grid;
    grid-template-columns: 5.4rem minmax(0, 1fr);
    column-gap: 1rem;
    width: 100%;
}

.nb-date {
    font-size: 1.3rem;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
}

/* Balance, not pretty: Firefox has no pretty, and a lone last word is what
   it would leave. */
.nb-title {
    font-size: 1.15rem;
    text-wrap: balance;
}

.nb-foot {
    display: flex;
    justify-content: flex-end;
}

.nb-more {
    min-height: 0;
    font-size: 1.45rem;
}

@media (prefers-color-scheme: dark) {
    .nb-line,
    .nb-spine {
        stroke-width: 2.1;
    }

    .nb-cover,
    .nb-low .nb-line {
        stroke-width: 1.7;
    }

    .cutout-lift {
        filter: drop-shadow(0 1px 0.5px rgb(0 0 0 / 0.5))
            drop-shadow(0 5px 10px rgb(0 0 0 / 0.3));
    }
}

@media (width < 68rem) {
    .nb {
        --gap: 2.5rem;
        --rule-gap: 0.55rem;
    }

    .leaf-name {
        font-size: 1.8rem;
    }

    .leaf-short {
        font-size: 0.98rem;
    }
}

/* Below this the writing outgrows the page and the book would stretch: no
   book. A cover first, him alone on the first screen, then his notebook. */
@media (width < 64rem) {
    /* The cover's fixed parts (bar, name, motto, call, their gaps) take
       --fixed; the portrait grows into what is left of the first screen, and
       what it can't fill (--spare) opens the gaps, so the projects start at
       the fold. */
    .home {
        --fixed: 23rem;
        --pw: clamp(13rem, min(86vw, (100svh - var(--fixed)) / 0.9545), 24rem);
        --spare: max(0px, 100svh - var(--fixed) - var(--pw) * 0.9545);
        display: grid;
        grid-template-areas:
            'name'
            'portrait'
            'motto'
            'cta';
        max-width: 36rem;
        margin-inline: auto;
    }

    .home-hero,
    .nb,
    .nb-pages {
        display: contents;
    }

    .nb {
        --gap: 2.1rem;
        --rule-gap: 0.45rem;
    }

    .nb-radio,
    .nb-draw,
    .nb-paper,
    .nb-tab,
    .home-line,
    .home-write,
    .leaf-stack,
    .leaf-links,
    .nb-side-left.nb-fixed > .nb-foot {
        display: none;
    }

    .home-name {
        grid-area: name;
        justify-self: center;
        text-align: center;
        margin-top: calc(var(--spare) / 4);
        font-size: clamp(3.9rem, 17vw, 5.5rem);
        white-space: nowrap;
    }

    .home-portrait {
        position: relative;
        grid-area: portrait;
        top: auto;
        left: auto;
        justify-self: center;
        width: var(--pw);
        margin-top: calc(0.9rem + var(--spare) / 4);
        clip-path: none;
    }

    .home-portrait.is-in .cutout-lift {
        animation-name: portrait-settle;
    }

    .home-motto {
        grid-area: motto;
        justify-self: center;
        text-align: center;
        margin-top: calc(1.1rem + var(--spare) / 4);
    }

    .home-cta {
        grid-area: cta;
        justify-self: center;
        margin-top: 1.4rem;
    }

    .home-call {
        padding-inline: 1.5rem;
        font-size: 1.7rem;
    }

    .nb-page {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        isolation: isolate;
    }

    .nb-head {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        margin-bottom: 0.9rem;
        font-weight: 600;
        font-size: 2.1rem;
        line-height: 1.2;
    }

    #home-projects {
        margin-top: calc(3rem + var(--spare) / 4);
    }

    /* One line per project: its pencil screen, its name, what it is. */
    .nb-page + .nb-page {
        margin-top: 1.4rem;
    }

    .leaf-body {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
        grid-template-areas:
            'shot name'
            'shot short';
        align-content: center;
        column-gap: 1.1rem;
        line-height: 1.4;
    }

    .leaf-shot {
        grid-area: shot;
        display: block;
        height: auto;
    }

    .leaf-card {
        width: 100%;
        height: auto;
    }

    .leaf-name,
    .leaf-short {
        top: 0;
        height: auto;
    }

    .leaf-name {
        grid-area: name;
        flex-wrap: wrap;
        align-self: end;
        column-gap: 0.5rem;
        font-size: 1.6rem;
        line-height: 1.15;
    }

    .leaf-short {
        grid-area: short;
        align-self: start;
        margin-top: 0.2rem;
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .nb-page > .nb-foot {
        position: relative;
        top: calc(var(--gap) / 2 - var(--rule-gap) - 0.326em);
        right: auto;
        bottom: auto;
        left: auto;
        margin-top: 0.6rem;
    }

    /* Each post on a ruled line of its own, the date noted small above its
       title, which stays on one line: the scrawl at most 4.8vw keeps the
       longest title in the width, the ellipsis only for a longer one. */
    .nb-writing {
        --gap: 3.15rem;
        --rule-gap: 0.4rem;
    }

    .nb-page.nb-writing {
        margin-top: 3.25rem;
    }

    .nb-writing-body {
        position: static;
        display: block;
    }

    .nb-lines {
        display: block;
        overflow: visible;
        isolation: isolate;
    }

    .nb-lines::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: calc(-1 * var(--gap)) 0 0;
        background: var(--ruled);
        mask: var(--rules) 0 0 / 100% calc(3 * var(--gap)) repeat-y;
    }

    .nb-post {
        position: relative;
        display: block;
        height: var(--gap);
    }

    .nb-post:nth-child(n + 8) {
        display: none;
    }

    .nb-date {
        position: absolute;
        top: 0.3rem;
        left: 0;
        height: auto;
        font-size: 0.95rem;
        line-height: 1;
        text-align: left;
    }

    .nb-title {
        position: absolute;
        right: 0;
        bottom: calc(var(--rule-gap) - 0.6em);
        left: 0;
        overflow: hidden;
        padding-bottom: 0.4em;
        font-family: var(--font-scrawl);
        font-weight: 500;
        font-size: min(4.8vw, 1.2rem);
        line-height: 1.2;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Room for the scrawl's last stroke, which runs past its advance and
       would fall outside the underline's mask. */
    .nb-title .ln-lines {
        top: 0;
        padding-right: 0.2em;
    }

    .nb-more {
        font-size: 1.35rem;
    }
}
/* 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;
}

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;
    }
}

.date-short {
    display: none;
}

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

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

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

    .ruled-go {
        font-size: 1.15rem;
        text-wrap: balance;
    }

    .ruled-year > span,
    .ruled-date,
    .ruled-go .ln-lines,
    .ruled-note {
        top: 0.12rem;
    }

    .ruled-year {
        font-size: 1.6rem;
    }

    .ruled-date {
        font-size: 1.3rem;
        white-space: nowrap;
    }

    .date-long {
        display: none;
    }

    .date-short {
        display: inline;
    }
}

.ruled-note {
    display: flex;
    align-items: center;
}

.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-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 > header {
    margin-bottom: 2rem;
}

.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: calc(var(--edge-t) / -2 - 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: calc(var(--edge-t) / -2);
    background: var(--ink);
    mask: var(--frame-2);
    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: calc(var(--edge-t) / -2);
    z-index: 1;
    background: var(--ink);
    mask: var(--frame-1);
    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-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 .ln {
    top: 0.55rem;
}

.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 screen and (min-width: 64rem) {
    .cv-steps {
        display: grid;
        grid-template-columns: minmax(0, 31rem) minmax(0, 1fr);
        align-items: start;
        gap: 3.5rem;
    }

    .cv-steps > div {
        justify-self: center;
        width: min(100%, 32rem);
    }

    .step {
        padding-top: 0.75rem;
    }

    /* One step shown at a time, all in one cell: the block keeps the tallest one's height. */
    .cv-steps:has([role='tablist']) {
        align-items: stretch;
    }

    .cv-steps:has([role='tablist']) > div {
        display: grid;
    }

    .cv-steps:has([role='tablist']) .step {
        grid-area: 1 / 1;
    }

    .cv-steps:has([role='tablist']) .step[hidden] {
        display: block;
        visibility: hidden;
    }

    .cv-list::before {
        bottom: auto;
        height: round(down, 100%, var(--line-gap));
    }
}

/* The labels need 26rem; the rest goes to the step, which then wraps less. */
@media screen and (min-width: 64rem) and (max-width: 79.99rem) {
    .cv-steps {
        grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    }
}

/* 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-org {
    color: var(--ink);
}

.cv-volunteering-org .ln::after {
    clip-path: inset(0);
}

.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;
}