/* The home page: what the app is, how to start, and a few places to begin. */

.home { max-width: 72rem; }

/* A carved slab: the name under a gilt rule, the main buttons below. */
.hero {
  position: relative;
  padding: 48px 48px 40px;
  background-color: var(--stone-raised);
  background-image: radial-gradient(ellipse at 30% 0%, rgb(201 180 124 / 0.08), transparent 60%), var(--stone-surface);
  background-size: auto, var(--stone-surface-size);
  border: 1px solid #4f463a;
  border-radius: var(--radius);
  box-shadow: var(--frame-raised);
}
.hero-kicker {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-shadow: var(--engrave);
}
.hero h1 {
  display: inline-block;
  padding-bottom: 12px;
  font-size: var(--step-6);
  color: var(--q-unique);
  text-shadow: var(--engrave-gilt);
  border-bottom: 1px solid;
  border-image: var(--gilt-line) 1;
}
.hero-text { max-width: 40rem; margin: 18px 0 0; font-size: var(--step-1); line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .button { padding: 10px 22px; font-size: var(--step-1); }
.hero-note { margin: 16px 0 0; font-size: var(--step--1); color: var(--text-dim); }

.home-section { margin-top: 44px; }
.home-section h2 {
  margin-bottom: 16px;
  padding-bottom: 6px;
  font-size: var(--step-1);
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  border-bottom: 1px solid;
  border-image: var(--gilt-line) 1;
}

/* Three steps across, each numbered like an act. */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li {
  padding: 18px 20px;
  background: rgb(0 0 0 / 0.35);
  border: 1px solid #2e2a25;
  border-radius: var(--radius);
  box-shadow: var(--well);
}
.step-number {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  color: var(--q-unique);
  text-shadow: var(--engrave-gilt);
}
.steps h3 { margin: 10px 0 4px; font-size: var(--step-1); }
.steps p { margin: 0; color: var(--text-dim); }

/* Places to start: raised stone tiles. */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 18px 20px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(#2c2620, #1f1b17);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--bevel), 0 4px 12px rgb(0 0 0 / 0.4);
  transition: border-color 0.15s, transform 0.15s;
}
.feature:hover { border-color: var(--q-unique); transform: translateY(-2px); }
.feature-name { font-family: var(--font-display); font-size: var(--step-1); color: var(--q-unique); text-shadow: var(--engrave); }
.feature-text { color: var(--text-dim); }

.home-more { max-width: 48rem; margin: 20px 0 0; color: var(--text-dim); }
.home kbd {
  padding: 0 5px;
  font: inherit;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

@media (max-width: 760px) {
  .hero { padding: 28px 20px; }
  .hero h1 { font-size: var(--step-4); }
  .hero-text { font-size: var(--step-0); }
}