/* SPINE written pages: index.html at the top of the package, and
 * docs/measure-guide.html.
 *
 * These two are scientific documents, not exported code, so they read like a
 * printed page: one column, a serif face, generous measure, and figures and
 * equations carrying the argument. Deliberately one light theme. A dark theme
 * would mean a second version of every figure, and these are meant to be read
 * the way a paper is read.
 *
 * Nothing here is loaded from anywhere. No web fonts, no scripts, no CDN: the
 * pages must render identically from a local file and from GitHub Pages.
 * Equations are native MathML for the same reason.
 */

:root {
  --ink:    #1b1b1f;
  --body:   #2c2c33;
  --muted:  #62626c;
  --rule:   #dedee4;
  --wash:   #f6f6f8;
  --link:   #14507e;
  --cut:    #b02a2a;
  --serif:  Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:   Helvetica, Arial, sans-serif;
  --mono:   "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.62;
  color: var(--body);
  background: #fff;
  max-width: 42em;
  margin: 0 auto;
  padding: 0 1.4em 6em;
}

/* ---- masthead ------------------------------------------------------- */

.masthead { padding: 3.6em 0 1.8em; border-bottom: 1px solid var(--rule); }
.masthead .mark { font-family: var(--sans); font-size: .78em; letter-spacing: .22em;
                  text-transform: uppercase; color: var(--muted); margin: 0 0 .7em; }
.masthead h1 { font-size: 2.05em; line-height: 1.18; font-weight: 600;
               color: var(--ink); margin: 0 0 .5em; letter-spacing: -.01em; }
.masthead .author { margin: 0; font-size: 1em; color: var(--ink); }
.masthead .affil  { margin: .15em 0 0; font-size: .92em; color: var(--muted); }

/* ---- headings ------------------------------------------------------- */

h2 { font-size: 1.32em; font-weight: 600; color: var(--ink);
     margin: 2.6em 0 .6em; line-height: 1.3; }
h3 { font-size: 1.06em; font-weight: 600; color: var(--ink); margin: 1.9em 0 .4em; }

p { margin: 0 0 1.05em; }
.lead { font-size: 1.1em; color: var(--ink); }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid #c3d5e5; }
a:hover { border-bottom-color: var(--link); }

code { font-family: var(--mono); font-size: .84em; background: var(--wash);
       padding: .08em .34em; border-radius: 3px; color: var(--ink); }

ul { margin: 0 0 1.05em; padding-left: 1.3em; }
li { margin: .3em 0; }

/* ---- language cards -------------------------------------------------- */

.langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9em; margin: 1.6em 0 .8em; }
.lang { display: block; border: 1px solid var(--rule); border-radius: 7px;
        padding: 1.1em 1em 1.05em; background: #fff; color: var(--body);
        border-bottom: 1px solid var(--rule); }
a.lang:hover { border-color: #b9cee0; background: #fbfcfe; }
.lang svg { display: block; margin-bottom: .7em; }
.lang .name { font-family: var(--sans); font-size: 1.02em; font-weight: 600;
              color: var(--ink); display: block; }
.lang .state { font-family: var(--sans); font-size: .76em; color: var(--muted);
               display: block; margin-top: .3em; line-height: 1.45; }
.lang.planned { background: var(--wash); }
.lang.planned .name { color: var(--muted); }

@media (max-width: 34em) { .langs { grid-template-columns: 1fr; } }

/* ---- figures --------------------------------------------------------- */

figure { margin: 2.1em 0; }

/* Cap, never stretch. Each figure carries its own size in millimetres, from the
 * inches it was drawn at, so letting them render at that size keeps the axis
 * text the same size in all of them. Stretching every figure to the column
 * instead would blow the narrow ones up by seventy per cent and their labels
 * with them. */
figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
figcaption { font-family: var(--sans); font-size: .82em; line-height: 1.55;
             color: var(--muted); margin-top: .7em;
             border-top: 1px solid var(--rule); padding-top: .6em; }
figcaption b { color: var(--ink); font-weight: 600; }

/* ---- equations ------------------------------------------------------- */

math { font-size: 1.02em; }
math[display="block"] { margin: 1.3em 0; }
.eq { display: flex; align-items: center; gap: 1em; margin: 1.4em 0; }
.eq math[display="block"] { margin: 0; flex: 1 1 auto; }
.eq .no { font-family: var(--sans); font-size: .8em; color: var(--muted);
          flex: 0 0 auto; }

/* ---- notes and tables ------------------------------------------------ */

.note { border-left: 3px solid var(--rule); padding: .1em 0 .1em 1.1em;
        margin: 1.5em 0; color: var(--muted); }
.note strong { color: var(--ink); }

table { border-collapse: collapse; width: 100%; margin: 1.4em 0;
        font-family: var(--sans); font-size: .86em; }
th { text-align: left; font-weight: 600; color: var(--ink);
     border-bottom: 1.5px solid var(--rule); padding: .45em .6em .45em 0; }
td { padding: .45em .6em .45em 0; border-bottom: 1px solid var(--rule);
     vertical-align: top; }

/* ---- navigation and footer ------------------------------------------- */

.pagenav { font-family: var(--sans); font-size: .88em; padding: 1.4em 0 0;
           margin-top: 3.4em; border-top: 1px solid var(--rule); }
.pagenav a { margin-right: 1.6em; }

footer { font-family: var(--sans); font-size: .8em; color: var(--muted);
         margin-top: 2.4em; }
footer p { margin: .35em 0; }