/* ============================================================
   abramov.im — “Engraved Correspondence”
   Cream laid paper, engraved letterhead rules, Georgia oldstyle.
   1980s private-bank stationery. No dark mode. Paper is paper.
   ============================================================ */

:root {
  color-scheme: light;             /* never let the UA darken us */
  --paper:   #F6F1E3;              /* warm cream laid paper       */
  --ink:     #26211A;              /* warm near-black ink         */
  --muted:   #6A604E;              /* umber secondary (5.4:1 AA)  */
  --navy:    #1C3D5A;              /* deep navy text links        */
  --plum:    #5A3A62;              /* visited ink (old-web soul)  */
  --maroon:  #7A2E2E;              /* active flash                */
  --oxblood: #7A1F2B;              /* rules & hover ONLY          */
  --line:    #D9CFB6;              /* quiet tan hairline          */
  --leader:  #A2937A;              /* dotted TOC leaders          */
  --soft:    #F0E9D6;              /* parchment panel (pre)       */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* faint laid-paper grain — wide period, low alpha: no moire */
  background-image: repeating-linear-gradient(
    180deg,
    rgba(88, 68, 32, 0.02) 0px,
    rgba(88, 68, 32, 0.02) 1px,
    transparent 1px,
    transparent 8px
  );
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.7;
}

::selection { background: #E7DCBE; color: var(--ink); }

/* ————— frame ————— */

.wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.35rem; }
main.wrap { padding-top: 3.2rem; padding-bottom: 3rem; }
main > section { margin: 0 0 2.8rem; }

/* ————— links: navy ink, plum when read, oxblood on hover ————— */

a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(28, 61, 90, 0.45);
}
a:visited { color: var(--plum); }
a:hover {
  color: var(--oxblood);
  text-decoration-color: var(--oxblood);
}
a:active { color: var(--maroon); }
a:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* ————— headings (defaults; refined per context below) ————— */

h1, h2, h3 {
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

/* ============================================================
   MASTHEAD — the letterhead. Name in letterspaced caps between
   mirrored thick-thin double rule pairs, oxblood.
   ============================================================ */

.hub-head {
  text-align: center;
  margin-bottom: 2.4rem;
}
.hub-head::before {           /* upper pair: thin over thick */
  content: "";
  display: block;
  height: 3px;                /* paper gap between the rules */
  border-top: 1px solid var(--oxblood);
  border-bottom: 3px solid var(--oxblood);
  margin-bottom: 2rem;
}
.hub-head::after {            /* lower pair: thick over thin */
  content: "";
  display: block;
  height: 3px;
  border-top: 3px solid var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
  margin-top: 2rem;
}
.hub-head h1 {
  margin: 0;
  font-size: clamp(1rem, 4.5vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding-left: 0.22em;       /* optically re-center tracked caps */
}
.position {
  margin: 0.5rem 0 0;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--muted);
}

/* ————— crumb: the reduced letterhead on interior pages ————— */

.crumb {
  margin: 0 0 2.2rem;
  text-align: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding-left: 0.25em;
}
.crumb a {
  color: var(--ink);
  text-decoration: none;
}
.crumb a:visited { color: var(--ink); }
.crumb a:hover { color: var(--oxblood); }
.crumb::after {               /* lighter thick-thin pair */
  content: "";
  display: block;
  height: 2px;
  border-top: 2px solid var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
  margin-top: 0.9rem;
}
/* inside .hub-head (list pages) the frame's own rules do the work */
.hub-head .crumb { margin-bottom: 0.6rem; }
.hub-head .crumb::after { display: none; }

/* ————— hub prose ————— */

.bio p { margin: 0 0 1.15rem; }
.muted { color: var(--muted); }

/* hub section heads: centered letterspaced caps between hairlines */
main > section > h2 {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
}
main > section > h2::before,
main > section > h2::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

/* ============================================================
   ESSAY INDEX — a table of contents with dotted leaders:
   Title ······················· Mon Year (oldstyle figures)
   ============================================================ */

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 0.55rem 0; }

.post-body {
  display: flex;
  align-items: baseline;
}
.post-body > a {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;      /* leaders carry the line */
}
.post-body > a:hover { text-decoration: underline; }
.post-body::before {          /* the dotted leader itself */
  content: "";
  order: 2;
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--leader);
  margin: 0 0.55em;
}
.post-date {
  order: 3;
  flex: none;
  white-space: nowrap;
  font-size: 0.85rem;         /* Georgia = oldstyle figures */
  color: var(--muted);
}
.post-abstract {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ————— elsewhere: a small centered colophon ————— */

.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.plain-list li { padding: 0.3rem 0; }

/* ============================================================
   ESSAY PAGE — centered title, engraved meta, justified body
   ============================================================ */

.essay-head {
  text-align: center;
  margin-bottom: 2.2rem;
}
.essay-head h1 {
  margin: 0 0 0.8rem;
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.essay-meta {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.lede {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 34rem;
  margin: 1.4rem auto 0;
}
.essay-head::after {          /* fleuron closing the head */
  content: "\2766";           /* ❦ */
  display: block;
  margin-top: 1.8rem;
  font-size: 1.1rem;
  color: var(--muted);
}

/* ————— body copy: justified, hyphenated, book-set ————— */

.essay-body p,
.bio p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.essay-body p { margin: 0 0 1.2rem; }

.essay-body h2 {
  margin: 2.8rem 0 1.2rem;
  font-size: 0.95rem;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
}
.essay-body h3 {
  margin: 2rem 0 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-style: italic;
}

.essay-body ul,
.essay-body ol {
  padding-left: 1.6rem;
  margin: 0 0 1.2rem;
}
.essay-body ul { list-style: square; }   /* printed-matter bullets */
.essay-body li { margin-bottom: 0.35rem; }

/* extracts: ragged-right, book-style double indent */
.essay-body blockquote {
  margin: 1.6rem 1.8rem;
  padding: 0;
  border: none;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink);
}
.essay-body blockquote p {
  text-align: left;
  hyphens: none;
  -webkit-hyphens: none;
}
.essay-body blockquote p:last-child { margin-bottom: 0; }

.essay-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.essay-body figure {
  margin: 1.8rem auto;
  text-align: center;
}
.essay-body figcaption {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* display math scrolls inside itself, page never does */
.essay-body .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}

/* section break: a centered asterism, not a rule */
.essay-body hr {
  border: none;
  margin: 2.4rem 0;
}
.essay-body hr::after {
  content: "\2042";           /* ⁂ */
  display: block;
  text-align: center;
  font-size: 1.05rem;
  color: var(--muted);
}

/* ————— code: quiet mono on parchment, square corners ————— */

code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  font-size: 0.86em;
}
pre {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;           /* panel scrolls, page never does */
  line-height: 1.55;
  margin: 1.5rem 0;
  text-align: left;
}
pre code { font-size: 0.8rem; background: none; }

/* ————— tables: booktabs — ink frame, hairline rows ————— */

.essay-body table {
  border-collapse: collapse;
  font-size: 0.9rem;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5rem 0;
  text-align: left;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.essay-body th,
.essay-body td {
  border-bottom: 1px solid var(--line);
  padding: 0.45rem 0.9rem 0.45rem 0;
  text-align: left;
  vertical-align: top;
}
.essay-body thead th { border-bottom: 1px solid var(--ink); }
.essay-body th {
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* ————— footnotes: short centered print-style separator ————— */

.footnotes {
  font-size: 0.88rem;
  color: var(--muted);
  text-align: left;
}
.footnotes p { text-align: left; margin: 0 0 0.7rem; }
.footnotes ol { padding-left: 1.3rem; }
.essay-body .footnotes hr {
  border: none;
  border-top: 1px solid var(--line);
  width: 10rem;
  margin: 2.6rem auto 1.4rem;
}
.essay-body .footnotes hr::after { content: none; }
sup { line-height: 0; }

/* ————— essay foot: fleuron bookend ————— */

.essay-foot {
  margin-top: 3.2rem;
  text-align: center;
  font-size: 0.88rem;
}
.essay-foot::before {
  content: "\2766";           /* ❦ — matches the head ornament */
  display: block;
  margin-bottom: 1rem;
  font-size: 1.1rem;
  color: var(--muted);
}
.essay-foot p { margin: 0; }

/* ============================================================
   SITE FOOTER — the letterhead closes the sheet
   ============================================================ */

.site-foot {
  padding-top: 0;
  padding-bottom: 3.2rem;
  text-align: center;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.site-foot::before {          /* mirror of the masthead's lower pair */
  content: "";
  display: block;
  height: 2px;
  border-top: 2px solid var(--oxblood);
  border-bottom: 1px solid var(--oxblood);
  margin-bottom: 1.4rem;
}
.site-foot p { margin: 0; }
.site-foot a {
  color: var(--muted);
  text-decoration: none;
}
.site-foot a:visited { color: var(--muted); }
.site-foot a:hover {
  color: var(--oxblood);
  text-decoration: underline;
}

/* ============================================================
   SMALL SCREENS — body never drops below 18px, nothing breaks
   at 360px; justification yields to ragged-right.
   ============================================================ */

@media (max-width: 480px) {
  main.wrap { padding-top: 2.2rem; }
  .essay-body p, .bio p { text-align: left; hyphens: none; -webkit-hyphens: none; }
  .essay-body blockquote { margin: 1.4rem 1rem; }
  .hub-head::before { margin-bottom: 1.4rem; }
  .hub-head::after { margin-top: 1.4rem; }
}

/* ————— print: the letter, as posted ————— */

@media print {
  body { background: #fff; font-size: 11pt; }
  .site-foot, .essay-foot { display: none; }
  a { color: inherit; text-decoration: none; }
}