/* ============================================================
   Creekside — app glue (shared by every page)
   Static-implementation helpers that aren't part of the verbatim
   design CSS: the photo/plate layering that replaces the prototype's
   React <Photo> component, and the mobile nav-toggle base state.
   Loaded last. NOTE: named .cimg/.cplate (not .ph) on purpose —
   the design uses .ph as a photo *container* class on subpages.
   ============================================================ */

/* Unsplash <img> (.cimg) layered over its SVG plate fallback (.cplate),
   both absolutely filling a positioned photo box. If the image 404s,
   its inline onerror hides it and the plate shows through. */
.cimg, .cplate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.cimg-tag {
  position: absolute; left: 14px; bottom: 10px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(250, 246, 236, 0.85); letter-spacing: 0.04em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Stamp buttons keep dark ink. site.css `.cks-site a { color: inherit }`
   (0,1,1) otherwise out-ranks `.btn-stamp { color }` (0,1,0), making
   anchor stamp buttons render cream-on-cream. This wins it back. */
.cks-site a.btn-stamp { color: var(--stone-900); }

/* Hero lede: the light `.v3 .hero-meta-row .lead` colour is set on the DIV,
   but base `p { color: var(--fg) }` (dark) overrides it on the inner <p>,
   rendering it near-black on the dark hero. Inherit the .lead colour instead. */
.v3 .hero-meta-row .lead p { color: inherit; }

/* Footer social icons */
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pine-600); color: var(--pine-200);
  transition: color 120ms, border-color 120ms, background 120ms;
}
.footer-social a:hover { color: var(--cream); border-color: var(--rust-500); background: var(--rust-600); }
.footer-social .ico { width: 18px; height: 18px; }
.v3 .footer-social a { border-color: var(--bark-700); color: var(--bark-200); }
.v3 .footer-social a:hover { color: var(--cream); border-color: var(--rust-500); background: var(--rust-600); }

/* Mobile nav toggle (hamburger). Hidden on desktop; the .topbar-menu
   wrapper is display:contents here so brand / nav / actions lay out
   exactly as the original three-item topbar. The dropdown behavior
   at <=680px lives in responsive.css (scoped under .topbar so it wins). */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; color: var(--cream); cursor: pointer;
}
.nav-toggle .ico { width: 26px; height: 26px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
.topbar-menu { display: contents; }