@font-face {
    font-family: 'IBM Plex Mono';
    src: url('assets/fonts/ibm-plex-mono.ttf') format('truetype');
    font-display: swap;
    font-weight: 400;
}
@font-face {
    font-family:Pixelify;
    src:url('assets/fonts/pixelify-sans.ttf') format('truetype');
    font-display:swap;
    font-weight:400
}
:root {
    --paper:#f3f2ff;
    --paper-deep:#e5e7ff;
    --ink:#2f2b43;
    --muted:#625b7b;
    --line:#3e394f;
    --purple:#edb6f6;
    --pink:#edb6f6;
    --link-bg:#c6f5ee;
    --link-bg-hover:#a6ece3;
    --shadow:#4d4565;
    --pixel:'IBM Plex Mono','Courier New',monospace
}
* {
    box-sizing:border-box
}
html {
    min-height:100%
}
body {
    margin:0;
    color:var(--ink);
    background-color:#e1e7ff;
    background-image:radial-gradient(#8d9bd01a .7px,transparent .7px);
    background-size:4px 4px;
    font-family:var(--pixel);
    font-size:15px;
    line-height:1.7
}
button,a {
    -webkit-tap-highlight-color:transparent
}
a {
    color:inherit;
    text-underline-offset:3px
}
a:hover {
    color:#62508f
}
a:focus-visible,button:focus-visible {
    outline:2px dashed #62508f;
    outline-offset:5px
}
button {
    font:inherit;
    color:inherit
}
img {
    max-width:100%
}
.window {
    background:var(--paper);
    border:2px solid var(--line);
    box-shadow:5px 5px 0 #4d4565,inset 1px 1px 0 #fff
}
.title-bar {
    min-height:32px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:3px 9px;
    background:#e2dbee;
    border-bottom:2px solid var(--line);
    font:16px/1.35 var(--pixel);
    color:var(--ink)
}
.title-bar h2 {
    font:inherit;
    margin:0
}
.title-bar.active {
    background:var(--purple)
}
.window-glyph {
    margin-left:auto;
    line-height:1
}
.window-dot {
    width:10px;
    height:10px;
    flex-shrink:0;
    border:1px solid var(--line);
    box-shadow:inset 1px 1px white;
    background:var(--paper)
}
.retro-button,.start-button {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    padding:6px 13px;
    background:#ece5f4;
    text-decoration:none;
    border:1px solid var(--line);
    box-shadow:inset 2px 2px #fff9,inset -2px -2px #a89bbf;
    font:18px/1.4 var(--pixel)
}
.retro-button:hover,.start-button:hover {
    background:#dfd3f0
}
.retro-button:active,.start-button:active {
    box-shadow:inset 2px 2px #a89bbf,inset -2px -2px white;
    transform:translate(1px,1px)
}
.skip-link {
    position:absolute;
    top:-100px;
    left:20px;
    z-index:10;
    background:var(--paper);
    padding:8px
}
.skip-link:focus {
    top:10px
}
.hover-swap {
    border:0;
    border-radius:0;
    padding:0 2px;
    display:inline;
    background:var(--link-bg);
    cursor:pointer;
    text-align:left;
    line-height:inherit
}
.hover-text {
    display:none
}
.hover-swap:hover .normal-text,.hover-swap:focus-visible .normal-text,.hover-swap[aria-pressed=true] .normal-text {
    display:none
}
.hover-swap:hover .hover-text,.hover-swap:focus-visible .hover-text,.hover-swap[aria-pressed=true] .hover-text {
    display:inline
}
/* Reading pages share the desktop palette and window chrome. */
body:not(.home) .page-shell {
    display:block;
    width:min(850px,calc(100% - 48px));
    margin:64px auto;
    padding:0 34px 38px;
    border:2px solid var(--line);
    background:var(--paper);
    box-shadow:6px 6px 0 #8276aa65;
    position:relative
}
body:not(.home) .page-shell:before {
    content:'aubrieta / personal files';
    display:block;
    font:17px var(--pixel);
    background:var(--purple);
    padding:8px 12px;
    border-bottom:2px solid var(--line);
    margin:0 -34px 30px
}
.intro,.intro-stack {
    display:block
}
.intro-copy {
    max-width:100%
}
.kicker {
    margin:0 0 18px;
    color:var(--muted);
    font:17px var(--pixel);
    font-style:normal
}
h1 {
    font-family:var(--pixel);
    font-weight:400;
    font-size:clamp(36px,6vw,54px);
    line-height:1.1;
    max-width:100%;
    margin:0
}
.lede {
    font-size:16px;
    color:var(--ink);
    line-height:1.7;
    margin-top:20px
}
.notes {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    padding-top:26px
}
.vita-list {
    margin:0;
    padding-left:18px;
    border-left:2px dotted #b6a9d0
}
.vita-entry {
    padding:0 0 30px 16px
}
.vita-entry:last-child {
    padding-bottom:0
}
.vita-entry dt {
    font:18px var(--pixel);
    color:var(--muted);
    margin-bottom:8px
}
.vita-entry dd {
    margin:0;
    display:grid;
    gap:5px
}
.vita-role {
    font-size:17px;
    color:var(--ink);
    font-weight:bold
}
.vita-detail-muted {
    color:var(--muted)
}
.notes a,.kicker a {
    background:var(--link-bg)
}
body:not(.home) .content {
    width:min(850px,calc(100% - 40px));
    margin:40px auto
}
.content .box {
    border:1px solid var(--line);
    border-radius:0;
    background:var(--paper);
    box-shadow:3px 3px #8276aa45
}
.content .entry-date {
    background:var(--purple);
    color:var(--ink);
    font-family:var(--pixel);
    font-size:22px;
    border-radius:0
}
.content .hl,.content .ipa {
    background:#e9d8ed;
    color:var(--ink);
    border-radius:0
}
.content .conjugation {
    overflow-x:auto
}
.content .conjugation td,.content .conjugation th {
    background:var(--paper);
    border-color:#b2a4cb
}
.content h1 {
    font-style:normal
}
.content h1 i {
    font-style:normal
}
@media(max-width:600px) {
    body:not(.home) .page-shell {
        width:calc(100% - 28px);
        margin:22px auto;
        padding:0 20px 26px
    }
    body:not(.home) .page-shell:before {
        margin:0 -20px 22px;
        font-size:15px
    }
    .vita-role {
        font-size:15px
    }
    .vita-entry {
        padding-left:8px
    }
    .content {
        overflow-wrap:anywhere
    }
}
.vita-list::before {
    display:none
}
.vita-entry::before {
    width:8px;
    height:8px;
    left:-23px;
    top:7px;
    border:1px solid var(--line);
    border-radius:0;
    background:var(--purple)
}
.vita-entry dt {
    text-transform:none;
    letter-spacing:0
}
.list-sheet p {
    padding:0
}
.list-sheet .list-entry-copy {
    font-size:15px
}
.list-index-list li {
    font-size:15px
}
.list-sheet .list-note {
    font-size:14px
}
.list-sheet .list-entry::marker {
    color:#9c81b8
}