/* Hand-written stylesheet for philwebring.org — the preamble.tex
 * analog.  Austere on purpose: text, one column, nothing else.
 *
 * The ring reads as raymondmaung.com's neighbor, so this file carries
 * the same THEME KNOBS as ~/scholarship/website/shared/style.css, with
 * the same values and the same self-hosted faces.  Change a knob in
 * one file and the two sites part company, which is the point of
 * keeping the values in one visible block at the top of each.
 * Re-theming is an edit here (plus, for a new typeface, woff2 files in
 * shared/fonts/ and the @font-face rules beneath), then `publish ring`.
 *
 * The ring needs one knob the personal site does not: --color-rule,
 * for the box around the embed snippet.  Nothing else here is new. */
:root {
  --font-body: "Ibarra Real Nova", Georgia, serif;
  --font-accent: "IBM Plex Mono", ui-monospace, monospace; /* wordmark, code */
  --size-body: 1.125rem;
  --measure: 46rem;          /* column width — the personal site's */
  --leading: 1.6;
  --color-fg: #111;
  --color-bg: #fff;
  --color-link: #111;
  --color-rule: #ddd;        /* the snippet box, and nothing else */
}

/* Self-hosted fonts (both SIL OFL) — no third-party requests.
 * `publish ring` copies these into the build tree beside the
 * stylesheet, the same way `publish site` does for the personal site. */
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/ibarra-real-nova-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/ibarra-real-nova-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Ibarra Real Nova";
  src: url("fonts/ibarra-real-nova-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Normalization — three lines, no reset framework. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, ul { margin: 0 0 1rem; }

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading);
  color: var(--color-fg);
  background: var(--color-bg);
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* The wordmark stands where the personal site's nav strip stands: same
 * mono face, same 2rem inset from the body's left edge.  A visitor who
 * walks from one site to the other lands on the same mark. */
header { margin-bottom: 3rem; padding-left: 2rem; }
header h1 {
  font-family: var(--font-accent);
  font-size: 1rem;
  font-weight: 400;
  margin: 0 0 0.35rem;
}
header p.tagline { margin: 0; }

h2 { font-size: 1.25rem; margin-top: 2rem; }
h3 { font-size: 1rem; margin-top: 2rem; }

a { color: var(--color-link); }

/* The embed snippet is the one place the ring shows code. */
pre {
  /* The badge markup is one long line on purpose (some site builders
   * break a snippet that spans several), so it wraps here rather than
   * running off the side.  A soft wrap is not copied as a newline, so
   * what a member pastes is still the one line. */
  white-space: pre-wrap;
  overflow-x: auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  font-size: 0.82rem;
  line-height: 1.5;
}
code { font-family: var(--font-accent); }

footer {
  margin-top: 3rem;
  font-family: var(--font-accent);
  font-size: 0.85rem;
}