/* The landing page for crucible.reckley.org.
 *
 * Deliberately one stylesheet and no framework: it is a page of prose with a
 * grid on it, and the app it introduces is a 1.3 MB bundle away at /app. The
 * palette and the type are the app's own, so arriving at the app does not feel
 * like arriving somewhere else. */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --bg: #f2eee5;
  --panel: #faf7f0;
  --panel-2: #fffdf8;
  --ink: #2c261e;
  --ink-dim: #82796a;
  --line: #e3dccb;
  --line-strong: #d1c8b2;
  --accent: #9c3b2a;
  --accent-strong: #7c2d1f;
  --accent-soft: #f2ddd3;
  --accent-ink: #7c2d1f;

  --measure: 900px;
  --gutter: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130f;
    --panel: #1e1a15;
    --panel-2: #26211a;
    --ink: #e8dfcf;
    --ink-dim: #978c77;
    --line: #332d24;
    --line-strong: #443c30;
    --accent: #d97757;
    --accent-strong: #e08a6d;
    --accent-soft: #45291f;
    --accent-ink: #eb9c80;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent-ink);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

.mark {
  color: var(--accent);
}

/* ---- top bar ---- */

.top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 14px max(var(--gutter), calc((100% - var(--measure)) / 2));
}

.brand {
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
}

.top nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
}

.top nav a {
  color: var(--ink-dim);
  text-decoration: none;
}

.top nav a:hover {
  color: var(--ink);
}

/* ---- sections ---- */

main {
  display: block;
}

section {
  padding: 56px max(var(--gutter), calc((100% - var(--measure)) / 2));
  border-bottom: 1px solid var(--line);
}

h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 5.2vw, 46px);
  line-height: 1.18;
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 3.2vw, 28px);
  margin: 0 0 18px;
}

h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  margin: 0 0 8px;
}

p {
  margin: 0 0 14px;
}

.lead {
  font-size: 17px;
  color: var(--ink-dim);
  max-width: 62ch;
}

.fine {
  font-size: 13.5px;
  color: var(--ink-dim);
  max-width: 62ch;
}

/* ---- hero ---- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 48px;
  padding-top: 72px;
  padding-bottom: 64px;
  /* A warm wash off the top-left, so the fold is not a flat rectangle. Two
     stops only — a landing page for a reading app should not look lit. */
  background:
    radial-gradient(120% 90% at 8% 0%, var(--accent-soft) 0%, transparent 58%),
    var(--bg);
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* The headline shares the fold with the drawn app now, so it is set to the
   column it actually has rather than to the page. */
.hero h1 {
  font-size: clamp(29px, 3.4vw, 40px);
  max-width: 15ch;
}

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 14px;
}

.cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 26px 0 14px;
}

.btn {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 10px 18px;
  font-size: 15px;
  color: var(--ink);
  background: var(--panel-2);
  text-decoration: none;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.btn:hover {
  border-color: var(--ink-dim);
  transform: translateY(-1px);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* ---- the drawn app ---- */

.shot {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--panel-2);
  box-shadow: 0 18px 50px rgba(60, 45, 25, 0.14);
  overflow: hidden;
  font-size: 12.5px;
}

@media (prefers-color-scheme: dark) {
  .shot {
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  }
}

.shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 9px 12px;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.dot:first-child {
  margin-left: 1px;
}

.shot-tab {
  font-size: 11.5px;
  color: var(--ink-dim);
  padding: 2px 9px;
  border-radius: 6px;
}

.shot-tab:first-of-type {
  margin-left: 10px;
}

.shot-tab.is-on {
  color: var(--accent-ink);
  background: var(--accent-soft);
}

.shot-body {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
}

.shot-pane {
  padding: 16px 16px 20px;
  line-height: 1.6;
}

.shot-pane p {
  margin: 0 0 9px;
}

.shot-read {
  font-family: var(--font-serif);
  border-right: 1px solid var(--line);
}

.shot-write {
  background: var(--panel);
  font-family: var(--font-serif);
}

.shot-h {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 12px !important;
}

.shot-read sup {
  color: var(--accent);
  font-size: 9px;
  margin-right: 3px;
}

.shot mark {
  background: var(--hl, #f7e6a5);
  color: inherit;
  border-radius: 2px;
}

@media (prefers-color-scheme: dark) {
  .shot mark {
    background: #5c4c1c;
  }
}

.shot-chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}

.shot-dim {
  color: var(--ink-dim);
}

/* ---- the loop ---- */

.loop {
  background: var(--panel);
  padding-top: 26px;
  padding-bottom: 26px;
}

.loop ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink-dim);
  counter-reset: step;
}

.loop li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* An arrow between the steps, and none after the last: the loop is a sequence,
   and a trailing arrow would point at nothing. */
.loop li:not(:last-child)::after {
  content: "→";
  color: var(--line-strong);
}

/* ---- the grid of what it does ---- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 26px 32px;
}

.grid article {
  border-top: 2px solid var(--accent-soft);
  padding-top: 14px;
}

.grid article p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-dim);
}

/* ---- download ---- */

.downloads {
  background: var(--panel);
}

/* A list of files, not a pitch. Each row is one download: what it runs on,
   which build, the extension, the size — the four things you decide on, in the
   order you decide them. */
.dl-rows {
  border-top: 1px solid var(--line);
  max-width: 620px;
}

.dl-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "os ext size" "variant ext size";
  align-items: center;
  gap: 0 18px;
  border-bottom: 1px solid var(--line);
  padding: 13px 6px 13px 12px;
  text-decoration: none;
  color: var(--ink);
}

.dl-row:hover {
  background: var(--panel-2);
}

.dl-os {
  grid-area: os;
  font-family: var(--font-serif);
  font-size: 16px;
}

.dl-variant {
  grid-area: variant;
  font-size: 12.5px;
  color: var(--ink-dim);
}

.dl-ext {
  grid-area: ext;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--accent-ink);
}

.dl-size {
  grid-area: size;
  font-size: 12.5px;
  color: var(--ink-dim);
  min-width: 62px;
  text-align: right;
}

/* The build for the machine asking. A rule down the left edge, which marks it
   without making the other three look unavailable. Every row already carries
   the padding the rule sits in, so marking one does not shift its text out of
   line with the rest. */
.dl-row.is-yours {
  box-shadow: inset 2px 0 0 var(--accent);
}

.dl-note {
  font-size: 12.5px;
  color: var(--ink-dim);
  margin: 16px 0 0;
  max-width: 620px;
}

.dl-alt {
  margin-top: 20px;
}

/* ---- footer ---- */

footer {
  padding: 30px max(var(--gutter), calc((100% - var(--measure)) / 2)) 52px;
  font-size: 14px;
  color: var(--ink-dim);
}

.foot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-bottom: 12px;
}

.foot-brand {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
}

footer nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

footer a {
  color: var(--ink-dim);
  text-decoration: none;
}

footer a:hover {
  color: var(--accent-ink);
}

@media (max-width: 620px) {
  section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero {
    padding-top: 48px;
  }
}