/* Vongfai: Kickstarter landing page, art first. Loaded by the header for template vongfai. Tokens only. */

.vongfai { padding-bottom: 0; }
.vongfai h2 { margin-top: 0; }
.vongfai > section { padding-top: var(--space-7); }
.vongfai > section:first-child { padding-top: var(--space-5); }

/* Key art and the pitch */
.vf-hero { display: grid; gap: var(--space-5); align-items: center; }
.vf-hero-art img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.vf-hero-text h1 { margin: 0 0 var(--space-3); }
.vf-hero-text h1 img { width: 100%; max-width: 28rem; height: auto; }
.vf-subtitle { font-family: var(--font-heading); font-size: var(--text-h3); margin: 0 0 var(--space-3); }
.vf-logline { font-size: var(--text-lead); line-height: var(--leading-quote); margin: 0 0 var(--space-3); max-width: 34ch; }
.vf-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0 0; }

/* The story, with art beside it */
.vf-story { display: grid; gap: var(--space-5); align-items: center; }
.vf-story-art { margin: 0; }
.vf-story-art img { width: 100%; height: auto; border-radius: var(--radius); }

/* The family: a roster that scrolls sideways on phones */
.vongfai > .vf-family { padding: var(--space-7) 0; margin-top: var(--space-7); }
.vf-roster { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.vf-roster li { scroll-snap-align: start; }
.vf-roster img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); background: var(--color-bg); }
.vf-roster h3 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-h4); margin: var(--space-3) 0 var(--space-1); }
.vf-roster p { margin: 0; }

/* From the sketchbook: a strip that runs past the page edge */
.vf-sketches .section-head { margin-bottom: var(--space-4); }
.vf-sketches .section-head .meta { margin: 0; }
.vf-strip { list-style: none; margin: 0; padding: 0 var(--gutter) var(--space-3); display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); }
.vf-strip li { flex: none; width: min(75vw, 22rem); scroll-snap-align: start; }
.vf-strip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }

/* The world */
.vf-world dl { margin: var(--space-4) 0 0; display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.vf-world dl div { padding-top: var(--space-3); border-top: var(--border); }
.vf-world dt { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: var(--text-h4); margin-bottom: var(--space-1); }
.vf-world dt span { font-family: var(--font-body); font-weight: var(--weight-body); letter-spacing: 0; color: var(--color-text-muted); }
.vf-world dd { margin: 0; }

/* Who's making it */
.vf-team ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-5); }
.vf-team li { width: 10.5rem; }
.vf-team img { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-2); }
.vf-team p { margin: 0; }
.vf-team-name { font-weight: var(--weight-bold); }

/* The road to Kickstarter */
.vf-road ol { list-style: none; margin: 0; padding: 0; border-top: var(--border); }
.vf-road li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border); }
.vf-road li .meta { width: 9rem; flex: none; }
.vf-now { font-size: var(--text-meta); font-weight: var(--weight-bold); }

/* The book and its preview pages */
.vf-preview { display: grid; gap: var(--space-4); margin: var(--space-5) 0 var(--space-3); }
.vf-preview figure { margin: 0; }
.vf-preview img { width: 100%; height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); }

.vongfai > .vf-follow { padding-bottom: var(--space-7); }
.vf-follow .newsletter { margin-top: var(--space-6); } /* room between the Kickstarter button and the signup */

@media (min-width: 48rem) {
  .vf-hero { grid-template-columns: 5fr 6fr; gap: var(--space-7); }
  .vf-story { grid-template-columns: 3fr 2fr; gap: var(--space-7); }
  .vf-roster { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(var(--size-card), 1fr)); overflow: visible; padding-bottom: 0; }
  .vf-strip { padding-inline: max(var(--gutter), (100vw - var(--width-page)) / 2 + var(--gutter)); scroll-padding-inline: max(var(--gutter), (100vw - var(--width-page)) / 2 + var(--gutter)); }
  .vf-preview { grid-template-columns: 1fr 2fr; align-items: start; }
}