:root{
--ink:#29312f;
--paper:#fffefa;
--canvas:#f4f1e8;
--muted:#66706c;
--accent:#b33f1d;
--accent-dark:#873019;
--link:#155f78;
--link-hover:#0d4356;
--line:#ddd8cc;
--soft:#f5f2eb;
--focus:#f0a23a;
--shadow:0 20px 55px rgba(42,48,44,.12),0 2px 8px rgba(42,48,44,.08);
--radius:18px;
}
*{box-sizing:border-box;}
html{
--s:104px;
--c1:#e2ded4;
--c2:#f8f6f0;
--c3:#ece8de;
--_g:var(--c3) 0 120deg,#0000 0;
min-height:100%;
background-color:var(--canvas);
background-image:
linear-gradient(rgba(244,241,232,.48),rgba(244,241,232,.48)),
conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
conic-gradient(from 60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
linear-gradient(90deg,var(--c1) calc(100%/6),var(--c2) 0 50%,var(--c1) 0 calc(500%/6),var(--c2) 0);
background-size:auto,calc(1.732*var(--s)) var(--s),calc(1.732*var(--s)) var(--s),calc(1.732*var(--s)) var(--s),calc(1.732*var(--s)) var(--s),calc(1.732*var(--s)) var(--s);
}
body{
margin:0;
padding:0;
color:var(--ink);
font:16.5px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
text-rendering:optimizeLegibility;
}
#main{
width:min(900px,calc(100% - 36px));
margin:22px auto;
padding:0 clamp(20px,3.5vw,34px) clamp(22px,3.5vw,34px);
overflow:hidden;
border:1px solid rgba(116,109,94,.24);
border-radius:var(--radius);
background:var(--paper);
box-shadow:var(--shadow);
}
.site-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:1rem;
margin:0 calc(clamp(20px,3.5vw,34px)*-1) clamp(20px,3vw,28px);
padding:13px clamp(20px,3.5vw,34px);
border-bottom:1px solid var(--line);
background:rgba(245,242,235,.58);
}
.site-brand{
display:flex;
flex-direction:column;
color:var(--ink);
line-height:1.15;
text-decoration:none;
}
.site-brand-name{
font-family:ui-serif,Charter,"Bitstream Charter",Georgia,serif;
font-size:1.1rem;
font-weight:750;
letter-spacing:.01em;
}
.site-brand-tagline{
margin-top:.18rem;
color:var(--muted);
font-size:.72rem;
font-weight:650;
letter-spacing:.08em;
text-transform:uppercase;
}
.site-nav{
display:flex;
flex:0 0 auto;
flex-wrap:wrap;
gap:.3rem;
align-items:center;
}
.site-nav a{
padding:.3rem .55rem;
border-radius:999px;
color:var(--link);
font-size:.9rem;
font-weight:700;
text-decoration:none;
}
.site-nav a:hover{
color:var(--link-hover);
background:#e9eee9;
}
a{
color:var(--link);
text-decoration-thickness:.08em;
text-underline-offset:.14em;
text-decoration-skip-ink:auto;
}
a:hover{color:var(--link-hover);}
a:focus-visible{
outline:3px solid var(--focus);
outline-offset:3px;
border-radius:3px;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5{
color:var(--accent);
font-family:ui-serif,Charter,"Bitstream Charter",Georgia,serif;
font-weight:750;
line-height:1.16;
text-wrap:balance;
}
.content h1{
margin:.05em 0 .45em;
font-size:clamp(2rem,5vw,2.75rem);
letter-spacing:-.035em;
}
.content h2{
margin:1.3em 0 .45em;
font-size:clamp(1.4rem,3vw,1.65rem);
letter-spacing:-.018em;
}
.content h3{margin:1.25em 0 .4em;font-size:1.2rem;}
.content h4,.content h5{margin:1.15em 0 .4em;}
.content p{margin:0 0 .8em;}
.content ul,.content ol{padding-left:1.35em;}
.content li{margin:.28em 0;}
.content>h1:first-child+ul{
margin:-.25rem 0 .9rem;
padding-left:1.2rem;
color:var(--muted);
font-size:.9em;
}
.content>h1:first-child+ul+h2{margin-top:1.05em;}
.content blockquote{
margin:1rem 0;
padding:.75rem 1rem;
border-left:4px solid #cf9a80;
border-radius:0 10px 10px 0;
background:var(--soft);
color:#4f5955;
font-family:ui-serif,Charter,"Bitstream Charter",Georgia,serif;
font-size:1.04em;
font-style:italic;
}
.content blockquote p{margin:.55rem 0;}
.content blockquote p:first-child{margin-top:0;}
.content blockquote p:last-child{margin-bottom:0;}
.techworks-panel > h3:first-child{margin-top:0;}
.content code{
padding:.12em .32em;
border:1px solid #e4e0d7;
border-radius:4px;
background:#f5f3ee;
font-size:.9em;
}
.content pre{
margin:1rem 0;
padding:.75rem .9rem;
overflow:auto;
border:1px solid var(--line);
border-radius:10px;
background:#f5f3ee;
line-height:1.5;
}
.content pre code{padding:0;border:0;background:transparent;font-size:.92em;}
.content .highlight [class^="tok-k"]{color:#783b7d;}
.content .highlight [class^="tok-s"]{color:#23623c;}
.content .highlight [class^="tok-m"]{color:#79501b;}
.content .highlight [class^="tok-c"]{color:#626b67;font-style:italic;}
.content .highlight .tok-nb,.content .highlight .tok-nf{color:var(--link);}
.content .highlight .tok-p{color:#626b67;}
.content .diagram{margin:1.5rem 0;}
.content .diagram img{margin:0 auto;border-radius:0;}
.content img{
display:block;
max-width:100%;
height:auto;
border-radius:10px;
}
.content p>a>img,
.content p>img{
box-shadow:0 8px 24px rgba(42,48,44,.12);
}
.content p>a:has(>img){
display:block;
width:100%;
}
.content p>a>img{width:100%;}
img[src*="float_right"]{
float:right;
margin:.2rem 0 1.25rem 2rem;
}
img[src*="200px"]{width:200px;}
.page-home img[src*="float_right"]{
float:none;
width:138px;
aspect-ratio:1;
object-fit:cover;
margin:0;
border:5px solid #fff;
border-radius:16px;
box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(42,48,44,.17);
}
.level-one{background:#e5f1f3;color:#154f62;padding:0 .25em;border-radius:.25em;}
.level-two{background:#f8eddb;color:#83500d;padding:0 .25em;border-radius:.25em;}
.level-three{background:#f6e4e8;color:#8b1739;padding:0 .25em;border-radius:.25em;}
.content table{
width:100%;
margin:1rem 0;
overflow:hidden;
border:1px solid var(--line);
border-radius:10px;
border-collapse:separate;
border-spacing:0;
font-size:.96em;
}
.content th,
.content td{
padding:.45rem .65rem;
border-bottom:1px solid var(--line);
vertical-align:top;
}
.content tr:last-child td{border-bottom:0;}
.content th:first-child,.content td:first-child{white-space:nowrap;}
.content thead th{background:var(--soft);font-weight:750;text-align:left;}
.content tbody tr:nth-child(even){background:rgba(245,242,235,.35);}
.content td[align="right"],.content th[align="right"]{text-align:right;}
.content td[align="center"],.content th[align="center"]{text-align:center;}
.content table.definition-table{font-size:.93em;box-shadow:none;}
.content table.definition-table th,.content table.definition-table td{padding:.4rem .5rem;}
.content table.definition-table td{vertical-align:top;}
.content table.definition-table th:first-child,.content table.definition-table td:first-child{white-space:normal;}
.content table.definition-table tr.name-row th{
padding:.48rem .55rem;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
background:#ebe7dd;
text-align:left;
font-size:1.04em;
}
.page-home .content{
display:block;
}
.page-home .content>h1{margin-bottom:.35em;}
.page-home .content>p:first-of-type{
float:right;
width:138px;
margin:-4.35rem 0 .8rem 1.5rem;
}
.page-home .content>p:nth-of-type(2){
margin:0;
font-size:1.05em;
}
.page-home .content>h2{margin-top:.9em;}
.page-home .content>h2:nth-of-type(1){clear:both;}
.page-home .content>.latest-work-tiles{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.7rem;
margin:.05rem 0 0;
padding:0;
list-style:none;
}
.page-home .latest-work-tiles>li,
.page-home .content>ul:not(.latest-work-tiles)>li{margin:0;}
.page-home .latest-work-tiles a{
display:flex;
min-height:124px;
flex-direction:column;
align-items:flex-start;
gap:.38rem;
padding:.82rem .9rem .88rem;
border:1px solid #ddd4c4;
border-top:3px solid #b45a3c;
border-radius:12px 9px;
background:linear-gradient(145deg,#fffaf2,#f6f1e7);
box-shadow:0 2px 6px rgba(42,48,44,.06);
color:var(--ink);
text-decoration:none;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.page-home .latest-work-tiles .work-title{
font-family:ui-serif,Charter,"Bitstream Charter",Georgia,serif;
font-size:1.08rem;
font-weight:750;
line-height:1.18;
overflow-wrap:anywhere;
}
.page-home .latest-work-tiles time{
color:var(--muted);
font-size:.7rem;
font-weight:750;
font-variant-numeric:tabular-nums;
letter-spacing:.07em;
line-height:1;
text-transform:uppercase;
}
.page-home .latest-work-tiles .work-excerpt{
margin-top:.55rem;
color:#545e5a;
font-size:.82rem;
line-height:1.35;
}
.page-home .explore-more{
margin:.35rem 0 0;
text-align:right;
font-size:.86rem;
font-weight:700;
}
.page-home .content>ul:not(.latest-work-tiles){
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:.45rem;
margin:.05rem 0 .25rem;
padding:0;
list-style:none;
}
.page-home .content>ul:not(.latest-work-tiles) a{
display:flex;
min-height:48px;
align-items:center;
justify-content:center;
padding:.45rem .35rem;
border:1px solid #d6d9cf;
border-radius:11px 7px 10px 8px;
background:#f5f3ed;
color:var(--link);
font-size:.82rem;
font-weight:750;
line-height:1.15;
text-align:center;
text-decoration:none;
transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.page-home .content>ul:not(.latest-work-tiles)>li:nth-child(even) a{
border-radius:7px 11px 8px 10px;
background:#f5f3ed;
}
.page-home .latest-work-tiles a:hover,
.page-home .content>ul:not(.latest-work-tiles) a:hover{
transform:translateY(-2px);
border-color:#b7b2a6;
box-shadow:0 5px 13px rgba(42,48,44,.11);
color:var(--link-hover);
}
.page-home .latest-work-tiles a:focus-visible,
.page-home .content>ul:not(.latest-work-tiles) a:focus-visible{
outline:3px solid var(--focus);
outline-offset:2px;
}
.page-home .content>table td:first-child{color:var(--muted);font-variant-numeric:tabular-nums;}
.site-index{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.4rem .55rem;
margin:.8rem 0;
padding:0;
list-style:none;
}
.site-index>li{
margin:0;
padding:.48rem .65rem;
border:1px solid var(--line);
border-radius:10px;
background:linear-gradient(145deg,#fffefa,#f7f4ed);
}
.site-index ul{margin:.3rem 0 0;padding-left:1rem;}
.site-index a{font-weight:700;}
.content .backlinks{
clear:both;
margin:1.7rem 0 1rem;
padding:.75rem .9rem;
border:1px solid var(--line);
border-radius:10px;
background:var(--soft);
}
.content .backlinks h3{margin:0 0 .5rem;color:var(--accent);}
.content .backlinks ul{margin:.25rem 0 0;padding-left:1.25rem;}
.content .backlinks li{margin:.2rem 0;}
.site-foot{
clear:both;
margin-top:1.8rem;
padding-top:.8rem;
border-top:1px solid var(--line);
color:var(--muted);
font-size:.78rem;
}
.site-foot .foot-meta{display:flex;flex-direction:column;gap:.3rem;}
.site-foot p{margin:0;}
.site-foot a{color:inherit;}
@media (max-width:720px){
html{background:var(--canvas);}
body{font-size:16px;}
#main{
width:100%;
min-height:100vh;
margin:0;
border:0;
border-radius:0;
box-shadow:none;
}
.site-index{grid-template-columns:1fr;}
.page-home .content{display:block;}
.page-home .content>p:first-of-type{
float:right;
width:108px;
margin:-1rem 0 .65rem 1rem;
}
.page-home .content>p:nth-of-type(2){margin-bottom:.8rem;}
.page-home .content>h2:nth-of-type(1){clear:both;}
.page-home .content>ul:not(.latest-work-tiles){grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:560px){
#main{padding-right:14px;padding-left:14px;}
.site-head{
align-items:center;
gap:.6rem;
margin-right:-14px;
margin-left:-14px;
padding:10px 14px;
}
.site-brand{flex:0 1 auto;min-width:0;}
.site-brand-tagline{white-space:nowrap;}
.site-nav{flex:1 1 auto;min-width:0;gap:.1rem;justify-content:flex-end;}
.site-nav a{padding:.35rem .3rem;font-size:.8rem;}
.content h1{font-size:2rem;}
img[src*="float_right"]{
float:none;
max-width:100%;
margin:0;
}
.page-home img[src*="float_right"]{
width:108px;
max-width:100%;
margin:0;
}
.page-home .content>ul:not(.latest-work-tiles){grid-template-columns:repeat(2,minmax(0,1fr));}
.page-home .content>.latest-work-tiles{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.55rem;
}
.page-home .latest-work-tiles a{
min-height:148px;
padding:.7rem .72rem .75rem;
}
.page-home .latest-work-tiles .work-title{font-size:1rem;}
.page-home .latest-work-tiles .work-excerpt{
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}
.page-home .content>table,
.page-home .content>table tbody,
.page-home .content>table tr,
.page-home .content>table td{display:block;width:100%;}
.page-home .content>table{border:0;background:transparent;}
.page-home .content>table thead{
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.page-home .content>table tr{
margin-bottom:.5rem;
padding:.6rem .7rem;
border:1px solid var(--line);
border-radius:10px;
background:linear-gradient(145deg,#fffefa,#f7f4ed);
}
.page-home .content>table td{padding:0;border:0;white-space:normal;}
.page-home .content>table td:first-child{
margin-bottom:.28rem;
font-size:.78rem;
font-weight:750;
letter-spacing:.04em;
}
.content table:not(.definition-table){overflow-x:auto;}
.page-techworks .content table,
.page-techworks .content table tbody,
.page-techworks .content table tr{
display:block;
width:100%;
}
.page-techworks .content table{
overflow:visible;
border:0;
background:transparent;
box-shadow:none;
}
.page-techworks .content table thead{
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.page-techworks .content table tr{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:.2rem .8rem;
margin-bottom:.5rem;
padding:.65rem .75rem;
border:1px solid var(--line);
border-radius:10px;
background:linear-gradient(145deg,#fffefa,#f7f4ed);
}
.page-techworks .content table td{
display:block;
width:auto;
padding:0;
border:0;
white-space:normal;
}
.page-techworks .content table td:nth-child(3){
grid-column:1/-1;
grid-row:1;
font-weight:650;
}
.page-techworks .content table td:nth-child(1),
.page-techworks .content table td:nth-child(2){
grid-row:2;
color:var(--muted);
font-size:.82rem;
}
.page-techworks .content table th:nth-child(n+4),
.page-techworks .content table td:nth-child(4){display:none;}
.page-techworks .content table td:nth-child(5),
.page-techworks .content table td:nth-child(6){
grid-row:3;
color:var(--muted);
font-size:.78rem;
}
.page-techworks .content table td:nth-child(5){grid-column:1;}
.page-techworks .content table td:nth-child(6){grid-column:2;}
.page-techworks .content table td:nth-child(5)::before{
content:"Role: ";
font-weight:750;
}
.page-techworks .content table td:nth-child(6):not(:empty)::before{
content:"With: ";
font-weight:750;
}
.page-techworks .content table td:nth-child(6):empty{display:none;}
.page-techworksarchive .content table,
.page-techworksarchive .content table tbody,
.page-techworksarchive .content table tr{
display:block;
width:100%;
}
.page-techworksarchive .content table{
overflow:visible;
border:0;
background:transparent;
box-shadow:none;
}
.page-techworksarchive .content table thead{
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.page-techworksarchive .content table tr{
margin-bottom:.5rem;
padding:.6rem .7rem;
border:1px solid var(--line);
border-radius:10px;
background:linear-gradient(145deg,#fffefa,#f7f4ed);
}
.page-techworksarchive .content table td{
display:inline;
width:auto;
padding:0;
border:0;
white-space:normal;
}
.page-techworksarchive .content table td:first-child{
display:block;
margin-bottom:.24rem;
font-weight:650;
}
.page-techworksarchive .content table td+td{margin-right:.7rem;}
}
@media (max-width:359px){
.page-home .content>p:first-of-type{
width:100px;
margin:0 0 .65rem .8rem;
}
.page-home img[src*="float_right"]{width:100px;}
.page-home .content>.latest-work-tiles{grid-template-columns:1fr;}
.page-home .latest-work-tiles a{min-height:0;}
}
@media (max-width:420px){
.site-brand-tagline{display:none;}
}
@media (prefers-reduced-motion:reduce){
.page-home .latest-work-tiles a,
.page-home .content>ul:not(.latest-work-tiles) a{transition:none;}
}