/* Early U.S. History Native Cultures Presentation. Page-specific layout -
   reuses design tokens, fonts, and primitives from shared.css rather than
   inventing a parallel set. */

/* ---- Long-form reading pages (source excerpts) ----
   These stay a single paper sheet, not a scatter of pinned cards - a
   multi-paragraph reading is meant to be read start to finish, and
   torn, tilted cards would fight that instead of helping it. */
.resource-page {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 6rem auto 3rem;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 3px 8px var(--shadow-panel);
  padding: 2.25rem 2.5rem 2.5rem;
}

.back-link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-link);
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.back-link:hover { text-decoration: underline; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.resource-page h1, .board-panel h1 {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.1;
  margin: 0.2rem 0 0.6rem;
  color: var(--ink);
}

.page-subtitle {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 0.2rem;
}

/* Source excerpt pages: a curated pre-contact excerpt of one section of a
   larger external page, so a resource link lands students on exactly the
   assigned material instead of a multi-topic hub page (which may also
   contain later, post-contact history the assignment asks them to skip). */
.source-text h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--ink);
}
.source-text h2:first-child { margin-top: 0; }
.source-text p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1rem;
}
.source-text ol {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.source-citation {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
  border-top: 1px solid var(--border-soft);
  margin-top: 1.75rem;
  padding-top: 1rem;
}
.source-citation a { color: var(--ink-link); font-style: normal; }

/* ---- Leveled reading pages ----
   A leveled reading is the source text rewritten at a lower reading level
   (about 800L), pulled onto this site with credit. Two extras sit on top
   of the plain .source-text excerpt layout above:

   1. .original-link - the external link to the original page goes at the
      TOP of the reading, with a reminder that photos, maps, and other
      images live only on the original page.
   2. Word Help cards - each paragraph that still has hard words gets a
      .reading-row wrapper holding its pinned .word-card definitions
      (.word-cards) followed by the paragraph. On wide screens the cards
      are floated out of the paper sheet into the corkboard margin,
      alternating right / left like loose notes. The float's margins are
      set so it takes up zero width in the text flow and - because it is a
      float - no height either: the paragraphs keep their normal spacing
      no matter how many definitions sit beside them. `clear` stacks a new
      group of cards below the previous group on the same side, so cards
      never overlap; since the sides alternate, a group normally has two
      paragraphs' worth of room before the next one lands on its side. The
      cards come first in the DOM so each group lines up with the top of
      its own paragraph. Below 1200px there is no margin room, so the row
      becomes a column and the cards wrap in a strip under the paragraph. */
.reading-page {
  --paper-pad: 2.5rem;
  --card-w: 205px;
  --card-gap: 20px;
  max-width: 720px;
}

.original-link {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-flat);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--ink-link);
  border-radius: 3px;
  padding: 0.75rem 1rem 0.85rem;
  margin: 1.1rem 0 1.4rem;
}
.original-link .original-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}
.original-link a { color: var(--ink-link); font-weight: 700; }
.original-link p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}
.original-link p + p { margin-top: 0.3rem; }

.reading-tip {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

.source-text h2 { scroll-margin-top: 6rem; }

.vocab {
  border-bottom: 2px dotted var(--ink-link);
  padding-bottom: 1px;
}

.reading-row { margin: 0 0 1rem; }
.reading-row > p { margin: 0; }

.word-cards {
  float: right;
  clear: right;
  width: var(--card-w);
  margin: 0 calc(-1 * (var(--paper-pad) + var(--card-gap) + var(--card-w))) 0 calc(var(--paper-pad) + var(--card-gap));
}
.reading-row.left > .word-cards {
  float: left;
  clear: left;
  margin: 0 calc(var(--paper-pad) + var(--card-gap)) 0 calc(-1 * (var(--paper-pad) + var(--card-gap) + var(--card-w)));
}
.word-card {
  width: 100%;
  margin: 0 0 0.65rem;
}
.word-card .board-panel {
  padding: 0.65rem 0.8rem 0.72rem;
  user-select: text;
}
.word-card .word-term {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.25;
  margin: 0 0 0.15rem;
  color: var(--ink);
}
.word-card .word-pos {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  margin-left: 0.25rem;
}
.word-card p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}

@media (max-width: 1200px) {
  .reading-row { display: flex; flex-direction: column; }
  .reading-row > .word-cards,
  .reading-row.left > .word-cards {
    order: 2;
    float: none;
    clear: none;
    width: auto;
    margin: 0.9rem 0 0.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
  }
  .word-card {
    width: auto;
    flex: 1 1 190px;
    max-width: 300px;
    margin: 0;
  }
}

/* ---- Pinned board-card system ----
   Index and region-overview pages drop the single paper-sheet layout
   entirely: every piece of content - the title, the callout, the "start
   here" box, each region/category - is pinned straight to the corkboard
   as its own card, the way notes and sources actually sit on a board.
   Base .board-card/.board-pin/.board-panel/.board-page/.card-grid/
   .link-card primitives live in site.css (it loads on every page,
   including the homepage, which uses this same card system for its
   resource list); what follows here is this page family's specific
   card variants. */

.title-card { max-width: 620px; margin: 0 auto 2rem; }
.title-card .board-panel { padding: 1.65rem 1.9rem 1.85rem; }

.callout-card { max-width: 560px; margin: 0 auto 2rem; }
.callout-card .board-panel {
  padding: 0.9rem 1.15rem;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

.start-card { max-width: 460px; margin: 0 auto 2rem; }
.start-card .board-panel { padding: 1.1rem 1.3rem 1.3rem; text-align: center; }
.start-card h2 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
.start-card p {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 0.8rem;
}

/* .region-grid/.region-card are the same shape as site.css's generic
   .card-grid/.link-card (region cards use both sets of classes, so they
   pick up that shared styling) - kept as distinct names here only
   because "region" is more specific than "link-card" for anything
   region-page-only (e.g. the media query below). */
.region-grid, .grapes-grid, .resource-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.9rem 1.6rem;
  margin: 0 auto;
  padding: 0.5rem 0 1rem;
}

.grapes-card .board-panel { overflow: hidden; }

.grapes-card-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  border-left: 4px solid var(--type-c, var(--type-fallback));
}
.grapes-card-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  margin: 0;
  color: var(--type-ink-c, var(--type-fallback-ink));
}

.grapes-card-body {
  padding: 0.2rem 1rem 0.85rem;
  border-left: 4px solid var(--type-c, var(--type-fallback));
  user-select: text;
}

.resource {
  padding: 0.6rem 0 0.65rem;
  border-top: 1px solid var(--border-soft);
}
.resource:first-child { border-top: 0; }
.resource a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-link);
}
.resource p {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
}

/* Flat resource-list cards: one external link per card (title, sourcing
   org, and a short description), no GRAPES/region grouping - used by
   pages that are just a curated reading list rather than a categorized
   library. Text stays selectable (unlike the default board-panel) since
   the description is real content, not a board label. Colored left-edge
   accent works the same way as .grapes-card-head/-body above: the color
   lives on an inner div (.resource-list-body), not the deckle-clipped
   .board-panel itself, so the straight border isn't cut up by the torn
   edge. Panel padding moves to that inner div for the same reason. */
.resource-list-card .board-panel {
  padding: 0;
  overflow: hidden;
  user-select: text;
}

.resource-list-body {
  padding: 1.05rem 1.3rem 1.3rem 1.15rem;
  border-left: 4px solid var(--type-c, var(--type-fallback));
}

.resource-list-title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.3;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
.resource-list-title a {
  color: var(--ink-link);
}

.resource-list-source {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.55rem;
}

.resource-list-desc {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

.resource-list-note {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink-soft);
  border-top: 1px solid var(--border-soft);
  margin: 0.65rem 0 0;
  padding-top: 0.55rem;
}

/* ---- Board spread: main column flanked by fun-fact sidebars ----
   Some resource-library pages want small "did you know" notes pinned in
   the margins alongside the main content, the way loose notes collect
   around the edge of a real corkboard, rather than folded into the
   graded resource list itself. .board-spread replaces .board-page as
   the page's outer wrapper (same job clearing the fixed #app-title,
   just three columns instead of one) - .board-spread-main holds
   everything .board-page normally would (title-card, resource grid,
   etc.), while the two fact columns hold a stack of .fact-card notes.
   DOM order keeps the main column first (a screen reader or keyboard
   user should hit the actual resources before sidebar trivia); grid-
   template-areas is what puts it visually in the middle. Below 1180px
   there isn't room for real margins, so it collapses to one column with
   the fact notes as a wrapping row above/below the main content. */
.board-spread {
  display: grid;
  grid-template-columns: 1fr min(960px, 100%) 1fr;
  grid-template-areas: "facts-left main facts-right";
  column-gap: 1.75rem;
  max-width: 1500px;
  margin: 7rem auto 3rem;
  padding: 0 1.5rem;
  align-items: start;
}
.board-spread-main { grid-area: main; min-width: 0; }
.board-spread-facts-left { grid-area: facts-left; }
.board-spread-facts-right { grid-area: facts-right; }
.board-spread-facts-left, .board-spread-facts-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem 0 1rem;
}

.fact-card .board-panel {
  padding: 0.85rem 1.05rem 1.05rem;
  user-select: text;
}
.fact-card h2 {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.3;
  margin: 0 0 0.35rem;
  color: var(--ink);
}
.fact-card p {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.fact-card .fact-source {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-top: 0.45rem;
}

@media (max-width: 1180px) {
  .board-spread {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "facts-left" "facts-right";
    max-width: 960px;
  }
  .board-spread-facts-left, .board-spread-facts-right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .board-spread-facts-left .fact-card, .board-spread-facts-right .fact-card {
    flex: 1 1 240px;
    max-width: 320px;
  }
}

@media (max-width: 720px) {
  .resource-page { margin: 5rem 1rem 2rem; padding: 1.5rem 1.25rem; }
  .resource-page h1, .board-panel h1 { font-size: 1.7rem; }
  .region-grid, .grapes-grid, .resource-list-grid { grid-template-columns: 1fr; }
  .board-spread { margin: 6rem auto 2rem; padding: 0 1rem; }
}