.interior-page {
  padding: 8rem 1.25rem;
  margin: 3rem auto;
  background-color: #fff;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 15px 0px;
}
@media(min-width:768px) {
  .interior-page {
    padding: 1.5rem 1.25rem;
  }
}
h2, h3, h4, h5 {
  color: var(--color-navy-500);
}
.interior-page .page-title {
  color: var(--brand-primary);
  font-family: var(--font-poetsen);
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 3rem;
}
.interior-page h2 {
  color: var(--brand-primary);
  font-family: var(--font-poetsen);
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
  margin-top: 1rem;
}
.interior-page h3 {
  color: var(--brand-primary);
  font-family: var(--font-poetsen);
  font-size: 1.75rem;
  margin-bottom: 2rem;
  margin-top: 4rem;
}
.interior-page p {
  margin-top: 0;
  margin-bottom: 1rem;
}
.interior-page li {
  padding: .5rem 0;
}
.interior-page li::marker {
  color: #39b44a;
}
.interior-page p a {
  color: var(--brand-accent);
  text-decoration: none;
  border-bottom: 1px dotted #0b8116;
  font-weight: 500;
}
.interior-page a {
  color: #0b8116;
  text-decoration: none;
  border-bottom: 1px dotted #0b8116;
  font-weight: 600;
}
.interior-page a:hover, .interior-page a:focus-visible {
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
.interior-page strong {
  color: var(--color-navy-500);
  font-weight: 700;
}
img.float-end, img.float-start {
  margin: 2rem auto;
  display: block;
}
.shadowpic {
  box-shadow: 3px 3px 0 #fff, 10px 10px 0 rgba(93, 167, 90, 0.2);
  border-radius: 0.375rem;
}
@media(min-width:768px) {
  .interior-page {
    padding: 3rem 2.5rem 3rem;
    max-width: 720px;
  }
}
@media(min-width:992px) {
  img.float-end {
    margin: 0 0 2rem 1.5rem;
    float: right !important;
  }
  img.float-start {
    margin: 0 1.5rem 2rem 0;
    float: left !important;
  }
  .interior-page {
    padding: 3rem 2.5rem 3rem;
    max-width: 920px;
  }
}
@media(min-width:1180px) {
  .interior-page {
    max-width: 1140px;
  }
}
@media(min-width:1180px) {
  .interior-page {
    max-width: 1320px;
  }
}
.blockquote {
  margin: 1.5rem 0;
  border-left: 5px solid rgb(11, 129, 22);
  padding: 10px 20px;
  color: rgb(6, 97, 14);
  font-size: 1.25rem;
  line-height: 1.5;
}
hr {
  width: 85%;
  margin: 3rem auto;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--color-gray-200), var(--color-gray-300), var(--color-gray-200));
}
.team {
  display: flex;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 2rem .5rem;
  border-radius: 10px;
  background-color: #fff;
  margin: 1rem 0;
  flex-direction: column;
  align-items: center;
}
.team .pic {
  overflow: hidden;
  width: 180px;
  border-radius: 50%;
  margin: 0 auto 2rem;
}
.team .team-info {
  padding-left: 30px;
}
.team-info h3 {
  margin: 0;
  font-size: 1.25rem;
}
.team p {
  margin: .25rem 0;
  font-size: .9rem;
  line-height: 1.4;
}
.team a {
  text-decoration: none;
  margin-top: .5rem;
  display: block;
  border: none;
}
@media (min-width:768px) {
  .team .pic {
    margin: 0 0 1.5rem;
    width: 150px;
  }
}
@media (min-width:992px) {
  .team {
    padding: 2rem;
    flex-direction: row;
  }
}
@media (min-width:1180px) {
  .team {
    padding: 2rem .75rem;
  }
  .team .team-info {
    padding-left: 1rem;
  }
}
.lessons-grid {
  display: grid;
  justify-content: center;
  align-items: stretch;
  gap: 2rem 1.5rem;
  margin: 3rem auto;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(325px, 100%), 1fr));
  max-width: 1200px;
}
.card--lesson {
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 3px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1)
}
.card--lesson a {
  text-decoration: none;
  border-bottom: none;
}
.card--lesson .image {
  position: relative;
  overflow: hidden;
}
.card--lesson .image img {
  transition: transform .4s ease-in-out;
}
.card--lesson:hover img {
  transform: scale(1.1);
}
.card--lesson .card-body {
  padding: 1rem;
  border-bottom-right-radius: .25rem;
  border-bottom-left-radius: .25rem;
  min-height: 100px;
}
.card--lesson .card-title {
  font-size: 1.4rem;
  margin: 0 0 .25rem 0 !important;
  padding: 0 !important;
  text-transform: uppercase;
  line-height: 1;
}
.card--lesson .card-body p {
  font-size: 1rem;
  line-height: 1.4;
}
.alert-info {
  color: #003D66;
  background-color: #F0F9FF;
  border: 1px solid #CCEBFF;
  font-weight: 500;
  margin: 2rem auto;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  font-size: .9em;
}
.alert-warning {
  color: var(--color-yellow-600);
  background-color: var(--color-yellow-100);
  border: 1px solid var(--color-yellow-300);
  font-weight: 500;
  margin: 2rem auto;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  font-size: .9em;
}
.alert-warning strong {
  color: var(--color-yellow-700);
}
.alert-warning a {
  color: #0b8116;
  text-decoration: none;
  border-bottom: 1px dotted #0b8116;
  font-weight: 600;
}
.alert-warning a:hover, .alert-warning a:focus-visible {
  color: #0b8116;
  border-bottom: 1px solid #0b8116;
}
.kit-card {
  border-bottom: 1px solid var(--color-navy-100);
  margin: 2rem 0;
  display: inline-flex;
  padding-bottom: 4rem;
  font-size: 1.1rem;
}
.kit-card:last-of-type {
  border-bottom: none;
}
.kit-card h3 {
  font-size: 1.75rem;
  margin-bottom: .5rem;
  margin-top: 0;
}
.kit-card li {
  padding: .25rem 0;
}
/* =============================================================
   STANDARDS ACCORDION
   Drives off .accordion / .accordion-item / .accordion-trigger /
   .accordion-body, which is what initAccordion() in base.js
   looks for. One panel open at a time; base.js toggles the
   .is-open class on .accordion-item and animates height via an
   inline max-height it sets on .accordion-body.

   IMPORTANT: don't put vertical padding directly on
   .accordion-body. With max-height:0 + overflow:hidden, top/
   bottom padding still renders as empty space even while the
   content is clipped, so a "collapsed" panel would show a gap.
   The .accordion-content div is what carries the padding —
   .accordion-body stays padding-free and is only responsible
   for the collapse/expand animation.
============================================================= */
.sw-accordion {
  margin: 2rem 0;
}
.sw-accordion .accordion-item {
  margin-bottom: .75rem;
  border: 1px solid #fff;
  border-radius: 6px;
  overflow: hidden;
}
.sw-accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.sw-accordion .accordion-header {
  margin: 0;
}
.sw-accordion .accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: var(--font-weight-semibold);
  color: #003351;
  background-color: #EBF7FF;
  padding: 1.75rem 1.5rem;
  transition: background-color .2s ease, color .2s ease;
}
.sw-accordion .accordion-trigger svg {
  transition: transform .2s ease-in-out;
  width: .8em;
  height: .8em;
}
.sw-accordion .accordion-item.is-open .accordion-trigger {
  color: #fff;
  background-color: #00456e;
}
.sw-accordion .accordion-item.is-open .accordion-trigger svg {
  transform: rotate(180deg);
}
.sw-accordion .accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.sw-accordion .accordion-content {
  padding: 1.5rem;
}
.sw-accordion h4 {
  font-size: 1.25rem;
  margin-top: 3rem;
  margin-bottom: 1.25rem;
}
.contact-aside {
  color: #156174;
  background-color: #DFF4FB;
}
.contact-aside strong {
  color: #156174;
}
.accordion-body .shadowpic {
  box-shadow: 3px 3px 0 #fff, 10px 10px 0 rgba(157, 222, 232, 0.2);
}
/* =============================================================
   CONTACT PAGE — pulled from forms.css and trimmed down to just
   what contact.php uses. The rest of that file (calendar widget,
   visit-scheduling components, multi-step form nav, etc.) is
   from the other site and doesn't apply here, so it's left out.

   Also fixed a handful of CSS variables that don't exist in this
   project's global.css — they were carried over from the other
   site's token names:
     var(--font-opensans)  -> var(--font-body)
     var(--color-gray)     -> var(--color-gray-500)
     var(--color-gray-25)  -> var(--color-gray-100)
============================================================= */
.form .row {
  row-gap: 0;
}
.form-group {
  margin-bottom: 1.25rem;
}
.required-note {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  font-style: italic;
  margin-bottom: 1.5rem;
}
.required-note .req-marker {
  color: var(--color-navy-700);
  font-style: normal;
  font-weight: 600;
}
.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy-700);
  margin-bottom: 0.35rem;
  line-height: 1.4;
}
.form-group label .req {
  color: var(--color-navy-700);
  margin-right: 0.1em;
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-navy-800);
  background-color: var(--color-white);
  border: 1px solid #b0bec5;
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.form-control::placeholder {
  color: #adb5bd;
  opacity: 1;
}
.form-control:hover {
  border-color: var(--color-teal-700);
}
.form-control:focus {
  outline: none;
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 3px rgba(0, 145, 185, 0.2);
}
textarea.form-control {
  resize: vertical;
  min-height: 160px;
}
/* Invalid state — border highlight only. The "what's wrong" text
   lives in the .form-errors summary at the top of the form. */
.form-control.is-invalid {
  border-color: #c0392b;
  box-shadow: none;
}
.form-control.is-invalid:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
/* Server-side error summary block */
.form-errors {
  background-color: #FCE9EA;
  border: 1px solid #F7D4D4;
  border-left: 5px solid #B10F2E;
  border-radius: 4px;
  padding: 1.5rem 1.25rem 2rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #58151c;
}
.form-errors p {
  font-weight: 600;
  color: #58151c;
  margin-bottom: 0.5rem;
}
.form-errors ul {
  margin: 0;
  padding-left: 1.25rem;
}
.form-errors ul li {
  margin-bottom: 0.25rem;
  padding: 0;
}
/* Inline alert — used for the "message failed to send" state */
.alert {
  padding: 0.85rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
  border: 1px solid transparent;
}
.alert--warning {
  background-color: #fdf3f2;
  border-color: #c0392b;
  color: var(--color-navy-800);
}
.alert strong {
  font-weight: 600;
}
/* Submit success state — replaces the form after send() succeeds */
.form-success {
  background-color: var(--color-navy-100);
  border: 1px solid var(--color-navy-300);
  border-radius: 4px;
  padding: 1.5rem;
}
.form-success h2 {
  margin-top: 0;
  font-size: 1.5rem;
  color: var(--brand-primary);
}
.form-success p:last-child {
  margin-bottom: 0;
}
.btn-submit {
  margin-top: 1rem;
}
/* =============================================================
   CONTACT ASIDE
   Two info blocks (Nanette / Bill). Color/background were
   already in main.css — this fills in the box treatment that
   used to come from Bootstrap's p-4 / rounded-3 utilities.
============================================================= */
.contact-aside {
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  border-radius: 0.75rem;
}
.contact-aside:last-child {
  margin-bottom: 0;
}
.contact-aside p {
  margin: 0;
}
.contact-aside a {
  color: #107293 !important;
  border-bottom-color: #107293 !important;
}
.contact-aside a:hover, .contact-aside a:focus-visible {
  border-bottom-style: dashed;
}
.lesson-aside {
  padding: 2rem 1rem;
  border-radius: 10px;
  background-color: #d8ecdb;
  padding: 2rem 1rem;
  margin: 0 0 3rem 3rem;
}
.btn--lesson-aside {
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 32px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background-color: #5da75a;
}
.btn--lesson-aside:hover, .btn--lesson-aside:active, .btn--lesson-aside:focus-visible {
  background: #fff;
  color: #477E44;
  border-color: #5da75a;
}
/* =============================================================
   MODAL — native <dialog>
   showModal() gives us the backdrop, focus trap, and Escape-to-
   close for free. This just handles the visual side.
============================================================= */
dialog.modal {
  width: min(90vw, 800px);
  max-height: 85vh;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  overflow: auto;
}
dialog.modal::backdrop {
  background: rgba(0, 30, 50, 0.55);
}
.modal-body img {
  margin-bottom: 3rem;
}
.modal-body .btn-green {
  width: auto;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-gray-200);
}
.modal-header h2 {
  margin: 0;
  font-size: 1.4rem;
  color: var(--brand-primary);
}
.modal-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-gray-600);
  cursor: pointer;
}
.modal-close:hover, .modal-close:focus-visible {
  color: var(--brand-primary);
}
.modal-body {
  padding: 1.5rem;
}
.modal-body li {
  padding: .35rem 0;
}
.modal-body li::marker {
  color: #39b44a;
}
.modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  text-align: right;
}
/* Inline text-style trigger — e.g. the "Lesson 2 Kit" link
   sitting mid-sentence in the Materials paragraph. Looks like
   the existing .interior-page a links, but it's a <button>
   under the hood since it opens a dialog, not a page. */
.modal-trigger-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--brand-accent);
  border-bottom: 1px dotted var(--brand-accent);
  cursor: pointer;
}
.modal-trigger-link:hover, .modal-trigger-link:focus-visible {
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary-dark);
}
/* Neutral outline button — used for the modal's "Close" action.
   Not tied to modals specifically, reusable anywhere a low-
   emphasis button is needed next to a primary one. */
.btn-outline {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background-color: transparent;
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-400);
  border-radius: 4px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover, .btn-outline:focus-visible {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-600);
}
/* =============================================================
   LESSON ASIDE
   Kit image + stacked action buttons, floated right within the
   reading column so body text wraps below it once you scroll
   past its height — same floated-box idea as img.float-end,
   just for a whole component instead of a single image.
============================================================= */
.lesson-aside {
  margin: 0 0 2rem;
}
.lesson-aside img {
  display: block;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.25rem;
}
.lesson-aside-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lesson-aside-actions .btn-blue {
  margin: 0;
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.95rem;
  background-color: #26547C;
  border-color: #244F75;
  color: #ffffff!important;
}
.lesson-aside-actions .btn-blue:hover, .lesson-aside-actions .btn-blue:focus-visible {
  background-color: #549852;
  border-color: #4E8B4B;
  color: #fff;
}
@media (min-width: 1180px) {
  .lesson-aside {
    float: right;
    width: 33.33333333%;
    margin: 0 0 1.5rem 2rem;
  }
}
/* =============================================================
   SALTY STREAMS LESSON PAGES
   Add these rules to main.css, after the existing lesson-aside
   block (around line 584).
============================================================= */
/* ----- Learning Objectives: STEELS standards tag ----------- */
/* Each <li> in .objectives-list gets the objective text on top
   and the STEELS badge tucked below it, clearly separated from
   the objective text so it reads as metadata, not body copy.  */
.objectives-list li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.steels-standards {
  display: inline-block;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #00456e;
  background-color: #EBF7FF;
  border: 1px solid #b8dff5;
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  /* Keeps the badge from stretching full width */
  align-self: flex-start;
}
/* ----- Lesson quote / blockquote --------------------------- */
/* Used for the anchoring phenomenon statement in Activity 1.
   Named .lesson-quote so it's specific and doesn't collide
   with any generic blockquote reset you may add later.        */
blockquote.lesson-quote {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  border-left: 4px solid var(--brand-primary, #39b44a);
  background-color: #f4fbf4;
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1a3a1a;
  font-style: italic;
}
blockquote.lesson-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.825rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-navy-500, #003351);
  letter-spacing: 0.02em;
}
/* ----- Materials: sub-heading before a <ul> ---------------- */
/* The pattern in Salty Streams is:
     <p><strong>Hintz et al. (2022) Data Figure Sets</strong> – description</p>
     <ul>…</ul>
   The strong paragraph acts as a visual sub-heading. Adding a
   small top gap when a <p> ending in <strong> precedes a <ul>
   isn't reliable cross-browser, so instead we give the
   .materials-subhead class to those <p> tags in the markup.   */
.materials-subhead {
  margin-top: 1.5rem;
  margin-bottom: 0.35rem; /* tighten gap to the <ul> below */
}
/* Tighten the gap between a plain <p> label and its <ul> when
   the <p> contains only a <strong> (the "Activity 1:" pattern).
   This targets paragraphs that immediately precede a <ul>
   inside .interior-page — works in all modern browsers.       */
.interior-page p:has(> strong:only-child) + ul, .interior-page p:has(> strong) + ul {
  margin-top: 0.25rem;
}
/* =============================================================
   SALTY STREAMS LESSON PAGES
   Add these rules to main.css, after the existing lesson-aside
   block (around line 584).
============================================================= */
/* ----- Learning Objectives: STEELS standards tag ----------- */
/* Each <li> in .objectives-list gets the objective text on top
   and the STEELS badge tucked below it, clearly separated from
   the objective text so it reads as metadata, not body copy.  */
.objectives-list li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.steels-standards {
  display: inline-block;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #00456e;
  background-color: #EBF7FF;
  border: 1px solid #b8dff5;
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  /* Keeps the badge from stretching full width */
  align-self: flex-start;
}
/* ----- Lesson quote / blockquote --------------------------- */
/* Used for the anchoring phenomenon statement in Activity 1.
   Named .lesson-quote so it's specific and doesn't collide
   with any generic blockquote reset you may add later.        */
blockquote.lesson-quote {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  border-left: 4px solid var(--brand-primary, #39b44a);
  background-color: #f4fbf4;
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1a3a1a;
  font-style: italic;
}
blockquote.lesson-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.825rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-navy-500, #003351);
  letter-spacing: 0.02em;
}
/* ----- Materials: sub-heading before a <ul> ---------------- */
/* The pattern in Salty Streams is:
     <p><strong>Hintz et al. (2022) Data Figure Sets</strong> – description</p>
     <ul>…</ul>
   The strong paragraph acts as a visual sub-heading. Adding a
   small top gap when a <p> ending in <strong> precedes a <ul>
   isn't reliable cross-browser, so instead we give the
   .materials-subhead class to those <p> tags in the markup.   */
.materials-subhead {
  margin-top: 1.5rem;
  margin-bottom: 0.35rem; /* tighten gap to the <ul> below */
}
/* Tighten the gap between a plain <p> label and its <ul> when
   the <p> contains only a <strong> (the "Activity 1:" pattern).
   This targets paragraphs that immediately precede a <ul>
   inside .interior-page — works in all modern browsers.       */
.interior-page p:has(> strong:only-child) + ul, .interior-page p:has(> strong) + ul {
  margin-top: 0.25rem;
}
/* ----- Definition box -------------------------------------- */
/* Used for key vocabulary introduced in the overview, e.g.
   the watershed definition in Lesson 2. Teal/navy palette to
   distinguish it from the blue .alert-info callout.          */
.definition-box {
  margin: 1.75rem 0;
  padding: 1.1rem 1.5rem;
  background-color: #f0fbfc;
  border: 1px solid #b0e4ec;
  border-left: 4px solid var(--color-teal-500, #0091b9);
  border-radius: 0 6px 6px 0;
}
.definition-box p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #0d3d47;
}
.definition-box strong {
  color: #0d3d47;
}
/* ----- Driving question ------------------------------------ */
/* Bold label + italic question, sits at the top of an
   activity accordion panel. Subtle tint, no heavy border —
   it should feel like a prompt, not an alert.                */
.driving-question {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
  background-color: #fafdf5;
  border-left: 3px solid var(--brand-primary, #39b44a);
  border-radius: 0 4px 4px 0;
  font-size: 0.95rem;
}
/* ----- Assessment questions list -------------------------- */
/* Open-ended questions with a bold stem and an italic prompt
   on a second line. Using a list so screen readers get the
   proper enumeration, but styled to read as question blocks. */
.assessment-questions {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}
.assessment-questions li {
  padding: 1.1rem 1.25rem !important;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.assessment-questions li p {
  margin: 0.4rem 0 0;
}
.assessment-questions li::marker {
  content: none;
}
/* ----- No-kit lesson aside --------------------------------- */
/* When a lesson has no physical kit (Lesson 2), the aside
   has no image — just the action buttons. Remove the top
   padding gap that the image normally fills.                 */
.lesson-aside--no-kit {
  padding-top: 0;
}
/* ----- Lab prep box ---------------------------------------- */
/* Teacher-facing preparation block inside an accordion panel.
   Amber/yellow palette distinguishes it from student-facing
   callouts. Contains a data table and mixing instructions.    */
.lab-prep {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background-color: #fffbeb;
  border: 1px solid #f5d87a;
  border-left: 4px solid #d4a017;
  border-radius: 0 6px 6px 0;
}
.lab-prep h4 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem;
  color: #7a4f00;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lab-prep p {
  margin-bottom: 0.75rem;
  font-size: 0.925rem;
  color: #4a3500;
}
.lab-prep p:last-child {
  margin-bottom: 0;
}
.lab-prep-note {
  margin-top: 0.75rem;
  font-style: italic;
}
/* ----- Lab table ------------------------------------------- */
/* Data table inside .lab-prep. Clean, compact, no zebra stripe
   so it doesn't clash with the amber background.             */
.lab-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
  font-size: 0.875rem;
}
.lab-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background-color: #f5d87a;
  color: #4a3500;
  font-weight: 700;
  border-bottom: 2px solid #d4a017;
}
.lab-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #f0d090;
  color: #3d2e00;
}
.lab-table tr:last-child td {
  border-bottom: none;
}
/* ----- CER assessment block -------------------------------- */
/* Claim-Evidence-Reasoning framework. The question sits above
   a definition list of the three components. dl/dt/dd chosen
   so the structure is semantically correct (term + definition)
   and screen readers enumerate the parts clearly.            */
.cer-block {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background-color: #f8f6ff;
  border: 1px solid #d4ccf5;
  border-left: 4px solid #7c6fd4;
  border-radius: 0 6px 6px 0;
}
.cer-question {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.975rem;
  line-height: 1.5;
}
.cer-framework {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  align-items: baseline;
}
.cer-framework dt {
  font-weight: 700;
  color: #4a3b9e;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 0.1rem;
}
.cer-framework dd {
  margin: 0;
  font-size: 0.925rem;
  color: #2d2050;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .cer-framework {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .cer-framework dt {
    margin-top: 0.6rem;
  }
}
/* ----- Teacher tip ----------------------------------------- */
/* Inline callout for practical classroom advice. Green palette
   keeps it warm and approachable vs. the amber lab-prep box
   (which is also teacher-facing but more critical/procedural).
   Appears in Adaptations/Extensions sections.                 */
.teacher-tip {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem 0.9rem 1.25rem;
  background-color: #f0faf1;
  border: 1px solid #b2dfb4;
  border-left: 4px solid #39b44a;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
}
.teacher-tip p {
  margin: 0;
  line-height: 1.6;
  color: #1a3a1c;
}
.teacher-tip strong {
  color: #0f5c18;
}
/* ----- Sentence frame -------------------------------------- */
/* Scaffolded writing prompt with fill-in-the-blank slots.
   Appears in Lesson 9's Constructing a Claim section.
   Distinct from .lesson-quote (student work product, not a
   pull quote) and .definition-box (interactive, not static).  */
.sentence-frame {
  margin: 1.25rem 0;
  padding: 1.1rem 1.5rem;
  background-color: #f5f0ff;
  border: 1px solid #d4c5f5;
  border-left: 4px solid #7c6fd4;
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  line-height: 1.8;
}
.sentence-frame p {
  margin: 0;
}
.frame-blank {
  display: inline-block;
  min-width: 8rem;
  border-bottom: 2px solid #7c6fd4;
  color: #4a3b9e;
  font-style: italic;
  font-size: 0.875rem;
  vertical-align: bottom;
  padding: 0 0.25rem;
}
/* ----- Action categories list ------------------------------ */
/* Used in Lesson 11 Activity 1 for the four action types.
   Each item has a bold category name and an italic example
   on a second line. Styled as cards so they read as distinct
   options rather than a flat list.                           */
.action-categories {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.action-categories li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1.1rem !important;
  background-color: #f4fbf4;
  border: 1px solid #b2dfb4;
  border-left: 4px solid #39b44a;
  border-radius: 0 6px 6px 0;
}
.action-categories li::marker {
  content: none;
}
.action-categories li span {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-navy-500, #003351);
  line-height: 1.4;
}
/* =============================================================
   SALTY STREAMS THEME OVERRIDES
   Scope: .interior-page--salty-streams
   Add this block to main.css after the existing lesson-aside
   and accordion styles.

   Logo colors:
     Dark blue:  #3d6ca2  (primary — top-left field)
     Light blue: #60a2d4  (accent — bottom-right field)
     Both pulled directly from the Salty Streams logo.

   Strategy: override brand-colored elements only. Global nav,
   footer, and shared components are untouched.
============================================================= */
/* ----- Page title ------------------------------------------ */
.interior-page--salty-streams .page-title {
  color: #3d6ca2;
  padding-right: 125px;
  margin-top: 0;
}
/* ----- Section headings (h2, h3) --------------------------- */
.interior-page--salty-streams h2, .interior-page--salty-streams h3 {
  color: #3d6ca2;
}
/* ----- Lesson aside ---------------------------------------- */
/* Swap green background for Salty Streams light blue.
   Text contrast checked: navy on #cce0f0 passes AA.          */
.interior-page--salty-streams .lesson-aside {
  background-color: #ddeef8;
}
/* ----- Aside action buttons -------------------------------- */
/* Closed state: dark logo blue. Hover: lighter logo blue.
   Keeps global .btn-blue untouched everywhere else.          */
.interior-page--salty-streams .lesson-aside-actions .btn-blue {
  background-color: #3d6ca2;
  border-color: #355f8e;
  color: #fff!important;
}
.interior-page--salty-streams .lesson-aside-actions .btn-blue:hover, .interior-page--salty-streams .lesson-aside-actions .btn-blue:focus-visible {
	background-color: #60a2d4;
	border: 2px solid #5490be !important;
}
/* ----- Accordion trigger ----------------------------------- */
/* Closed: light blue tint matching the logo's light field.
   Open: dark logo blue (replaces the existing navy #00456e). */
.interior-page--salty-streams .sw-accordion .accordion-trigger {
  background-color: #ddeef8;
  color: #1e3d5c;
}
.interior-page--salty-streams .sw-accordion .accordion-item.is-open .accordion-trigger {
  background-color: #3d6ca2;
  color: #ffffff;
}
/* ----- List item markers ----------------------------------- */
/* Green bullet markers → Salty Streams blue.                 */
.interior-page--salty-streams .interior-page li::marker, .interior-page--salty-streams li::marker {
  color: #60a2d4;
}
/* ----- In-text links --------------------------------------- */
.interior-page--salty-streams .interior-page a, .interior-page--salty-streams a, .interior-page--salty-streams .interior-page a strong, .interior-page--salty-streams a  strong {
  color: #3d6ca2!important;
  border-bottom-color: #3d6ca2!important;
}



.interior-page--salty-streams .interior-page a:hover, .interior-page--salty-streams .interior-page a:focus-visible, .interior-page--salty-streams a:hover, .interior-page--salty-streams a:focus-visible {
  color: #1e3d5c;
  border-bottom-color: #1e3d5c;
}
/* ----- STEELS standards badge ------------------------------ */
/* Already blue — shift to match logo palette exactly.        */
.interior-page--salty-streams .steels-standards {
  color: #3d6ca2;
  background-color: #ddeef8;
  border-color: #a8cde8;
}
/* ----- Definition box -------------------------------------- */
/* Teal left border → Salty Streams dark blue.                */
.interior-page--salty-streams .definition-box {
  background-color: #f0f7fc;
  border-color: #a8cde8;
  border-left-color: #3d6ca2;
}
.interior-page--salty-streams .definition-box p, .interior-page--salty-streams .definition-box strong {
  color: #1e3d5c;
}
/* ----- Lesson quote ---------------------------------------- */
/* Green left border → Salty Streams dark blue.               */
.interior-page--salty-streams blockquote.lesson-quote {
  border-left-color: #3d6ca2;
  background-color: #f0f7fc;
  color: #1e3d5c;
}
.interior-page--salty-streams blockquote.lesson-quote cite {
  color: #3d6ca2;
}
/* ----- Driving question ------------------------------------ */
.interior-page--salty-streams .driving-question {
  background-color: #f0f7fc;
  border-left-color: #60a2d4;
}
/* ----- Action categories ----------------------------------- */
.interior-page--salty-streams .action-categories li {
  background-color: #f0f7fc;
  border-color: #a8cde8;
  border-left-color: #3d6ca2;
}
/* ----- Sentence frame -------------------------------------- */
.interior-page--salty-streams .sentence-frame {
  background-color: #f0f7fc;
  border-color: #a8cde8;
  border-left-color: #3d6ca2;
}
.interior-page--salty-streams .frame-blank {
  border-bottom-color: #3d6ca2;
  color: #3d6ca2;
}
/* ----- Modal header & request button ----------------------- */
/* Kit request button in modal: green → Salty Streams blue.   */
.interior-page--salty-streams .btn-green, .interior-page--salty-streams .modal-body .btn-green {
  background-color: #3d6ca2;
  border-color: #355f8e;
}
.interior-page--salty-streams .btn-green:hover, .interior-page--salty-streams .btn-green:focus-visible {
  background-color: #60a2d4;
  border-color: #5490be;
}
/* ----- Modal trigger link (inline kit links) --------------- */
.interior-page--salty-streams .modal-trigger-link {
  color: #3d6ca2;
  border-bottom-color: #3d6ca2;
}
.interior-page--salty-streams .modal-trigger-link:hover, .interior-page--salty-streams .modal-trigger-link:focus-visible {
  color: #1e3d5c;
  border-bottom-color: #1e3d5c;
}
/* ----- HR divider ------------------------------------------ */
/* Gradient stays neutral — no change needed.                  */
/* =============================================================
   SALTY STREAMS LESSON PAGES
   Add these rules to main.css, after the existing lesson-aside
   block (around line 584).
============================================================= */
/* ----- Learning Objectives: STEELS standards tag ----------- */
/* Each <li> in .objectives-list gets the objective text on top
   and the STEELS badge tucked below it, clearly separated from
   the objective text so it reads as metadata, not body copy.  */
.objectives-list li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.steels-standards {
  display: inline-block;
  font-size: 0.775rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #00456e;
  background-color: #EBF7FF;
  border: 1px solid #b8dff5;
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  /* Keeps the badge from stretching full width */
  align-self: flex-start;
}
/* ----- Lesson quote / blockquote --------------------------- */
/* Used for the anchoring phenomenon statement in Activity 1.
   Named .lesson-quote so it's specific and doesn't collide
   with any generic blockquote reset you may add later.        */
blockquote.lesson-quote {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem 1.25rem 1.75rem;
  border-left: 4px solid var(--brand-primary, #39b44a);
  background-color: #f4fbf4;
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #1a3a1a;
  font-style: italic;
}
blockquote.lesson-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.825rem;
  font-style: normal;
  font-weight: 600;
  color: var(--color-navy-500, #003351);
  letter-spacing: 0.02em;
}
/* ----- Materials: sub-heading before a <ul> ---------------- */
/* The pattern in Salty Streams is:
     <p><strong>Hintz et al. (2022) Data Figure Sets</strong> – description</p>
     <ul>…</ul>
   The strong paragraph acts as a visual sub-heading. Adding a
   small top gap when a <p> ending in <strong> precedes a <ul>
   isn't reliable cross-browser, so instead we give the
   .materials-subhead class to those <p> tags in the markup.   */
.materials-subhead {
  margin-top: 1.5rem;
  margin-bottom: 0.35rem; /* tighten gap to the <ul> below */
}
/* Tighten the gap between a plain <p> label and its <ul> when
   the <p> contains only a <strong> (the "Activity 1:" pattern).
   This targets paragraphs that immediately precede a <ul>
   inside .interior-page — works in all modern browsers.       */
.interior-page p:has(> strong:only-child) + ul, .interior-page p:has(> strong) + ul {
  margin-top: 0.25rem;
}
/* ----- Definition box -------------------------------------- */
/* Used for key vocabulary introduced in the overview, e.g.
   the watershed definition in Lesson 2. Teal/navy palette to
   distinguish it from the blue .alert-info callout.          */
.definition-box {
  margin: 1.75rem 0;
  padding: 1.1rem 1.5rem;
  background-color: #f0fbfc;
  border: 1px solid #b0e4ec;
  border-left: 4px solid var(--color-teal-500, #0091b9);
  border-radius: 0 6px 6px 0;
}
.definition-box p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #0d3d47;
}
.definition-box strong {
  color: #0d3d47;
}
/* ----- Driving question ------------------------------------ */
/* Bold label + italic question, sits at the top of an
   activity accordion panel. Subtle tint, no heavy border —
   it should feel like a prompt, not an alert.                */
.driving-question {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
  background-color: #fafdf5;
  border-left: 3px solid var(--brand-primary, #39b44a);
  border-radius: 0 4px 4px 0;
  font-size: 0.95rem;
}
/* ----- Assessment questions list -------------------------- */
/* Open-ended questions with a bold stem and an italic prompt
   on a second line. Using a list so screen readers get the
   proper enumeration, but styled to read as question blocks. */
.assessment-questions {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}
.assessment-questions li {
  padding: 1.1rem 1.25rem !important;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.assessment-questions li p {
  margin: 0.4rem 0 0;
}
.assessment-questions li::marker {
  content: none;
}
/* ----- No-kit lesson aside --------------------------------- */
/* When a lesson has no physical kit (Lesson 2), the aside
   has no image — just the action buttons. Remove the top
   padding gap that the image normally fills.                 */
.lesson-aside--no-kit {
  padding-top: 0;
}
/* ----- Lab prep box ---------------------------------------- */
/* Teacher-facing preparation block inside an accordion panel.
   Amber/yellow palette distinguishes it from student-facing
   callouts. Contains a data table and mixing instructions.    */
.lab-prep {
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  background-color: #fffbeb;
  border: 1px solid #f5d87a;
  border-left: 4px solid #d4a017;
  border-radius: 0 6px 6px 0;
}
.lab-prep h4 {
  margin-top: 0 !important;
  margin-bottom: 0.75rem;
  color: #7a4f00;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lab-prep p {
  margin-bottom: 0.75rem;
  font-size: 0.925rem;
  color: #4a3500;
}
.lab-prep p:last-child {
  margin-bottom: 0;
}
.lab-prep-note {
  margin-top: 0.75rem;
  font-style: italic;
}
/* ----- Lab table ------------------------------------------- */
/* Data table inside .lab-prep. Clean, compact, no zebra stripe
   so it doesn't clash with the amber background.             */
.lab-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
  font-size: 0.875rem;
}
.lab-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background-color: #f5d87a;
  color: #4a3500;
  font-weight: 700;
  border-bottom: 2px solid #d4a017;
}
.lab-table td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid #f0d090;
  color: #3d2e00;
}
.lab-table tr:last-child td {
  border-bottom: none;
}
/* ----- CER assessment block -------------------------------- */
/* Claim-Evidence-Reasoning framework. The question sits above
   a definition list of the three components. dl/dt/dd chosen
   so the structure is semantically correct (term + definition)
   and screen readers enumerate the parts clearly.            */
.cer-block {
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background-color: #f8f6ff;
  border: 1px solid #d4ccf5;
  border-left: 4px solid #7c6fd4;
  border-radius: 0 6px 6px 0;
}
.cer-question {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 0.975rem;
  line-height: 1.5;
}
.cer-framework {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
  align-items: baseline;
}
.cer-framework dt {
  font-weight: 700;
  color: #4a3b9e;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-top: 0.1rem;
}
.cer-framework dd {
  margin: 0;
  font-size: 0.925rem;
  color: #2d2050;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .cer-framework {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .cer-framework dt {
    margin-top: 0.6rem;
  }
}
/* ----- Teacher tip ----------------------------------------- */
/* Inline callout for practical classroom advice. Green palette
   keeps it warm and approachable vs. the amber lab-prep box
   (which is also teacher-facing but more critical/procedural).
   Appears in Adaptations/Extensions sections.                 */
.teacher-tip {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem 0.9rem 1.25rem;
  background-color: #f0faf1;
  border: 1px solid #b2dfb4;
  border-left: 4px solid #39b44a;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
}
.teacher-tip p {
  margin: 0;
  line-height: 1.6;
  color: #1a3a1c;
}
.teacher-tip strong {
  color: #0f5c18;
}
/* ----- Sentence frame -------------------------------------- */
/* Scaffolded writing prompt with fill-in-the-blank slots.
   Appears in Lesson 9's Constructing a Claim section.
   Distinct from .lesson-quote (student work product, not a
   pull quote) and .definition-box (interactive, not static).  */
.sentence-frame {
  margin: 1.25rem 0;
  padding: 1.1rem 1.5rem;
  background-color: #f5f0ff;
  border: 1px solid #d4c5f5;
  border-left: 4px solid #7c6fd4;
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  line-height: 1.8;
}
.sentence-frame p {
  margin: 0;
}
.frame-blank {
  display: inline-block;
  min-width: 8rem;
  border-bottom: 2px solid #7c6fd4;
  color: #4a3b9e;
  font-style: italic;
  font-size: 0.875rem;
  vertical-align: bottom;
  padding: 0 0.25rem;
}
/* ----- Action categories list ------------------------------ */
/* Used in Lesson 11 Activity 1 for the four action types.
   Each item has a bold category name and an italic example
   on a second line. Styled as cards so they read as distinct
   options rather than a flat list.                           */
.action-categories {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.action-categories li {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.9rem 1.1rem !important;
  background-color: #f4fbf4;
  border: 1px solid #b2dfb4;
  border-left: 4px solid #39b44a;
  border-radius: 0 6px 6px 0;
}
.action-categories li::marker {
  content: none;
}
.action-categories li span {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-navy-500, #003351);
  line-height: 1.4;
}
/* ----- Kit CTA block --------------------------------------- */
/* Used on the Salty Streams landing page. Sits between the
   teacher notes and the lessons grid. Two-column on wider
   screens: text left, button right. Stacks on mobile.        */
.kit-cta {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0;
  padding: 1.5rem 1.75rem;
  /*background-color: #ddeef8;*/
  border: 1px solid #a8cde8;
  border-left: 4px solid #3d6ca2;
  border-radius: 0 8px 8px 0;
}
.kit-cta-text {
  flex: 1;
}
.kit-cta-text p {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: #1e3d5c;
}
.kit-cta-actions {
  flex-shrink: 0;
}
@media (max-width: 576px) {
  .kit-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
.interior-page--salty-streams-lessons::before {
	content: '';
	position: absolute;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 125px;
	background-image: url('/img/salty-streams-watermark.jpg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	opacity: 0.2;
	pointer-events: none;
	z-index: 0;
}
.interior-page--salty-streams {
  position: relative; /* needed for the pseudo-element */
}
.interior-page--shared-waters-lessons::before {
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 150px;
  background-image: url('/img/shared-waters-watermark.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 768px) {
  .interior-page--shared-waters-lessons::before {
    width: 150px;
    height: 150px;
    background-position: top right;
  }
  .interior-page--salty-streams-lessons::before {
  width: 125px;
  height: 125px;
  background-position: top right;
}
}
.interior-page--shared-waters-lessons::before {
	right: 40px;
}
.interior-page--shared-waters-lessons {
  position: relative; /* needed for the pseudo-element */
}