UNIT 19 • STAGE 2 OF 7
The Building
Introduce scroll-snap and build the five nation-building pillars
New CSS Pattern: Scroll-Snap
Scroll-snap is a pure CSS technique that controls how a container behaves when you scroll through it. Instead of scrolling freely and stopping wherever you let go, a scroll-snap container snaps to the nearest snap point. No JavaScript. No scroll event listeners. Two CSS properties do the entire job.
How scroll-snap is different from what you've built before
In Units 09 and 10, you used JavaScript to show and hide content when users interact with the page. Scroll-snap is different: it changes how the browser handles scrolling itself. You are not writing code that runs when something happens. You are writing CSS that changes the scrolling behavior of the browser. This is a pure CSS interaction pattern, and it is fully supported in all modern browsers.
.pillars-container {
height: calc(100vh - 64px); /* fill viewport minus nav */
overflow-y: scroll; /* this element does the scrolling */
scroll-snap-type: y mandatory; /* NEW: snap on the vertical axis */
}
/* Each PANEL, registers itself as a snap target */
.pillar-panel {
height: 100vh; /* exact viewport height */
scroll-snap-align: start; /* NEW: top edge snaps to top of container */
}
Why These Values
scroll-snap-type: y mandatory, y means snap on the vertical axis (scrolling up and down). mandatory means the container always snaps to the nearest snap point. If you use proximity instead, snapping only happens when you stop close to a snap point. Mandatory is stronger: you can never stop mid-panel.overflow-y: scroll, the container itself handles the scrolling. This is what makes scroll-snap work: the scrolling element must have overflow set, and it must have a defined height so the browser knows what "100vh" means inside it.height: 100vhon each panel, each panel is exactly the height of the viewport. When the top of a panel snaps to the top of the container, the full panel fills the screen. If panels were shorter, two panels would be visible at once and snapping would look wrong.scroll-snap-align: start, the start edge of this panel aligns with the start (top) edge of the scroll container when snapping. You could use center or end instead, but start produces the cleanest full-panel behavior here.
The Five Nation-Building Pillars
The Building section documents five dimensions of what Tribal nations have been building since 1995. Each pillar gets its own full-screen snap panel. The research framework from Rebuilding Native Nations (Harvard Project, 2007) organizes the content: sovereignty in practice across governance, economy, land, language, and justice.
Pillar 1, Governance & Constitutions
Many Tribal nations rewrote or significantly revised their constitutions during this era. The constitutions established under the Indian Reorganization Act were often drafted by BIA staff and modeled on U.S. corporate bylaws. Nations replaced them with governance documents that reflected their own legal traditions, separated political leadership from administrative functions, and established independent courts. The Harvard Project's key finding: governance structures that match the nation's own cultural values produce measurably better outcomes than structures imposed from outside.
Pillar 2, Economic Development
Gaming compacts proliferated after IGRA (1988) and the Cabazon ruling from Unit 17. By the 2000s, Tribal gaming was generating over $25 billion annually. Gaming is one part of a larger picture: Tribally owned enterprises, Native Community Development Financial Institutions, and Tribally chartered banks. The Harvard Project found that economic development succeeds when it is subordinated to Tribal governance rather than driving it. Tribal governments that kept politics and business administration separate built more durable economies.
Pillar 3, Land Recovery
The Dawes Act (1887) reduced the Tribal land base from 138 million acres to 48 million over 47 years. Recovery is deliberate: strategic land purchases, conservation easements, and the Indian Land Buy-Back Program funded at $1.9 billion from the Cobell Settlement. The Buy-Back Program targets fractional interests created by allotment-era inheritance. For many nations, land recovery is not just economic. It is cultural and spiritual continuity.
Pillar 4, Language & Culture
Dozens of Indigenous languages in the United States were critically endangered by the 1990s, with only elderly speakers remaining. Tribal nations responded with immersion schools, language nests for young children, and master-apprentice programs pairing fluent elders with learners. Language is sovereignty: what a people call themselves and their land in their own language is not recoverable from any federal program. Nations that have sustained or revitalized their languages have done so through deliberate, funded, sovereign decision-making.
Pillar 5, Justice Systems
Tribal courts have expanded their jurisdiction and capacity throughout this era. The Tribal Law and Order Act (2010) increased Tribal sentencing authority. VAWA 2013's Tribal provisions gave Tribes criminal jurisdiction over non-Indian perpetrators of domestic violence on Tribal lands. Many nations have also expanded Tribal peacemaking courts, which apply Indigenous legal traditions alongside contemporary court administration. The result is a justice system that is both sovereign and culturally grounded.
Build the Section
Add the .pillars-container inside the #the-building section stub. Then add five .pillar-panel divs inside the container, one for each pillar. Each panel needs a pillar number, label, title, body paragraph, and example tags.
The section background uses alternating --bg-main and --bg-section via :nth-child(odd) and :nth-child(even). This creates visual rhythm between panels as you scroll through them.
Stage 2 Complete!
Scroll-snap is built and all five nation-building pillars are in place. Try scrolling through the preview. Stage 3 adds The Laws section: VAWA 2013, the Tribal Law and Order Act, UNDRIP, and the HEARTH Act, presented as a law-card grid matching the design system from Unit 17's legislation section.
© 2026 Relentless Feather. All rights reserved.