/* --- Riparian Stream Core Layout & Typography --- */
:root {
  --bg-color: #fcfaf2;     /* Warm goldilocks paper canvas */
  --text-color: #2e2d29;   /* High-readability charcoal body text */
  --muted-text: #b5b2a9;   /* Muted gray for inactive elements and arrows */
  --brass-gold: #c29b38;   /* Interactive accent color */
}

/* Base Viewport Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Georgia, Serif;
  line-height: 1.6;
  text-align: left;
  
  /* Mobile Fluid Container: scales seamlessly from small screens to desktop */
  width: 100%;
  max-width: 68ch; 
  margin: 0 auto;
  padding: 2rem 1.2rem;
}

/* --- Navigation & Fat-Finger Mobile Target System --- */
.garden-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  user-select: none;
}

.arrow-target {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--muted-text);
  text-decoration: none;
  display: inline-block;
  
  /* Expands the hit target for easy mobile tapping without bloating the layout */
  padding: 0.8rem 1.5rem; 
  min-width: 48px;
  min-height: 48px;
  text-align: center;
  transition: color 0.2s ease;
}

.arrow-target:hover,
.arrow-target:active {
  color: var(--brass-gold);
}

.arrow-target.disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Clean Text Links & Interactive Underlines --- */
.content-prose p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.content-prose a,
.stream-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--muted-text);
  transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.content-prose a:hover,
.content-prose a:active,
.stream-list a:hover {
  color: var(--brass-gold);
  border-bottom-color: var(--brass-gold);
}

/* --- Mobile-Optimized Chronological Stream --- */
.stream-list {
  list-style: none;
  margin-top: 2rem;
}

.stream-item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 1.2rem;
}

.item-meta {
  font-size: 0.9rem;
  color: var(--muted-text);
  width: 110px;
  flex-shrink: 0;
}

.item-tag {
  font-size: 0.8rem;
  color: var(--muted-text);
  margin-left: 0.8rem;
}

/* Responsive Shift for Small Screens */
@media (max-width: 480px) {
  body {
    padding: 1rem 0.8rem;
  }
  
  .stream-item {
    flex-direction: column; /* Stacks text vertically on mobile to prevent squishing */
    margin-bottom: 1.5rem;
  }
  
  .item-meta {
    width: auto;
    margin-bottom: 0.2rem;
  }
  
  .item-tag {
    margin-left: 0;
    margin-top: 0.2rem;
    display: inline-block;
  }
}