:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }
:root {
  --bg:      light-dark(#ecebe7, #1b1d1f);   
  --bg-2:    light-dark(#e3e1dc, #222528);
  --ink:     light-dark(#1f1f1f, #e6e4df);
  --ink-2:   light-dark(#5a5a58, #a9a8a3);
  --ink-3:   light-dark(#656461, #91908b);   
  --rule:    light-dark(#d9d7d1, #33363a);
  --accent:  light-dark(#2447a8, #7e9ff0);   
  --link:    var(--accent);
  --link-2:  light-dark(#1a3680, #a9c2f5);
  --dot:     light-dark(#7b4fb0, #b89ae6);   
  --danger:  light-dark(#b3261e, #f28b82);   
  --outside: light-dark(#e9e7e1, #272a2e);   
  --serif: "Literata", "Source Serif 4", "Charter", "Georgia", "Times New Roman", serif;
  --mono:  ui-monospace, "Cascadia Mono", "Consolas", "SF Mono", monospace;
  --wide: 60rem;      
  --measure: 42rem;   
}
@font-face { font-family: "Literata"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/literata-latin.woff2") format("woff2"); 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: "Literata"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/assets/fonts/literata-latin-italic.woff2") format("woff2"); 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; }
* { box-sizing: border-box; }
html { font-size: 17px; scroll-padding-top: 5rem; }   
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-2); text-decoration: underline; text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.kicker { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); letter-spacing: .02em; }
.kicker a { color: var(--ink-3); }
.kicker a:hover { color: var(--link); }
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); border-bottom: 1px solid var(--rule); }
.bar .in { max-width: var(--wide); margin: 0 auto; padding: 0 16px; height: 3.6rem; display: flex; align-items: center; gap: 2rem; }
.bar .name { color: var(--ink); font-family: var(--serif); font-size: 1.25rem; letter-spacing: -.01em; margin-right: auto; }
.bar .name::after, .foot .name::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: .45em; border-radius: 50%; background: var(--dot); vertical-align: .05em; }
.bar .name:hover { text-decoration: none; color: var(--link); }
.bar nav { display: flex; gap: .2rem; font-family: var(--mono); font-size: .84rem; }
.bar nav a { color: var(--ink); padding: .3rem .7rem; border-radius: 2px; }
.bar nav a:hover { color: var(--accent); text-decoration: none; }
.bar nav a.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.bar nav a:focus-visible { outline-offset: -2px; }   
.bar .name, .bar nav a { white-space: nowrap; }
@media (max-width: 580px) {
  .bar .in { flex-wrap: wrap; height: auto; column-gap: .5rem; row-gap: 0; padding-top: .5rem; }
  .bar nav { order: 1; flex-basis: 100%; margin-left: -.45rem; font-size: .8rem; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .bar nav a { padding: .25rem .45rem .5rem; }
}
.theme { background: none; border: 0; color: var(--ink-2); font: inherit; font-size: 1rem; cursor: pointer; padding: .45rem; margin: -.45rem -.45rem -.45rem 0; line-height: 1; }
.theme:hover { color: var(--ink); }
main { max-width: var(--wide); margin: 0 auto; padding: 0 16px 3rem; flex: 1 0 auto; width: 100%; }
.foot { max-width: var(--wide); width: 100%; margin: 0 auto; padding: .9rem 16px 1.1rem; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: .74rem; color: var(--ink-3); }
.foot .name::after { margin-right: .45em; }
.foot a { color: var(--ink-2); }
@media (max-width: 580px) { .foot { flex-direction: column; gap: .4rem; } }
h1 { font-weight: 500; font-size: 2.4rem; line-height: 1.1; margin: 0 0 .8rem; letter-spacing: -.01em; }
h2 { font-weight: 500; font-size: 1.45rem; line-height: 1.2; margin: 0 0 .4rem; }
h2 a { color: var(--ink); }
h2 a:hover { color: var(--link); text-decoration: none; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.2rem; }
li { margin: 0 0 .35rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }
code { font-family: var(--mono); font-size: .85em; background: var(--bg-2); padding: .08em .3em; border-radius: 2px; }
pre { background: var(--bg-2); padding: .8rem 1rem; overflow-x: auto; border-radius: 2px; }
pre code { background: none; padding: 0; }
blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 1px solid var(--rule); color: var(--ink-2); }
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.5rem; align-items: center; padding: 4rem 0 2.6rem; border-bottom: 1px solid var(--rule); }
.hero .say { container-type: inline-size; }
.hero h1 { font-weight: 350; font-size: min(3.25rem, 100cqi / 9.3); white-space: nowrap; line-height: 1; letter-spacing: -.025em; margin: 0 0 1.6rem; }
.hero h1 .a { color: var(--accent); display: block; }
.hero .who { font-size: 1.3rem; color: var(--ink-2); margin: 0; }
.hero .points p { font-size: 1.02rem; color: var(--ink-2); margin: 0 0 .9rem; line-height: 1.5; }
.hero .points p b { color: var(--accent); font-weight: 500; }
.home-intro .contact { margin-top: .6rem; }
.home-intro .contact span { margin-right: .9rem; }
.home-intro .contact a { color: var(--accent); margin-right: 1rem; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 2.6rem; } }
.intro { padding: 3rem 0 2rem; max-width: 40rem; }
.intro p:not(.kicker) { font-size: 1.15rem; color: var(--ink-2); margin: 0 0 .5rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; padding: 2.4rem 0; border-top: 1px solid var(--rule); }
.row.flip .pic { order: 2; }
.row .pic img { border: 1px solid var(--rule); background: var(--bg-2); }
.row.portrait .pic { justify-self: center; }
.row.portrait .pic img { --cap: 30rem; }
.row .txt p:not(.kicker):not(.go) { color: var(--ink-2); font-size: 1.05rem; }
.row .txt .kicker { margin-bottom: .6rem; }
.row .go { font-family: var(--mono); font-size: .8rem; }
@media (max-width: 760px) {
  .row { grid-template-columns: 1fr; gap: 1.2rem; }
  .row.flip .pic { order: 0; }
  .row.portrait .pic { justify-self: start; }
  .row.portrait .pic img { --cap: 22rem; }
}
.sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.4rem; padding: 2rem 0 2.4rem; border-top: 1px solid var(--rule); }
.sections .sec { display: flex; flex-direction: column; gap: .3rem; }
.sections .t { font-size: 1.2rem; color: var(--ink); align-self: start; }
.sections .t:hover { color: var(--link); }
.sections .d { color: var(--ink-2); font-size: .95rem; flex: 1; margin: 0; }
.sections .kicker { margin: 0; }
.pieces { border-top: 1px solid var(--rule); }
.item { padding: 1.4rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: 1.6rem; align-items: start; }
.item.has-pic { grid-template-columns: 18rem 1fr; }
.item.has-pic.portrait { grid-template-columns: 9rem 1fr; }
.item .pic img { border: 1px solid var(--rule); background: var(--bg-2); }
.item.portrait .pic img { --cap: 18rem; }
.item .txt p { margin: 0 0 .4rem; }
.item .txt p:not(.kicker) { color: var(--ink-2); }
.item.no-pic { padding: .9rem 0; }
.item.no-pic h2 { font-size: 1.1rem; margin: 0 0 .15rem; }
.item.no-pic .txt p:not(.kicker) { font-size: .97rem; }   
@media (max-width: 640px) {
  .item.has-pic, .item.has-pic.portrait { grid-template-columns: 1fr; gap: .8rem; }
  .item.has-pic.portrait .pic img { --cap: 20rem; }
}
.piece { max-width: var(--wide); margin: 0 auto; padding: 2rem max(2rem, calc((100% - var(--measure)) / 2)) 3rem;
  border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); background: var(--bg); }
main:has(> .piece) { padding: 0; }
body:has(.piece) { background: var(--outside); }
.piece .crumb { margin: 0 0 .3rem; }
@media (max-width: 760px) {
  .piece { padding: 0 0 2rem; border: 0; }
  body:has(.piece) { background: var(--bg); }
  main:has(> .piece) { padding: 0 16px 3rem; }
  .piece .crumb { margin-top: 2rem; }
}
.piece h1 { margin-bottom: .4rem; }
.piece .meta { margin: 0 0 .3rem; }
.piece .meta:not(:has(+ .links)) { margin-bottom: 1.4rem; }   
.piece .meta .sep { color: var(--rule); padding: 0 .1rem; }
.piece .links { margin: 0 0 1.4rem; }
.piece .links a { margin-right: 1rem; color: var(--link); }
.piece figure { margin: 1.2rem 0 1.6rem; }
.piece figure img { border: 1px solid var(--rule); background: var(--bg-2); }
.piece figure.portrait img { --cap: 32rem; }
.piece figure.lead.portrait { float: right; margin: .3rem 0 1rem 1.6rem; }
.piece figure.lead.portrait img { --cap: 26rem; }
@media (max-width: 760px) {
  .piece figure.lead.portrait { float: none; margin: 1.2rem 0 1.6rem; }
  .piece figure.lead.portrait a { width: fit-content; margin: 0 auto; }
  .piece figure.lead.portrait img { --cap: 24rem; }
}
.piece .body { font-size: 1.02rem; }
.piece .body a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.piece .body .jump { font-family: var(--mono); font-size: .88rem; margin: 0 0 1.4rem; }
.piece .body .jump a::after { content: " \2192"; }
.piece .body h2 { font-size: 1.3rem; margin-top: 2rem; color: var(--link); clear: both; }
.piece .body figure.inset { float: right; width: fit-content; max-width: 15rem; margin: .4rem 0 1rem 1.6rem; }
.piece .body figure.inset.left { float: left; margin: .4rem 1.6rem 1rem 0; }
.piece .body figure.inset.full { float: none; width: auto; max-width: none; margin: .6rem 0 1.4rem; }   
.piece .body figure.inset img { --cap: 24rem; }
.compare-wrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; }
.compare { border-collapse: collapse; width: 100%; min-width: 34rem; font-family: var(--mono); font-size: .76rem; }
.compare th, .compare td { padding: .45rem .5rem; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: bottom; }
.compare thead th { color: var(--ink-3); font-weight: normal; line-height: 1.3; }
.compare tbody th { text-align: left; font-weight: normal; color: var(--ink); white-space: nowrap; }
.compare td.y { color: var(--ink); }
.compare td.n { color: var(--ink-3); }
.compare td.p { color: var(--ink-2); font-style: italic; }
.compare td.na { color: var(--ink-3); }
.compare tr.chosen th, .compare tr.chosen td.y { color: var(--link); }
.compare tr.chosen { background: color-mix(in srgb, var(--link) 7%, transparent); }
.compare .mark { font-size: .66rem; color: var(--link); border: 1px solid currentColor; border-radius: 2px; padding: 0 .25rem; margin-left: .3rem; }
.piece .body figure.diagram { overflow-x: auto; }
.piece .body figure.diagram svg { display: block; width: 100%; min-width: 34rem; height: auto; }
.piece .body figcaption { contain: inline-size; font-family: var(--mono); font-size: .72rem; line-height: 1.4; color: var(--ink-3); margin-top: .45rem; }
.piece .body figure.pull { clear: both; width: fit-content; max-width: 100%; margin: 2.2rem auto 2.4rem; padding: 0 0 0 2.6rem; border: 0; color: var(--ink); text-align: left; }
.piece .body figure.pull blockquote { margin: 0; padding: 0; border: 0; color: inherit; }
.piece .body figure.pull p { position: relative; font-size: 1.75rem; line-height: 1.3; letter-spacing: -.01em; margin: 0; }
.piece .body figure.pull p::before,
.piece .body figure.pull p::after { font-size: 3.14em; line-height: 0; vertical-align: -.42em; color: var(--link); font-family: var(--serif); }
.piece .body figure.pull p::before { content: "\201C"; position: absolute; right: 100%; top: .4em; margin-right: .08em; }
.piece .body figure.pull p::after { content: "\201D"; margin-left: .06em; }
.piece .body figure.pull figcaption { font-family: var(--mono); font-size: .72rem; color: var(--ink-3); margin-top: .7rem; }
@media (max-width: 760px) {
  .piece .body figure.pull { padding: 0 0 0 2rem; }
  .piece .body figure.pull p { font-size: 1.35rem; }
  .piece .body figure.inset, .piece .body figure.inset.left { float: none; max-width: 16rem; margin: 1.2rem auto 1.4rem; }
}
.gallery { clear: both; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.gallery figure { margin: 0; }
.gallery figure.portrait { justify-self: center; }
.gallery figure.portrait img { --cap: 28rem; }
:is(.row.portrait .pic, .item.portrait .pic, .piece figure.portrait, .piece .body figure.inset, .gallery figure.portrait) img {
  width: calc(var(--cap) * var(--w) / var(--h)); max-width: 100%; height: auto; max-height: var(--cap); }
.piece .body figure.inset.full img { width: 100%; max-height: none; }
a.zoom { display: block; cursor: zoom-in; }
dialog.zoomed { padding: 0; border: 0; background: none; max-width: 100vw; max-height: 100vh; }
dialog.zoomed::backdrop { background: rgb(0 0 0 / .86); }
dialog.zoomed img { max-width: 96vw; max-height: 94vh; width: auto; cursor: zoom-out; }
dialog.zoomed .count { position: fixed; top: .8rem; left: 50%; transform: translateX(-50%); color: #ddd; font-family: var(--mono); font-size: .8rem; }
.related { margin: 2.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); }
.related ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.back { margin-top: 2.4rem; }
a.to-draft, .piece .body a.to-draft { text-decoration: underline dashed; text-underline-offset: 3px; }
.draft-note { color: var(--ink-3); border-left: 2px dashed var(--rule); padding-left: .6rem; }