/* Extends styles.css tokens for the notes / course-concept pages */

.notes-hero{
  max-width: 680px;
  margin: 0 auto;
  padding: 12vh 6vw 8vh;
  text-align: center;
}
.notes-hero h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 26px;
}
.notes-hero-sub{
  color: var(--umber-soft);
  max-width: 52ch;
  margin: 0 auto;
}

.notes-index{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 6vw 14vh;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.note-card{
  display: block;
  text-decoration: none;
  color: var(--umber);
  border: 1px solid var(--line);
  padding: 32px;
  transition: border-color 0.15s ease;
}
.note-card:hover{ border-color: var(--clay); }
.note-card-eyebrow{
  font-style: italic;
  font-size: 0.85rem;
  color: var(--clay);
}
.note-card h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 10px 0 12px;
}
.note-card p{
  color: var(--umber-soft);
  margin: 0 0 16px;
  max-width: 60ch;
}
.note-card-link{
  font-style: italic;
  font-size: 0.92rem;
  color: var(--umber);
}

/* =========================================================
   NOTE PAGE LAYOUT
   ========================================================= */
.note-breadcrumb{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 6vw 0;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--umber-soft);
}
.note-breadcrumb a{ text-decoration: none; color: var(--umber-soft); border-bottom: 1px solid transparent; }
.note-breadcrumb a:hover{ color: var(--clay); border-color: var(--clay); }

.note-hero{
  max-width: 680px;
  margin: 0 auto;
  padding: 6vh 6vw 8vh;
  text-align: center;
}
.note-hero h1{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  margin: 0 0 20px;
}
.note-hero-sub{
  color: var(--umber-soft);
  max-width: 54ch;
  margin: 0 auto;
}

.note-section{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 7vh 6vw;
  border-top: 1px solid var(--line);
}
.note-section h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 8px;
}
.note-section-intro{
  color: var(--umber-soft);
  margin: 0 0 40px;
  max-width: 60ch;
}

/* Term cards — for biases, effects, definitions */
.term-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}
.term{
  border-left: 2px solid var(--clay);
  padding-left: 18px;
}
.term h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 8px;
}
.term p{
  color: var(--umber-soft);
  font-size: 0.95rem;
  margin: 0;
}
.term ul{
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--umber-soft);
  font-size: 0.92rem;
}
.term ul li{ margin-bottom: 4px; }

/* Equation cards */
.eq-grid{
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.eq-card{
  background: var(--sand-alt);
  padding: 26px 30px;
}
.eq-card h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 14px;
}
.eq-card .katex-display{ margin: 8px 0; overflow-x: auto; }
.eq-card p{
  color: var(--umber-soft);
  font-size: 0.92rem;
  margin: 12px 0 0;
}

/* Diagram containers */
.diagram-wrap{
  margin: 0 0 20px;
  display: flex;
  justify-content: center;
}
.diagram-wrap svg{ max-width: 100%; height: auto; }
.diagram-caption{
  text-align: center;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--umber-soft);
  margin: 0 0 40px;
}

/* Quotes */
.quote-list{
  display: flex;
  flex-direction: column;
  gap: 26px;
}
blockquote.note-quote{
  margin: 0;
  padding-left: 22px;
  border-left: 2px solid var(--line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--umber);
}
blockquote.note-quote cite{
  display: block;
  margin-top: 8px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--umber-soft);
}

.note-footer-nav{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 6vh 6vw 12vh;
  text-align: center;
}
.note-footer-nav a{
  text-decoration: none;
  font-style: italic;
  color: var(--umber-soft);
  border-bottom: 1px solid var(--clay);
}
.note-footer-nav a:hover{ color: var(--clay); }