/* =============================================================================
   writing.css — the Blogs and Elementary Mathematics lists, their pages, and
   the explorer strip at the bottom of the Blogs list. Loaded after site.css
   (uses its tokens) by blogs/, elementary-mathematics/ and every page made by
   tools/publish/build.py.
   1. lists (title, boxed cards)      3. maths (MathJax SVG, theorems)
   2. a post or chapter page          4. the explorer strip (Blogs list only)
   HOW TO EDIT: card look in 1, photo frames in 2, strip height in --strip-h.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. lists */
.page--list .page__title { margin-top: clamp(76px, 15vh, 170px); }
.posts { margin-top: clamp(30px, 6vh, 64px); width: min(46rem, 100%); }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); }
.post-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--line); border-radius: var(--radius); background: rgb(10 12 12 / 0.72); color: var(--ink-2); text-decoration: none;
  scroll-margin-top: 90px; transition: background-color .2s, border-color .2s, transform .2s; }
.post-card:hover, .post-card:focus-visible { background: rgb(var(--ink) / 0.06); border-color: rgb(var(--ink) / 0.72); transform: translateY(-2px); }
.post-card:focus-visible { outline: 2px solid rgb(var(--ink) / 0.8); outline-offset: 3px; }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 12px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.post-card__cat { padding: 4px 10px; border: 1px dashed rgb(var(--ink) / 0.5); border-radius: 999px; letter-spacing: 0.12em; color: var(--ink-2); }
.post-card__title { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 1vw + 17px, 30px); line-height: 1.2; color: var(--ink-1); text-wrap: balance; }
.post-card__abstract { font-family: var(--serif); font-size: clamp(16.5px, 0.35vw + 15px, 19px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.post-card__go { margin-top: 4px; font: 600 13px/1 var(--sans); letter-spacing: 0.04em; color: var(--ink-1); }
.post-card__go span { display: inline-block; transition: transform .25s; }
.post-card:hover .post-card__go span { transform: translateX(3px); }
.post-list__empty { margin: 0; padding: 22px; border: 1px dashed rgb(var(--ink) / 0.35); border-radius: var(--radius); color: var(--ink-3); font-family: var(--serif); }
.page--list .page__main { padding-bottom: 18vh; }

/* ---------------------------------------------------------------- 2. a post or chapter page */
.post__abstract { margin: 1.3em 0 0; font-size: 1.08em; font-style: italic; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.post__body { margin-top: 2em; }
.post__body > :first-child { margin-top: 0; }
.post__body a { color: var(--ink-1); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post__body h2 { margin: 2.3em 0 0.5em; font-family: var(--caps); font-weight: 400; font-size: 1.12em; letter-spacing: 0.08em; text-shadow: none; color: var(--ink-1); }
.post__body h3 { margin: 1.9em 0 0.4em; font-family: var(--serif); font-weight: 700; font-size: 1.04em; color: var(--ink-1); text-shadow: none; }
.post__body h4, .post__body h5, .post__body h6 { margin: 1.6em 0 0.3em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1em; color: var(--ink-1); text-shadow: none; }
.post__body p { margin: 0.95em 0 0; text-wrap: pretty; }
.post__body strong, .post__body b { color: var(--ink-1); }
.post__body ul, .post__body ol { margin: 0.9em 0 0; padding-left: 1.35em; }
.post__body li { margin-top: 0.35em; }
.post__body li > p:first-child { margin-top: 0; }
.post__body blockquote { margin: 1.4em 0 0; padding: 0.1em 0 0.1em 1.1em; border-left: 2px solid rgb(var(--ink) / 0.4); font-style: italic; color: var(--ink-2); }
.post__body hr { margin: 2.2em auto 0; width: 40%; border: 0; border-top: 1px dashed rgb(var(--ink) / 0.4); }
.post__body code { font: 0.86em/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; padding: 0.1em 0.35em; border-radius: 4px; background: rgb(var(--ink) / 0.08); }
.post__body pre { margin: 1.2em 0 0; padding: 14px 16px; overflow-x: auto; border: 1px solid rgb(var(--ink) / 0.22); border-radius: 8px; background: rgb(10 12 12 / 0.8); }
.post__body pre code { padding: 0; background: none; font-size: 0.82em; }
.post__body table { display: block; max-width: 100%; overflow-x: auto; margin: 1.4em 0 0; border-collapse: collapse; font-size: 0.92em; }
.post__body th, .post__body td { padding: 6px 12px; border-bottom: 1px solid rgb(var(--ink) / 0.22); text-align: left; vertical-align: top; }
.post__body th { font-family: var(--caps); font-weight: 400; letter-spacing: 0.05em; color: var(--ink-1); border-bottom-color: rgb(var(--ink) / 0.5); }
/* photos: a thin chalk frame, like prints pinned to the board */
.post__body figure { margin: 1.9em 0 0; }
.post__body img { display: block; max-width: 100%; height: auto; margin: 1.6em auto 0; padding: 6px; border: 1px solid rgb(var(--ink) / 0.32); border-radius: 6px; background: rgb(10 12 12 / 0.75); }
.post__body figure img { margin-top: 0; }
.post__body p img { display: inline-block; margin: 0.4em 0; vertical-align: middle; }
.post__body p:has(> img:only-child) img { display: block; margin: 1.6em auto 0; }
.post__body figcaption { margin-top: 0.7em; text-align: center; font-size: 0.86em; font-style: italic; color: var(--ink-3); }
.post__body svg.fig__svg, .post__body .fig__svg { display: block; width: 100%; height: auto; max-width: 34rem; margin: 0 auto; overflow: visible; }
.post__body .footnotes { margin-top: 3em; font-size: 0.86em; color: var(--ink-3); }
.post__body .footnotes hr { width: 100%; margin: 0 0 1em; }
.post__body .footnote-ref { text-decoration: none; }
.post__body code.tex { white-space: pre-wrap; } /* maths that could not be typeset: shown as its LaTeX */
/* previous / next */
.post-nav { margin: 2.4em 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.post-nav a { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid rgb(var(--ink) / 0.25); border-radius: var(--radius); background: rgb(10 12 12 / 0.6); color: var(--ink-2); text-decoration: none; transition: border-color .2s, background-color .2s; }
.post-nav a:hover { border-color: rgb(var(--ink) / 0.6); background: rgb(var(--ink) / 0.05); }
.post-nav__next { text-align: right; }
.post-nav__label { font: 500 11.5px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.post-nav__title { font-family: var(--serif); font-size: 1em; line-height: 1.3; color: var(--ink-1); }
@media (max-width: 560px) { .post-nav { grid-template-columns: 1fr; } .post-nav__next { text-align: left; } }

/* ---------------------------------------------------------------- 3. maths
   Formulas are SVG made when the site is built (tools/publish/mathjax.cjs),
   drawn in currentColor, so they take the chalk colour of the text.         */
mjx-container[jax="SVG"] { direction: ltr; position: relative; }
mjx-container[jax="SVG"] > svg { overflow: visible; min-height: 1px; min-width: 1px; }
mjx-container[jax="SVG"][display="true"] { display: block; text-align: center; margin: 0; }
mjx-container[jax="SVG"][display="true"][width="full"] { display: flex; }
mjx-container[jax="SVG"][justify="left"] { text-align: left; }
mjx-container[jax="SVG"][justify="right"] { text-align: right; }
mjx-container[jax="SVG"] > svg a { fill: currentColor; stroke: currentColor; }
mjx-assistive-mml { position: absolute !important; top: 0; left: 0; clip: rect(1px, 1px, 1px, 1px); padding: 1px 0 0 0 !important; border: 0 !important;
  display: block !important; width: auto !important; overflow: hidden !important; -webkit-touch-callout: none; user-select: none; }
mjx-assistive-mml[display="block"] { width: 100% !important; }
.math-display { display: block; margin: 1em 0; padding: 0.25em 0; overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.post-card__title mjx-container, .post-card__abstract mjx-container, .post-nav__title mjx-container { color: inherit; }
.article__title mjx-container > svg { vertical-align: baseline !important; }
.lemma, .proposition, .corollary, .definition, .example, .remark, .note, .exercise, .conjecture, .claim { margin: 1.5em 0 0; padding-left: 1.1em; border-left: 2px solid rgb(var(--ink) / 0.4); }
.definition, .example, .remark, .note { border-left-style: dashed; }

/* ---------------------------------------------------------------- 4. the explorer strip
   A band fixed to the bottom of the Blogs list (js/lib/strip.js): the
   explorer runs between his activities. It stays put while the page scrolls;
   the list scrolls under it and fades out just above it.                    */
:root { --strip-h: clamp(96px, 6.5vw + 72px, 138px); }
.strip { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; height: calc(var(--strip-h) + env(safe-area-inset-bottom, 0px));
  background: rgb(13 15 15 / 0.94); pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.strip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 34px; background: linear-gradient(rgb(13 15 15 / 0), rgb(13 15 15 / 0.94)); }
.strip canvas { display: block; width: 100%; height: var(--strip-h); }
.wq-ready .strip { opacity: 1; }
.wq-collapsing .strip { opacity: 0; transition-duration: .25s; }
.has-strip .page__main { padding-bottom: calc(var(--strip-h) + 14vh); }
.has-chalk .chalk-text mjx-container { color: rgb(var(--ink) / 0.96); } /* maths in a chalk title: the chalk texture can't reach SVG */