/* ============================================================
   style.css — CSEPP Stopgap Static Site
   Center for Social Ecology and Public Policy
   ============================================================ */

/* ============================================================
   Custom Properties
   ============================================================ */
:root {
  /* --- Color palette: earthy, ecological, professional --- */
  --forest:      #1b4332;   /* deep forest green — primary brand */
  --forest-dark: #0f2d1e;   /* footer depth */
  --sage:        #40916c;   /* mid sage — accents, borders */
  --water:       #2d6a8a;   /* river blue — list markers, links */
  --earth:       #7d5a2e;   /* warm brown — diagram captions */
  --sand:        #f0e9de;   /* warm alternate section background */
  --cream:       #faf8f4;   /* primary page background */
  --border:      #d0c4b2;   /* subtle dividers on light backgrounds */
  --text:        #1c1c1c;   /* main body text */
  --text-mid:    #4a4a4a;   /* secondary/muted text */
  --text-light:  #fdf8f2;   /* text on dark (forest) backgrounds */

  /* --- Typography --- */
  --font-serif: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                Helvetica, Arial, sans-serif;

  /* --- Layout --- */
  --max-width: 1100px;
  --gap:       2rem;
  --radius:    6px;
  --shadow:    0 2px 14px rgba(0, 0, 0, 0.10);
  --shadow-img:0 4px 20px rgba(0, 0, 0, 0.18);
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* Honor EXIF orientation in JPEG images */
  image-orientation: from-image;
}

body {
  font-family: var(--font-sans);
  background-color: var(--cream);
  color: var(--text);
  line-height: 1.7;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Honor EXIF rotation flags (spokane photos are 300dpi with orientation tags) */
  image-orientation: from-image;
}

figure { margin: 0; }

figcaption {
  font-size: 0.82rem;
  color: var(--text-mid);
  text-align: center;
  margin-top: 0.6rem;
  font-style: italic;
  line-height: 1.4;
}

/* ============================================================
   Layout Container
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

/* ============================================================
   Section Wrapper
   ============================================================ */
.section {
  padding: 4rem 0;
}

.section--cream  { background-color: var(--cream); }
.section--sand   { background-color: var(--sand); }
.section--forest { background-color: var(--forest); }

/* ============================================================
   Section Titles
   ============================================================ */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: normal;
  color: var(--forest);
  margin-bottom: 2rem;
  padding-bottom: 0.7rem;
  border-bottom: 3px solid var(--sage);
}

.section-title--light {
  color: var(--text-light);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background-color: var(--forest);
  color: var(--text-light);
  padding: 3rem 0 2.5rem;
  text-align: center;
}

.site-header .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.seal {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.header-text h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: normal;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--text-light);
}

.tagline {
  font-size: 0.875rem;
  color: rgba(253, 248, 242, 0.65);
  margin-top: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   SPOKANE RIVER PROJECT
   ============================================================ */
.project-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.project-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-img);
  /* Both Spokane images are 640x480 (4:3) — lock the ratio so they match */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Anchor the crop to the TOP of the image.
     Default is 'center', which cuts equally from top and bottom.
     spokane1.jpeg has an EXIF upper-right rotation tag — after the browser
     corrects it, the image becomes portrait, making the center crop severe
     and slicing off the eagle head at the top. 'top' preserves the top
     subject and only discards excess from the bottom. */
  object-position: top;
  image-orientation: from-image;
}

.project-content {
  padding: 0 0.5rem;
}

.lead {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 1.75rem;
}

.questions-label {
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 0.6rem;
  font-size: 0.97rem;
}

.questions {
  list-style: none;
  margin-bottom: 1.75rem;
}

.questions li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.5rem;
  font-size: 0.97rem;
  color: var(--text-mid);
  border-bottom: 1px solid var(--border);
}

/* River-blue arrow marker — more ecological than a bullet */
.questions li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--water);
  font-size: 0.8rem;
}

.project-cta {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 1rem;
}

.project-team-note {
  font-size: 0.88rem;
  color: var(--text-mid);
  font-style: italic;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   COMMUNITY PHOTO BANNER
   ============================================================ */
.community-banner {
  background-color: var(--forest-dark);
  padding: 1.75rem 0;
}

.community-banner__inner {
  display: flex;
  justify-content: center;
}

.community-banner__inner figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.community-banner__inner img {
  border-radius: var(--radius);
  max-width: 580px;
  width: 100%;
  opacity: 0.88;
}

.community-banner__inner figcaption {
  color: rgba(253, 248, 242, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}

/* ============================================================
   SOCIAL ECOLOGY APPROACH
   ============================================================ */
.approach-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}

.approach-text p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 1.25rem;
}

.approach-text p:last-child {
  margin-bottom: 0;
}

.approach-text strong {
  color: var(--forest);
}

.approach-diagram img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-img);
  border: 1px solid var(--border);
}

.approach-diagram figcaption {
  color: var(--earth);
}

/* ============================================================
   CONCEPTUAL FRAMEWORKS GRID
   ============================================================ */
.frameworks-intro {
  color: rgba(253, 248, 242, 0.72);
  margin-bottom: 2rem;
  font-size: 0.97rem;
  max-width: 65ch;
}

.frameworks-grid {
  display: grid;
  /* 3 columns down to 2 gracefully; auto-fit handles the rest */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.framework-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.framework-card:hover {
  background-color: rgba(255, 255, 255, 0.10);
  transform: translateY(-2px);
}

.framework-card img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  object-position: center;
  border-radius: 3px;
}

.framework-card figcaption {
  color: rgba(253, 248, 242, 0.68);
  margin-top: 0.75rem;
  font-size: 0.8rem;
}

/* Full-width card — for wide landscape images (culturalDescriptors) */
.framework-card--full {
  grid-column: 1 / -1;
}

.framework-card--full img {
  max-height: 460px;
}

/* The western states portrait map — constrain width so it doesn't dominate */
.img--portrait-constrained {
  max-width: 480px;
  max-height: 620px;
  margin: 0 auto;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--forest-dark);
  color: var(--text-light);
  padding: 3rem 0;
  text-align: center;
}

.footer-seal {
  width: 72px;
  margin: 0 auto 1rem;
  opacity: 0.6;
  filter: grayscale(20%);
}

.footer-org {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: rgba(253, 248, 242, 0.88);
  margin-bottom: 0.4rem;
}

.footer-address {
  font-style: normal;
  font-size: 0.88rem;
  color: rgba(253, 248, 242, 0.72);
  margin-bottom: 0.3rem;
}

.footer-501c3 {
  font-size: 0.78rem;
  color: rgba(253, 248, 242, 0.48);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.footer-note {
  font-size: 0.82rem;
  color: rgba(253, 248, 242, 0.45);
  margin-bottom: 0.4rem;
}

.footer-copy {
  font-size: 0.75rem;
  color: rgba(253, 248, 242, 0.28);
  margin-top: 1.25rem;
}

/* ============================================================
   TEAM — bio cards grid
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

.bio-card {
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bio-photo-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--border);
}

.bio-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  image-orientation: from-image;
  display: block;
}

.bio-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.bio-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: normal;
  color: var(--forest);
  margin: 0;
}

.bio-title {
  font-size: 0.82rem;
  color: var(--sage);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.bio-text {
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 0;
  flex: 1;
}

.bio-contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.bio-contact a {
  color: var(--water);
  text-decoration: none;
  font-size: 0.88rem;
  word-break: break-all;
}

.bio-contact a:hover {
  text-decoration: underline;
}

/* ============================================================
   FRAMEWORK FIGURES — "view full size" links
   ============================================================ */
.fig-link {
  display: block;
  border-radius: 3px;
  overflow: hidden;
  transition: opacity 0.15s ease;
}

.fig-link:hover {
  opacity: 0.88;
}

.framework-card figcaption a {
  color: rgba(253, 248, 242, 0.55);
  font-style: normal;
  text-decoration: underline;
  font-size: 0.75rem;
}

.framework-card figcaption a:hover {
  color: rgba(253, 248, 242, 0.9);
}

/* ============================================================
   FIGURES PAGE — layout and navigation
   ============================================================ */
.figures-page {
  background-color: var(--cream);
}

/* --- Page header --- */
.figures-header {
  background-color: var(--forest);
  color: var(--text-light);
  padding: 2rem 0 1.75rem;
}

.figures-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.figures-back-link {
  align-self: flex-start;
  color: rgba(253, 248, 242, 0.65);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.figures-back-link:hover {
  color: var(--text-light);
}

.figures-header__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.figures-seal {
  width: 60px;
  opacity: 0.75;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

.figures-header h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: normal;
  color: var(--text-light);
  margin: 0;
}

.figures-subtitle {
  font-size: 0.8rem;
  color: rgba(253, 248, 242, 0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
}

/* --- Jump-nav list --- */
.figures-nav {
  background-color: var(--sand);
  border-bottom: 2px solid var(--border);
  padding: 1.25rem 0;
}

.figures-nav .container {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.figures-nav__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.figures-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  padding: 0;
  margin: 0;
}

.figures-nav__list a {
  color: var(--water);
  text-decoration: none;
  font-size: 0.85rem;
}

.figures-nav__list a:hover {
  text-decoration: underline;
}

/* --- Individual figure sections --- */
.figures-main {
  /* nothing special — sections handle their own padding */
}

.fig-section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--border);
}

.fig-section--alt {
  background-color: var(--sand);
}

.fig-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Prev / next nav bar above each figure */
.fig-nav-bar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fig-counter {
  font-size: 0.78rem;
  color: var(--text-mid);
  font-style: italic;
}

.fig-prev-next {
  display: flex;
  gap: 0.5rem;
}

.fig-nav-btn {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--sage);
  border-radius: var(--radius);
  color: var(--forest);
  text-decoration: none;
  font-size: 0.82rem;
  background-color: #fff;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.fig-nav-btn:hover {
  background-color: var(--sage);
  color: #fff;
}

.fig-nav-btn--index {
  border-color: var(--water);
  color: var(--water);
}

.fig-nav-btn--index:hover {
  background-color: var(--water);
  color: #fff;
}

/* The figure image block itself */
.fig-full {
  width: 100%;
  max-width: 900px;
  text-align: center;
}

.fig-full img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-img);
  border: 1px solid var(--border);
}

.fig-caption {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.6;
  text-align: center;
}

.fig-caption strong {
  color: var(--forest);
}

.fig-caption-detail {
  font-size: 0.85rem;
  color: var(--text-mid);
}

/* ============================================================
   RESPONSIVE — Tablet (≤ 860px)
   ============================================================ */
@media (max-width: 860px) {

  /* Project: stack photos above and below content */
  .project-grid {
    grid-template-columns: 1fr;
  }

  /* Keep visual order: photo / text / photo */
  .project-photo:first-child { order: 1; }
  .project-content           { order: 2; padding: 0; }
  .project-photo:last-child  { order: 3; }

  /* Approach: stack text then diagram */
  .approach-grid {
    grid-template-columns: 1fr;
  }

  /* Frameworks: 2 columns */
  .frameworks-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Team: 1 column — bio cards full width */
  .team-grid {
    grid-template-columns: 1fr;
  }

  .bio-card {
    flex-direction: row;
    align-items: flex-start;
  }

  /* Photo sits left at fixed width in landscape card layout */
  .bio-photo-wrap {
    width: 180px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
  }

  /* Figures page nav: wrap label onto its own line */
  .figures-nav .container {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (≤ 520px)
   ============================================================ */
@media (max-width: 520px) {

  .container {
    padding: 0 1rem;
  }

  .section {
    padding: 2.5rem 0;
  }

  /* Frameworks: single column */
  .frameworks-grid {
    grid-template-columns: 1fr;
  }

  .framework-card--full img {
    max-height: 260px;
  }

  /* Team: fully stacked — photo above text */
  .bio-card {
    flex-direction: column;
  }

  .bio-photo-wrap {
    width: 100%;
  }

  /* Figures page prev/next: smaller text */
  .fig-nav-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
  }
}