The Policy

What You Are Building

Stage 2 adds The Policy section: four context cards explaining the political, economic, and military forces that shaped federal reservation policy between 1850 and 1887. This is the same card grid pattern you used in Unit 12 for The Act section. You already know how it works. The content is different. The structure is the same.

The four cards cover the forces that made the Reservation System what it was:

• Manifest Destiny: the ideological justification that westward expansion was inevitable and divinely sanctioned, and what that meant for nations already living on the land
• Military enforcement: how the U.S. Army was used to confine nations to reservation boundaries and suppress resistance
• Land pressure: the economic interests, settler demands, and gold rushes that drove repeated reductions of reservation boundaries
• The Peace Policy: President Grant's 1869 policy of assigning reservation administration to religious organizations, and what it actually meant for Tribal sovereignty

Your job is to read about this era and fill in each card with your own research summary. The starter code has placeholder text. Replace it with what you find.

Read First

Spend 10 minutes reading about what drove reservation policy in this era. You are looking for the specific forces, people, and decisions that shaped how reservations were created and administered. What motivated the U.S. government? What did Tribal nations experience?

New CSS: The Policy Section

The code adds two new CSS blocks to your design system: the section wrapper and the policy card grid. Both follow the same pattern you used in Unit 12.

Section wrapper

• padding: 100px 48px: vertical breathing room that keeps sections from feeling cramped against each other. The 100px top/bottom creates a sense of each section being a distinct chapter.
• background: var(--bg-section): --bg-section is #1B263B, Prussian Blue, one step lighter than the Ink Black page background. Alternating between these two values creates visual rhythm without adding any new colors.
• max-width: 1160px; margin: 0 auto: centers the content column and caps its width. This keeps long text lines readable on wide screens. Lines longer than about 75 characters become hard to track.

Section heading and divider

• .section-label: small uppercase eyebrow text in --gold (Lavender Grey). Appears above the section title. Signals to the reader what category of content they are entering before they read the title itself.
• .section-title: uses Playfair Display, the same serif font as the hero headline. Keeps editorial authority consistent throughout the page. clamp() scales the size smoothly between small and large screens.
• .section-divider: a 48px wide, 2px tall horizontal rule in --gold. Creates a visual pause between the heading and the card content below. Short dividers feel deliberate; full-width rules feel mechanical.

Policy card grid

• grid-template-columns: repeat(4, 1fr): four equal columns in a row. repeat(4, 1fr) is shorthand for 1fr 1fr 1fr 1fr. Each card gets exactly one-quarter of the available width.
• gap: 24px: 24 pixels of space between cards in both directions. Enough to visually separate the cards without fragmenting the grid into isolated islands.
• background: var(--bg-card): Ink Black card backgrounds against the Prussian Blue section background. The slight contrast is subtle but creates depth.
• border: 1px solid var(--gold-border): --gold-border is rgba(119, 141, 169, 0.22). A low-opacity border gives the card shape without adding visual noise. If the border were full-opacity, it would compete with the content.

Fill In Your Cards

Find each <!-- REPLACE: ... --> comment in the editor. Each card has a title, an icon, and a paragraph. The paragraph is your research summary. Write 2 to 4 sentences for each card that capture what that force actually was and how it shaped reservation policy.

• Manifest Destiny card: What was it? Where did the idea come from? How was it used to justify reservation confinement?
• Military Enforcement card: How was the U.S. Army used to enforce reservation boundaries? What happened when nations resisted?
• Land Pressure card: What economic interests drove boundary reductions? What role did gold, railroads, and settler demands play?
• The Peace Policy card: What did Grant's 1869 policy actually do? What did it mean for Tribal sovereignty and governance?

Why These Design Choices

You are working with the same alternating section pattern as Unit 12. The hero is Ink Black. The Policy section uses Prussian Blue. The Treaties section in Stage 3 will alternate back. This rhythm of dark and slightly-less-dark creates visual structure that guides the reader through the page without requiring any color outside the design system.

The four-card grid communicates something specific: these four forces operated simultaneously, not in sequence. A numbered list implies steps. A grid implies simultaneous conditions. When the content is parallel and roughly equal in importance, a grid is the right structure.