/* The Sanson Register — unique srx-* classes. Cool paper, ink, oxide rule. Not a cream journal. */
:root{
  --srx-ink:#121212;
  --srx-mute:#5a5854;
  --srx-paper:#f4f1ea;
  --srx-rule:#121212;
  --srx-oxide:#c41e3a;
  --srx-max:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
.srx-body{
  margin:0;
  background:var(--srx-paper);
  color:var(--srx-ink);
  font:16.5px/1.55 "Avenir Next","Segoe UI",ui-sans-serif,system-ui,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:#6b121f}
.srx-skip{position:absolute;left:-999px}
.srx-skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:40}
.srx-tape{
  margin:0;
  padding:9px 18px;
  background:#121212;
  color:#ece7dc;
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.02em;
  text-align:center;
}
.srx-tape-foot{background:#1c1c1c}
.srx-head{
  width:min(var(--srx-max), calc(100% - 32px));
  margin:0 auto;
  padding:18px 0 0;
  border-bottom:4px solid var(--srx-rule);
}
.srx-head-meta{
  display:flex;flex-wrap:wrap;gap:6px 8px;
  font:11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--srx-mute);
  margin-bottom:10px;
}
.srx-name{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;margin:0 0 14px;
}
.srx-name img{width:36px;height:36px}
.srx-name strong{
  display:block;font:800 28px/1 "Avenir Next Condensed","Segoe UI",sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
}
.srx-name em{display:block;font-style:normal;font-size:12px;color:var(--srx-mute);letter-spacing:.04em}
.srx-tabs{display:flex;flex-wrap:wrap;gap:0}
.srx-tabs a{
  text-decoration:none;color:var(--srx-ink);
  font:12px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.12em;text-transform:uppercase;
  padding:10px 14px 12px 0;margin-right:12px;
  border-bottom:3px solid transparent;
}
.srx-tabs a[aria-current="page"],.srx-tabs a:hover{border-bottom-color:var(--srx-oxide);color:var(--srx-oxide)}
.srx-main{width:min(var(--srx-max), calc(100% - 32px));margin:0 auto;padding:28px 0 40px}
.srx-kicker{
  margin:0 0 6px;color:var(--srx-oxide);
  font:11px/1 ui-monospace,Menlo,Consolas,monospace;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.srx-h1{
  margin:0 0 12px;
  font:800 clamp(32px,5vw,52px)/.95 "Avenir Next Condensed","Segoe UI",sans-serif;
  letter-spacing:-.02em;text-transform:uppercase;
}
.srx-dek{margin:0 0 22px;font-size:18px;color:var(--srx-mute);max-width:38rem}
.srx-lead{
  font-size:19px;line-height:1.5;margin:0 0 1em;
  border-left:4px solid var(--srx-oxide);padding-left:16px;
}
.srx-copy p{margin:0 0 1em}
.srx-copy h2{
  font:800 15px/1.2 "Avenir Next Condensed","Segoe UI",sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  border-top:2px solid var(--srx-rule);padding-top:14px;margin:28px 0 10px;
}
.srx-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 22px}
.srx-fig{margin:0 0 22px}
.srx-fig img{border:1px solid #cfc8b8;background:#ddd}
.srx-fig figcaption{font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;color:var(--srx-mute);margin-top:7px}
.srx-index{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:2px solid var(--srx-rule);border-bottom:2px solid var(--srx-rule);
  margin:28px 0;
}
.srx-index a{
  display:grid;grid-template-columns:88px 1fr;gap:12px;
  text-decoration:none;color:inherit;padding:14px 12px 14px 0;
  border-bottom:1px solid #cfc8b8;
}
.srx-index a:nth-child(odd){border-right:1px solid #cfc8b8;padding-right:16px}
.srx-index time{font:11px/1.3 ui-monospace,Menlo,Consolas,monospace;color:var(--srx-oxide);letter-spacing:.08em;text-transform:uppercase}
.srx-index h3{margin:0 0 4px;font-size:16px}
.srx-index p{margin:0;font-size:13px;color:var(--srx-mute)}
.srx-log{list-style:none;margin:0 0 22px;padding:0}
.srx-log li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #cfc8b8}
.srx-log b{font:11px/1.3 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--srx-oxide)}
.srx-q{border-top:1px solid var(--srx-rule);padding:4px 0}
.srx-q summary{
  cursor:pointer;font-weight:700;padding:12px 0;list-style:none;
  font-size:17px;
}
.srx-q summary::-webkit-details-marker{display:none}
.srx-q p{margin:0 0 12px}
.srx-form{display:grid;gap:12px;max-width:32rem;margin:18px 0}
.srx-form label{display:flex;flex-direction:column;gap:6px;font:11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.srx-form input,.srx-form textarea{
  border:1px solid var(--srx-rule);background:#fff;padding:10px 12px;
  font:16px/1.4 "Avenir Next","Segoe UI",sans-serif;text-transform:none;letter-spacing:0;
}
.srx-form button{
  justify-self:start;background:var(--srx-ink);color:#f4f1ea;border:0;
  padding:12px 16px;letter-spacing:.12em;text-transform:uppercase;
  font:12px/1 ui-monospace,Menlo,Consolas,monospace;cursor:pointer;
}
.srx-ok,.srx-err{padding:12px;border:1px solid var(--srx-rule);margin:0 0 14px}
.srx-ok{background:#eef3ea}
.srx-err{background:#f6e8e6}
.srx-addr{border:1px solid var(--srx-rule);padding:14px;margin:18px 0;font-size:15px}
.srx-addr p{margin:0 0 4px}
.srx-sig{border-top:2px solid var(--srx-rule);margin:32px 0 0;padding-top:14px;font-size:14px;color:var(--srx-mute)}
.srx-table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 1.2em}
.srx-table th,.srx-table td{border:1px solid #cfc8b8;padding:8px 10px;text-align:left;vertical-align:top}
.srx-table th{font:11px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;background:#ece7dc}
.srx-legal h2{font:800 14px/1.2 "Avenir Next Condensed","Segoe UI",sans-serif;letter-spacing:.1em;text-transform:uppercase;margin:1.6em 0 .5em}
.srx-foot{margin-top:10px;padding-bottom:36px}
.srx-foot-nav{
  width:min(var(--srx-max), calc(100% - 32px));
  margin:14px auto 8px;display:flex;flex-wrap:wrap;gap:8px 16px;
  font:11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;
}
.srx-foot-nav a{color:var(--srx-ink);text-decoration:none}
.srx-foot-nav a:hover{color:var(--srx-oxide)}
.srx-colophon{
  width:min(var(--srx-max), calc(100% - 32px));
  margin:0 auto;color:var(--srx-mute);font-size:13px;
}
@media (max-width:720px){
  .srx-pair,.srx-index{grid-template-columns:1fr}
  .srx-index a:nth-child(odd){border-right:0}
  .srx-log li{grid-template-columns:1fr}
}
