/* The site is the window's night with the colour taken out: its type, its
   warm greys on near-black. Only the steps and the download stand out; the
   one colour on the front page is a turn of play as the window shows it
   (turn.css). Layout: a rulebook's opening page, the steps hanging their
   numbers in the margin. */

@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/alegreya-latin-400-normal-e713d9ca.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/alegreya-latin-ext-400-normal-c3e93e4b.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/alegreya-latin-400-italic-9420c129.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("/assets/alegreya-latin-ext-400-italic-d71e71d4.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/alegreya-latin-700-normal-2f79576d.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/alegreya-latin-ext-700-normal-00b40fac.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/alegreya-sc-latin-400-normal-324d840b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/alegreya-sc-latin-ext-400-normal-eb8f85d3.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/alegreya-sc-latin-700-normal-d5167f92.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/alegreya-sc-latin-ext-700-normal-e47c10db.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ground: #0c0c0b;
  --raised: #131211;
  --ink: #ebe4d3;
  --ink-hi: #fff7e6;
  --soft: #c9c2b0;
  --dim: #8e887a;
  --faint: #5c584f;
  --line: rgba(235, 228, 211, 0.12);
  --serif: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --caps: "Alegreya SC", "Alegreya", Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.55;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.page { max-width: 72rem; margin-inline: auto; min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }

.top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: 28px; border-bottom: 1px solid var(--line); }
.mark { font-family: var(--caps); font-size: 1.2rem; letter-spacing: 0.08em; text-decoration: none; }
.top nav { font-family: var(--ui); font-size: 0.9rem; color: var(--dim); display: flex; gap: 1.2rem; align-items: baseline; }

.foot { border-top: 1px solid var(--line); padding-block: 26px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem 2rem; font-family: var(--ui); font-size: 0.86rem; color: var(--dim); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }

/* the front page */
.front { display: grid; grid-template-columns: minmax(0, 37rem) minmax(0, 1fr); gap: 3.5rem 5rem; align-items: start; padding-block: 56px 80px; }
@media (max-width: 960px) { .front { grid-template-columns: minmax(0, 1fr); padding-block: 36px 56px; } }
h1 { font-weight: 700; font-size: clamp(2rem, 1.25rem + 2.4vw, 2.85rem); line-height: 1.12; letter-spacing: -0.005em; margin: 0 0 0.55em; text-wrap: balance; }
.lede { color: var(--soft); font-size: 1.2rem; margin: 0; max-width: 34rem; }

.steps { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 2.4rem; }
.step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1.1rem; }
.num { font-size: 3.2rem; line-height: 0.82; color: var(--faint); font-variant-numeric: oldstyle-nums; }
.step h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.35rem; }
.step p { color: var(--soft); margin: 0 0 0.7rem; }
.step p:last-child { margin-bottom: 0; }
.links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }

.get { display: grid; gap: 0.75rem; justify-items: start; margin-top: 0.9rem; }
.download {
  display: inline-flex; align-items: baseline; gap: 0.55em;
  background: var(--ink); color: var(--ground); text-decoration: none;
  font-family: var(--caps); font-weight: 700; font-size: 1.32rem; letter-spacing: 0.04em;
  padding: 0.72em 1.35em 0.8em; border-radius: 3px;
}
.download:hover { background: var(--ink-hi); }
.download .arrow { font-family: var(--ui); font-weight: 600; font-size: 0.9em; }
.download.soon { background: transparent; color: var(--soft); border: 1px solid var(--line); cursor: default; }
.also { font-family: var(--ui); font-size: 0.9rem; color: var(--dim); }
.also a { color: var(--soft); }
.fine { font-family: var(--ui); font-size: 0.84rem; line-height: 1.5; color: var(--dim); margin: 0; max-width: 31rem; }

.other { margin-top: 3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.other summary { cursor: pointer; list-style: none; color: var(--soft); display: flex; gap: 0.6rem; align-items: baseline; }
.other summary::-webkit-details-marker { display: none; }
.other summary::before { content: "+"; font-family: var(--ui); color: var(--dim); width: 1ch; }
.other[open] summary::before { content: "−"; }
.other .body { padding: 0.8rem 0 0 1.6rem; display: grid; gap: 0.9rem; }
.other p { margin: 0; color: var(--soft); font-size: 1.05rem; }
.note { font-family: var(--ui); font-size: 0.86rem; color: var(--dim); }

/* the plain pages: sign-in, keeping a run, the account, the footer's */
.plain { max-width: 34rem; padding-block: 56px 80px; }
.plain h1 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.3rem); }
.plain p, .plain li { color: var(--soft); }
.plain h2 { font-size: 1.3rem; margin: 2rem 0 0.4rem; }
.plain ul { padding-left: 1.2rem; }
.form { display: grid; gap: 0.9rem; justify-items: start; margin-top: 1.6rem; }
.form label { font-family: var(--ui); font-size: 0.9rem; color: var(--dim); }
.form input[type="email"], .form input[type="text"] {
  width: 100%; max-width: 24rem; font: 1.15rem var(--serif); color: var(--ink); background: var(--raised);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.55em 0.7em;
}
.form input.code { font-family: var(--mono); font-size: 1.4rem; letter-spacing: 0.3em; max-width: 12rem; }
.button {
  font: 700 1.1rem var(--caps); letter-spacing: 0.04em; color: var(--ground); background: var(--ink);
  border: 0; border-radius: 3px; padding: 0.6em 1.2em 0.65em; cursor: pointer; text-decoration: none; display: inline-block;
}
.button:hover { background: var(--ink-hi); }
.quiet-button { font: 600 0.9rem var(--ui); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 3px; padding: 0.55em 1em; cursor: pointer; }
.quiet-button:hover { border-color: var(--dim); }
.alert { font-family: var(--ui); font-size: 0.95rem; color: var(--ink); border-left: 2px solid var(--soft); padding: 0.2rem 0 0.2rem 0.8rem; margin: 1rem 0 0; }
.run { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 1.2rem; margin: 1.4rem 0 0; font-size: 1.05rem; }
.run dt { font-family: var(--ui); font-size: 0.85rem; color: var(--dim); padding-top: 0.15rem; }
.run dd { margin: 0; color: var(--ink); }
.inline { display: inline; }

/* the account page's runs, and a run's link */
.runs { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.8rem; }
.runs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: center; }
.runs .who { color: var(--ink); grid-column: 1; }
.runs .when { font-family: var(--ui); font-size: 0.84rem; color: var(--dim); grid-column: 1; }
.runs form { grid-column: 2; grid-row: 1 / span 2; }
.copy { display: flex; gap: 0.6rem; margin: 1.2rem 0; flex-wrap: wrap; }
.copy input { flex: 1 1 18rem; min-width: 0; font: 0.95rem var(--mono); color: var(--ink); background: var(--raised); border: 1px solid var(--line); border-radius: 3px; padding: 0.55em 0.7em; }