/* The founders' page only. Shared pieces live in site.css; the hero's backdrop and cast use scene.css. */

/* ---------- Hero: the founders' camp on the Meadows ---------- */
.fhero { height: auto; border-bottom: 0; --feet: 58px; }
.fhero__copy { position: relative; z-index: 6; padding-top: 84px; padding-bottom: 250px; }
.fhero__copy .col { padding-left: 0; }
.fhero h1 { font-size: var(--step-4); margin: 0.1rem 0 1rem; }
.fhero__place { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-pill); padding: 0.1em 0.85em 0.1em 0.7em; }
.fhero__panel {
  background: var(--paper); border: var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
  padding: 1.2rem 1.25rem 1.1rem;
}
.fhero__panel .lede { margin-bottom: 0.5rem; max-width: 26ch; }
.fhero__panel p:not(.lede):not(.small) { max-width: 44ch; }
.fhero__panel .small { margin: 0; color: var(--ink); max-width: 44ch; }
.fhero__panel .btn-row { margin-top: var(--space-3); }
.btn--big { font-size: 1.2rem; padding: 0.8em 1.4em; min-height: 56px; }
@media (max-width: 479px) {
  .fhero__panel .btn { flex: 1 1 100%; }
}
@media (min-width: 600px) {
  .fhero { --feet: 62px; }
  .fhero__copy { padding-bottom: 320px; }
}
@media (min-width: 900px) {
  .fhero { --feet: 74px; }
  .fhero__copy { max-width: 62%; margin-left: 0; padding-top: 92px; padding-bottom: 3rem; }
  .fhero__copy .col { padding-left: var(--lane); }
  .fhero h1 { font-size: clamp(2.9rem, 6.4vw, 5.6rem); }
  .fhero__panel { padding: 1.3rem 1.5rem 1.2rem; }
  /* The cast stands to the right of the copy */
  .fhero .at-l1 { --x: 61%; }
  .fhero .at-l2 { --x: 70%; }
  .fhero .at-r1 { --x: 82%; }
}
@media (min-width: 1240px) {
  .fhero__copy { max-width: 700px; margin-left: max(0px, calc((100vw - var(--wrap)) / 2)); }
}

/* ---------- The three promises ---------- */
@media (min-width: 900px) {
  .promises { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); max-width: 60rem; }
  .promises li { grid-template-columns: 1fr; gap: 0.7rem; }
}

/* ---------- Screenshots on the lake ---------- */
.shots { display: grid; gap: var(--space-5); margin: var(--space-5) 0 var(--space-5); }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); max-width: 64rem; } }
.shot { margin: 0; }
.shot img {
  width: 100%; height: auto; aspect-ratio: 8 / 5; background: #1f4a66;
  border: var(--line); border-radius: var(--radius-l);
  box-shadow: 0 0 0 3px var(--paper), 0 9px 0 3px rgba(0, 0, 0, 0.35);
}
.shot figcaption { margin-top: 1.1rem; color: var(--on-dark-soft); }
.shot figcaption strong { display: block; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 1.5rem; line-height: 1.2; color: var(--on-dark); }