:root{color-scheme:light;--bg:#f8f8f5;--ink:#242522;--muted:#6d6e68;--rule:#dcded6;--hover:#e9ebe3;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);transition:background .45s,color .45s}
html.dark{color-scheme:dark;--bg:#111210;--ink:#e1e3d9;--muted:#999b91;--rule:#34372f;--hover:#25281f}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
header{padding:30px 38px;display:flex;align-items:center;justify-content:space-between;font:14px 'Courier New',monospace}
.wordmark{font-weight:bold;letter-spacing:-1px;font-size:21px}
.wordmark span{color:var(--muted)}
nav{display:flex;align-items:center;gap:28px}
button{border:0;background:transparent;color:inherit;font-size:23px;width:34px;height:34px;cursor:pointer;border-radius:50%}
button:hover{background:var(--hover)}
main{width:min(100% - 48px,580px);margin:0 auto}
.introduction{padding-top:88px}
.name-line{display:block}
.essay{font-family:Georgia,'Times New Roman',serif;font-size:19px;line-height:1.65;letter-spacing:-.013em}
.essay p{margin:0 0 23px}
.contact-link{display:inline-block;border-bottom:1px solid var(--ink);font:14px 'Courier New',monospace;padding-bottom:5px;margin-top:11px}
.contact-link:hover{text-decoration:none;border-bottom-style:dotted}
.work{margin-top:99px;scroll-margin-top:35px}
.section-label{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:19px;color:var(--muted);font:12px 'Courier New',monospace;letter-spacing:.07em}
article{padding:29px 0 31px;border-bottom:1px solid var(--rule)}
.row-heading{display:flex;gap:20px;align-items:baseline;justify-content:space-between}
.row-heading h3{font:400 25px Georgia,serif;margin:0;letter-spacing:-.02em}
.row-heading p{font:11px 'Courier New',monospace;color:var(--muted);white-space:nowrap;margin:0}
.role{font:400 12px/1.65 'Courier New',monospace;color:var(--ink);margin:10px 0 18px}
article>p:not(.role){font:17px/1.65 Georgia,serif;margin:0}
details{margin-top:19px}
summary{font:13px 'Courier New',monospace;cursor:pointer;list-style:none;display:inline-flex;gap:12px;color:var(--muted)}
summary::-webkit-details-marker{display:none}
summary:before{content:'+'}
details[open] summary:before{content:'−'}
details div{font:16px/1.65 Georgia,serif;margin-top:15px;padding-left:17px;border-left:1px solid var(--rule)}
footer{font:12px/1.7 'Courier New',monospace;display:flex;align-items:center;gap:24px;padding:48px 0 60px;color:var(--muted)}
footer p{margin:0;margin-right:auto;color:var(--ink)}
.skip{position:fixed;top:-100px;padding:15px;background:var(--ink);color:var(--bg);z-index:10}
.skip:focus{top:10px;left:10px}
::selection{background:var(--ink);color:var(--bg)}
@media(max-width:600px){header{padding:20px 22px}
nav{gap:18px}
.introduction{padding-top:59px}
.essay{font-size:18px}
.work{margin-top:70px}
.row-heading{gap:10px}
.row-heading p{font-size:10px}
.role{font-size:12px}
footer{gap:15px;flex-wrap:wrap}
footer p{width:100%;margin-bottom:7px}
}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}
body{transition:none}
}
.scramble-unit{position:relative;display:inline-block;max-width:100%;vertical-align:bottom}
.scramble-overlay{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scrambling>.scramble-original{visibility:hidden}
.scrambling>.scramble-overlay{display:block}
@media(pointer:fine){html,body,a,button,summary{cursor:url('cursor.svg') 16 16,crosshair}
}
.work-page{margin-top:88px;min-height:65vh}
@media(max-width:600px){.work-page{margin-top:59px}
}
/* One reading axis for the personal introduction. */
.introduction h1{font-family:'Courier New',monospace;font-size:24px;line-height:1.4;letter-spacing:0;text-align:left;padding-left:0;margin:0 0 30px;font-weight:400}
@media(max-width:600px){.introduction h1{font-size:22px;margin-bottom:26px}
}
.introduction .essay .opening{font-size:32px;line-height:1.2;letter-spacing:-.025em;margin-bottom:32px}
article[id]{scroll-margin-top:35px}
@media(max-width:600px){.introduction .essay .opening{font-size:30px;line-height:1.22}
}
.inline-link{text-decoration:none}
.inline-link:hover,.inline-link:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.inline-link:hover .scramble-original,.inline-link:focus-visible .scramble-original{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.company-link:hover .scramble-original,.company-link:focus-visible .scramble-original{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media(pointer:fine){a[href],a[href] *{cursor:pointer}
}
/* Keep navigation anchored when Home and Work exchange labels. */
nav>a:first-child{display:inline-block;flex:0 0 4ch;width:4ch;text-align:left}
/* Reserve the scrollbar lane on short and long pages alike. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter:stable){html{overflow-y:scroll}
}
.section-label h1{font:14px "Courier New",monospace;letter-spacing:.07em;color:var(--ink);margin:0;padding:0;text-align:left;line-height:1.4}
@media(max-width:600px){.row-heading{flex-direction:column;align-items:flex-start;gap:8px}
.row-heading p{font-size:12px;line-height:1.5}
}