/* ============================================================
   layout.css — nav, content container, footer, section divider
   imports base.css tokens, never defines its own
   ============================================================ */


/* --- content container --- */
/* single centered column, all pages share this */
.content {
  max-width: var(--content-width);
  margin:    0 auto;
  padding:   var(--space-l) var(--padding-page) var(--space-xl);
  width:     100%;
}


/* --- nav --- */
/* frosted strip — sticks to top while content scrolls behind it */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding: 1.05rem var(--padding-page);

  /* --cream at 87% opacity so content bleeds through without being readable */
  background:          rgba(250, 247, 242, 0.87);
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-wordmark {
  font-style: italic;
  font-size:  0.93rem;
  color:      var(--ink);
  cursor:     pointer;
}

.nav-links {
  display:   flex;
  gap:       1.5rem;
  list-style: none;
}

.nav-links a {
  font-size:      0.7rem;
  color:          var(--muted);
  letter-spacing: 0.07em;
  cursor:         pointer;
  transition:     color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
}


/* --- footer --- */
/* ambient strip — phrase far left, year + clock far right */
.footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:    0.8rem var(--padding-page);
  border-top: 1px solid var(--border);
  margin-top: var(--space-l);
}

.footer-phrase {
  font-size:      0.64rem;
  color:          var(--faint);
  font-style:     italic;
  letter-spacing: 0.04em;
  /* duration must match the setTimeout delay in footer.js */
  transition: opacity 0.38s ease;
}

/* class toggled by footer.js during phrase rotation */
.footer-phrase.fading { opacity: 0; }

.footer-right {
  display:     flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-year {
  font-size:      0.64rem;
  color:          var(--faint);
  letter-spacing: 0.03em;
}


/* --- section divider --- */
/* the "everything" label above the index list */
.section-divider {
  display:     flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: var(--space-m);

  font-size:      0.66rem;
  color:          var(--muted);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  font-style:     italic;
}

/* ruled lines either side of the label */
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}


/* --- mobile breakpoint --- */
/* spreads content closer to screen edges on narrow viewports */
@media (max-width: 540px) {
  .nav {
    padding: 1.05rem var(--padding-page-mobile);
  }

  .content {
    padding-left:  var(--padding-page-mobile);
    padding-right: var(--padding-page-mobile);
  }

  .footer {
    padding-left:  var(--padding-page-mobile);
    padding-right: var(--padding-page-mobile);
  }
}