/* ==========================================================================
   Site styles.
   Home + sidebar  : cq.cx  (Verdana, blue links, thin ruled sidebar)
   Blog + articles : mazzo.li (IBM Plex, ivory, date-then-title archive)
   ========================================================================== */

:root {
  --bg:        #fffff8;
  --fg:        #00000f;
  --muted:     #5b5b5b;
  --heading:   #3e4a4e;
  --link:      #0000ee;
  --hover:     #b91400;
  --accent:    #7f1315;
  --tag-bg:    #e8e8de;
  --code-bg:   #f4f4ec;
  --rule:      #000;
  --sidebar-w: 165px;
  --sans:  "IBM Plex Sans", Helvetica, Arial, sans-serif;
  --serif: "IBM Plex Serif", Garamond, Georgia, serif;
  --mono:  "IBM Plex Mono", Menlo, Consolas, monospace;
  --ui:    Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.4;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--hover); }

.page { display: flex; min-height: 100vh; }

/* --------------------------------------------------------------------------
   Sidebar (cq.cx)
   -------------------------------------------------------------------------- */
.side {
  position: relative;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  padding: 46px 0 30px 0;
}

.side ul {
  list-style: none;
  margin: 0;
  padding: 0 16px 0 8px;
  text-align: right;
}

.side li {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.side a.active { color: var(--fg); }

/* the vertical rule with little ticks at each end */
.side .rule {
  position: absolute;
  top: 15px;
  bottom: 15px;
  right: 0;
  width: 1px;
  background: var(--rule);
}
.side .rule::before,
.side .rule::after {
  content: "";
  position: absolute;
  right: -15px;
  width: 16px;
  height: 1px;
  background: var(--rule);
}
.side .rule::before { top: 0; }
.side .rule::after  { bottom: 0; }

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */
.main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 26px 40px 48px 34px;
}

/* Home */
.home-heading {
  font-family: var(--ui);
  font-weight: normal;
  font-size: 22px;
  letter-spacing: 1px;
  color: rgb(100, 100, 100);
  margin: 0 0 6px 0;
  transition: opacity 0.55s ease;
}
.hero { margin: 18px 0 0 0; }

/* Technical figure captions, shown under each home experience */
.figs { margin-top: 34px; }
.fig {
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.55;
  color: #575757;
  max-width: 62rem;
  margin: 7px 0 0 0;
}
/* single caption directly under a floating window: clear its drop shadow */
.hero + .fig { margin-top: 34px; }
.fig-desk { margin-top: 34px; }
.fig b { color: #1a1a1a; font-weight: 700; }
.fig a { color: #1746a0; text-decoration: underline; }
.fig a:hover { color: var(--hover); }
.hero img {
  display: block;
  max-width: 100%;
  height: auto;
}
.home-content { margin-top: 28px; max-width: 42rem; }

/* --------------------------------------------------------------------------
   Back arrow (mazzo.li's big "←")
   -------------------------------------------------------------------------- */
.back {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--fg);
  margin: -6px 0 22px 0;
}
.back:hover { color: var(--hover); }

/* --------------------------------------------------------------------------
   Blog archive (mazzo.li)
   -------------------------------------------------------------------------- */
.archive {
  font-family: var(--sans);
  max-width: 52rem;
}

.archive-intro { font-family: var(--serif); max-width: 42rem; margin-bottom: 1.5rem; }

.archive h2 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 0.55rem 0;
  text-align: left;
}

.archive .date {
  font-size: 0.82rem;
  font-style: italic;
  font-weight: 300;
  color: var(--muted);
  margin-right: 0.45rem;
  white-space: nowrap;
}

.archive h2 a { color: var(--heading); }
.archive h2 a:hover { color: var(--hover); }
.archive h2 code { font-size: 0.95em; }

.tags { margin-left: 0.3rem; white-space: nowrap; }
.tag {
  font-size: 0.72rem;
  font-weight: 300;
  background: var(--tag-bg);
  color: var(--fg);
  padding: 0.12rem 0.3rem;
  margin: 0 0.1rem;
  vertical-align: middle;
}

.archive-foot { margin-top: 2rem; font-size: 0.85rem; color: var(--muted); }
.archive-foot a { color: var(--muted); }

/* --------------------------------------------------------------------------
   Article (mazzo.li)
   -------------------------------------------------------------------------- */
.article {
  max-width: 42rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
}

.article .back { margin-bottom: 26px; text-decoration: none; }

.article h1 {
  font-family: var(--sans);
  color: var(--heading);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1.4rem 0;
  text-align: left;
}
.article h1 .date {
  float: right;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
  padding: 0.35rem 0 0 1em;
}

.article h2, .article h3, .article h4 {
  font-family: var(--sans);
  text-align: left;
  line-height: 1.3;
  margin: 2rem 0 0.7rem 0;
}
.article h2 { font-size: 1.5rem; font-weight: 500; }
.article h3 { font-size: 1.2rem; font-weight: 500; }
.article h4 { font-size: 1rem;  font-weight: 700; }

.article p { margin: 0 0 1rem 0; }
.article a { color: var(--fg); text-decoration: underline; text-decoration-color: #999; text-underline-offset: 2px; }
.article a:hover { color: var(--hover); text-decoration-color: var(--hover); }

.article .meta { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); margin-top: -0.8rem; }

.article ul, .article ol { margin: 0 0 1rem 1.5rem; padding: 0; }
.article li { margin: 0 0 0.25rem 0; }
.article li p { margin: 0; }

.article blockquote {
  background: #f0f0f083;
  border-left: 0.2rem solid var(--accent);
  margin: 0 0 1rem 1.5rem;
  padding: 0.5rem 0.8rem;
}
.article blockquote p:last-child { margin-bottom: 0; }

.article img { max-width: 100%; height: auto; display: block; margin: 1rem auto; }
.article figure { margin: 1.2rem 0; }
.article figcaption { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); text-align: center; }

.article hr { border: 0; border-top: 1px solid #000; margin: 2rem 0; }

/* code */
.article code {
  font-family: var(--mono);
  font-size: 0.88em;
}
.article :not(pre) > code {
  background: var(--code-bg);
  padding: 0.05em 0.3em;
}
.article pre {
  font-size: 0.85rem;
  line-height: 1.45;
  background: var(--code-bg);
  padding: 0.55rem 0.8rem;
  margin: 0.3rem 0 1rem 0;
  overflow-x: auto;
  text-align: left;
  hyphens: none;
}
.article pre code { background: none; padding: 0; font-size: inherit; }
.highlight { margin: 0; }

/* tables */
.article table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.9rem;
  margin: 0 0 1rem 0;
  text-align: left;
}
.article th, .article td { border-bottom: 1px solid #ccc; padding: 0.3rem 0.7rem 0.3rem 0; vertical-align: top; }
.article th { border-bottom: 1px solid #000; font-weight: 600; }

/* footnotes */
.article .footnotes {
  font-size: 0.85rem;
  line-height: 1.5;
  border-top: 1px solid #000;
  margin-top: 2.5rem;
  padding-top: 0.6rem;
  opacity: 0.9;
}
.article .footnotes hr { display: none; }
.article .footnotes ol { margin-left: 1.2rem; }
.article .footnote-ref { font-size: 0.75em; text-decoration: none; }
.article .footnote-backref { text-decoration: none; }

/* table of contents */
.article .toc {
  font-family: var(--sans);
  font-size: 0.9rem;
  margin: 0 0 1.5rem 0;
  padding: 0.6rem 0.9rem;
  background: var(--code-bg);
}
.article .toc ul { margin: 0 0 0 1rem; list-style: none; }
.article .toc > nav > ul { margin-left: 0; }
.article .toc a { text-decoration: none; }

/* math */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.2rem 0; }
.katex { font-size: 1.05em; }

/* --------------------------------------------------------------------------
   Small screens: sidebar becomes a top bar
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .page { flex-direction: column; }
  .side {
    flex: none;
    width: auto;
    padding: 14px 16px 10px 16px;
    border-bottom: 1px solid var(--rule);
  }
  .side ul { display: flex; flex-wrap: wrap; gap: 6px 18px; text-align: left; padding: 0; }
  .side li { margin: 0; }
  .side .rule { display: none; }
  .main { padding: 22px 18px 40px 18px; }
  .article { text-align: left; hyphens: none; }
  .article h1 .date { float: none; display: block; padding: 0; margin-bottom: 0.2rem; }
  .home-heading { font-size: 18px; }
  /* put the Fig blurb right under the heading on phones */
  .experience { display: flex; flex-direction: column; }
  .home-heading { order: -2; }
  .experience > .fig, .experience > .figs { order: -1; margin: 4px 0 14px 0; }
}

@media print {
  .side, .back { display: none; }
  .main { padding: 0; }
  .article { max-width: none; }
}