/* ==========================================================================
   ZEN W/ JEN — PAGE CHROME
   Shared header / nav / footer / section scaffolding for full-page concepts.
   Concept-specific layout lives in each page's own <style>.
   ========================================================================== */

/* Layout containers */
.container { max-width: var(--content-width); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--content-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-space-m); }
.section--alt   { background-color: var(--bg-light); }
.section--ocean { background-color: var(--secondary-ultra-light); }
.section--sun   { background-color: var(--tertiary-ultra-light); }
.section--dark  { background-color: var(--bg-ultra-dark); }
.section--dark :is(h1,h2,h3,h4,p,span) { color: var(--bg-light); }

/* Header / nav */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: color-mix(in oklab, var(--base) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--border-color) 70%, transparent);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-s); }
.nav__brand { font-family: var(--script-font-family); font-size: var(--text-xxl); font-weight: 700; color: var(--heading-color); text-decoration: none; line-height: 1; }
.nav__links { display: flex; align-items: center; gap: var(--space-m); list-style: none; margin: 0; padding: 0; }
.nav__links a { font-family: var(--text-font-family); font-size: var(--text-s); font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: 0.01em; }
.nav__links a:hover { color: var(--accent-dark); }
@media (max-width: 48rem) { .nav__links li:not(:last-child) { display: none; } }

/* Footer */
.site-footer { background-color: var(--bg-ultra-dark); color: var(--bg-light); padding-block: var(--section-space-s); }
.site-footer a { color: var(--primary-light); }
.site-footer .nav__brand { color: var(--bg-light); }
.footer-grid { display: grid; gap: var(--space-l); grid-template-columns: 1.5fr 1fr 1fr; align-items: start; }
.footer-grid h4 { color: var(--bg-light); font-size: var(--text-m); margin-bottom: var(--space-xs); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.footer-grid a { font-size: var(--text-s); text-decoration: none; }
.footer-bottom { margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid color-mix(in oklab, var(--bg-light) 20%, transparent); font-size: var(--text-xs); color: color-mix(in oklab, var(--bg-light) 70%, transparent); }
@media (max-width: 48rem) { .footer-grid { grid-template-columns: 1fr; } }

/* CSS-only entrance: staggered fade-up on load */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(1.25rem); animation: reveal 0.7s var(--transition-timing) forwards; }
  .reveal:nth-child(2) { animation-delay: 0.08s; }
  .reveal:nth-child(3) { animation-delay: 0.16s; }
  .reveal:nth-child(4) { animation-delay: 0.24s; }
  .reveal:nth-child(5) { animation-delay: 0.32s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* Scrapbook decor */
.tape {
  display: inline-block; padding: 0.3rem 1.4rem; rotate: -3deg;
  background: color-mix(in oklab, var(--tertiary) 78%, transparent);
  font-family: var(--script-font-family); font-size: var(--text-l); color: var(--heading-color);
  box-shadow: var(--shadow-s);
}
.note { font-family: var(--script-font-family); color: var(--secondary-dark); font-size: var(--text-xl); line-height: 1.1; }
.star { color: var(--tertiary-dark); }