:root{
  --canvas:#efece4; --tile:#ffffff; --kraft:#e4dfd2;
  --ink:#221f1a; --meta:#6a6255; --accent:#8a3a1f; --rule:#cfc7b6;
  --sans:"Futura","Century Gothic","Avenir Next",'Trebuchet MS',sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);font-family:var(--serif);
  font-size:16px;line-height:1.65;
  display:grid;grid-template-columns:246px minmax(0,1fr);
  column-gap:38px;align-items:start;
  max-width:1400px;margin-left:auto;margin-right:auto;padding:0 26px;
}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:block;padding:8px;background:var(--tile)}

/* 1 identity rail */
.rail{grid-column:1;grid-row:1 / span 4;position:sticky;top:0;
  padding:34px 18px 34px 0;border-right:1px solid var(--rule);min-height:100vh}
.mark{font-family:var(--sans);font-size:31px;line-height:1.12;letter-spacing:.1em;
  margin:0 0 12px;font-weight:400;text-transform:uppercase;overflow-wrap:break-word}
.mark .b{display:block}
.rail .tagline{font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--meta);margin:0 0 26px}
.rail h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta);margin:22px 0 7px;font-weight:400}
.rail ul{list-style:none;margin:0;padding:0}
.rail li{margin:0 0 5px}
.rail li a{font-family:var(--sans);font-size:15px;text-decoration:none;border-bottom:1px solid var(--rule)}
.rail li a:hover{border-bottom-color:var(--accent)}
.rail .years{font-family:var(--mono);font-size:11px;color:var(--meta);margin-top:30px;
  padding-top:12px;border-top:1px solid var(--rule);letter-spacing:.1em}

/* 2 post field */
.field{grid-column:2;grid-row:1;padding:34px 0 8px;
  column-count:3;column-gap:20px}
.tile{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 20px;border:1px solid var(--rule);display:block;text-decoration:none;color:inherit}
.tile:hover{border-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.tile{transition:border-color .15s ease}}
.t-image{border:0;background:none;padding:0}
.t-image img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.t-image figcaption{font-family:var(--mono);font-size:11px;color:var(--meta);
  text-transform:uppercase;letter-spacing:.07em;padding:7px 2px 0}
.t-quote{background:var(--kraft);padding:26px 22px}
.t-quote p{font-family:var(--serif);font-size:19px;line-height:1.5;margin:0;font-style:italic}
.t-quote .src{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--meta);font-style:normal;display:block;margin-top:14px}
.t-spec{background:var(--kraft);padding:20px 20px 18px}
.t-spec h3{font-family:var(--sans);font-size:21px;font-weight:400;margin:0 0 10px;line-height:1.2}
.t-spec dl{margin:0 0 10px;font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--meta);line-height:1.7}
.t-spec dl div{display:block}
.t-spec dt{display:none}
.t-spec dd{margin:0}
.t-spec p{margin:10px 0 0;font-size:15px;line-height:1.6}
.t-spec .grp{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);
  text-transform:uppercase;display:block;margin-bottom:8px}
.t-link{background:var(--tile);padding:14px 18px}
.t-link .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--meta);display:block;margin-bottom:4px}
.t-link strong{font-family:var(--sans);font-size:19px;font-weight:400;color:var(--accent)}

/* 3 tag / archive drawer */
.drawer{grid-column:2;grid-row:2;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:18px 0;margin-top:10px}
.drawer h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--meta);margin:0 0 12px;font-weight:400}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips a{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  border:1px solid var(--rule);padding:5px 10px;text-decoration:none;background:var(--tile);
  display:inline-block}
.chips a:hover{border-color:var(--accent)}
.chips .n{color:var(--meta)}

/* 4 continuation */
.more{grid-column:2;grid-row:3;padding:22px 0 6px}
.more a{font-family:var(--sans);font-size:24px;text-decoration:none;border-bottom:2px solid var(--accent)}
.more p{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--meta);margin:9px 0 0}

/* 5 site note */
.note{grid-column:2;grid-row:4;border-top:1px solid var(--rule);margin-top:16px;
  padding:16px 0 40px;font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--meta)}
.note p{margin:0 0 6px}
.note a{color:var(--meta)}

/* detail routes */
body.detail{grid-template-columns:246px minmax(0,1fr)}
.sheet{grid-column:2;grid-row:1;max-width:760px;padding:40px 0 24px}
.sheet .grp{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);
  text-transform:uppercase;display:block;margin-bottom:10px}
.sheet h1{font-family:var(--sans);font-size:34px;font-weight:400;margin:0 0 18px;line-height:1.15}
.sheet .specblock{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--meta);background:var(--kraft);border:1px solid var(--rule);padding:14px 16px;
  margin:0 0 22px;line-height:1.8}
.sheet .specblock span{display:block}
.sheet p{max-width:62ch}
.sheet figure{margin:0 0 24px}
.sheet figure img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.sheet figcaption{font-family:var(--mono);font-size:11px;color:var(--meta);
  text-transform:uppercase;letter-spacing:.07em;padding-top:7px}
.sheet ul.plain{list-style:none;margin:0;padding:0}
.sheet ul.plain li{border-bottom:1px solid var(--rule);padding:12px 0}
.sheet ul.plain .m{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--meta);display:block}
.sheet ul.plain .t{font-family:var(--sans);font-size:19px}
.idxgroup{margin:0 0 30px}
.idxgroup h2{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--meta);margin:0 0 10px;font-weight:400;border-bottom:1px solid var(--rule);padding-bottom:6px}
.walk{grid-column:2;grid-row:2;max-width:760px;border-top:1px solid var(--rule);
  padding:16px 0;display:flex;flex-wrap:wrap;gap:18px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.walk a{text-decoration:none;border-bottom:1px solid var(--rule)}
.notefill{grid-column:2;grid-row:3}

@media (max-width:900px){
  body{display:block;padding:0 18px;max-width:760px}
  .rail{position:static;border-right:0;border-bottom:1px solid var(--rule);min-height:0;
    padding:24px 0 18px;display:flex;flex-wrap:wrap;gap:0 34px;align-items:baseline}
  .mark{font-size:30px;flex-basis:100%;letter-spacing:.1em}
  .rail .tagline{flex-basis:100%;margin-bottom:16px}
  .rail h2{margin:8px 0 5px}
  .rail .years{flex-basis:100%;margin-top:16px}
  .field{column-count:2;padding-top:22px}
  .sheet,.walk{max-width:none;padding-top:26px}
  .sheet h1{font-size:24px}
  .more a{font-size:20px}
}
@media (max-width:620px){
  .field{column-count:1}
  .rail{display:block}
}