/* ============================================================
   site.css  ·  the shared shell of gratefuloyster.com
   ------------------------------------------------------------
   Lifted Sep 27, 2026, from index.html, verbatim, so the header
   is ONE thing across index, about, faq and the blog (the About
   brief: "the shared-stylesheet lift becomes necessary, not
   optional"). Values here are the homepage's own; every page
   that had its own numbers keeps them as page-local overrides
   AFTER this sheet, so nothing re-styles.

   Load order on every page:  <link site.css>  then  <style>.
   ============================================================ */


/* ---- the rotating blurred-photo background (homepage values) ---- */
.bg-photos { position:fixed; inset:-60px; z-index:0; }
.bg-photo-img { position:absolute; inset:-60px; width:calc(100% + 120px); height:calc(100% + 120px);
  object-fit:cover; filter:blur(35px) saturate(1.3) brightness(0.8); opacity:0; transition:opacity 1.5s ease; transform:scale(1.05); }
.bg-photo-img.active { opacity:1; }
.grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px; }
.vignette { position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.4) 100%); }


/* ---- THE HEADER, RULED Sep 4 (LOG IN · OYSTER · JOIN) ----
   position:relative is the default here so faq, about and the
   blog sit in flow; the homepage overrides it to absolute so
   the hero runs under it. Don't change the type: 20px / 0.3em
   is the header's voice. */
nav { display:flex; align-items:center; justify-content:space-between; padding:30px 44px; position:relative; z-index:20; }
nav .mark { font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:20px; letter-spacing:0.3em; color:#fff; }
nav .link { font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:20px; letter-spacing:0.3em; color:#fff; cursor:pointer; transition:opacity .3s; }
nav .link:hover { opacity:0.75; }

/* Mobile header: below ~520px the two 20px/0.3em items outgrow the row
   (measured: link wraps + gap hits 0 at 480px). Scale type continuously
   with the viewport and forbid wrapping — no per-width magic numbers.
   Desktop (>560px) is untouched. */
@media (max-width: 560px) {
  nav { padding:24px clamp(16px, 5vw, 28px); gap:18px; }
  nav .mark, nav .link { font-size:clamp(11px, 3.6vw, 15px); letter-spacing:0.22em; }
  nav .link { white-space:nowrap; }
}


@media (prefers-reduced-motion: reduce) {
  nav .link { transition:none; }
}
  nav .oy-item, nav .link { transition:none; }
}