/* nery-rg.com — "Rubricated": a margin layout with rubric-red accents.
   Change the look here; the words live in content/*.org. */

/* Fonts (self-hosted, SIL Open Font License) */
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Texturina"; src: url("/fonts/texturina-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;   /* always the light page, whatever the reader's setting */
  --paper: #fffcf4;
  --ink: #1c1a17;
  --ink-soft: #4a453d;
  --rubric: #a3201d;
  --rule: #e9e1cf;
  --text: "EB Garamond", Garamond, Georgia, serif;
  --display: "IM Fell English", "EB Garamond", Georgia, serif;
  --initial: "Texturina", "IM Fell English", serif;
  --main: 62%;            /* width of the text column */
  --note-w: 53%;          /* margin note width, relative to the text column */
  --note-pull: -61%;      /* how far notes reach into the margin */
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: 1.3125rem; line-height: 1.6;
  font-variant-ligatures: common-ligatures; font-kerning: normal;
}
#preamble, #content, #postamble { max-width: 1080px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

a { color: inherit; text-decoration-color: var(--rubric); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rubric); }
a:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; }

/* Masthead */
#preamble { padding-top: 40px; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 28px; font-size: 1.125rem; letter-spacing: 0.1em; font-variant: small-caps; text-transform: lowercase; }
.site-nav a { text-decoration: none; padding: 10px 0; }
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--rubric); }
.motto { margin: 76px 0 0; font-size: 1.0625rem; font-variant: small-caps; letter-spacing: 0.24em; color: var(--rubric); }

#content > header { max-width: 700px; }
h1.title { margin: 12px 0 0; font-family: var(--display); font-weight: 400; font-size: 3.875rem; line-height: 1.02; }
h1.title::first-letter { font-family: var(--initial); font-weight: 500; font-size: 1.36em; color: var(--rubric); }
p.subtitle { margin: 18px 0 0; font-size: 1.4375rem; font-style: italic; line-height: 1.4; color: var(--ink-soft); }

/* Sections */
.outline-2 { margin-top: 64px; }
h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.875rem; line-height: 1.2; }
h2::before { content: "¶"; font-style: normal; color: var(--rubric); margin-right: 0.35em; }
h3 { margin: 0; font-weight: 500; font-size: 1.375rem; line-height: 1.3; }
.outline-3 { padding: 16px 0; border-top: 1px solid var(--rule); }
.outline-2 > .outline-3:last-of-type { border-bottom: 1px solid var(--rule); }
.outline-text-3 p { margin: 6px 0 0; font-size: 1.25rem; line-height: 1.55; }

#content p, #content ul, #content ol { width: var(--main); }
p { margin: 0 0 1em; }
ul { padding-left: 0; list-style: none; line-height: 1.9; }
ul.pubs, .pubs { line-height: 1.55; }
.pubs li { margin-bottom: 0.9em; }

/* The red initial on the opening paragraph */
p.lede::first-letter { float: left; font-family: var(--display); font-size: 4.9em; line-height: 0.8; padding: 0.07em 0.12em 0 0; color: var(--rubric); }

/* Margin notes: footnotes become numbered sidenotes; {{{margin(...)}}} is unnumbered */
.sidenote-number { font-size: 0.68em; line-height: 0; color: var(--rubric); padding-left: 1px; }
.sidenote, .marginnote {
  float: right; clear: right; width: var(--note-w); margin: 0.25rem var(--note-pull) 1rem 0;
  font-size: 1rem; font-style: italic; line-height: 1.5; color: var(--ink-soft); vertical-align: baseline; position: relative;
}
.sidenote-mark { font-style: normal; color: var(--rubric); }
.marginnote { margin-top: 0.3rem; }
li > .marginnote, ul + .marginnote { font-size: 1rem; }

/* Footer */
#postamble { padding-top: 64px; padding-bottom: 72px; }
.fleuron { font-size: 1.625rem; color: var(--rubric); margin: 0 0 18px; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--ink-soft); }
.site-footer p { margin: 0; }

/* Maths */
mjx-container { font-size: 95% !important; }

/* Phones and narrow windows: one column, notes fall in line under their sentence */
@media (max-width: 760px) {
  body { font-size: 1.1875rem; }
  #preamble, #content, #postamble { padding-left: 18px; padding-right: 18px; }
  .site-nav { justify-content: flex-start; gap: 0 20px; }
  .motto { margin-top: 40px; }
  h1.title { font-size: 2.75rem; }
  p.subtitle { font-size: 1.25rem; }
  #content p, #content ul, #content ol { width: 100%; }
  .sidenote, .marginnote { float: none; display: block; width: auto; margin: 0.5rem 0 0.75rem 1rem; }
}

@media print {
  .site-nav { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
}