*{box-sizing:border-box}html{background:#fff;color:#666;font:13px Arial,Helvetica,sans-serif}body{margin:0}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #c00;outline-offset:3px}.breadcrumb{position:absolute;top:8px;left:7px;display:flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.2px}.breadcrumb button{padding:0;border:0;background:none;color:#999;text-decoration:underline;font-size:11px}.breadcrumb strong{color:#ce1007;font-weight:700}main{padding:29px 1.05% 0}.emblem{display:block;width:40px;height:40px;margin:0 auto 12px}#years{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}#years button{background:white;border:1px solid #888;border-radius:0;min-width:100px;height:23px;padding:1px 15px;color:#666;font-size:14px}#years button.selected{background:#000;color:#fff;font-weight:bold;border-color:#000}h1{text-align:center;color:#111;font-size:22px;font-weight:400;margin:24px 0 17px}.archive{border:1px dashed #d9d9d9;min-height:575px;padding:3px}#titles{display:flex;gap:3px}#titles a{border:1px solid #d9d9d9;flex:1;min-height:53px;text-align:center;text-decoration:none;font-size:11px;line-height:1.25;padding:4px 9px}#titles a span{display:block}#titles a.selected{background:#000;color:#fff;border-color:#000}#titles a:hover:not(.selected){background:#f2f2f2}.reading-grid{display:grid;grid-template-columns: minmax(0,1fr) minmax(0,1fr);gap:10%;padding:30px 8.5% 38px}#essay{line-height:1.55;text-align:justify;max-width:635px;padding-top:0}#essay h2{display:inline;font-size:13px;line-height:1.55;font-weight:700;margin:0}#essay p{margin:0 0 14px}#essay p.opening{display:inline}#essay p.opening:after{content:'';display:block;margin-bottom:14px}#essay .sample-note{margin-top:28px;font-size:10px;color:#999;text-align:left}.document-figure{margin:10px auto 0;width:280px;max-width:100%}.document-wrap{position:relative;width:256px;max-width:calc(100% - 22px)}.document{width:256px;max-width:100%;height:360px;position:relative;border:1px solid #aaa;background:linear-gradient(110deg,#e2e2df,#f1f1ef 20%,#dfdfdc 80%,#ccc);box-shadow:inset 0 0 24px #00000015;color:#555;font-family:'Courier New',monospace;padding:19px 20px;transform:rotate(-.2deg)}.document-label{font-size:6px;letter-spacing:1px}.document-copy{margin:75px 8px 0 34px;font-size:8px;line-height:1.2}.document-copy>span:first-child{font-size:7px}.document-copy h2{font-size:10px;font-weight:400;line-height:1.2;margin:7px 0}.document-copy p{font-size:8px;margin:9px 0}.type-lines{height:32px;background:repeating-linear-gradient(to bottom,#5559 0,#5559 1px,transparent 1px,transparent 4px);opacity:.45;margin:12px 0}.type-lines.short{width:70%;height:20px}.document-signature{display:block;font-size:6px;font-style:italic;margin:25px 0 0 20px}.document-foot{position:absolute;bottom:22px;left:30px;font-size:5px;letter-spacing:.3px}#enlarge{position:absolute;left:calc(100% + 4px);top:0;white-space:nowrap;border:0;background:none;color:#777;font-size:10px;padding:0}figcaption{font-size:10px;line-height:1.4;margin:14px 0 9px}.figure-note{font-size:9px;color:#aaa}#menu{position:absolute;top:29px;left:7px;width:310px;max-width:calc(100vw - 14px);z-index:5;background:#fff;border:1px solid #aaa;box-shadow:0 5px 15px #0001;padding:20px}.menu-heading{display:flex;justify-content:space-between;color:#111}.menu-heading button{background:none;border:0;font-size:20px;line-height:1}#menu p{font-size:11px}#menu nav{display:grid;gap:15px;margin:25px 0}#menu nav a{font-size:12px;text-decoration:none}#menu nav a:hover{color:#c00}#menu .menu-note{font-size:10px;color:#999}dialog{border:1px solid #aaa;padding:30px;background:#fff;max-width:95vw;max-height:95vh}dialog::backdrop{background:#fffD}#close-zoom{display:block;margin:0 0 20px auto;background:none;border:0;color:#666}#zoom .document{width:512px;height:720px;max-width:75vw;padding:38px 40px}#zoom .document-label{font-size:12px}#zoom .document-copy{margin:150px 16px 0 68px;font-size:16px}#zoom .document-copy>span:first-child{font-size:14px}#zoom .document-copy h2{font-size:20px}#zoom .document-copy p{font-size:16px}#zoom .document-signature{font-size:12px}#zoom .document-foot{font-size:10px;bottom:44px;left:60px}.skip{position:absolute;top:-60px;left:10px;background:#fff;padding:10px;z-index:10}.skip:focus{top:5px}@media(min-width:1800px){.reading-grid{grid-template-columns:635px 1fr;gap:14%;padding-left:8.5%}}@media(max-width:700px){main{padding-top:43px;padding-left:12px;padding-right:12px}.emblem{margin-bottom:17px}#years{gap:5px}#years button{font-size:12px;min-width:65px;padding:2px 8px}h1{margin-top:21px;font-size:20px}#titles{overflow-x:auto;padding-bottom:4px}#titles a{flex:0 0 135px;font-size:11px;min-height:58px}.reading-grid{grid-template-columns:1fr;gap:27px;padding:25px 17px 35px}#essay{font-size:13px;text-align:left}#essay h2{font-size:13px}.document-figure{margin:0 auto}.archive{min-height:575px}#zoom .document{height:520px;padding:20px}#zoom .document-copy{margin:80px 5px 0 10px}#zoom .document-copy h2{font-size:16px}#zoom .document-copy p{font-size:12px}#zoom .document-label{font-size:8px}#zoom .document-foot{font-size:7px;left:20px}}
/* Desktop geometry follows the supplied 2048 × 1133 reference. */
@media(min-width:701px){
 main{padding:29px 1.05% 0}
 #years{gap:9px}#years button{width:100px;min-width:100px;padding:1px 3px}
 .archive{height:575px;min-height:575px}
 #titles a{flex:1;min-width:0;padding:3px 5px;min-height:52px}
 #titles a:nth-child(1){flex:1.1}#titles a:nth-child(2){flex:1.4}#titles a:nth-child(3){flex:.8}#titles a:nth-child(4){flex:.85}#titles a:nth-child(5){flex:.7}#titles a:nth-child(6){flex:1}#titles a:nth-child(7){flex:1.6}#titles a:nth-child(8){flex:1.05}#titles a:nth-child(9){flex:1.85}
 .reading-grid{position:relative;display:block;height:515px;padding:30px 0 38px}
 #essay{width:32%;max-width:none;margin-left:8.65%;font-size:13px;line-height:1.52}
 #essay h2{font-size:13px;line-height:1.52}
 #essay p.opening:after{display:none}
 .document-figure{position:absolute;left:60%;top:42px;margin:0;width:300px}
 .document-wrap{width:256px;max-width:100%}
}
.document{display:block;width:256px;height:360px;max-width:100%;padding:0;transform:none;border:1px solid #aaa;box-shadow:none;object-fit:cover;background:#e7e7e4}
figcaption{margin:13px 0 8px;font-size:10px;white-space:nowrap}
#thumbnails{display:flex;justify-content:center;gap:3px;width:280px;max-width:100%}
#thumbnails button{border:1px solid #ddd;background:white;padding:1px;height:38px;width:53px}
#thumbnails button:first-child{width:29px}
#thumbnails button[aria-pressed=true]{border-color:#aaa}
#thumbnails img{display:block;width:100%;height:100%;object-fit:cover}
#archive-reset{position:absolute;right:17px;top:7px;border:0;background:none;color:#999;font:12px Arial;padding:0}
#zoom img.document{width:510px;height:auto;max-width:75vw;padding:0}
.empty-year{padding:8px;color:#888;font-size:11px}
@media(max-width:700px){figcaption{white-space:normal}.document-figure{width:280px}.reading-grid{min-height:520px}#titles a{flex:0 0 135px}}

/* Typewriter typography throughout the interface and reading area. */
html,body,button,input,select,textarea,h1,h2,a,p,span,strong,figcaption{font-family:'Courier New',Courier,monospace}
#archive-reset{font-family:'Courier New',Courier,monospace}
#titles a{flex:0 1 420px!important}
@media(min-width:701px){main{padding-top:81px}}

#years{margin-bottom:30px}
#essay h1{display:block;font:700 13px/1.52 'Courier New',Courier,monospace;text-align:left;color:inherit;margin:0 0 14px}
#menu{width:410px;max-height:calc(100dvh - 45px);overflow-y:auto;padding:20px}
#menu .menu-heading{padding-bottom:18px;border-bottom:1px solid #ddd}
.index-search-label{display:block;font-size:11px;margin:19px 0 7px}
#index-search{width:100%;padding:10px 8px;border:1px solid #aaa;border-radius:0;font-size:12px;background:#fff;color:#444}
#index-count{color:#888;font-size:10px;margin:12px 0 20px}
#menu nav{display:block;margin:0}
#menu details{border-top:1px solid #ddd}
#menu summary{cursor:pointer;padding:13px 0;font-size:12px;color:#333}
#menu summary span{float:right;font-size:10px;color:#888}
#menu .index-entries{display:grid;gap:0;padding-bottom:10px}
#menu .index-entries a{padding:10px 12px;font-size:12px;line-height:1.6;border-left:2px solid transparent}
#menu .index-entries a[aria-current=page]{background:#f2f2f2;border-left-color:#000;color:#111}
#menu .index-empty{line-height:1.6;padding:10px 0}
@media(min-width:701px){#titles{overflow-x:auto}#titles a{flex:0 0 420px!important}}

/* Let complete essays determine the page height. */
.archive{height:auto;min-height:575px}
.reading-grid{height:auto;min-height:515px}
#essay{text-align:left}
#essay .byline{color:#777;font-size:11px;margin:0 0 26px}
#essay>p{margin-bottom:22px}
.essay-points{padding-left:25px;margin:28px 0 0}
.essay-points>li{padding-left:6px;margin-bottom:28px}
#essay .essay-points h2{display:block;font-size:13px;font-weight:700;margin:0 0 12px;line-height:1.6}
#essay .essay-points p{line-height:1.7;margin-bottom:16px}
@media(max-width:700px){.reading-grid{display:grid}.essay-points{padding-left:22px}}

/* Preserve the full proportions of the supplied gallery images. */
.document-figure{width:300px;max-width:100%}
.document-wrap{width:280px;max-width:calc(100% - 22px)}
img.document{width:100%;height:auto;max-height:360px;object-fit:contain;border:0;background:transparent}
figcaption{white-space:normal;line-height:1.5}
#thumbnails{width:280px}
#thumbnails button,#thumbnails button:first-child{width:48px;height:38px;border:1px solid #ddd}
#thumbnails button[aria-pressed=true]{border:1px solid #222}
#thumbnails img{object-fit:contain}
#zoom{padding:18px;max-width:95vw}
#zoom-content figure{margin:0}
#zoom img.document{width:auto;height:auto;max-width:85vw;max-height:75vh;object-fit:contain;padding:0}
#zoom figcaption{max-width:600px}

@media(max-width:700px){
  #essay>.document-figure{position:static;margin:0 auto 28px}
}

/* The index and reading view share the same title tabs. */
[hidden]{display:none!important}
#home-link{color:#777;font-size:11px;text-decoration:underline;margin-left:12px}
#menu .menu-home{display:block;font-size:11px;padding:16px 0 0}
.is-home .archive{min-height:0;height:auto}
.is-home #titles{display:flex;flex-wrap:wrap;overflow:visible;gap:6px}
.is-home #titles a{display:flex;align-items:center;justify-content:center;background:#000;color:#fff;border-color:#000;min-height:52px;flex:0 1 420px!important;padding:8px 15px;transition:background .2s}
.is-home #titles a:hover{background:#292929}
.is-home #titles a:focus-visible{outline:2px solid #c00}
body:not(.is-home) .reading-grid{animation:open-essay 350ms ease-out both}
@keyframes open-essay{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
::view-transition-group(*){animation-duration:320ms;animation-timing-function:ease-in-out}
@media(prefers-reduced-motion:reduce){body:not(.is-home) .reading-grid{animation:none}::view-transition-group(*){animation-duration:0s}}
@media(max-width:700px){.is-home #titles a{flex:1 1 100%!important}#home-link{margin-left:3px}}

/* Article focus supports navigation without drawing a frame around the content. */
#essay:focus{outline:none}