/* =====================================================================
   WEBMATRIX SYSTEMS — preprint / arxiv stylesheet
   Aesthetic: a research lab's working paper repository
   White paper · serif body · sidebar TOC · theorem boxes · figures
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@500;600;700&display=swap');

:root{
  --paper      : #fafaf7;
  --paper-2    : #f3f1eb;
  --paper-3    : #e8e4d6;
  --ink        : #111111;
  --ink-2      : #2a2a2a;
  --ink-mute   : #6a6a66;
  --rule       : #d4cfbf;
  --rule-soft  : #ece8db;
  --red        : #7a1b1b;       /* arXiv-ish maroon */
  --red-2      : #5a0e0e;
  --link       : #1d3a72;       /* deep journal blue */
  --link-vis   : #5a2880;       /* visited purple */
  --tint-yellow: #fff8d6;
  --tint-blue  : #eaf0fb;
  --tint-grey  : #f0eee5;

  --serif      : "EB Garamond", "Computer Modern", "Times New Roman", Georgia, serif;
  --sans       : "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono       : "JetBrains Mono", "Fira Mono", Menlo, monospace;

  --gut        : 28px;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern","liga","onum";
}
::selection{ background:var(--red); color:var(--paper) }
a{ color: var(--link); text-decoration:none; border-bottom:1px solid transparent }
a:hover{ border-bottom-color: currentColor }
a:visited{ color: var(--link-vis) }
em{ font-style:italic }
b, strong{ font-weight:700 }
code{ font-family: var(--mono); font-size:.86em; background:var(--paper-2); padding:1px 5px; border:1px solid var(--rule); border-radius:2px }
abbr{ border-bottom:1px dotted var(--ink-mute); cursor:help }
hr.sec-rule{ border:0; border-top:1px solid var(--rule); margin:30px 0 }
hr.thick{ border:0; border-top:3px solid var(--ink); margin:32px 0 }

/* ─── PREPRINT TOP STRIP ───────────────────────────────────────── */
.preprint-strip{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  padding: 8px 0;
  border-bottom: 2px solid var(--red);
}
.preprint-strip .wrap{
  max-width: 1240px; margin:0 auto; padding:0 28px;
  display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap;
}
.preprint-strip a{ color: var(--paper); text-decoration:underline; text-decoration-color: rgba(250,250,247,.4) }
.preprint-strip a:hover{ text-decoration-color: var(--paper) }
.preprint-strip .sep{ color: rgba(250,250,247,.35); margin:0 4px }

/* ─── MASTHEAD ─────────────────────────────────────────────────── */
.preprint-head{
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 24px 0 18px;
}
.preprint-head .wrap{
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.brand-glyph{
  width: 52px; height: 52px;
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  background: var(--paper-2);
  position: relative;
}
.brand-glyph::after{
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ink);
}
.brand-name{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  color: var(--ink);
}
.brand-name em{ color: var(--red); font-style: italic; font-weight: 700 }
.brand-sub{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.preprint-head .meta{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  text-align: right;
  line-height: 1.55;
}
.preprint-head .meta b{ color: var(--ink); display:block; font-size:13px; letter-spacing:.06em }

/* ─── PRIMARY NAV ──────────────────────────────────────────────── */
.preprint-nav{
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.preprint-nav .wrap{
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  display:flex; gap:0; align-items:center; flex-wrap:wrap;
}
.preprint-nav a{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  padding: 12px 18px;
  border-bottom: 2px solid transparent;
  letter-spacing: .01em;
}
.preprint-nav a:hover{ color: var(--red); border-bottom-color: var(--red); background: transparent }
.preprint-nav a.on{ color: var(--ink); border-bottom-color: var(--ink); font-weight:600 }
.preprint-nav a.cta{
  margin-left:auto;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--ink);
  padding:12px 22px;
}
.preprint-nav a.cta:hover{
  background: var(--red);
  border-bottom-color: var(--red);
  color: var(--paper);
}

/* ─── PAGE FRAME ───────────────────────────────────────────────── */
.preprint{
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 28px 60px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 56px;
  align-items: start;
}

/* ─── SIDEBAR (TOC + standing data) ────────────────────────────── */
.toc{
  position: sticky;
  top: 24px;
  font-family: var(--sans);
  font-size: 13px;
}
.toc h6{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin: 0 0 12px;
  font-weight: 500;
}
.toc ol{
  list-style: none;
  padding: 0; margin: 0 0 24px;
  counter-reset: tocnum;
}
.toc ol li{
  counter-increment: tocnum;
  margin-bottom: 6px;
  padding-left: 0;
}
.toc ol li::before{
  content: counter(tocnum) ".";
  display: inline-block;
  width: 22px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.toc ol li a{ color: var(--ink-2); border-bottom: none }
.toc ol li a:hover{ color: var(--red) }
.toc ol li.on a{ color: var(--ink); font-weight: 600 }
.toc .meta-block{
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-mute);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.toc .meta-block dt{
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 6px;
}
.toc .meta-block dt:first-of-type{ margin-top:0 }
.toc .meta-block dd{
  margin: 0;
  color: var(--ink);
  font-size: 11px;
  font-family: var(--mono);
  font-weight: 500;
}
.toc .meta-block dd b{ color: var(--ink); font-weight:700 }
.toc .cite-block{
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.5;
  background: var(--tint-yellow);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  margin-bottom: 16px;
  color: var(--ink-2);
}
.toc .cite-block code{ font-size: 10px; padding: 0 3px }
.toc .cite-block .label{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 6px;
}
.toc .cta-side{
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  padding: 11px 14px;
  border: 0;
  letter-spacing: .02em;
  text-decoration:none;
}
.toc .cta-side:hover{ background: var(--red); color: var(--paper); border-bottom:none }

/* ─── PAPER COLUMN ─────────────────────────────────────────────── */
.paper{
  max-width: 760px;
}
.paper .arxiv-tag{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.paper .arxiv-tag span{ color: var(--red); font-weight: 500 }
.paper-title{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.18;
  letter-spacing: -.005em;
  margin: 8px 0 16px;
  color: var(--ink);
}
.paper-title em{ color: var(--red); font-style: italic }
.authors{
  font-family: var(--serif);
  font-size: 16px;
  margin-bottom: 4px;
  color: var(--ink-2);
}
.authors b{ font-weight: 500 }
.authors sup{ font-size: 11px; color: var(--ink-mute); font-family: var(--sans) }
.affil{
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  margin-bottom: 22px;
}
.affil sup{ font-style: normal; font-family: var(--sans); font-size:10px }

/* abstract box */
.abstract{
  background: var(--paper-2);
  border-left: 4px solid var(--red);
  padding: 20px 24px;
  margin-bottom: 28px;
}
.abstract h2{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
  font-weight: 600;
}
.abstract p{
  margin: 0 0 .8em;
  font-size: 16px;
  line-height: 1.55;
  font-family: var(--serif);
}
.abstract p:last-child{ margin-bottom: 0 }

/* keywords line */
.keywords{
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 32px;
}
.keywords b{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  margin-right: 8px;
}
.keywords code{
  font-size: .85em;
  background: var(--tint-grey);
  border: none;
  padding: 1px 6px;
  margin-right: 2px;
  color: var(--ink-2);
}

/* section headings */
.paper h2.sec{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  margin: 36px 0 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  counter-reset: subsec;
}
.paper h2.sec::before{
  content: counter(sec) ". ";
  color: var(--red);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  vertical-align: 2px;
}
.paper{ counter-reset: sec }
.paper h2.sec{ counter-increment: sec }
.paper h3.subsec{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  margin: 26px 0 8px;
  color: var(--ink);
  counter-increment: subsec;
}
.paper h3.subsec::before{
  content: counter(sec) "." counter(subsec) " ";
  color: var(--red);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
}
.paper h4.para{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  font-style: italic;
  margin: 18px 0 4px;
  color: var(--ink);
}
.paper p{ margin: 0 0 .9em; font-size: 17px; line-height: 1.6 }
.paper p.first-para{ text-indent: 0 }
.paper p + p{ text-indent: 1.5em }
.paper p.lead{
  font-size: 17px;
  text-indent: 0;
  color: var(--ink-2);
}

/* theorem / definition / proposition boxes */
.thm, .def, .prop, .lem{
  border-left: 3px solid var(--ink);
  background: var(--paper-2);
  padding: 14px 18px;
  margin: 16px 0;
  font-family: var(--serif);
  font-size: 16px;
}
.thm .label, .def .label, .prop .label, .lem .label{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-right: 10px;
}
.thm .num, .def .num, .prop .num, .lem .num{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-right: 10px;
}
.thm em.body, .def em.body, .prop em.body{ font-style: italic; color: var(--ink) }

/* figures */
.figure{
  margin: 28px 0;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.figure-caption{
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 12px;
}
.figure-caption b{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-right: 8px;
}
.figure-caption em{ color: var(--ink-mute); font-style: italic }
.figure-body{
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  padding: 18px 20px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-x: auto;
}
.figure-body .h1{ font-weight: 700; color: var(--ink); display: block; margin-bottom: 4px }
.figure-body .ok{ color: #1a6638 }
.figure-body .warn{ color: var(--red) }
.figure-body .mute{ color: var(--ink-mute) }

/* table — like LaTeX booktabs */
table.tabular{
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 15px;
  margin: 20px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
table.tabular thead th{
  border-bottom: 1px solid var(--ink);
  text-align: left;
  padding: 8px 12px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
}
table.tabular tbody td{
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
table.tabular tbody tr:last-child td{ border-bottom: none }
table.tabular td b{ font-weight: 700 }
table.tabular td code{ font-size: .9em }
table.tabular tbody tr:hover td{ background: var(--paper-2) }
.tabular-caption{
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 8px;
  margin-bottom: 24px;
}
.tabular-caption b{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 600;
  margin-right: 8px;
}

/* equation-like callout */
.eq{
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  text-align: center;
  padding: 14px 0;
  margin: 16px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  position: relative;
}
.eq .num{
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-mute);
}

/* bullet list */
.paper ul, .paper ol{ margin: 8px 0 14px; padding-left: 24px }
.paper ul li, .paper ol li{ margin-bottom: 4px; font-size: 16px; line-height: 1.55 }
.paper ul.dash{ list-style: none; padding-left: 0 }
.paper ul.dash li{ padding-left: 20px; position: relative }
.paper ul.dash li::before{ content: "—"; position:absolute; left: 0; color: var(--red) }

/* "no-list" box */
.no-list{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--red);
  padding: 16px 20px;
  margin: 18px 0;
  font-family: var(--serif);
  font-size: 15px;
}
.no-list h4{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin: 0 0 8px;
}
.no-list ul{ margin: 0; padding-left: 22px; font-size: 15px }
.no-list ul li{ margin-bottom: 4px }

/* citation block */
.citation{
  font-family: var(--mono);
  font-size: 11px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 10px 14px;
  margin: 14px 0;
  color: var(--ink-2);
  line-height: 1.6;
}
.citation b{ color: var(--ink) }

/* listing of articles (changelog/feature index) */
.article-index{
  list-style: none;
  padding: 0; margin: 0;
}
.article-index > li{
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.article-index .id{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  font-weight: 500;
  padding-top: 4px;
}
.article-index .id b{
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  color: var(--ink);
  line-height: 1;
  margin-top: 4px;
}
.article-index .entry h3{
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 6px;
}
.article-index .entry h3 a{ color: var(--ink); border-bottom: none }
.article-index .entry h3 a:hover{ color: var(--red) }
.article-index .entry p{ margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55 }
.article-index .entry .stamp{
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.article-index .entry .stamp b{ color: var(--red); font-weight: 500 }

/* buttons */
.btn-row{ display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 }
.preprint-btn{
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 18px;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  border-bottom: 1.5px solid var(--ink);
}
.preprint-btn:hover{ background: var(--ink); color: var(--paper) }
.preprint-btn.primary{
  background: var(--ink);
  color: var(--paper);
}
.preprint-btn.primary:hover{ background: var(--red); border-color: var(--red) }

/* form */
.compose-form{
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 28px 32px;
  max-width: 640px;
}
.compose-form label{
  display: block;
  margin-bottom: 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.compose-form label em{ color: var(--red); font-style: normal }
.compose-form input,
.compose-form textarea,
.compose-form select{
  display: block;
  width: 100%;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 16px;
  background: var(--paper);
  border: 1px solid var(--ink-mute);
  border-radius: 0;
  padding: 9px 12px;
  color: var(--ink);
}
.compose-form input:focus,
.compose-form textarea:focus{
  outline: none;
  border-color: var(--red);
  box-shadow: inset 0 -2px 0 var(--red);
}

/* footer (colophon) */
.preprint-foot{
  margin-top: 60px;
  border-top: 3px solid var(--ink);
  background: var(--paper-2);
  padding: 36px 0 20px;
}
.preprint-foot .wrap{
  max-width: 1240px; margin: 0 auto; padding: 0 28px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.preprint-foot h6{
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--ink);
}
.preprint-foot ul{ list-style: none; padding: 0; margin: 0 }
.preprint-foot ul li{ margin-bottom: 5px; font-size: 14px }
.preprint-foot ul li a{ color: var(--ink-2); border-bottom: none }
.preprint-foot ul li a:hover{ color: var(--red); border-bottom: 1px solid var(--red) }
.preprint-foot .registry{
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.preprint-foot .registry b{ color: var(--ink); font-weight: 700 }
.preprint-foot-rule{
  max-width: 1240px;
  margin: 26px auto 0;
  padding: 0 28px;
}
.preprint-foot-rule .line{
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.preprint-foot-rule .line a{ color: var(--ink-mute); border-bottom: none }
.preprint-foot-rule .line a:hover{ color: var(--red) }

/* "submit" / "version" status pill */
.version-pill{
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  background: var(--tint-yellow);
  border: 1px solid var(--rule);
  padding: 2px 7px;
  color: var(--ink-2);
  margin-left: 6px;
  text-transform: uppercase;
  font-weight: 500;
  vertical-align: 3px;
}

/* responsive */
@media (max-width: 980px){
  .preprint{ grid-template-columns: 1fr; gap: 32px; padding-top: 24px }
  .toc{ position: static; order: 2; max-width: 100% }
  .paper{ order: 1; max-width: 100% }
  .paper-title{ font-size: 28px }
  .preprint-foot .wrap{ grid-template-columns: 1fr; gap: 24px }
  .preprint-head .wrap{ grid-template-columns: auto 1fr; gap:16px }
  .preprint-head .meta{ display: none }
  .preprint-nav .wrap{ overflow-x: auto; flex-wrap: nowrap }
  .preprint-nav a{ padding: 11px 14px; font-size: 12px; white-space: nowrap }
  .preprint-strip .wrap{ font-size: 10px }
}