/* ============================================================
   Pocket Notes — shared MOBILE experience layer
   Loaded on every page. Desktop is left untouched: every block
   here is gated to mobile (<=768px) or to coarse/touch pointers,
   except the harmless cross-fade page transition.
   All new classes are namespaced `pn-` to avoid collisions.
   ============================================================ */

/* --- Signature: cross-fade page transitions (progressive; ignored where unsupported) --- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ============================================================
   1. Tactile grain — the brand's paper texture, restored cheaply
   (was display:none on mobile). Static tile, GPU-tiled, no SVG filter.
   ============================================================ */
.pn-grain{position:fixed;inset:0;pointer-events:none;z-index:9998;display:none;
  background:url(/assets/images/grain.png) repeat;background-size:128px 128px;
  opacity:.05;mix-blend-mode:multiply}
@media (max-width:768px){.pn-grain{display:block}}

/* ============================================================
   2. Reading progress (essays, mobile) — "where am I in this read"
   ============================================================ */
.pn-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:10001;pointer-events:none;
  background:var(--mustard,#F5C13D);transition:width .08s linear;display:none}
@media (max-width:768px){.pn-progress{display:block}}

/* ============================================================
   3. ONE nav — rework the top brand pill for mobile
   - auto-hide on scroll-down / reveal on scroll-up (recede while reading)
   - bigger hamburger tap target; force it visible (repairs old essays)
   ============================================================ */
@media (max-width:768px){
  /* Normalize the bar to the canonical dark pill on EVERY page, so the
     3 older-template essays (cream bar, invisible hamburger) match the
     rest and the menu trigger is always visible + tappable. New pages
     already use these values, so they're unaffected. */
  nav{position:fixed !important;top:0.75rem !important;left:0.75rem !important;right:0.75rem !important;
      bottom:auto !important;z-index:200;display:flex !important;align-items:center !important;
      justify-content:space-between !important;gap:.5rem;
      background:var(--ink,#1A1612) !important;color:var(--cream,#FAF3E3) !important;
      border:none !important;border-radius:999px !important;padding:0.6rem 0.7rem 0.6rem 1.1rem !important;
      transition:transform .3s var(--ease,cubic-bezier(.16,1,.3,1))}
  nav.pn-nav-hidden{transform:translateY(-135%)}
  .nav-logo{color:var(--cream,#FAF3E3) !important}
  .nav-links{display:none !important}
  .nav-cta{display:none !important}
  .nav-hamburger{display:flex !important;flex-direction:column;gap:5px;background:none !important;border:none;
    min-width:44px;min-height:44px;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
  .nav-hamburger span{display:block !important;width:22px;height:2px;border-radius:2px;
    background:var(--cream,#FAF3E3) !important;transition:transform .35s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .25s}
  .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-hamburger.open span:nth-child(2){opacity:0}
  .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- Normalize the full-screen mobile menu on EVERY page ----
   Older essays lack these rules, so their menu <div> leaked as raw
   links at the top. This (loaded after each page's inline <style>)
   forces a consistent, hidden-until-open overlay. */
.nav-mobile-menu{position:fixed;inset:0;z-index:205;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2.2rem;background:var(--ink,#1A1612);
  opacity:0;pointer-events:none;transition:opacity .3s ease}
.nav-mobile-menu.open{opacity:1;pointer-events:auto}
.nav-mobile-menu a{font-family:'Fraunces',serif;font-weight:900;
  font-size:clamp(2rem,8vw,3.2rem);color:var(--cream,#FAF3E3);text-decoration:none;
  text-transform:uppercase;letter-spacing:-.03em;line-height:1.05}
.nav-mobile-menu a:active{color:var(--mustard,#F5C13D)}

/* Redundant top "back" affordance — hide the in-article link on mobile
   (browser back + the menu cover it). Desktop keeps it. */
@media (max-width:768px){ .back-link{display:none !important} }

/* ============================================================
   4. Eyebrow polish + kill view-counter CLS (reserve the number's width)
   ============================================================ */
#viewCountNum{display:inline-block;min-width:4.6em;text-align:left}
@media (max-width:768px){
  .article-eyebrow{gap:.45rem .7rem !important;row-gap:.4rem !important}
}

/* ============================================================
   5. Tap-to-zoom lightbox for essay reference images (mobile/touch)
   ============================================================ */
@media (max-width:768px){.article-img img{cursor:zoom-in}}
.pn-lightbox{position:fixed;inset:0;z-index:10002;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(26,22,18,.93);opacity:0;pointer-events:none;transition:opacity .25s ease}
.pn-lightbox.show{opacity:1;pointer-events:auto}
.pn-lightbox img{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 14px 50px rgba(0,0,0,.5)}
.pn-lightbox .pn-lb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border:none;
  border-radius:50%;background:var(--cream,#FAF3E3);color:var(--ink,#1A1612);font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer}

/* ============================================================
   6. Touch ripple — the dot+ring cursor, reborn for fingers
   ============================================================ */
.pn-ripple{position:fixed;border-radius:50%;pointer-events:none;z-index:10003;
  transform:translate(-50%,-50%) scale(0);opacity:.85;
  background:radial-gradient(circle,rgba(245,193,61,.5) 0%,rgba(245,193,61,0) 68%)}
.pn-ripple.pn-go{animation:pn-rip .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes pn-rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ============================================================
   7. Scroll-reveal for essay structural beats (mobile only)
   Hidden ONLY when JS is active (html.pn-js); safety-revealed on a timer.
   ============================================================ */
@media (max-width:768px) and (prefers-reduced-motion:no-preference){
  html.pn-js .pn-reveal{opacity:0;transform:translateY(16px);
    transition:opacity .6s var(--ease,cubic-bezier(.16,1,.3,1)),transform .6s var(--ease,cubic-bezier(.16,1,.3,1))}
  html.pn-js .pn-reveal.pn-in{opacity:1;transform:none}
}